/* =====================================================================
   AURA — Bauteile
   Alles baut auf tokens.css auf. Hier steht kein einziger Farbwert und
   kein fester Abstand: ändert sich die Dichte oder das Erscheinungsbild,
   ändert sich diese Datei nicht.
   ===================================================================== */

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

html, body {
  height: 100%; margin: 0;
  background: var(--bg); color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
body { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); }
h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); letter-spacing: var(--h1-track); line-height: var(--h1-lead); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); letter-spacing: var(--h2-track); line-height: var(--h2-lead); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); letter-spacing: var(--h3-track); line-height: var(--h3-lead); }
h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); letter-spacing: var(--h4-track); line-height: var(--h4-lead); }
h5 { font-size: var(--h5-size); font-weight: var(--h5-weight); letter-spacing: var(--h5-track); line-height: var(--h5-lead); }
h6 { font-size: var(--h6-size); font-weight: var(--h6-weight); letter-spacing: var(--h6-track); line-height: var(--h6-lead); text-transform: uppercase; }

p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
::selection { background: var(--accent-soft); color: var(--accent-text); }

/* Der Rollbalken gehört zum Inhalt, nicht zum Fenster: schmal, farblos,
   und erst da, wenn die Maus in der Nähe ist. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--hairline-strong); border-radius: 99px;
  border: 4px solid transparent; background-clip: content-box;
  transition: background var(--t-base);
}
:hover::-webkit-scrollbar-thumb { background: var(--border-strong); background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Sinnbilder haben immer dieselbe Größe. Ohne diese Regel dehnt sich ein
   SVG ohne Maßangabe auf die volle Breite seines Behälters aus.
   Diagramme tragen die Klasse .chart und sind ausgenommen. */
.app svg, .modal svg, .menu svg, .toast svg, .empty svg, .palette svg {
  width: 16px; height: 16px; flex: none;
}
.app svg.chart, .modal svg.chart { width: 100%; height: auto; flex: initial; }
.empty svg { width: 38px; height: 38px; }
.qr svg { width: 188px; height: 188px; }
/* Das Zeichen der Marke bringt seine Maße selbst mit - es ist einmal
   30 Pixel gross und einmal 76, und beides ist Absicht. */
.app svg.brandmark, .modal svg.brandmark, svg.brandmark { width: auto; height: auto; }

/* =====================================================================
   Hilfsklassen
   ===================================================================== */
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num-features); }
.mono { font-family: var(--font-mono); font-size: .93em; letter-spacing: -.01em; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.strong { font-weight: var(--fw-semi); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.col { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; align-items: center; gap: var(--s5); }
.row.tight { gap: var(--s3); }
.wrap { flex-wrap: wrap; }
.hidden { display: none !important; }
.spacer { flex: 1 1 auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eyebrow {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-subtle);
}

/* =====================================================================
   Anmeldung
   ===================================================================== */
/* Anmeldebild: tief und ruhig. Die Farbe liegt in den Ecken, die Mitte
   bleibt dunkel — dadurch tritt die Karte hervor, statt in einem
   grünen Nebel zu schwimmen. */
.auth {
  position: fixed; inset: 0; overflow-y: auto;
  background:
    radial-gradient(1100px 700px at 10% -12%, rgba(47,125,79,.2), transparent 58%),
    radial-gradient(850px 620px at 92% 112%, rgba(176,138,62,.16), transparent 60%),
    linear-gradient(165deg, #070a09 0%, #0d1411 46%, #080b09 100%);
  z-index: 100;
}
/* Randabdunklung: das Licht fällt auf die Mitte, nicht auf den Rahmen. */
.auth::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 85% at 50% 45%, transparent 38%, rgba(0,0,0,.55) 100%);
}
.auth-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Feines Punktraster statt Streifen: es gibt der Fläche eine Textur,
   ohne eine Richtung vorzugeben. */
.auth-bg::before {
  content: ""; position: absolute; inset: -40%;
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 26px 26px;
  animation: drift 60s linear infinite;
}
/* Ein sehr weicher Lichtschein von oben — so wirkt die Fläche gewölbt
   statt wie eine bemalte Wand. */
.auth-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 70% at 50% -20%, rgba(255,255,255,.05), transparent 60%);
}
@keyframes drift { to { transform: translate3d(3%, 2%, 0); } }

/* Die Bühne liegt über der Randabdunklung — sonst läge der Schleier auch
   über der Karte. */
.auth-stage {
  position: relative; z-index: 1; min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s9) var(--s6);
}
.auth-orb { position: absolute; border-radius: 50%; filter: blur(95px); animation: float 22s ease-in-out infinite; }
.auth-orb.a { width: 520px; height: 520px; background: rgba(47,125,79,.17); top: -180px; left: -140px; }
.auth-orb.b { width: 420px; height: 420px; background: rgba(176,138,62,.13); bottom: -150px; right: -110px; animation-delay: -8s; }
.auth-orb.c { width: 320px; height: 320px; background: rgba(85,163,119,.1); top: 52%; right: 20%; animation-delay: -15s; }
@keyframes float {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(26px, -32px) scale(1.07); }
}

/* Die Karte trägt einen Rand, der oben in Gold und unten in Grün
   ausläuft: zwei Farbflächen übereinander, die innere beschnitten auf
   die Polsterkante, die äußere auf die Randkante. Ein gewöhnlicher
   einfarbiger Rand kann das nicht. */
.auth-card {
  position: relative; width: min(416px, calc(100vw - 40px));
  border: 1px solid transparent; border-radius: var(--r-2xl);
  background-image:
    linear-gradient(180deg, rgba(26,33,29,.82), rgba(18,24,21,.86)),
    linear-gradient(155deg, rgba(212,185,111,.55) 0%, rgba(255,255,255,.1) 38%, rgba(85,163,119,.42) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%);
  padding: var(--s10) var(--s9) var(--s9);
  box-shadow:
    0 40px 100px rgba(0,0,0,.6),
    0 8px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.09);
  color: #e8efea;
  animation: cardIn var(--t-slower) var(--e-out) both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.982); } }

/* Das Zeichen der Marke auf der Anmeldeseite. Es steigt beim Erfolg
   kurz an - die Bewegung ist die Quittung des Servers, nicht Zierrat. */
.auth-mark {
  display: grid; place-items: center; margin: 0 auto var(--s6);
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.5));
  transition: transform var(--t-slow) var(--e-spring);
}
/* =====================================================================
   Der Eintritt

   Die Anmeldung ist die einzige Stelle, an der ein Betriebssystem sich
   vorstellen darf. Danach hat es zu arbeiten und nicht zu glänzen.

   Der Ablauf ist eine Bewegung und keine Folge von Effekten: das
   Zeichen quittiert, die Karte fällt zurück, der Grund zieht auf den
   Betrachter zu - und man tritt durch das Zeichen hindurch, statt es
   verschwinden zu sehen.

   Zeitplan:
        0   Zeichen zuckt an
      140   Karteninhalt fällt zurück
      160   Der Name tritt hervor, die Sperrung dehnt sich
      260   Grund beschleunigt und zieht heran
      420   Durchtritt: das Zeichen wächst über den Bildschirm
      560   Licht, darunter wird die Oberfläche aufgebaut
   ===================================================================== */
.auth.unlocking { pointer-events: none; }

.auth.unlocking .auth-mark {
  animation: markRise 380ms var(--e-spring), markThrough 620ms var(--e-in) 420ms forwards;
  z-index: 3;
}
@keyframes markRise {
  40% { transform: scale(1.2) translateY(-6px); }
  100% { transform: scale(1) translateY(0); }
}
/* Der Durchtritt. Das Zeichen wächst über den Rand hinaus und wird
   dabei durchsichtig - der Blick geht hindurch, nicht daran vorbei. */
@keyframes markThrough {
  0%   { transform: scale(1); opacity: 1; filter: drop-shadow(0 8px 22px rgba(0,0,0,.5)); }
  55%  { opacity: .85; }
  100% { transform: scale(14); opacity: 0; filter: blur(6px); }
}

/* Der Karteninhalt fällt zurück, das Zeichen bleibt stehen: dadurch
   wirkt es, als träte man an ihm vorbei nach vorn. */
.auth.unlocking .auth-card { animation: cardOut 520ms var(--e-in) 140ms forwards; }
@keyframes cardOut {
  to { opacity: 0; transform: translateY(26px) scale(.94); filter: blur(3px); }
}
.auth.unlocking .auth-card > *:not(.auth-mark) {
  animation: fieldsDrop 300ms var(--e-in) 100ms forwards;
}
@keyframes fieldsDrop { to { opacity: 0; transform: translateY(10px); } }

/* Der Grund zieht heran - das ist die eigentliche Eintrittsbewegung.
   Das Punktraster beschleunigt gleichzeitig, damit der Zug eine
   Geschwindigkeit bekommt und nicht nur eine Größe. */
.auth.unlocking .auth-bg { animation: bgRush 1000ms var(--e-in) 260ms forwards; }
@keyframes bgRush {
  to { transform: scale(1.45); opacity: .25; }
}
.auth.unlocking .auth-bg::before { animation: driftFast 1.2s linear infinite; }
@keyframes driftFast { to { transform: translate3d(9%, 6%, 0) scale(1.1); } }
.auth.unlocking .auth-orb { animation: orbRush 900ms var(--e-in) 200ms forwards; }
@keyframes orbRush { to { transform: scale(2.2); opacity: 0; } }

/* Die Blende ganz zum Schluss.
 *
 * Sie hängt am Dokument und nicht an der Anmeldung: genau unter ihr
 * wird die Anmeldung abgeräumt und die Verwaltung aufgebaut. Läge sie
 * in der Anmeldung, verschwände sie mit ihr - und man sähe wieder zwei
 * Bilder statt einer Bewegung.
 */
.enter-flash {
  position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 9999;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.95), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand-from, #8b5cf6) 60%, transparent),
      color-mix(in srgb, var(--brand-to, #3b82f6) 60%, transparent));
  animation: flashIn 1000ms var(--e-in-out) 560ms forwards;
}
@keyframes flashIn {
  0%   { opacity: 0; }
  34%  { opacity: 1; }   /* Höhepunkt bei 900 ms - hier wird getauscht */
  100% { opacity: 0; }
}

/* Ein Wort beim Eintreten. Kein Ladetext - die Zeile steht schon fest,
   wenn sie erscheint, und sie erscheint nur, weil der Server ja gesagt
   hat. Die Sperrung dehnt sich, das liest sich wie ein Öffnen. */
.auth-enter {
  position: absolute; left: 0; right: 0; top: calc(50% + 96px);
  text-align: center; z-index: 3; opacity: 0;
  font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase;
  color: rgba(255,255,255,.86); letter-spacing: .3em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--brand-glow, #a78bfa) 80%, transparent);
}
/* Gemessen: mit 700 ms stand das Wort nur zwei Zehntel lang lesbar da.
   Es hält jetzt, bis die Blende es ohnehin überdeckt. */
.auth.unlocking .auth-enter { animation: enterWord 820ms var(--e-out) 160ms forwards; }
@keyframes enterWord {
  0%   { opacity: 0; letter-spacing: .1em; }
  26%  { opacity: 1; letter-spacing: .32em; }
  62%  { opacity: 1; letter-spacing: .44em; }
  100% { opacity: 0; letter-spacing: .62em; }
}

/* Die Oberfläche kommt nicht einfach an, sie kommt heran: unter der
   Blende zieht sie sich aus der Tiefe auf ihre Größe.

   overflow: hidden ist kein Schönheitsfehler-Verstecken, sondern nötig:
   die Vergrößerung auf 103,5 % ragt kurz über den rechten Rand, und der
   Browser blendet dafür eine Bildlaufleiste ein und gleich wieder aus.
   Gemessen - ohne diese Zeile springt das Bild am Ende des Eintritts. */
body.app-enter { overflow: hidden; }
body.app-enter .app { animation: appEnter 620ms var(--e-out) both; }
@keyframes appEnter {
  from { opacity: 0; transform: scale(1.035); filter: blur(4px); }
}
body.app-enter .sidebar { animation: sideEnter 560ms var(--e-out) 120ms both; }
@keyframes sideEnter { from { opacity: 0; transform: translateX(-14px); } }

/* Der Name im Verlauf der Marke: Violett nach Blau, mit einem hellen
   Kern in der Mitte, damit er auf dunklem Grund nicht absäuft. */
.auth-brand {
  text-align: center; font-size: var(--fs-lg); font-weight: var(--fw-bold);
  letter-spacing: .26em; text-transform: uppercase; margin-bottom: var(--s3);
  padding-left: .26em;
  background: linear-gradient(92deg, var(--brand-from, #8b5cf6) 0%, #e9e4ff 50%, var(--brand-to, #3b82f6) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-brandsub {
  text-align: center; font-size: 8.5px; font-weight: var(--fw-bold);
  letter-spacing: .2em; color: #8791a8; padding-left: .2em;
  /* Zweizeilig und in der vorgegebenen Schreibweise - keine Großschrift-Automatik. */
  white-space: pre-line; line-height: 1.6;
}
/* Ein Strich, der zu den Rändern hin ausblendet — er gliedert, ohne die
   Karte in zwei Hälften zu schneiden. */
.auth-rule {
  height: 1px; margin: var(--s8) 0 var(--s7);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
}
.auth-title {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-semi);
  text-align: center; letter-spacing: -.022em; color: #f0f5f2;
}
.auth-sub { text-align: center; color: #93a49a; font-size: var(--fs-sm); margin: var(--s3) 0 var(--s9); }

.auth .field { margin-bottom: var(--s6); }
.auth label {
  display: block; font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: .1em; color: #8fa198; margin-bottom: var(--s3); font-weight: var(--fw-semi);
}
.auth input {
  width: 100%; padding: 11px 13px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  color: #eef3f0;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.auth input::placeholder { color: #6f7f77; }
.auth input:focus {
  border-color: var(--green-400); background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px rgba(85,163,119,.2);
}
.auth input.totp {
  text-align: center; font-family: var(--font-mono); font-size: 22px;
  letter-spacing: .42em; padding-left: .42em;
}
.auth-btn {
  width: 100%; padding: 13px; margin-top: var(--s7); border: 0; border-radius: var(--r-lg);
  background: linear-gradient(135deg, #3f9a63, var(--green-600) 60%, var(--green-700));
  color: #fff; font-weight: var(--fw-semi); cursor: pointer; position: relative; overflow: hidden;
  letter-spacing: .012em;
  box-shadow: 0 6px 20px rgba(47,125,79,.35), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
/* Ein Lichtstreif wandert beim Überfahren über die Fläche. Eine einzige
   Bewegung, die sagt: hier kannst du drücken. */
.auth-btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform var(--t-slower) var(--e-in-out);
}
.auth-btn:hover:not(:disabled)::after { transform: translateX(100%); }
.auth-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(47,125,79,.48), inset 0 1px 0 rgba(255,255,255,.24);
}
.auth-btn:active:not(:disabled) { transform: translateY(0); }
.auth-btn:disabled { opacity: .6; cursor: default; }
.auth-btn .spin {
  width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.32);
  border-top-color: #fff; border-radius: 50%; display: inline-block;
  animation: spin .7s linear infinite; vertical-align: -3px; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.auth-error {
  margin-top: var(--s5); padding: 10px 12px; border-radius: var(--r-md);
  background: rgba(168,67,60,.16); border: 1px solid rgba(208,117,109,.34);
  color: #eab5b0; font-size: var(--fs-sm); animation: shake 420ms;
}
@keyframes shake {
  10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); } 40%, 60% { transform: translateX(3px); }
}
.auth-hint {
  margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.08);
  font-size: var(--fs-2xs); color: #7d8f85; line-height: var(--lh-relax);
}
.auth-hint code { font-family: var(--font-mono); color: var(--gold-300); }
.auth-lang { position: absolute; top: 18px; right: 18px; display: flex; gap: 4px; }
.auth-lang button {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: #9fb0a6; padding: 4px 9px; border-radius: var(--r-sm); font-size: var(--fs-2xs);
  cursor: pointer; transition: all var(--t-fast);
}
.auth-lang button[aria-pressed="true"] { background: var(--green-600); color: #fff; border-color: transparent; }

/* =====================================================================
   Gerüst
   ===================================================================== */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100vh; }
.app[data-collapsed="1"] { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* --- Seitenleiste -----------------------------------------------------
   Kein Kasten, sondern eine Schiene: dunkel, ruhig, mit einer Lichtquelle
   oben links. Der aktive Eintrag ist keine grüne Platte, sondern eine
   getönte Fläche mit leuchtender Kante — das trägt auch dann noch, wenn
   zwanzig Einträge untereinander stehen.
   --------------------------------------------------------------------- */
.sidebar {
  position: relative;
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(85,163,119,.1), transparent 70%),
    linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-deep) 100%);
  color: var(--sidebar-text);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 1px 0 0 var(--sidebar-edge), inset -1px 0 0 rgba(255,255,255,.03);
  z-index: 30;
}

/* Das Zeichen trägt die Marke - es darf Platz haben. Die Zeile wächst
   dafür über die Höhe der Kopfleiste hinaus; das ist gewollt, sie ist
   der Anker der Seitenleiste. */
.sidebar-brand {
  display: flex; align-items: center; gap: var(--s5); min-height: 68px;
  padding: var(--s5) var(--s6); flex: none;
  box-shadow: inset 0 -1px 0 var(--sidebar-line);
}
/* Das Zeichen: seltener, kurzer Glanz wie auf geschliffenem Stein, und auf
   Klick eine ruhige Umdrehung (Inhaber 17.09.2026). Nichts hüpft, nichts
   blinkt dauerhaft - alle 22 Sekunden ein Wimpernschlag. */
.brandglanz { position: relative; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brandglanz .brandmark { transition: transform 1.4s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.brandglanz.dreht .brandmark { transform: rotate(360deg); }
/* Der Glanz besteht aus zwei Teilen: ein Lichtstreifen, der einmal schräg über
   das Zeichen läuft, und ein Vierstrahl-Funke an der Kante. Zusammen wirkt es
   wie Licht auf geschliffenem Metall - kurz, hell, präzise. */
.brandglanz { overflow: visible; }
/* Der Schimmer läuft nicht über das Zeichen, sondern über die ganze Leiste:
   vom Zeichen nach rechts, dabei immer weicher, und verglimmt am Ende
   (Wunsch Inhaber 18.09.2026). */
.sidebar-brand { position: relative; overflow: hidden; }
.sidebar-brand::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    transparent 38%,
    rgba(255, 255, 255, .10) 45%,
    rgba(255, 246, 222, .30) 50%,
    rgba(255, 255, 255, .10) 55%,
    transparent 62%);
  background-size: 240% 100%; background-repeat: no-repeat; background-position: -70% 0;
  mix-blend-mode: screen; opacity: 0;
  animation: brandSchimmer 12s cubic-bezier(.3, .7, .2, 1) infinite;
}
.brandfunke {
  position: absolute; top: -1px; right: -1px; width: 16px; height: 16px; pointer-events: none;
  opacity: 0; animation: funke 12s ease-in-out infinite;
}
.brandfunke::before, .brandfunke::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: linear-gradient(currentColor, currentColor);
  color: #fff;
  filter: drop-shadow(0 0 5px var(--gold-200, #e5d3a3)) drop-shadow(0 0 10px var(--gold-400, #c2a253));
}
/* Vierstrahl: zwei gekreuzte Nadeln, die an den Enden auslaufen. */
.brandfunke::before { width: 100%; height: 1.6px; border-radius: 2px; clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); }
.brandfunke::after { width: 1.6px; height: 100%; border-radius: 2px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@keyframes brandSchimmer {
  0%, 68% { opacity: 0; background-position: -70% 0; }
  71% { opacity: .9; background-position: -30% 0; }
  80% { opacity: .75; background-position: 60% 0; }
  88% { opacity: .35; background-position: 130% 0; }   /* wird schwächer */
  94%, 100% { opacity: 0; background-position: 170% 0; } /* verglimmt rechts */
}
@keyframes funke {
  0%, 70% { opacity: 0; transform: scale(.3) rotate(0deg); }
  73% { opacity: 1; transform: scale(1.15) rotate(25deg); }
  77% { opacity: .25; transform: scale(.75) rotate(45deg); }
  80% { opacity: .95; transform: scale(1) rotate(60deg); }
  86%, 100% { opacity: 0; transform: scale(.3) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .brandfunke { animation: none; opacity: 0; }
  .brandglanz .brandmark { transition: none; }
}
/* Das Zeichen der Marke wird gezeichnet (siehe js/brand.js), nicht
   geladen. Hier bekommt es nur seinen Platz und den Neonschein - der
   liegt als Schlagschatten außen, nicht als Weichzeichner über dem
   Zeichen selbst, damit die Kante scharf bleibt. */
.brandmark {
  flex: none; display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45))
          drop-shadow(0 0 14px color-mix(in srgb, var(--brand-glow, #a78bfa) 55%, transparent));
}
.brandmark text { font-family: var(--font-display), system-ui, sans-serif; }
/* Das Zeichen ist ein Bild, kein Text: Das "A" darf sich nie markieren lassen
   (Inhaber 18.09.2026). */
.brandmark, .brandmark text, .brandglanz, .brandlockup .brandmark {
  user-select: none; -webkit-user-select: none; -moz-user-select: none;
}
.brandmark text { pointer-events: none; }

.brandlockup { display: flex; align-items: center; gap: var(--s5); min-width: 0; }
.brandtext b {
  display: block; font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: var(--fs-md); letter-spacing: .015em; line-height: 1.15;
}
.brandtext small {
  display: block; font-size: 8px; font-weight: var(--fw-bold);
  letter-spacing: .1em; white-space: pre-line; line-height: 1.45; margin-top: 3px;
}
.sidebar-name {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  color: var(--sidebar-strong); font-size: var(--fs-md);
  letter-spacing: .015em; min-width: 0; line-height: 1.15;
}
/* Der Zusatz steht in reinem Weiß: er ist Teil der Marke, nicht eine
   Fußnote dazu. Größe und Laufweite bleiben, damit die Zeile ruhig unter
   dem Namen sitzt. */
.sidebar-name small {
  display: block; font-size: 8px; font-weight: var(--fw-bold); color: #ffffff;
  letter-spacing: .1em; line-height: 1.45; margin-top: 3px;
  white-space: pre-line;
  text-shadow: 0 0 10px rgba(255,255,255,.25);
}

.sidebar-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: var(--s6) var(--s5); }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.09); background-clip: content-box; }
.nav-group { margin-bottom: var(--s6); }
.nav-group + .nav-group { margin-top: var(--s2); }
.nav-group-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--sidebar-muted); padding: 0 var(--s5) var(--s4); font-weight: var(--fw-bold);
}

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 0 var(--s5); height: calc(var(--row-h) + 2px); border-radius: 8px;
  color: var(--sidebar-text); cursor: pointer; user-select: none; position: relative;
  transition: background var(--t-fast), color var(--t-fast); white-space: nowrap;
  margin-bottom: 1px;
}
/* Leuchtende Kante am aktiven Eintrag. Sie wächst aus der Mitte — das
   macht den Wechsel sichtbar, ohne dass etwas springt. */
.nav-item::before {
  content: ""; position: absolute; left: -5px; top: 50%; width: 3px; height: 0;
  background: var(--sidebar-active); border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px 1px rgba(85,163,119,.6);
  transform: translateY(-50%); transition: height var(--t-base) var(--e-out);
}
.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-strong); text-decoration: none; }
.nav-item:hover svg { opacity: .95; }
.nav-item.active {
  background: var(--sidebar-sel-bg); color: var(--sidebar-strong); font-weight: var(--fw-medium);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-item.active::before { height: 17px; }
.nav-item.active svg { opacity: 1; color: #7fc79c; }
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .66; transition: opacity var(--t-fast), color var(--t-fast); }

.nav-badge {
  margin-left: auto; background: rgba(255,255,255,.1); color: var(--sidebar-strong);
  font-size: 9.5px; font-weight: var(--fw-bold); padding: 0 6px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); min-width: 19px;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.nav-item.active .nav-badge { background: rgba(85,163,119,.3); color: #b9e5cb; }
.nav-badge.hot { background: rgba(208,117,109,.24); color: #f0b3ac; }

.app[data-collapsed="1"] .sidebar-name,
.app[data-collapsed="1"] .nav-group-label,
.app[data-collapsed="1"] .nav-item span,
.app[data-collapsed="1"] .nav-badge { display: none; }
.app[data-collapsed="1"] .nav-item { justify-content: center; padding: 0; }
.app[data-collapsed="1"] .nav-group { margin-bottom: var(--s5); }
/* Ohne Beschriftung braucht die Gruppe eine Trennung, sonst wird die
   Leiste zu einer einzigen Reihe von Sinnbildern. */
.app[data-collapsed="1"] .nav-group + .nav-group {
  border-top: 1px solid var(--sidebar-line); padding-top: var(--s5); margin-top: 0;
}
.app[data-collapsed="1"] .sidebar-brand { justify-content: center; padding: var(--s4); }

.sidebar-foot { flex: none; padding: var(--s5); box-shadow: inset 0 1px 0 var(--sidebar-line); }
.sidebar-toggle {
  width: 100%; background: transparent; border: 0; color: var(--sidebar-muted); cursor: pointer;
  padding: var(--s3) var(--s5); border-radius: 8px; display: flex; align-items: center; gap: 11px;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-toggle:hover { background: var(--sidebar-hover); color: var(--sidebar-strong); }
.sidebar-toggle svg { width: 17px; height: 17px; flex: none; transition: transform var(--t-base) var(--e-out); }
.app[data-collapsed="1"] .sidebar-toggle svg { transform: rotate(180deg); }
.sidebar-toggle span { font-size: var(--fs-sm); }
.app[data-collapsed="1"] .sidebar-toggle { justify-content: center; padding: var(--s3); }
.app[data-collapsed="1"] .sidebar-toggle span { display: none; }

/* --- Hauptbereich ----------------------------------------------------- */
.main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; position: relative; }

/* Kopfzeile aus Milchglas: sie liegt über dem Inhalt statt neben ihm.
   Beim Rollen scheint das Darunterliegende durch — das zeigt, dass der
   Inhalt weitergeht, ohne eine Linie dafür zu brauchen. */
.topbar {
  height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: var(--s5);
  padding: 0 var(--s7); z-index: 20;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 -1px 0 var(--hairline), 0 1px 3px -1px rgba(19,33,25,.04);
}
.topbar h1 {
  font-size: var(--h3-size); font-weight: var(--h3-weight);
  letter-spacing: var(--h3-track); color: var(--text-strong);
}
.topbar .crumb {
  color: var(--text-subtle); font-size: var(--fs-xs); margin-top: 1px;
  letter-spacing: .01em;
}
/* Der Seitentitel weicht nicht. Wird der Platz knapp, schrumpft die
   Suche - sie hat ein Tastenkürzel, der Titel hat keines. */
.topbar-title { flex: none; min-width: 0; }
.topbar h1 { white-space: nowrap; }
/* Trennt Werkzeuggruppen, ohne eine weitere Linie ins Bild zu setzen */
.topbar-sep { width: 1px; height: 20px; background: var(--hairline-strong); flex: none; margin: 0 var(--s2); }
.topbar .row { gap: var(--s4); }

/* Farbpunkt des Shopfaces: eine winzige Fläche, die überall im System
   dieselbe Bedeutung trägt. */
.shop-dot {
  width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 1px 2px rgba(19,33,25,.2);
}
.avatar {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fill-accent); color: #fff;
  font-weight: var(--fw-bold); font-size: 10.5px; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 3px rgba(47,125,79,.35);
  flex: none;
}
.user-btn { padding-left: 3px; padding-right: var(--s3); gap: var(--s3); }

/* Globale Suche in der Kopfzeile */
.omni {
  display: flex; align-items: center; gap: var(--s4);
  height: var(--control-h); flex: 0 1 270px; min-width: 0;
  padding: 0 var(--s4) 0 var(--s5);
  background: var(--bg-sunken); border: 1px solid var(--hairline); border-radius: var(--r-md);
  color: var(--text-subtle); cursor: text; user-select: none; overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.omni:hover {
  background: var(--surface); border-color: var(--border-strong);
  box-shadow: var(--sh-1); color: var(--text-muted);
}
.omni svg { opacity: .65; }
.omni .omni-text { flex: 1 1 auto; font-size: var(--fs-sm); white-space: nowrap; }
.omni .kbd { opacity: .8; }

/* Auf schmalen Schirmen schrumpft die Suche auf ihr Sinnbild. Das
   Tastenkürzel bleibt - nur das Schild dafür verschwindet. */
@media (max-width: 1420px) {
  .omni { flex: none; width: var(--control-h); padding: 0; justify-content: center; }
  .omni .omni-text, .omni .kbd { display: none; }
  .topbar { padding: 0 var(--s6); gap: var(--s4); }
  .topbar .segmented button { padding: 0 var(--s4); }
  .topbar-sep { margin: 0; }
}
/* Darunter rückt der Zeitraum in die Ansicht, nicht mehr in die Kopfzeile:
   lieber eine Zeile mehr als abgeschnittene Bedienelemente. */
@media (max-width: 1180px) {
  .topbar .segmented button { font-size: var(--fs-xs); padding: 0 var(--s3); }
  .shop-btn { max-width: 132px; overflow: hidden; }
}

/* Der Arbeitsbereich bekommt Umgebungslicht: zwei kaum sichtbare
   Lichthöfe in Grün und Gold. Ohne sie ist die Fläche totes Grau. */
.view {
  flex: 1 1 auto; overflow-y: auto; padding: var(--s7); scroll-behavior: smooth;
  background: var(--ambient), var(--bg); background-attachment: local, local;
  /* Platz für die Bildlaufleiste immer freihalten. Sonst erscheint sie auf
     langen Seiten und verschwindet auf kurzen - und die ganze Ansicht
     rückt bei jedem Reiterwechsel ein paar Pixel nach links oder rechts
     (Befund Inhaber 15.09.2026). */
  scrollbar-gutter: stable;
}
.view-inner { max-width: var(--view-max); margin: 0 auto; }

/* Beim Ansichtswechsel: kurzes Aufsteigen statt hartem Umschlagen.
   Bewusst ohne Füllmodus: eine zurückbleibende Transformation — und sei
   es die Einheitsmatrix — macht aus dem Element einen Bezugsrahmen und
   bricht jedes `position: fixed` darin. */
.view-enter { animation: viewIn var(--t-slow) var(--e-out); }
/* Nur ein weiches Einblenden - kein Hochgleiten. Die Seite steht beim
   Wechsel fest an ihrem Platz (Befund Inhaber 15.09.2026: "muss statisch sein"). */
@keyframes viewIn { from { opacity: 0; } }

/* =====================================================================
   Karten
   ===================================================================== */
/* Eine Karte ist eine Platte mit Dicke: Lichtkante oben, Verlauf nach
   unten, Kontaktschatten darunter. Erst dadurch liegt sie auf der Fläche
   statt in ihr. */
.card {
  position: relative;
  background: var(--fill-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card), var(--sheen);
  transition: box-shadow var(--t-base) var(--e-out),
              border-color var(--t-base),
              transform var(--t-base) var(--e-out);
}
.card.hoverable { cursor: pointer; }
.card.hoverable:hover {
  box-shadow: var(--sh-card-hover), var(--sheen);
  border-color: var(--hairline-strong); transform: translateY(-1px);
}
.card-head {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--card-pad-y) var(--card-pad);
  box-shadow: inset 0 -1px 0 var(--hairline);
  min-height: 0; border-radius: var(--r-card) var(--r-card) 0 0;
}
.card-head h2 {
  font-size: var(--h4-size); font-weight: var(--h4-weight);
  letter-spacing: var(--h4-track); color: var(--text-strong);
}
.card-head .sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 1px; }
.card-body { padding: var(--card-pad); }
.card-body.tight { padding: var(--s4) var(--s5); }
.card-body.flush { padding: 0; }
/* Eine randlose Tabelle in einer Karte darf die Rundung nicht überlaufen.
   Bewusst `clip` statt `hidden`: `hidden` macht aus dem Kasten einen
   Rollbereich und damit den Bezugspunkt für jedes `position: sticky`
   darin — ein feststehender Tabellenkopf würde aufhören zu haften.
   `clip` beschneidet nur. */
.card > .card-body.flush:last-child { border-radius: 0 0 var(--r-card) var(--r-card); overflow: clip; }

/* Abschnittsüberschrift zwischen den Karten — gliedert lange Ansichten,
   ohne sie in noch mehr Kästen zu zerlegen. */
.section-head {
  display: flex; align-items: baseline; gap: var(--s5);
  margin: var(--s9) 0 var(--s5);
}
.section-head:first-child { margin-top: 0; }
.section-head h2 { font-size: var(--h4-size); font-weight: var(--h4-weight); color: var(--text-strong); }
.section-head .rule { flex: 1 1 auto; height: 1px; background: var(--hairline); }

.grid { display: grid; gap: var(--gap); }
.grid.k2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.k3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.k4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.k5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.grid.k6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid.auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (max-width: 1480px) { .grid.k6 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1240px) { .grid.k4, .grid.k5 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 1000px) { .grid.k3, .grid.k2 { grid-template-columns: 1fr; } .grid.k6 { grid-template-columns: repeat(2,1fr); } }

/* =====================================================================
   Kennzahlen
   ===================================================================== */
/* Kennzahlkachel.
   Jede Kennzahl trägt einen eigenen Ton — an der Oberkante als Leiste, im
   Sinnbild als Plakette. Sechs gleiche graue Kästen zwingen zum Lesen;
   sechs unterscheidbare Kacheln erkennt man am Platz und an der Farbe. */
.kpi {
  --tone:      var(--accent);
  --tone-soft: var(--accent-soft);
  padding: var(--card-pad-y) var(--card-pad) calc(var(--card-pad-y) + 16px);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.kpi[data-tone="gold"]    { --tone: var(--gold);      --tone-soft: var(--gold-soft); }
.kpi[data-tone="info"]    { --tone: var(--info-500);  --tone-soft: var(--status-info-bg); }
.kpi[data-tone="warn"]    { --tone: var(--warn-500);  --tone-soft: var(--status-warn-bg); }
.kpi[data-tone="neg"]     { --tone: var(--neg-500);   --tone-soft: var(--status-neg-bg); }
.kpi[data-tone="neutral"] { --tone: var(--text-muted);--tone-soft: var(--bg-sunken); }

/* Tonleiste an der Oberkante. Im Ruhezustand zurückhaltend, unter dem
   Zeiger voll — das hebt genau die eine Kachel heraus, die gerade zählt. */
.kpi::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 35%, transparent));
  opacity: .5; transition: opacity var(--t-base);
}
.kpi:hover::before { opacity: 1; }
.kpi:hover { box-shadow: var(--sh-card-hover), var(--sheen); transform: translateY(-1px); }

.kpi-top { display: flex; align-items: flex-start; gap: var(--s4); }
/* Zwei Zeilen sind immer reserviert, auch wenn die Beschriftung nur eine
   braucht. Dadurch stehen alle Kennzahlen einer Reihe auf derselben
   Grundlinie — und das Auge vergleicht sie, statt sie zu suchen. */
.kpi-label {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-muted); font-weight: var(--fw-bold); flex: 1 1 auto;
  line-height: 1.45; padding-top: 3px; min-height: calc(2 * 1.45em + 3px);
}
.medallion {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--tone-soft); color: var(--tone);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 18%, transparent);
  transition: transform var(--t-base) var(--e-spring);
}
.kpi:hover .medallion { transform: scale(1.08); }
.medallion svg { width: 14px !important; height: 14px !important; }

.kpi-value {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 660;
  letter-spacing: -.03em; margin-top: var(--s4); line-height: 1.1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-features);
}
.kpi-value.sm { font-size: var(--fs-xl); }
.kpi-value.lg { font-size: var(--fs-3xl); }
.kpi-foot {
  display: flex; align-items: center; gap: var(--s4); margin-top: var(--s4);
  font-size: var(--fs-sm); min-width: 0;
}
.kpi-foot > .subtle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); }

/* Die Verlaufslinie sitzt am unteren Rand und läuft bis an die Kante:
   sie ist Hintergrund, keine Abbildung — sie soll die Richtung zeigen,
   nicht zum Ablesen einladen. */
.kpi-spark {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  pointer-events: none; opacity: .5;
  transition: opacity var(--t-base);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 100%);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 100%);
}
.kpi:hover .kpi-spark { opacity: .85; }
.kpi-spark svg { width: 100% !important; height: 100% !important; display: block; }

/* Veränderung als Plakette statt als bloß gefärbter Text: so ist sie
   auch im Augenwinkel ein eigener Gegenstand. */
.delta {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  font-weight: var(--fw-bold); font-size: var(--fs-xs); white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: .005em;
  padding: 1.5px var(--s4) 1.5px var(--s3); border-radius: var(--r-full);
  line-height: 1.5;
}
.delta.up   { color: var(--status-pos-fg); background: var(--status-pos-bg); }
.delta.down { color: var(--status-neg-fg); background: var(--status-neg-bg); }
.delta.flat { color: var(--text-subtle);   background: var(--status-neutral-bg); }
.delta svg { width: 11px !important; height: 11px !important; }

/* =====================================================================
   Marken und Zustände
   ===================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: var(--s3); padding: 1.5px var(--s4);
  border-radius: var(--r-full); font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  white-space: nowrap; line-height: 1.65; border: 1px solid transparent;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
}
.badge.dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.badge.neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.badge.green   { background: var(--status-pos-bg);     color: var(--status-pos-fg); }
.badge.blue    { background: var(--status-info-bg);    color: var(--status-info-fg); }
.badge.gold    { background: var(--status-gold-bg);    color: var(--status-gold-fg); }
.badge.red     { background: var(--status-neg-bg);     color: var(--status-neg-fg); }
.badge.amber   { background: var(--status-warn-bg);    color: var(--status-warn-fg); }
.badge.outline { background: transparent; border-color: currentColor; }

/* Objektzustand: Zustand als Text, Farbe nur als Verstärkung.
   Farbe allein ist keine Information — sie ist nicht vorlesbar und
   nicht für jeden unterscheidbar. */
.objstatus { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.objstatus i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.objstatus.pos { color: var(--pos-500); } .objstatus.pos i { background: var(--pos-500); }
.objstatus.warn { color: var(--warn-500); } .objstatus.warn i { background: var(--warn-500); }
.objstatus.neg { color: var(--neg-500); } .objstatus.neg i { background: var(--neg-500); }
.objstatus.info { color: var(--info-500); } .objstatus.info i { background: var(--info-500); }
.objstatus.neutral { color: var(--text-muted); } .objstatus.neutral i { background: var(--text-subtle); }

.shopchip {
  display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--fs-2xs);
  font-weight: var(--fw-bold); padding: 1.5px var(--s4) 1.5px var(--s3); border-radius: var(--r-full);
  background: var(--fill-surface); border: 1px solid var(--hairline); white-space: nowrap;
  letter-spacing: .035em; color: var(--text-muted);
  box-shadow: var(--sheen-soft);
}
.shopchip i { width: 7px; height: 7px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.07); }

/* Länderkürzel: bewusst als Kürzel statt als Fähnchen — eine Flagge sagt
   nichts über das Steuergebiet, und bei 27 Mitgliedstaaten sind die
   kleinen Bilder ohnehin nicht mehr auseinanderzuhalten. */
.flag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 17px; padding: 0 4px; border-radius: var(--r-xs);
  background: var(--fill-sunken); border: 1px solid var(--hairline);
  font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: .06em; color: var(--text-muted);
  flex: none; font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Schaltflächen
   ===================================================================== */
/* Eine Schaltfläche ist ein Körper, kein Rechteck: Verlauf von oben nach
   unten, helle Oberkante, und beim Drücken kippt das Licht nach innen.
   Das kostet drei Zeilen und ist der Unterschied zwischen „anklickbar"
   und „gedrückt". */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s4);
  height: var(--control-h); padding: 0 var(--control-px);
  border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--fill-surface); color: var(--text);
  font-weight: var(--fw-medium); font-size: var(--fs-base);
  cursor: pointer; white-space: nowrap; user-select: none;
  box-shadow: var(--sh-1), var(--sheen-soft);
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-instant), box-shadow var(--t-fast), color var(--t-fast);
}
.btn:hover:not(:disabled) { border-color: var(--text-subtle); box-shadow: var(--sh-2), var(--sheen); }
.btn:active:not(:disabled) {
  transform: translateY(.5px);
  box-shadow: inset 0 1px 2px rgba(19,33,25,.12);
  background: var(--surface-active);
}
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn.primary {
  background: var(--fill-accent); border-color: var(--accent-active); color: #fff;
  box-shadow:
    0 1px 2px rgba(19,33,25,.2),
    0 4px 12px -4px rgba(47,125,79,.5),
    inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow: 0 1px 1px rgba(0,0,0,.13);
}
.btn.primary:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow:
    0 1px 2px rgba(19,33,25,.2),
    0 7px 20px -5px rgba(47,125,79,.55),
    inset 0 1px 0 rgba(255,255,255,.26);
}
.btn.primary:active:not(:disabled) {
  filter: brightness(.96);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.22);
}
/* War ein goldener Knopf. Die Plattform kennt nur noch drei Farben, und
   eine Erstattung ist kein eigener Farbton - sie ist eine Handlung, die
   man beabsichtigt: derselbe Knopf wie jede andere. */
.btn.gold {
  background: var(--fill-surface); border-color: var(--border-strong);
  color: var(--text-strong); font-weight: var(--fw-semi);
}
.btn.gold:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--text-subtle); }
.btn.danger {
  background: var(--fill-neg); border-color: var(--neg-600); color: #fff;
  box-shadow: 0 1px 2px rgba(19,33,25,.2), 0 4px 12px -4px rgba(168,67,60,.45), inset 0 1px 0 rgba(255,255,255,.2);
  text-shadow: 0 1px 1px rgba(0,0,0,.13);
}
.btn.danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); border-color: transparent; box-shadow: none; }
.btn.ghost:active:not(:disabled) { background: var(--surface-active); box-shadow: none; }
.btn.subtle-btn { background: var(--bg-sunken); border-color: transparent; box-shadow: none; }
.btn.sm { height: 24px; padding: 0 var(--s4); font-size: var(--fs-sm); border-radius: var(--r-sm); gap: var(--s3); }
.btn.sm svg { width: 13px; height: 13px; }
.btn.lg { height: 36px; padding: 0 var(--s6); font-size: var(--fs-md); border-radius: var(--r-lg); }
.btn.icon { padding: 0; width: var(--control-h); }
.btn.icon.sm { width: 24px; }
.btn.block { width: 100%; }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }

/* =====================================================================
   Eingaben
   ===================================================================== */
/* Eingabefelder liegen in der Fläche, Schaltflächen darauf. Der Unterschied
   entsteht durch die Richtung des Lichts: hier fällt der Schatten nach
   innen. */
.input, .select, .textarea {
  height: var(--control-h); padding: 0 var(--control-px);
  border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); width: 100%;
  box-shadow: inset 0 1px 2px rgba(19,33,25,.045);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input:hover, .select:hover { border-color: var(--text-subtle); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--border-focus); box-shadow: var(--ring);
  background: var(--surface);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:disabled, .select:disabled { background: var(--bg-sunken); color: var(--text-subtle); cursor: not-allowed; }
.input.error { border-color: var(--neg-500); box-shadow: var(--ring-neg); }
.textarea { height: auto; padding: var(--s4) var(--control-px); resize: vertical; min-height: 72px; line-height: var(--lh-snug); }
.select {
  appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949e99' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 13px;
}
.field-label {
  display: block; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: var(--s3);
}
.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--text-subtle); pointer-events: none; }
.search .input { padding-left: 30px; }

/* Segmentschalter: eine vertiefte Schiene, in der eine Platte liegt.
   Die gewählte Stufe ist erhaben, nicht nur anders gefärbt. */
.segmented {
  display: inline-flex; background: var(--fill-sunken); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 2px; gap: 1px; height: var(--control-h);
  box-shadow: inset 0 1px 2px rgba(19,33,25,.06);
}
.segmented button {
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  padding: 0 var(--s5); border-radius: calc(var(--r-md) - 2px); font-size: var(--fs-sm);
  font-weight: var(--fw-medium); white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.segmented button:hover { color: var(--text); background: var(--surface-hover); }
.segmented button[aria-pressed="true"] {
  background: var(--fill-surface); color: var(--text-strong); font-weight: var(--fw-semi);
  box-shadow: 0 1px 2px rgba(19,33,25,.09), 0 0 0 1px var(--hairline), var(--sheen);
}
/* Ein Reiter, der im gewählten Zeitraum nichts bewirken kann, ist
   ausgegraut und sagt beim Darüberfahren, warum (Inhaber 20.09.2026).
   Kein Anheben, kein Wackeln - nur weniger Farbe. */
.segmented button:disabled {
  color: var(--text-faint, var(--text-muted)); opacity: .45; cursor: not-allowed;
}
.segmented button:disabled:hover { background: transparent; color: var(--text-faint, var(--text-muted)); }

.switch { display: inline-flex; align-items: center; gap: var(--s4); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i {
  width: 34px; height: 19px; border-radius: var(--r-full); background: var(--border-strong);
  position: relative; transition: background var(--t-base); flex: none;
}
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--t-base) var(--e-spring);
}
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(15px); }
.switch input:focus-visible + i { box-shadow: var(--ring); }

.check {
  width: 15px; height: 15px; border-radius: var(--r-xs); border: 1.5px solid var(--border-strong);
  background: var(--surface); cursor: pointer; display: inline-grid; place-items: center;
  flex: none; transition: background var(--t-fast), border-color var(--t-fast);
  appearance: none; margin: 0;
}
.check:hover { border-color: var(--accent); }
.check:checked, .check:indeterminate { background: var(--accent); border-color: var(--accent); }
.check:checked::after {
  content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
.check:indeterminate::after { content: ""; width: 8px; height: 2px; background: #fff; border-radius: 1px; }

/* =====================================================================
   Filterleiste
   ===================================================================== */
.filterbar {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  margin-bottom: var(--gap);
}
.filterbar .select, .filterbar .input { width: auto; min-width: 132px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: var(--s3); height: 24px;
  padding: 0 var(--s3) 0 var(--s4); border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid var(--accent-border); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  animation: chipIn var(--t-base) var(--e-out);
}
@keyframes chipIn { from { opacity: 0; transform: scale(.9); } }
.filter-chip button {
  border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0;
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  opacity: .65; transition: opacity var(--t-fast), background var(--t-fast);
}
.filter-chip button:hover { opacity: 1; background: rgba(0,0,0,.08); }
.filter-chip svg { width: 11px !important; height: 11px !important; }

/* =====================================================================
   Tabellen
   ===================================================================== */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }

/* Der Tabellenkopf bleibt beim Rollen stehen und wirft dabei einen
   Schatten — daran sieht man, dass Inhalt darunter durchläuft. */
table.data thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-alt);
  text-align: left; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em; padding: var(--s4) var(--table-px);
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--hairline-strong), 0 2px 4px -2px rgba(19,33,25,.06);
}
table.data thead th.sortable { cursor: pointer; user-select: none; transition: color var(--t-fast), background var(--t-fast); }
table.data thead th.sortable:hover { color: var(--text-strong); background: var(--surface-hover); }
table.data thead th .arrow { opacity: .6; margin-left: 3px; color: var(--accent); }

table.data tbody td {
  padding: var(--table-py) var(--table-px);
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: middle; height: var(--row-h);
}
table.data tbody tr { transition: background var(--t-fast), box-shadow var(--t-fast); }

/* Beim Überfahren erscheint links eine Kante. Ein reiner Farbwechsel
   verschwindet in langen Listen; eine Kante nicht. */
table.data tbody tr.clickable { cursor: pointer; }
table.data tbody tr:hover > td { background: var(--surface-hover); }
table.data tbody tr:hover > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

table.data tbody tr.selected > td { background: var(--surface-sel); }
table.data tbody tr.selected > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
table.data tbody tr.muted-row td { opacity: .5; }
table.data tbody tr.flag-row > td:first-child { box-shadow: inset 2px 0 0 var(--warn-500); }
table.data tbody tr.danger-row > td:first-child { box-shadow: inset 2px 0 0 var(--neg-500); }
table.data tbody tr:last-child > td { border-bottom: 0; }

table.data tfoot td {
  padding: var(--s5) var(--table-px);
  border-top: 1px solid var(--hairline-strong);
  font-weight: var(--fw-semi); background: var(--surface-alt); color: var(--text-strong);
}
table.data td.right, table.data th.right { text-align: right; }
table.data td.tight, table.data th.tight { width: 1%; white-space: nowrap; }
/* Zahlen tragen in der Tabelle die Aussage — sie bekommen etwas mehr
   Gewicht als der begleitende Text. */
table.data td.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num-features); }
table.data td.num b { font-weight: var(--fw-semi); color: var(--text-strong); }

/* Zeilen laufen beim Erscheinen gestaffelt ein — das führt das Auge von
   oben nach unten und macht das Laden begreifbar statt ruckartig. */
.stagger tbody tr { animation: rowIn var(--t-base) var(--e-out) both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(4px); } }
.stagger tbody tr:nth-child(1)  { animation-delay: calc(var(--stagger) * 0); }
.stagger tbody tr:nth-child(2)  { animation-delay: calc(var(--stagger) * 1); }
.stagger tbody tr:nth-child(3)  { animation-delay: calc(var(--stagger) * 2); }
.stagger tbody tr:nth-child(4)  { animation-delay: calc(var(--stagger) * 3); }
.stagger tbody tr:nth-child(5)  { animation-delay: calc(var(--stagger) * 4); }
.stagger tbody tr:nth-child(6)  { animation-delay: calc(var(--stagger) * 5); }
.stagger tbody tr:nth-child(7)  { animation-delay: calc(var(--stagger) * 6); }
.stagger tbody tr:nth-child(8)  { animation-delay: calc(var(--stagger) * 7); }
.stagger tbody tr:nth-child(9)  { animation-delay: calc(var(--stagger) * 8); }
.stagger tbody tr:nth-child(10) { animation-delay: calc(var(--stagger) * 9); }
.stagger tbody tr:nth-child(n+11) { animation-delay: calc(var(--stagger) * 10); }

/* Massenauswahl */
/* Fest am unteren Rand statt mitlaufend: eine Aktionsleiste, die man
   erst suchen muss, ist keine. */
.bulkbar {
  position: fixed; bottom: var(--s7); left: 50%; z-index: 60;
  display: flex; align-items: center; gap: var(--s4);
  width: fit-content; max-width: calc(100vw - var(--sidebar-w) - var(--s10));
  padding: var(--s4) var(--s5) var(--s4) var(--s6);
  background: var(--grey-900); color: #fff; border-radius: var(--r-full);
  box-shadow: var(--sh-5); border: 1px solid rgba(255,255,255,.1);
  animation: bulkIn var(--t-base) var(--e-spring) both;
  flex-wrap: wrap; justify-content: center;
}
@keyframes bulkIn {
  from { opacity: 0; transform: translate(-50%, 18px) scale(.95); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.bulkbar .count { font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.bulkbar .btn {
  background: rgba(255,255,255,.1); border-color: transparent; color: #fff;
}
.bulkbar .btn:hover:not(:disabled) { background: rgba(255,255,255,.18); border-color: transparent; }
.bulkbar .btn.primary { background: var(--accent); }
.bulkbar svg { color: currentColor; }

/* =====================================================================
   Leerzustand und Ladeanzeige
   ===================================================================== */
/* Leerzustand: das Sinnbild sitzt in einer eigenen Plakette, damit die
   Fläche nicht wie ein Ladefehler aussieht. */
.empty {
  padding: var(--s11) var(--s6); text-align: center; color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center;
}
.empty svg {
  opacity: 1; color: var(--text-subtle); margin-bottom: var(--s6);
  box-sizing: content-box; padding: var(--s6); border-radius: var(--r-2xl);
  background: var(--fill-sunken); box-shadow: inset 0 0 0 1px var(--hairline);
}
.empty h3 { font-size: var(--h4-size); margin-bottom: var(--s3); color: var(--text-strong); }
.empty p { max-width: 44ch; line-height: var(--lh-snug); font-size: var(--fs-sm); }

.skeleton {
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--surface-hover) 50%, var(--bg-sunken) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }
.sk-line { height: 11px; margin-bottom: var(--s4); }
.sk-line.w60 { width: 60%; } .sk-line.w40 { width: 40%; } .sk-line.w80 { width: 80%; }
.sk-fade { animation: skFade var(--t-base) var(--e-sharp) forwards; }
@keyframes skFade { to { opacity: 0; } }

.loading-bar {
  position: fixed; top: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  z-index: 500; transition: width var(--t-base) var(--e-out), opacity var(--t-slow);
  box-shadow: 0 0 10px var(--accent);
}

/* =====================================================================
   Balken und Ranglisten
   ===================================================================== */
.bar {
  height: 6px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(19,33,25,.05);
}
.bar > i {
  display: block; height: 100%; border-radius: var(--r-full); background: var(--accent);
  transform-origin: left; animation: barGrow var(--t-slower) var(--e-out) both;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
@keyframes barGrow { from { transform: scaleX(0); } }
.bar.thick { height: 9px; }

.rankrow {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--s4); margin: 0 calc(var(--s4) * -1);
  border-radius: var(--r-sm); transition: background var(--t-fast);
}
.rankrow:hover { background: var(--surface-hover); }
.rankrow .label { flex: 1 1 auto; min-width: 0; }
.rankrow .track { flex: 0 0 32%; }
.rankrow .value {
  flex: none; font-weight: var(--fw-semi); color: var(--text-strong);
  font-variant-numeric: tabular-nums; font-feature-settings: var(--num-features);
}

/* =====================================================================
   Zeitstrahl
   ===================================================================== */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px;
  background: var(--border); border-radius: 2px;
}
.tl-item { position: relative; padding: 0 0 var(--s6); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -22px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong);
}
.tl-item.accent::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tl-item.gold::before { border-color: var(--gold); background: var(--gold); }
.tl-item.danger::before { border-color: var(--neg-500); background: var(--neg-500); }
.tl-time { font-size: var(--fs-2xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.tl-text { margin-top: 2px; }

/* =====================================================================
   Ablauf der Bestellung
   ===================================================================== */
.stepper { display: flex; align-items: center; gap: 0; }
.step { display: flex; align-items: center; gap: var(--s4); flex: 1 1 0; min-width: 0; }
.step .dot {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--bg-sunken); color: var(--text-subtle); border: 2px solid var(--border);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); transition: all var(--t-base) var(--e-out);
}
.step .dot svg { width: 13px !important; height: 13px !important; }
.step.done .dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.current .dot {
  background: var(--surface); border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  animation: pulse 2.4s var(--e-in-out) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); }
  50% { box-shadow: 0 0 0 7px transparent; }
}
.step.cancelled .dot { background: var(--neg-500); border-color: var(--neg-500); color: #fff; }
.step .name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.step.pending .name { color: var(--text-subtle); }
.step .line { flex: 1 1 auto; height: 2px; background: var(--border); margin: 0 var(--s3); border-radius: 2px; }
.step.done .line { background: var(--accent); }
/* Tatsächlich abgeschlossen: großer grüner Haken, ruhig (kein Pulsieren). */
.step.finished .dot {
  width: 38px; height: 38px; background: var(--pos-500, #2f9e5b); border-color: var(--pos-500, #2f9e5b); color: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--pos-500, #2f9e5b) 18%, transparent);
}
.step.finished .dot svg { width: 22px !important; height: 22px !important; stroke-width: 3; }
.step.finished .name { font-weight: var(--fw-bold); color: var(--pos-600, var(--pos-500, #2f9e5b)); }

/* =====================================================================
   Beschreibungslisten
   ===================================================================== */
.deflist { display: grid; grid-template-columns: auto 1fr; gap: var(--s3) var(--s6); font-size: var(--fs-base); }
.deflist dt { color: var(--text-muted); }
.deflist dd { margin: 0; text-align: right; }
.deflist.left dd { text-align: left; }

/* =====================================================================
   Diagramme
   ===================================================================== */
.chart { width: 100%; display: block; overflow: visible; }
/* Gestrichelte Hilfslinien treten hinter die Daten zurück. Eine
   durchgezogene Linie konkurriert mit dem Verlauf, den sie nur stützen
   soll. */
.chart .grid-line { stroke: var(--chart-grid); stroke-width: 1; stroke-dasharray: 2 5; }
.chart .grid-line:first-of-type { stroke-dasharray: none; stroke: var(--border); }
.chart .axis-text {
  fill: var(--chart-axis); font-size: 10px; font-family: var(--font-ui);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.chart .area { opacity: .16; }
.chart .line {
  fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  paint-order: stroke;
}
.chart .donut-seg, .chart path[stroke="var(--surface)"] { stroke-linejoin: round; }
/* Linie zeichnet sich beim Erscheinen — das macht den Verlauf lesbar,
   statt ihn fertig hinzustellen. */
.chart.draw .line { animation: drawLine 900ms var(--e-out) both; }
@keyframes drawLine { from { stroke-dasharray: 2000; stroke-dashoffset: 2000; } to { stroke-dasharray: 2000; stroke-dashoffset: 0; } }
.chart.draw .area { animation: fadeIn var(--t-slower) 300ms both; }
@keyframes fadeIn { from { opacity: 0; } }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .bar-rect { transition: opacity var(--t-fast); transform-origin: bottom; }
.chart.draw .bar-rect { animation: barRise var(--t-slow) var(--e-out) both; }
@keyframes barRise { from { transform: scaleY(0); } }
.chart .bar-rect:hover { opacity: .78; }
.chart.draw .donut-seg { animation: segIn var(--t-slow) var(--e-out) both; }
@keyframes segIn { from { opacity: 0; transform: scale(.9); } }

.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s5); font-size: var(--fs-sm); color: var(--text-muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--s3); }
.chart-legend i { width: 9px; height: 9px; border-radius: 3px; }

.tooltip {
  position: fixed; z-index: 300; pointer-events: none;
  background: rgba(20,26,23,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; padding: var(--s4) var(--s5); border-radius: var(--r-md); font-size: var(--fs-sm);
  box-shadow: var(--sh-4), inset 0 1px 0 rgba(255,255,255,.08); opacity: 0; max-width: 280px;
  transform: translateY(3px); transition: opacity var(--t-fast), transform var(--t-fast);
  border: 1px solid rgba(255,255,255,.09);
}
.tooltip.show { opacity: 1; transform: translateY(0); }
.tooltip .t-title { font-weight: var(--fw-semi); margin-bottom: 3px; }
.tooltip .t-row { display: flex; justify-content: space-between; gap: var(--s6); color: #c8d2cc; }
.tooltip .t-row b { color: #fff; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }

/* =====================================================================
   Dialog
   ===================================================================== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,16,12,.42);
  -webkit-backdrop-filter: blur(6px) saturate(80%); backdrop-filter: blur(6px) saturate(80%);
  display: grid; place-items: center; z-index: 200; padding: var(--s6);
  animation: fadeIn var(--t-base);
}
.modal {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-5), var(--sheen);
  width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  border: 1px solid var(--hairline); animation: modalIn var(--t-slow) var(--e-out);
}
.modal.wide { width: min(920px, 100%); }
.modal.xwide { width: min(1180px, 100%); }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.975); } }
/* Klick neben das Fenster: kurzes Anstupsen statt Schließen. */
.modal.nudge { animation: modalNudge 360ms var(--e-out, ease-out); }
@keyframes modalNudge {
  0% { transform: scale(1); } 30% { transform: scale(1.012); }
  55% { transform: scale(.996); } 100% { transform: scale(1); }
}
.modal-head {
  padding: var(--s6) var(--s8); box-shadow: inset 0 -1px 0 var(--hairline);
  display: flex; align-items: center; gap: var(--s5);
}
.modal-head h2 { font-size: var(--h3-size); font-weight: var(--h3-weight); color: var(--text-strong); }
.modal-body { padding: var(--s8); overflow-y: auto; }
.modal-foot {
  padding: var(--s6) var(--s8); box-shadow: inset 0 1px 0 var(--hairline);
  display: flex; justify-content: flex-end; gap: var(--s5); background: var(--surface-alt);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* =====================================================================
   Befehlspalette
   Tastaturgeführt: was der Nutzer täglich braucht, ist zwei Anschläge
   entfernt statt drei Klicks. Gesparte Sekunden summieren sich.
   ===================================================================== */
.palette-backdrop {
  position: fixed; inset: 0; background: rgba(10,16,12,.38);
  -webkit-backdrop-filter: blur(7px) saturate(80%); backdrop-filter: blur(7px) saturate(80%);
  z-index: 400; display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh var(--s6) var(--s6);
  animation: fadeIn var(--t-base);
}
.palette {
  width: min(680px, 100%); background: var(--surface);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-xl);
  box-shadow: var(--sh-5), var(--sheen); overflow: hidden; display: flex; flex-direction: column;
  max-height: 68vh; animation: paletteIn var(--t-base) var(--e-out);
}
@keyframes paletteIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
.palette-head {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s5) var(--s6); box-shadow: inset 0 -1px 0 var(--hairline);
}
.palette-head svg { color: var(--text-subtle); width: 18px !important; height: 18px !important; }
.palette-input {
  flex: 1 1 auto; border: 0; background: transparent; outline: none;
  font-size: var(--fs-lg); color: var(--text); height: 30px;
}
/* Das Feld bekommt keinen eigenen Fokusring: die Palette selbst ist der
   Fokus — ein Rahmen darin wäre ein zweiter Rahmen im Rahmen. */
.palette-input:focus-visible { box-shadow: none; }
.palette-input::placeholder { color: var(--text-subtle); }
.palette-results { flex: 1 1 auto; overflow-y: auto; padding: var(--s3) 0 var(--s4); }
.palette-group {
  padding: var(--s5) var(--s6) var(--s3); font-size: var(--fs-2xs);
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-subtle);
  font-weight: var(--fw-bold);
}
.palette-item {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s4) var(--s6); cursor: pointer; scroll-margin: var(--s8);
  border-left: 2px solid transparent;
}
.palette-item:hover { background: var(--surface-hover); }
.palette-item.active { background: var(--accent-soft); border-left-color: var(--accent); }
.palette-item .pi-icon {
  width: 28px; height: 28px; border-radius: var(--r-md); flex: none; display: grid; place-items: center;
  background: var(--bg-sunken); color: var(--text-muted);
}
.palette-item.active .pi-icon { background: var(--accent); color: #fff; }
.palette-item .pi-title { font-weight: var(--fw-medium); }
.palette-item .pi-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.palette-item .pi-meta { margin-left: auto; font-size: var(--fs-sm); color: var(--text-subtle); white-space: nowrap; }
.palette-foot {
  display: flex; align-items: center; gap: var(--s6); padding: var(--s4) var(--s6);
  border-top: 1px solid var(--border); background: var(--surface-alt);
  font-size: var(--fs-2xs); color: var(--text-subtle);
}
.palette-foot span { display: inline-flex; align-items: center; gap: var(--s3); }

/* Taste: eine echte kleine Kappe — oben Licht, unten eine dickere Kante. */
.kbd {
  font-family: var(--font-ui); font-size: 10px; font-weight: var(--fw-semi);
  padding: 1.5px 5px; border-radius: var(--r-sm);
  background: var(--fill-surface); border: 1px solid var(--hairline-strong);
  box-shadow: 0 1px 0 var(--hairline-strong), var(--sheen);
  color: var(--text-muted); min-width: 19px; text-align: center; display: inline-block;
  line-height: 1.4;
}

/* =====================================================================
   Hinweise
   ===================================================================== */
.toasts {
  position: fixed; bottom: var(--s7); right: var(--s7); z-index: 700;
  display: flex; flex-direction: column; gap: var(--s5); pointer-events: none;
  max-width: min(480px, calc(100vw - 2 * var(--s7)));
}
/* Deutlich sichtbare Karte: sie liegt über Etikett und Beleg, deshalb steht sie
   satt auf weißem Grund mit kräftigem Schatten (Inhaber 17.09.2026). */
.toast {
  background: #fff; border: 1px solid var(--hairline);
  border-left: 5px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(20, 30, 25, .22), 0 2px 8px rgba(20, 30, 25, .12);
  padding: var(--s5) var(--s6);
  min-width: 340px; max-width: 460px; pointer-events: auto;
  animation: toastIn var(--t-slow) var(--e-out); display: flex; gap: var(--s5); align-items: center;
}
:root[data-theme="dark"] .toast { background: var(--surface); }
/* Bestätigungszeichen: ein Ring, der sich schließt, darin ein Haken, der sich
   zeichnet (Wunsch Inhaber 17.09.2026 - keine Symbole von der Stange). */
.toast { position: relative; overflow: hidden; }
.toast .t-zeichen { width: 30px !important; height: 30px !important; flex: none; fill: none; }
.toast .t-zeichen circle, .toast .t-zeichen path { fill: none; }
.toast .t-ring {
  fill: none; stroke: var(--accent); stroke-width: 2.4; opacity: .35;
  stroke-dasharray: 120; stroke-dashoffset: 120;
  animation: tRing .55s var(--e-out, cubic-bezier(.2,.8,.2,1)) forwards;
  transform-origin: 50% 50%; transform: rotate(-90deg);
}
.toast .t-pfad {
  fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: tPfad .42s cubic-bezier(.65,0,.35,1) .28s forwards;
}
.toast.error .t-ring, .toast.error .t-pfad { stroke: var(--neg-500); }
.toast.warn .t-ring, .toast.warn .t-pfad { stroke: var(--warn-500); }
@keyframes tRing { to { stroke-dashoffset: 0; opacity: .55; } }
@keyframes tPfad { to { stroke-dashoffset: 0; } }
/* Feiner Balken zeigt, wie lange der Hinweis noch steht. */
.toast .t-lauf {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--gold-300, var(--accent)));
  transform-origin: left; animation: tLauf var(--t-life, 3600ms) linear forwards; opacity: .5;
}
.toast.error .t-lauf { background: var(--neg-500); }
@keyframes tLauf { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .toast .t-ring, .toast .t-pfad { animation: none; stroke-dashoffset: 0; }
  .toast .t-lauf { animation: none; opacity: .25; }
}
.toast.error { border-left-color: var(--neg-500); }
.toast.warn  { border-left-color: var(--warn-500); }
.toast.leaving { animation: toastOut var(--t-base) var(--e-sharp) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(28px) scale(.97); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(28px); } }
.toast .t-msg { font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.25; color: var(--text-strong); }
.toast .t-sub {
  font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.toast .grow { min-width: 0; }

/* =====================================================================
   Menü
   ===================================================================== */
.menu {
  position: absolute; z-index: 250; background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-4), var(--sheen); padding: var(--s3); min-width: 200px;
  animation: menuIn var(--t-fast) var(--e-out);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.menu-item {
  display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5);
  border-radius: var(--r-md); cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast);
}
.menu-item:hover { background: var(--surface-hover); }
.menu-item.danger { color: var(--neg-500); }
.menu-item svg { opacity: .7; }
.menu-sep { height: 1px; background: var(--border); margin: var(--s3) 0; }
.menu-label {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-subtle); padding: var(--s4) var(--s5) var(--s2); font-weight: var(--fw-bold);
}

/* =====================================================================
   Besondere Darstellungen
   ===================================================================== */

/* Handlungsbedarf auf der Tagesübersicht.
   Die Gruppenzeile bleibt beim Rollen stehen und trägt links die Farbe
   ihrer Dringlichkeit — so weiß man beim Scrollen immer, worin man
   gerade liest. */
.attn { max-height: 430px; overflow-y: auto; }
.attn-group {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s4) var(--card-pad);
  background: var(--surface-alt);
  box-shadow: inset 0 -1px 0 var(--hairline), inset 3px 0 0 var(--text-subtle);
  position: sticky; top: 0; z-index: 1;
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-strong);
}
.attn-group svg { color: var(--text-muted); }
.attn-group.green { box-shadow: inset 0 -1px 0 var(--hairline), inset 3px 0 0 var(--pos-500); }
.attn-group.amber { box-shadow: inset 0 -1px 0 var(--hairline), inset 3px 0 0 var(--warn-500); }
.attn-group.red   { box-shadow: inset 0 -1px 0 var(--hairline), inset 3px 0 0 var(--neg-500); }

.attn-row {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s4) var(--card-pad); cursor: pointer;
  box-shadow: inset 0 -1px 0 var(--hairline-soft);
  transition: background var(--t-fast);
}
.attn-row:hover { background: var(--surface-hover); }
.attn-row .m { font-weight: var(--fw-medium); }
.attn-row .s { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 1px; }
.attn-row > svg { color: var(--text-subtle); transition: transform var(--t-fast) var(--e-out); }
.attn-row:hover > svg { transform: translateX(2px); color: var(--accent); }

/* Altersstruktur der Forderungen */
.aging { display: flex; border-radius: var(--r-md); overflow: hidden; height: 34px; border: 1px solid var(--border); }
.aging > div {
  display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  color: #fff; transition: flex var(--t-slower) var(--e-out); white-space: nowrap; overflow: hidden;
}

/* RFM-Gitter: Wiederkauf gegen Häufigkeit */
.rfm-grid { display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 3px; font-size: var(--fs-2xs); }
.rfm-cell {
  aspect-ratio: 1.6; border-radius: var(--r-sm); display: grid; place-items: center;
  font-weight: var(--fw-bold); color: var(--text); cursor: default;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.rfm-cell:hover { transform: scale(1.06); box-shadow: var(--sh-2); z-index: 1; }
.rfm-axis { display: grid; place-items: center; color: var(--text-subtle); font-weight: var(--fw-bold); }

/* Jahrgänge */
.cohort { overflow-x: auto; }
.cohort table { border-collapse: separate; border-spacing: 3px; font-size: var(--fs-2xs); }
.cohort th { font-weight: var(--fw-bold); color: var(--text-subtle); text-transform: uppercase; letter-spacing: .06em; padding: 0 var(--s3); }
.cohort td.c-label { color: var(--text-muted); white-space: nowrap; padding-right: var(--s4); font-variant-numeric: tabular-nums; }
.cohort-cell {
  min-width: 46px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center;
  font-weight: var(--fw-semi); font-variant-numeric: tabular-nums;
  transition: transform var(--t-fast);
}
.cohort-cell:hover { transform: scale(1.08); }

/* Zweispaltige Detailansicht */
.split { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: var(--gap); }
.split.wide-left { grid-template-columns: minmax(0,2.6fr) minmax(0,1fr); }
@media (max-width: 1180px) { .split, .split.wide-left { grid-template-columns: 1fr; } }

/* Reiter: die gewählte Lasche trägt eine Kante in Akzentfarbe, die sich
   beim Wechsel aufbaut statt umzuspringen. */
.tabs { display: flex; gap: var(--s2); box-shadow: inset 0 -1px 0 var(--hairline); margin-bottom: var(--gap); }
.tab {
  position: relative;
  padding: var(--s5) var(--s5); border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-weight: var(--fw-medium); font-size: var(--fs-base);
  transition: color var(--t-fast);
}
.tab::after {
  content: ""; position: absolute; left: var(--s5); right: var(--s5); bottom: 0; height: 2px;
  background: var(--accent); border-radius: 2px 2px 0 0;
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--t-base) var(--e-out);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--accent-text); font-weight: var(--fw-semi); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }

/* Hinweiskasten */
.callout {
  padding: var(--s5) var(--s6); border-radius: var(--r-lg); font-size: var(--fs-sm);
  line-height: var(--lh-snug); border: 1px solid transparent; border-left: 3px solid var(--info-500);
  background: var(--status-info-bg); color: var(--text);
  box-shadow: var(--sheen-soft);
}
.callout.gold { border-left-color: var(--gold); background: var(--gold-soft); }
.callout.warn { border-left-color: var(--warn-500); background: var(--status-warn-bg); }
.callout.danger { border-left-color: var(--neg-500); background: var(--status-neg-bg); }
.callout.ok { border-left-color: var(--pos-500); background: var(--status-pos-bg); }
.callout b { display: block; margin-bottom: var(--s2); font-size: var(--fs-base); color: var(--text-strong); }
/* Beiläufiger Hinweis unter einem Feld: leiser, ohne den Blick zu ziehen. */
.callout.small {
  padding: var(--s3) var(--s5); font-size: var(--fs-xs); color: var(--text-muted);
  box-shadow: none;
}

/* Kachel mit eigenem Rahmen für Zahlenreihen */
.tilerow {
  display: flex; border: 1px solid var(--hairline); border-radius: var(--r-card);
  overflow: hidden; background: var(--fill-surface);
  box-shadow: var(--sh-card), var(--sheen);
}
.tilerow > div {
  flex: 1 1 0; padding: var(--card-pad-y) var(--card-pad);
  box-shadow: inset -1px 0 0 var(--hairline); min-width: 0;
}
.tilerow > div:last-child { box-shadow: none; }
.tilerow .k { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); font-weight: var(--fw-bold); }
.tilerow .v {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 650;
  margin-top: var(--s3); color: var(--text-strong);
  font-variant-numeric: tabular-nums; font-feature-settings: var(--num-features);
  letter-spacing: -.024em;
}
.tilerow .v small { font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--text-muted); letter-spacing: 0; }

.divider { height: 1px; background: var(--hairline); margin: var(--s7) 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--s4); }
.stat-inline { display: flex; gap: var(--s8); flex-wrap: wrap; }
.stat-inline > div > .l { font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--fw-bold); }
.stat-inline > div > .v {
  font-size: var(--fs-lg); font-weight: var(--fw-semi); margin-top: 2px; color: var(--text-strong);
  font-variant-numeric: tabular-nums; font-feature-settings: var(--num-features);
}

/* Zahlen, die beim Erscheinen hochzählen, brauchen feste Breite,
   sonst zappelt das Layout während der Bewegung. */
.counting { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Dritte Ausbaustufe
   ===================================================================== */

/* --- Claude-Partner: Fragen und geführte Abläufe ----------------------- */
.ask-input { font-size: var(--fs-md); }
.ask-chip {
  padding: var(--s3) var(--s5); border-radius: var(--r-full);
  border: 1px solid var(--hairline-strong); background: var(--surface);
  font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; text-align: left;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.ask-chip:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }

.answer-card {
  border: 1px solid var(--accent-border); border-left: 3px solid var(--accent);
  border-radius: var(--r-lg); background: var(--fill-surface);
  padding: var(--card-pad); box-shadow: var(--sh-card), var(--sheen);
  animation: viewIn var(--t-slow) var(--e-out);
}
.answer-title { font-weight: var(--fw-semi); color: var(--text-strong); font-size: var(--fs-md); }
.answer-steps { margin: var(--s6) 0 0; padding-left: 0; list-style: none; counter-reset: astep; }
.answer-steps li {
  counter-increment: astep; position: relative; padding-left: 30px;
  margin-bottom: var(--s4); line-height: var(--lh-snug); font-size: var(--fs-sm);
}
.answer-steps li::before {
  content: counter(astep); position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  display: grid; place-items: center;
}

/* --- Geführter Ablauf: die Karte am Bildrand ---------------------------
   Sitzt unten rechts und verdeckt nichts. Ein Assistent, der die
   Schaltfläche überdeckt, auf die er zeigt, ist eine Zumutung.
   --------------------------------------------------------------------- */
.walk {
  position: fixed; right: var(--s7); bottom: var(--s7); z-index: 420;
  width: min(380px, calc(100vw - var(--s9)));
  background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-5), var(--sheen);
  animation: walkIn var(--t-slow) var(--e-spring);
}
@keyframes walkIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }

.walk-bar { height: 3px; background: var(--bg-sunken); }
.walk-bar i {
  display: block; height: 100%; background: var(--fill-accent);
  transition: width var(--t-slow) var(--e-out);
}

.walk-head {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s6); box-shadow: inset 0 -1px 0 var(--hairline);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-strong);
}
.walk-badge {
  font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase;
  padding: 2px var(--s4); border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent-text); flex: none;
}
.walk-icon {
  border: 0; background: transparent; color: var(--text-subtle); cursor: pointer;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-sm);
  flex: none; transition: background var(--t-fast), color var(--t-fast);
}
.walk-icon:hover { background: var(--surface-hover); color: var(--text); }

.walk-body { padding: var(--s7) var(--s6); }
.walk-step { display: flex; gap: var(--s5); }
.walk-num {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--fill-accent); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-sm);
  box-shadow: 0 2px 8px -2px var(--accent), inset 0 1px 0 rgba(255,255,255,.25);
}
.walk-do { font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--text-strong); }
.walk-hint, .walk-check {
  display: flex; gap: var(--s4); margin-top: var(--s5);
  padding: var(--s4) var(--s5); border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: var(--lh-snug);
}
.walk-hint { background: var(--bg-sunken); color: var(--text-muted); }
.walk-check { background: var(--status-pos-bg); color: var(--status-pos-fg); }
.walk-hint svg, .walk-check svg { flex: none; margin-top: 2px; width: 13px !important; height: 13px !important; }

.walk-foot {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s6); box-shadow: inset 0 1px 0 var(--hairline);
  background: var(--surface-alt);
}
.walk-dots { display: flex; gap: 5px; flex: 1 1 auto; justify-content: center; }
.walk-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong);
  cursor: pointer; transition: background var(--t-fast), transform var(--t-fast);
}
.walk-dot:hover { transform: scale(1.3); }
.walk-dot.past { background: var(--accent-border); }
.walk-dot.on { background: var(--accent); transform: scale(1.3); }

.walk-trouble { box-shadow: inset 0 1px 0 var(--hairline); }
.walk-trouble summary {
  padding: var(--s4) var(--s6); cursor: pointer; font-size: var(--fs-sm);
  color: var(--warn-500); display: flex; align-items: center; gap: var(--s4);
}
.walk-trouble summary svg { width: 13px !important; height: 13px !important; }
.walk-tr { padding: 0 var(--s6) var(--s5); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.walk-tr b { display: block; color: var(--text-strong); margin-bottom: 2px; }

.walk-mini {
  position: fixed; right: var(--s7); bottom: var(--s7); z-index: 420;
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--accent-border);
  box-shadow: var(--sh-4), var(--sheen); cursor: pointer;
  font-size: var(--fs-sm); color: var(--text);
}
.walk-mini-num {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); padding: 1px var(--s4);
  border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.walk-donemark {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto var(--s5);
  display: grid; place-items: center; background: var(--fill-accent); color: #fff;
  box-shadow: 0 4px 16px -4px var(--accent);
  animation: pop 520ms var(--e-spring);
}
.walk-donemark svg { width: 22px !important; height: 22px !important; }
.walk-done .walk-body { text-align: center; }

/* Die schwebende Aktionsleiste weicht der Ablaufkarte aus.
   Über `bottom` und nicht über `transform`: die Einblend-Animation der
   Leiste setzt bereits eine Transformation, und die letzte gewinnt. */
body.has-walk .bulkbar { bottom: 132px; }

/* --- Herzschlag der Bestellliste --------------------------------------
   Links laufen die Tageszahlen still mit, rechts meldet sich, was
   hereingekommen ist. Die Liste baut sich NICHT von selbst neu auf —
   das würde Auswahl und Scrollstand zerstören.
   --------------------------------------------------------------------- */
.pulsebar {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s4) var(--s6); margin-bottom: var(--gap);
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--fill-surface); box-shadow: var(--sh-card), var(--sheen);
  min-height: 46px;
}
.pulse-today { display: flex; align-items: center; gap: var(--s4); font-size: var(--fs-sm); }
.pulse-today b { font-variant-numeric: tabular-nums; color: var(--text-strong); }
.pulse-label { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.pulse-sep { width: 1px; height: 14px; background: var(--hairline-strong); }
/* Der Punkt schlägt langsam - das Zeichen dafür, dass der Takt läuft. */
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--pos-500); flex: none;
  animation: pulseBeat 2.8s var(--e-in-out) infinite;
}
@keyframes pulseBeat {
  0%, 100% { box-shadow: 0 0 0 0 var(--status-pos-bg); opacity: 1; }
  50% { box-shadow: 0 0 0 6px transparent; opacity: .55; }
}

.pulse-idle { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-xs); color: var(--text-subtle); }
.pulse-idle svg { width: 13px !important; height: 13px !important; }

/* Der Teil, auf den man sich freut. Grün, plastisch, mit einer Zahl,
   die hereinspringt — eine neue Bestellung ist eine gute Nachricht und
   darf so aussehen. */
.pulse-new {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--s5) var(--s3) var(--s3); border-radius: var(--r-full);
  border: 1px solid var(--accent-border); background: var(--accent-soft);
  color: var(--accent-text); cursor: pointer; font-size: var(--fs-sm);
  animation: pulseIn var(--t-slow) var(--e-spring);
  transition: filter var(--t-fast), box-shadow var(--t-fast);
}
.pulse-new:hover { filter: brightness(.97); box-shadow: var(--glow-accent); }
@keyframes pulseIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } }

.pulse-burst {
  display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px;
  border-radius: var(--r-full); background: var(--fill-accent); color: #fff;
  font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px -2px var(--accent), inset 0 1px 0 rgba(255,255,255,.25);
  animation: burst 1.9s var(--e-in-out) infinite;
}
@keyframes burst {
  0%, 100% { box-shadow: 0 2px 8px -2px var(--accent), inset 0 1px 0 rgba(255,255,255,.25); }
  50% { box-shadow: 0 2px 16px 0 var(--accent), inset 0 1px 0 rgba(255,255,255,.25); }
}

.pulse-names { display: flex; align-items: center; gap: var(--s3); }
.pulse-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px var(--s4); border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--hairline);
  font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap;
}
.pulse-chip i { width: 6px; height: 6px; border-radius: 2px; flex: none; }

@media (max-width: 1200px) {
  .pulse-names { display: none; }
}

/* --- Kommandozentrale -------------------------------------------------
   Je Fassade eine Kachel. Der Farbstreifen oben trägt die Farbe des
   Shopfaces — dieselbe, die in jeder anderen Ansicht daneben steht.
   --------------------------------------------------------------------- */
.shoptile {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--fill-surface); box-shadow: var(--sh-card), var(--sheen);
  overflow: hidden;
  transition: box-shadow var(--t-base), transform var(--t-base) var(--e-out);
}
.shoptile:hover { box-shadow: var(--sh-card-hover), var(--sheen); transform: translateY(-1px); }
.shoptile-bar { height: 3px; flex: none; }
/* Eine abgedrehte Fassade sieht auch abgedreht aus: entsättigt, mit
   rotem Rand. Man soll sie im Gitter sofort finden. */
.shoptile.state-paused { border-color: var(--warn-500); }
.shoptile.state-closed { border-color: var(--neg-500); }
.shoptile.state-closed .shoptile-nums,
.shoptile.state-closed .shoptile-bar { filter: grayscale(.75); opacity: .7; }

.shoptile-head { display: flex; align-items: flex-start; gap: var(--s5); padding: var(--card-pad); }
.shoptile-code {
  display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px;
  border-radius: var(--r-sm); color: #fff; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: .04em; box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.shoptile-name { font-weight: var(--fw-semi); color: var(--text-strong); }

.shoptile-nums { display: flex; gap: var(--s8); padding: 0 var(--card-pad) var(--s6); }
.shoptile-nums .l { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: var(--fw-bold); }
.shoptile-nums .v {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 650;
  color: var(--text-strong); letter-spacing: -.02em; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.shoptile-tasks {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  padding: var(--s5) var(--card-pad);
  box-shadow: inset 0 1px 0 var(--hairline);
  min-height: 44px; align-items: center;
}
.task-chip {
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: 2px var(--s4); border-radius: var(--r-full);
  border: 1px solid var(--status-warn-bg); background: var(--status-warn-bg);
  color: var(--status-warn-fg); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  cursor: pointer; transition: filter var(--t-fast);
}
.task-chip:hover { filter: brightness(.95); }
.task-chip b { font-variant-numeric: tabular-nums; }

.shoptile-foot {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--card-pad);
  box-shadow: inset 0 1px 0 var(--hairline);
}
.shoptile-note {
  padding: var(--s4) var(--card-pad); font-size: var(--fs-2xs); line-height: var(--lh-snug);
  background: var(--status-warn-bg); color: var(--status-warn-fg);
}

.brake-pick { display: flex; flex-direction: column; gap: var(--s4); }
.brake-option {
  text-align: left; padding: var(--s5) var(--s6); border-radius: var(--r-lg);
  border: 1px solid var(--hairline-strong); background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.brake-option:hover { background: var(--surface-hover); }
.brake-option.active { border-color: var(--neg-500); background: var(--status-neg-bg); }

/* --- Benutzerverwaltung ----------------------------------------------- */
.lvl {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px;
  border-radius: var(--r-sm); font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.lvl.edit { background: var(--status-pos-bg); color: var(--status-pos-fg); }
.lvl.view { background: var(--status-info-bg); color: var(--status-info-fg); }
.lvl.none { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

.preset-card, .preset-option {
  border: 1px solid var(--hairline-strong); border-radius: var(--r-lg);
  padding: var(--s5) var(--s6); background: var(--surface); text-align: left;
}
.preset-option { cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); width: 100%; }
.preset-option:hover { background: var(--surface-hover); }
.preset-option.active { border-color: var(--accent); background: var(--accent-soft); }
.preset-name { font-weight: var(--fw-semi); color: var(--text-strong); margin-bottom: 2px; }
.preset-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4); }

.perm-group { margin-bottom: var(--s6); }
.perm-group-label {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-subtle); margin-bottom: var(--s3);
}
.perm-row {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s4) 0; box-shadow: inset 0 -1px 0 var(--hairline-soft);
}
.perm-levels { display: inline-flex; gap: 2px; padding: 2px; flex: none;
  background: var(--fill-sunken); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.perm-level {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  padding: 3px var(--s4); border-radius: calc(var(--r-md) - 2px);
  font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--text-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.perm-level:hover { color: var(--text); background: var(--surface-hover); }
.perm-level.active {
  background: var(--fill-surface); color: var(--text-strong); font-weight: var(--fw-semi);
  box-shadow: 0 1px 2px rgba(19,33,25,.1), 0 0 0 1px var(--hairline);
}

/* --- Tages- und Wochenverkauf -----------------------------------------
   Das Wochenraster: eine Zeile je Woche, eine Spalte je Wochentag.
   Fünf Farbstufen, nicht stufenlos — ein weicher Verlauf sieht hübsch
   aus, aber zwei benachbarte Töne lassen sich nicht auseinanderhalten,
   und dann trägt das Bild keine Aussage mehr.
   --------------------------------------------------------------------- */
.sales-big {
  font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 660;
  letter-spacing: -.032em; line-height: 1.05; color: var(--text-strong);
  font-variant-numeric: tabular-nums; font-feature-settings: var(--num-features);
}

.heat { display: flex; flex-direction: column; gap: 3px; }
.heat-row { display: grid; grid-template-columns: 44px repeat(7, 1fr) 74px; gap: 3px; align-items: center; }
.heat-head { margin-bottom: var(--s2); }
.heat-day, .heat-label {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-subtle);
  text-align: center; letter-spacing: .06em;
}
.heat-label { text-align: right; padding-right: var(--s3); font-variant-numeric: tabular-nums; }
.heat-sum {
  font-size: var(--fs-2xs); color: var(--text-muted); text-align: right;
  font-variant-numeric: tabular-nums; font-weight: var(--fw-semi);
}
.heat-head .heat-sum { color: var(--text-subtle); font-weight: var(--fw-bold); letter-spacing: .06em; }

.heat-cell {
  height: 22px; border-radius: var(--r-xs); cursor: default;
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.heat-cell:hover { transform: scale(1.14); box-shadow: 0 0 0 1px var(--accent), var(--sh-2); z-index: 1; }
.heat-cell.empty { background: transparent; box-shadow: none; }
.heat-cell.l0 { background: var(--bg-sunken); }
.heat-cell.l1 { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.heat-cell.l2 { background: color-mix(in srgb, var(--accent) 42%, var(--surface)); }
.heat-cell.l3 { background: color-mix(in srgb, var(--accent) 68%, var(--surface)); }
.heat-cell.l4 { background: var(--accent); }
/* Heute bekommt einen Rahmen statt einer weiteren Farbe — die Farbskala
   trägt bereits eine Bedeutung und darf keine zweite bekommen. */
.heat-cell.today { box-shadow: inset 0 0 0 2px var(--gold); }

.hourchart {
  display: flex; align-items: flex-end; gap: 2px; height: 150px;
  padding-top: var(--s5);
}
.hour-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.hour-bar {
  background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px;
  opacity: .85; transition: opacity var(--t-fast);
}
.hour-col:hover .hour-bar { opacity: 1; }
.hour-label {
  font-size: 9px; color: var(--text-subtle); text-align: center; margin-top: 3px;
  font-variant-numeric: tabular-nums; height: 12px;
}

.card.mt { margin-top: var(--gap); }

/* Fingerzeig auf die Smartphone-Fassung. Sitzt unten, damit er nichts
   verdeckt, und verschwindet endgültig, sobald man ihn wegklickt. */
.mobile-hint {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 900;
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s5) var(--s6); border-radius: var(--r-card);
  background: var(--fill-surface); border: 1px solid var(--hairline);
  box-shadow: var(--sh-4), var(--sheen);
  font-size: var(--fs-xs); color: var(--text-muted);
  animation: viewIn 260ms var(--e-out) both;
}
.mobile-hint b { display: block; color: var(--text-strong); font-size: var(--fs-sm); }
.mobile-hint > svg { width: 20px !important; height: 20px !important; flex: none; color: var(--accent); }

/* =====================================================================
   Die Bestellliste

   Keine Tabelle. Eine Tabelle zwingt jede Zeile in dieselbe Höhe und
   jede Spalte in dieselbe Breite; hier trägt die eine Zeile vier Zeilen
   Text und die nächste eine — und beides muss richtig aussehen.

   Die Spalten folgen der Frage, in der man liest: wann · wer · was ·
   wohin · Zustand · Betrag · Handlung.
   ===================================================================== */
.olist {
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--fill-surface); box-shadow: var(--sh-card), var(--sheen);
  overflow: clip;
}

.olist-head, .orow {
  display: grid;
  grid-template-columns:
    34px                      /* Auswahl      */
    96px                      /* wann         */
    minmax(150px, 1.1fr)      /* wer          */
    minmax(210px, 1.6fr)      /* was          */
    minmax(120px, .8fr)       /* wohin        */
    minmax(130px, .9fr)       /* Zustand      */
    110px                     /* Betrag       */
    124px;                    /* Handlung     */
  gap: var(--s5);
  align-items: start;
}

.olist-head {
  padding: var(--s4) var(--s6);
  background: var(--fill-sunken);
  box-shadow: inset 0 -1px 0 var(--hairline);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  align-items: center; position: sticky; top: 0; z-index: 3;
}
.olist-head .sortable { cursor: pointer; }
.olist-head .sortable:hover { color: var(--text-strong); }
.olist-head .arrow { margin-left: 3px; color: var(--accent); }
.olist-head .right { text-align: right; display: block; }

.orow {
  padding: var(--s5) var(--s6);
  box-shadow: inset 0 -1px 0 var(--hairline-soft);
  cursor: pointer; position: relative;
  transition: background var(--t-fast);
}
.orow:last-child { box-shadow: none; }
.orow:hover { background: var(--surface-hover); }
.orow.selected { background: var(--accent-soft); }

/* Ein schmaler Streifen links sagt den Zustand, bevor man liest. */
.orow.blocked::before, .orow.flagged::before, .orow.fresh::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.orow.blocked::before { background: var(--neg-500); }
.orow.flagged::before { background: var(--warn-500); }
.orow.fresh::before   { background: var(--accent); }
/* Sperr- oder Beobachtungsliste: rot umrandet und rot hinterlegt -
   diese Bestellung soll beim Überfliegen der Liste auffallen. */
.orow.watch {
  box-shadow: inset 0 0 0 2px var(--signal-neg);
  background: color-mix(in srgb, var(--signal-neg) 7%, var(--fill-surface));
  border-radius: var(--r-md);
}
.orow.cancelled { opacity: .5; }

/* --- Wann ------------------------------------------------------------ */
.orow-when { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-2xs); color: var(--text-muted); }
.orow-when b { font-size: var(--fs-xs); color: var(--text-strong); font-weight: var(--fw-semi); }
.orow-new {
  display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: var(--r-full);
  background: var(--accent); color: #fff; font-size: 9px; font-weight: var(--fw-bold);
  letter-spacing: .08em; width: fit-content;
  animation: freshPulse 2.6s var(--e-in-out) infinite;
}
@keyframes freshPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* --- Wer -------------------------------------------------------------- */
.orow-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.orow-no {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--accent); letter-spacing: -.01em;
}
.orow-cust {
  font-weight: var(--fw-semi); color: var(--text-strong); font-size: var(--fs-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orow-meta {
  font-size: var(--fs-2xs); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orow-meta.more { color: var(--text-subtle); font-style: italic; }

/* --- Was -------------------------------------------------------------- */
.orow-what { display: flex; gap: var(--s5); min-width: 0; }
.orow-items { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.orow-pname {
  font-size: var(--fs-sm); color: var(--text-strong); line-height: var(--lh-snug);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Die Produktkachel: Sinnbild der Warengruppe auf ihrer Farbe. Sobald es
   Produktfotos gibt, tritt das Foto an dieselbe Stelle. */
/* Grau, nicht bunt: in dieser Liste bedeutet Farbe den Zustand. Das
   Sinnbild unterscheidet die Warengruppen, die Fläche hält sich heraus. */
.ptile {
  position: relative; flex: none; display: grid; place-items: center;
  border-radius: var(--r-md); overflow: clip;
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text-muted);
}
.ptile svg { width: 55% !important; height: 55% !important; }
.ptile.empty { color: var(--text-subtle); }
/* Produktfoto (Inhaber 17.09.2026): weißer Grund, ganzes Produkt sichtbar, scharf. */
.ptile-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 3px; background: #fff;
  image-rendering: auto; user-select: none;
}
.ptile.mit-foto { background: #fff; }
.ptile.mit-foto > svg { visibility: hidden; }
.ptile-qty { z-index: 1; }
.ptile-qty {
  position: absolute; right: 2px; bottom: 1px;
  font-size: 9px; font-weight: var(--fw-bold); line-height: 1;
  padding: 1px 3px; border-radius: 4px;
  background: var(--text-muted); color: var(--surface);
}
.ptiles { display: flex; align-items: center; gap: var(--s3); flex: none; }
.ptile-more {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-muted);
  padding: 2px 5px; border-radius: var(--r-sm); background: var(--bg-sunken);
}

/* --- Wohin ------------------------------------------------------------ */
.orow-where { min-width: 0; display: flex; flex-direction: column; gap: var(--s3); font-size: var(--fs-xs); }
.orow-railwrap { min-width: 90px; }

/* --- Zustand ---------------------------------------------------------- */
.orow-state { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.orow-issue { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* --- Betrag ----------------------------------------------------------- */
.orow-sum { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.orow-gross { font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-sm); }

/* --- Handlung --------------------------------------------------------- */
/* Gestapelt wie im Seller Central: die Knöpfe sind unterschiedlich
   wichtig, und untereinander liest man diese Reihenfolge. */
.orow-actions { display: flex; flex-direction: column; gap: var(--s3); }
.orow-actions .btn { justify-content: flex-start; width: 100%; }

/* Schmale Fenster: die Liste verliert Spalten, statt zu schrumpfen -
   was übrig bleibt, ist das, wonach man sucht. */
@media (max-width: 1500px) {
  .olist-head, .orow { grid-template-columns: 34px 88px minmax(140px,1fr) minmax(190px,1.4fr) minmax(120px,.8fr) 106px 118px; }
  .orow-state { display: none; }
  .olist-head > :nth-child(6) { display: none; }
}
@media (max-width: 1200px) {
  .olist-head, .orow { grid-template-columns: 34px 84px minmax(130px,1fr) minmax(170px,1.3fr) 100px 112px; }
  .orow-where { display: none; }
  .olist-head > :nth-child(5) { display: none; }
}

/* =====================================================================
   Der Hinweis, den man nicht übersehen darf

   Die Stufe zwischen der Meldung, die verschwindet, und dem Fenster,
   das alles blockiert. Sie schiebt sich von rechts herein, legt sich
   aber nicht über die Arbeitsfläche: man sieht weiter, worum es geht.
   ===================================================================== */
.sheet {
  position: fixed; right: var(--s6); bottom: var(--s6); z-index: 1200;
  width: min(420px, calc(100vw - var(--s6) * 2));
  border-radius: var(--r-card); overflow: clip;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--sh-4), 0 0 0 1px rgba(0,0,0,.04);
  animation: sheetIn 280ms var(--e-spring) both;
}
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(14px) translateX(16px) scale(.97); }
}
.sheet.leaving { animation: sheetOut 200ms var(--e-in-out) both; }
@keyframes sheetOut { to { opacity: 0; transform: translateY(8px) scale(.98); } }

/* Der farbige Streifen oben sagt die Schwere, bevor man liest. */
.sheet-bar { height: 4px; background: var(--warn-500); }
.sheet.neg .sheet-bar { background: var(--neg-500); }
.sheet.pos .sheet-bar { background: var(--pos-500); }
.sheet.info .sheet-bar { background: var(--accent); }

.sheet-body { padding: var(--s6) var(--card-pad) var(--s5); display: flex; flex-direction: column; gap: var(--s5); }
.sheet-head { display: flex; align-items: flex-start; gap: var(--s5); }
.sheet-icon { flex: none; color: var(--status-warn-fg); margin-top: 1px; }
.sheet.neg .sheet-icon { color: var(--status-neg-fg); }
.sheet.pos .sheet-icon { color: var(--status-pos-fg); }
.sheet-icon svg { width: 20px !important; height: 20px !important; }
.sheet-title {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 620;
  color: var(--text-strong); line-height: var(--lh-snug); letter-spacing: -.012em;
}
.sheet-msg { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 3px; line-height: var(--lh-normal); }

.sheet-points { display: flex; flex-direction: column; gap: var(--s4); }
.sheet-point {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s5); border-radius: var(--r-md);
  background: var(--fill-sunken); font-size: var(--fs-xs); line-height: var(--lh-snug);
}
.sheet-point b { color: var(--text-strong); font-size: var(--fs-sm); }
.sheet-point span { color: var(--text-muted); }
.sheet-point .btn { align-self: flex-start; margin-top: var(--s3); }

.sheet-foot { display: flex; gap: var(--s4); }
.sheet-foot .btn { justify-content: center; }

@media (max-width: 640px) {
  .sheet { left: var(--s5); right: var(--s5); bottom: var(--s5); width: auto; }
}

/* =====================================================================
   Zahlungen
   ===================================================================== */
.pay-providers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s5); }
.pay-provider {
  padding: var(--s5) var(--s6); border-radius: var(--r-card);
  border: 1px solid var(--hairline); background: var(--fill-surface);
  box-shadow: var(--sh-card), var(--sheen);
}
.pay-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn-500); flex: none; }
.pay-provider.live .pay-dot { background: var(--pos-500); }

/* =====================================================================
   Auskunft des Partners
   Zahlen aus dem eigenen Bestand. Jede trägt ihre Quelle — sonst ist
   eine Zahl auf einem Bildschirm nur eine Behauptung.
   ===================================================================== */
.fact-card {
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--fill-surface); box-shadow: var(--sh-card), var(--sheen);
  padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--s5);
  border-left: 3px solid var(--accent);
}
.fact-headline {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 620;
  color: var(--text-strong); letter-spacing: -.012em; line-height: var(--lh-snug);
}
.fact-grid { display: flex; flex-direction: column; }
.fact-row {
  display: flex; gap: var(--s5); align-items: baseline;
  padding: var(--s4) 0; box-shadow: inset 0 -1px 0 var(--hairline-soft);
  font-size: var(--fs-sm);
}
.fact-row:last-child { box-shadow: none; }
.fact-label { flex: 0 0 40%; color: var(--text-muted); font-size: var(--fs-xs); }
.fact-value { flex: 1 1 auto; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fact-row.pos  .fact-value { color: var(--status-pos-fg); font-weight: var(--fw-semi); }
.fact-row.warn .fact-value { color: var(--status-warn-fg); font-weight: var(--fw-semi); }
.fact-row.neg  .fact-value { color: var(--status-neg-fg); font-weight: var(--fw-semi); }
.fact-text { margin: 0; font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-normal); }
.fact-foot { display: flex; align-items: center; gap: var(--s4); }
.fact-source { font-size: var(--fs-2xs); color: var(--text-subtle); }

.ask-chip.data {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-700, var(--text-strong));
}

/* =====================================================================
   Wächter
   Die Lage in einem Satz, dann die Befunde. Ruhe sieht ruhig aus —
   das ist wichtig: wenn nichts los ist, darf die Seite nicht so
   aussehen, als wäre etwas los.
   ===================================================================== */
.gd-state {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s6) var(--card-pad); border-radius: var(--r-card);
  border: 1px solid var(--hairline); background: var(--fill-surface);
  box-shadow: var(--sh-card), var(--sheen);
}
.gd-state svg { width: 20px !important; height: 20px !important; flex: none; }
.gd-state.quiet { color: var(--status-pos-fg); border-color: color-mix(in srgb, var(--pos-500) 30%, transparent); }
.gd-state.warn  { color: var(--status-warn-fg); background: var(--status-warn-bg); border-color: color-mix(in srgb, var(--warn-500) 35%, transparent); }
.gd-state.alarm { color: var(--status-neg-fg); background: var(--status-neg-bg); border-color: color-mix(in srgb, var(--neg-500) 40%, transparent); }

.gd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--gap); }
.gd-card {
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--card-pad); border-radius: var(--r-card);
  border: 1px solid var(--hairline); background: var(--fill-surface);
  box-shadow: var(--sh-card), var(--sheen);
  border-left: 3px solid var(--text-subtle);
}
.gd-card.alarm { border-left-color: var(--neg-500); }
.gd-card.warn  { border-left-color: var(--warn-500); }
.gd-card.info  { border-left-color: var(--info-500, var(--accent)); }

.gd-head { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.gd-title { color: var(--text-strong); font-size: var(--fs-md); }
.gd-amount { font-weight: var(--fw-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.gd-detail { margin: 0; font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-normal); }
.gd-action {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s5); border-radius: var(--r-md);
  background: var(--fill-sunken); font-size: var(--fs-xs); color: var(--text-muted);
}
.gd-action svg { width: 14px !important; height: 14px !important; flex: none; margin-top: 1px; color: var(--accent); }

.gd-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s5); }
.gd-rule { display: flex; flex-direction: column; gap: 2px; }
.gd-rule b { font-size: var(--fs-sm); color: var(--text-strong); }
.gd-rule span { font-size: var(--fs-2xs); color: var(--text-muted); line-height: var(--lh-snug); }

/* =====================================================================
   Probelauf
   ===================================================================== */
.trun-state {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s6) var(--card-pad); border-radius: var(--r-card);
  border: 1px solid color-mix(in srgb, var(--warn-500) 40%, transparent);
  background: var(--status-warn-bg); color: var(--status-warn-fg);
}
.trun-state.live {
  border-color: color-mix(in srgb, var(--pos-500) 40%, transparent);
  background: var(--status-pos-bg); color: var(--status-pos-fg);
}
.trun-statedot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.trun-state .subtle { color: inherit; opacity: .8; }

/* Der Bestelleingang zum Üben: läuft oder steht, mehr gibt es nicht zu
   wissen. Der Punkt schlägt, solange er läuft. */
.feed-state {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s5) var(--s6); border-radius: var(--r-lg);
  background: var(--fill-sunken); box-shadow: inset 0 0 0 1px var(--hairline);
}
.feed-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-subtle); flex: none; }
.feed-state.on { background: var(--status-pos-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pos-500) 30%, transparent); }
.feed-state.on .feed-dot { background: var(--pos-500); animation: pulseBeat 2.8s var(--e-in-out) infinite; }

.check-list { display: flex; flex-direction: column; }
.check-row {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s5) 0; box-shadow: inset 0 -1px 0 var(--hairline-soft);
  font-size: var(--fs-sm);
}
.check-row:last-child { box-shadow: none; }
.check-mark {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-sunken); color: var(--text-subtle); flex: none;
}
.check-mark svg { width: 12px !important; height: 12px !important; }
.check-row.ok .check-mark { background: var(--pos-500); color: #fff; }

.trun-ready {
  display: flex; align-items: flex-start; gap: var(--s5); margin-top: var(--s6);
  padding: var(--s5) var(--s6); border-radius: var(--r-lg);
  background: var(--status-pos-bg); color: var(--status-pos-fg);
}
.trun-ready svg { width: 18px !important; height: 18px !important; flex: none; margin-top: 1px; }

.trun-scenarios { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s5); }
.trun-scenario {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: var(--s5) var(--s6); border-radius: var(--r-lg);
  border: 1px solid var(--hairline-strong); background: var(--surface);
  font-family: inherit; color: inherit;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.trun-scenario:hover { border-color: var(--accent); background: var(--surface-hover); }
.trun-scenario b { font-size: var(--fs-sm); color: var(--text-strong); }
.trun-scenario span { font-size: var(--fs-2xs); color: var(--text-muted); line-height: var(--lh-snug); }

/* =====================================================================
   Versandweg
   Hellgrün für Erledigtes, kräftig für das Laufende, blass für das
   Kommende, rot an der Stelle, an der es hängt. Die Farbe trägt hier
   die Aussage allein — deshalb hat jeder Abschnitt zusätzlich seinen
   Namen im Titel, damit auch Vorlesewerkzeuge und Farbenblinde die
   Information bekommen.
   ===================================================================== */
.rail-wrap { display: flex; flex-direction: column; gap: var(--s4); }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 3px; align-items: stretch;
}
.rail-seg {
  height: 22px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  transition: background var(--t-base), color var(--t-base);
  overflow: hidden; white-space: nowrap;
}
.rail-label { padding: 0 var(--s3); overflow: hidden; text-overflow: ellipsis; }

.rail-seg.done   { background: color-mix(in srgb, var(--pos-500) 26%, var(--surface)); color: var(--status-pos-fg); }
.rail-seg.active { background: var(--pos-500); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.rail-seg.open   { background: var(--bg-sunken); color: var(--text-subtle); }
.rail-seg.blocked {
  background: var(--neg-500); color: #fff;
  animation: railPulse 2.4s var(--e-in-out) infinite;
}
@keyframes railPulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

.rail.compact { gap: 2px; }
.rail.compact .rail-seg { height: 5px; border-radius: 999px; }
.rail.compact .rail-seg.blocked { animation: none; }

.rail-note { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-xs); color: var(--text-muted); }
.rail-note.attention { color: var(--status-neg-fg); font-weight: var(--fw-semi); }
.rail-note svg { width: 14px !important; height: 14px !important; flex: none; }

.railchip { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--fs-xs); white-space: nowrap; }
.railchip i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-subtle); }
.railchip.done i   { background: var(--pos-500); }
.railchip.active i { background: var(--pos-500); }
.railchip.blocked  { color: var(--status-neg-fg); font-weight: var(--fw-semi); }
.railchip.blocked i { background: var(--neg-500); }

/* =====================================================================
   Packtisch
   Links die Warteschlange, rechts die eine Bestellung. Fünf Kacheln,
   von denen immer genau eine etwas anbietet.
   ===================================================================== */
/* Die drei Reiter des Packtischs. Die Zahl steht über dem Wort - man
   sucht die Menge, nicht den Namen. */
.ff-tabs { display: flex; gap: var(--s4); margin-bottom: var(--gap); flex-wrap: wrap; padding: 3px 2px 6px; }
.ff-tab {
  --tab: var(--text-muted);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 1px; min-width: 140px;
  padding: var(--s5) var(--s6); border-radius: var(--r-card);
  border: 1px solid var(--hairline); background: var(--fill-surface);
  box-shadow: var(--sh-card), var(--sheen);
  text-align: left; cursor: pointer; font-family: inherit;
  transition: border-color var(--t-base), transform var(--t-fast) var(--e-out),
              box-shadow var(--t-base);
}
.ff-tab:hover { transform: translateY(-1px); box-shadow: var(--sh-card-hover), var(--sheen); }
.ff-tab:hover::after { opacity: .05; }
.ff-tab:active { transform: translateY(0) scale(.985); transition-duration: 70ms; }
.ff-tab:focus-visible { outline: 2px solid var(--tab); outline-offset: 2px; }

/* Wie in der Fächerleiste der Bestellungen: der gewählte Reiter nimmt
   den Ton seines Faches an, statt ihn nur am Rand zu tragen. */
.ff-tab::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--tab);
  opacity: 0; transition: opacity var(--t-base) var(--e-out);
  pointer-events: none;
}
.ff-tab::before {
  content: ""; position: absolute; left: 50%; top: 0; height: 3px; width: 0;
  transform: translateX(-50%); border-radius: 0 0 3px 3px;
  background: var(--tab); opacity: 0;
  transition: width var(--t-base) var(--e-out), opacity var(--t-fast);
}
.ff-tabcount, .ff-tablabel { position: relative; }
.ff-tabcount {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 650;
  color: var(--tab); letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ff-tablabel {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
  transition: color var(--t-base);
}
/* Nicht versendet ist die Arbeit - grün. Brauchen jemanden ist das
   Problem - rot. Versendet ist vorbei - grau, damit es nicht mit der
   Arbeitsliste um Aufmerksamkeit streitet. */
.ff-tab.accent { --tab: var(--signal-pos); }
.ff-tab.neg    { --tab: var(--signal-neg); }
.ff-tab.done   { --tab: var(--signal-quiet); }
.ff-tab.on {
  border-color: color-mix(in srgb, var(--tab) 52%, var(--hairline));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--tab) 13%, transparent),
    0 8px 20px -10px color-mix(in srgb, var(--tab) 70%, transparent),
    var(--sheen);
}
.ff-tab.on::after { opacity: .09; }
.ff-tab.on::before { width: calc(100% - 26px); opacity: 1; }
.ff-tab.on .ff-tablabel { color: var(--text-strong); }

/* --- Der Rückblick ---------------------------------------------------
   Ausgegraut, weil erledigt. Nicht unsichtbar, weil man nachsehen
   können muss - aber deutlich ruhiger als die Arbeitsliste. */
.ff-donewrap {
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--fill-surface); box-shadow: var(--sh-card), var(--sheen); overflow: clip;
}
.ff-donehead {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--card-pad); box-shadow: inset 0 -1px 0 var(--hairline);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.ff-donelist { display: flex; flex-direction: column; }
.ff-donerow {
  display: flex; align-items: center; gap: var(--s5); width: 100%;
  padding: var(--s5) var(--card-pad); border: 0; background: transparent;
  text-align: left; font-family: inherit; color: inherit; cursor: pointer;
  box-shadow: inset 0 -1px 0 var(--hairline-soft);
  opacity: .62; transition: opacity var(--t-fast), background var(--t-fast);
}
.ff-doneitem:last-child .ff-donerow { box-shadow: none; }
.ff-donerow:hover { opacity: 1; background: var(--surface-hover); }
/* Aufgeklappt: die Zeile tritt aus dem Grau heraus - was man gerade
   ansieht, ist nicht mehr erledigt-und-vergessen. */
.ff-donerow.open { opacity: 1; background: var(--surface-hover); }
.ff-donechev { flex: none; color: var(--text-subtle); margin-left: var(--s4); }

/* --- Was an einer fertigen Bestellung noch zu tun ist ----------------
   Kein Weg zurück in die Arbeitsliste: nachdrucken, nachsehen,
   nachverfolgen. Mehr braucht eine versendete Bestellung nicht. */
.ff-donedetail {
  padding: var(--s6) var(--card-pad) var(--s6);
  background: var(--surface-sunken, var(--bg));
  box-shadow: inset 0 1px 0 var(--hairline), inset 0 -1px 0 var(--hairline);
}
.ff-donecols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s6); margin-bottom: var(--s6);
}
.ff-donelabel {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s3);
}
.ff-doneaddr { font-size: var(--fs-sm); line-height: 1.5; }
.ff-doneaddr b { color: var(--text-strong); }
.ff-donefacts { font-size: var(--fs-sm); line-height: 1.7; }
.ff-doneactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.ff-donecheck {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--pos-500); color: #fff; flex: none;
}
.ff-donecheck svg { width: 14px !important; height: 14px !important; }
.ff-donemeta { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }
.ff-doneright { text-align: right; flex: none; }
.ff-doneright .num { font-weight: var(--fw-semi); color: var(--text-strong); font-size: var(--fs-sm); }

/* =====================================================================
   Versandpartner

   Links die Warteschlangen, rechts die Mappen. Zwei Spalten, weil man
   beim Erzeugen einer Mappe sehen will, was aus der letzten geworden
   ist - sonst erzeugt man zwei für dieselbe Ware.
   ===================================================================== */
.sup-cols {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--gap); align-items: start;
}
@media (max-width: 1180px) { .sup-cols { grid-template-columns: minmax(0, 1fr); } }

.sup-group + .sup-group { margin-top: var(--s6); padding-top: var(--s6); box-shadow: inset 0 1px 0 var(--hairline); }
.sup-grouphead { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s5); }
.sup-grouphead b { color: var(--text-strong); }
.sup-grouphead svg { color: var(--text-muted); }

.sup-orders { display: flex; flex-direction: column; }
.sup-order {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s4) var(--s3); border-radius: var(--r-sm);
  font-size: var(--fs-sm); cursor: pointer;
  transition: background var(--t-fast);
}
.sup-order:hover { background: var(--surface-hover); }
.sup-order input { flex: none; accent-color: var(--accent); }
.sup-order .num { font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: var(--fw-semi); }

.sup-runs { display: flex; flex-direction: column; gap: var(--s5); }
.sup-run {
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: var(--s5) var(--s6); background: var(--surface);
}
/* Überfällig heißt: übergeben, Zusage abgelaufen, nichts beim
   Zusteller. Das gehört an den Rand, nicht in eine Fußnote. */
.sup-run.overdue { border-left: 3px solid var(--neg-500); }
.sup-runhead { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.sup-runmeta { font-size: var(--fs-2xs); color: var(--text-muted); margin: var(--s3) 0 var(--s4); }
.sup-runfiles { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }

/* Die vier Rückmeldungen. Ihr Unterschied ist die Auskunft: geöffnet
   heißt, die Mail kam an. Gemeldet heißt, der Partner glaubt fertig zu
   sein. Gescannt heißt, der Zusteller hat das Paket - und nur das
   Letzte zählt für uns. */
.sup-runback {
  margin-top: var(--s5); padding-top: var(--s4);
  box-shadow: inset 0 1px 0 var(--hairline);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s3) var(--s5);
}
.sup-back {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--fs-2xs); color: var(--text-subtle);
}
.sup-back svg { width: 13px !important; height: 13px !important; flex: none; }
.sup-back.on { color: var(--text); }
.sup-back.on svg { color: var(--pos-500); }

.sup-splits { display: flex; flex-direction: column; gap: var(--s6); }
.sup-split { border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: clip; }
.sup-splithead {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s6); background: var(--surface-hover);
}
.sup-splitlines { padding: var(--s4) var(--s6) var(--s5); }
.sup-splitline {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) 0; font-size: var(--fs-sm);
  box-shadow: inset 0 -1px 0 var(--hairline-soft);
}
.sup-splitline:last-child { box-shadow: none; }
.sup-splitqty { color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 34px; }

/* Ein Teil der Bestellung = ein Paket. Sie stehen untereinander, damit
   man sieht, wie viele es werden - und welcher davon noch liegt. */
.sup-part { padding: var(--s4) 0; }
.sup-part + .sup-part { box-shadow: inset 0 1px 0 var(--hairline); }
.sup-parthead { display: flex; align-items: center; gap: var(--s4); font-size: var(--fs-sm); }
.sup-parthead b { color: var(--text-strong); }
.sup-parthead svg { width: 15px !important; height: 15px !important; color: var(--text-muted); }
.sup-partlines { padding-left: calc(15px + var(--s4)); }

.sup-score { display: flex; flex-direction: column; }
.sup-scorerow {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s5) 0; box-shadow: inset 0 -1px 0 var(--hairline-soft);
}
.sup-scorerow:last-child { box-shadow: none; }
.sup-scoremeta { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }
.sup-scoreright { text-align: right; flex: none; display: flex; align-items: center; gap: var(--s4); }

/* Die Medaille. Farbe allein trägt die Aussage nicht - daneben steht
   immer das Wort. */
.sup-medal {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; color: #fff; background: var(--text-subtle);
}
.sup-medal[data-medal="gold"]   { background: linear-gradient(160deg, #e0b44a, #b08a3e); }
.sup-medal[data-medal="silber"] { background: linear-gradient(160deg, #cfd6da, #97a2a9); }
.sup-medal[data-medal="bronze"] { background: linear-gradient(160deg, #c98f63, #9a6a44); }
.sup-medal[data-medal="neu"]    { background: var(--surface-hover); color: var(--text-subtle); }
.sup-medal svg { width: 17px !important; height: 17px !important; }

/* --- Zugänge zum Partnerbereich ------------------------------------- */
.acc-list { display: flex; flex-direction: column; margin-bottom: var(--s6); }
.acc-row {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) 0; box-shadow: inset 0 -1px 0 var(--hairline-soft);
}
.acc-row.off { opacity: .6; }
.acc-sub { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }
.acc-empty { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s6); }
.acc-new { display: flex; flex-direction: column; gap: var(--s4); }
.acc-newtitle {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted);
}
/* Das Kennwort: groß, in Festbreitenschrift, damit man es am Telefon
   ohne Rückfrage durchsagen kann - 0 und O sehen verschieden aus. */
.acc-pw {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s6); border-radius: var(--r-md);
  background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--hairline);
}
.acc-pw code {
  flex: 1; font-family: var(--font-mono); font-size: 20px; font-weight: 700;
  letter-spacing: .06em; color: var(--text-strong); user-select: all;
}

.sup-form { display: flex; flex-direction: column; gap: var(--s5); }
.sup-formrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.sheet-form { padding: var(--s6) var(--card-pad) 0; }

/* Die Liste ist breiter als früher (300 px): die Karten zeigen jetzt, was
   verkauft wurde, und dafür braucht es Platz. */
.ff { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--gap); align-items: start; }

.ff-queue {
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--fill-surface); box-shadow: var(--sh-card), var(--sheen);
  overflow: clip; position: sticky; top: var(--gap);
}
.ff-queuehead {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s5) var(--s6); box-shadow: inset 0 -1px 0 var(--hairline);
}
.ff-qtitle { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.ff-qcount {
  min-width: 22px; text-align: center; padding: 1px var(--s4); border-radius: var(--r-full);
  background: var(--accent); color: #fff; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
/* Jede Bestellung eine eigene kleine Karte mit Luft dazwischen - vorher
   liefen die Zeilen "wie eine Wurst" ineinander (Befund Inhaber 14.09.2026). */
.ff-list {
  max-height: calc(100vh - 230px); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4);
  background: var(--bg-sunken);
}

.ff-row {
  /* flex: none - sonst staucht die Liste die Karten auf Zeilenhöhe
     zusammen, und man sieht nur noch die Nummer. */
  display: block; flex: none; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; color: inherit;
  padding: var(--s5) var(--s6) var(--s5) calc(var(--s6) + 2px);
  background: var(--fill-surface);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
  position: relative; overflow: hidden;
}
.ff-row:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(0,0,0,.18); }
/* Die gewählte Karte wird angetönt und bekommt eine grüne Kante - sie
   soll sich abheben, aber lesbar bleiben. */
.ff-row.on {
  background: color-mix(in srgb, var(--signal-pos) 8%, var(--fill-surface));
  border-color: color-mix(in srgb, var(--signal-pos) 45%, var(--hairline));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-pos) 14%, transparent);
}
.ff-row.on::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--signal-pos);
}
.ff-row.blocked::after {
  content: ""; position: absolute; right: var(--s5); top: var(--s5);
  width: 7px; height: 7px; border-radius: 50%; background: var(--neg-500);
}
.ff-rowtop { display: flex; align-items: center; gap: var(--s4); }
.ff-rowtop b { font-size: var(--fs-xs); letter-spacing: .01em; }
.ff-rowshop {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .06em;
  padding: 1px 6px; border-radius: 999px; background: var(--bg-sunken); color: var(--text-muted);
}
.ff-rowage { font-size: var(--fs-2xs); color: var(--text-subtle); }

/* Das Herz der Karte: was verkauft wurde. */
.ff-rowbody { display: flex; align-items: center; gap: var(--s5); margin: var(--s4) 0; }
.ff-rowitems { min-width: 0; flex: 1; }
/* Alle Positionen sichtbar, dafür klein gesetzt (Inhaber 17.09.2026). */
.ff-rowpname {
  font-size: var(--fs-xs); color: var(--text-strong); line-height: 1.28;
  margin-bottom: 2px; overflow-wrap: anywhere;
}
.ff-rowpname + .ff-rowpname { padding-top: 1px; border-top: 1px dotted var(--hairline); }
.ff-rowpname b { color: var(--signal-pos); font-variant-numeric: tabular-nums; }
.ff-rowmore { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }

.ff-rowmeta {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.ff-rowmeta b { color: var(--text); font-weight: var(--fw-semi); }
.ff-rowgross { font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-sm); }

.ff-rowprogress { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s4); }
.ff-rowbar { flex: 1; height: 4px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.ff-rowbar i { display: block; height: 100%; border-radius: inherit; background: var(--signal-pos); transition: width var(--t-base) var(--e-out); }
.ff-row.blocked .ff-rowbar i { background: var(--signal-neg); }
.ff-rowstep { font-size: var(--fs-2xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

.ff-empty, .ff-idle {
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
  padding: var(--s9) var(--s6); color: var(--text-muted); text-align: center;
}
.ff-empty svg { width: 24px !important; height: 24px !important; color: var(--pos-500); }
.ff-empty b { color: var(--text-strong); }
.ff-empty span { font-size: var(--fs-xs); }
.ff-idle { border: 1px dashed var(--hairline-strong); border-radius: var(--r-card); }

.ff-work {
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--fill-surface); box-shadow: var(--sh-card), var(--sheen);
  padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--s6);
}
.ff-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
.ff-order { display: flex; align-items: baseline; gap: var(--s4); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 640; color: var(--text-strong); letter-spacing: -.018em; }
.ff-sep { color: var(--text-subtle); }
.ff-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

.ff-block {
  display: flex; gap: var(--s5); align-items: flex-start;
  padding: var(--s5) var(--s6); border-radius: var(--r-lg);
  background: var(--status-neg-bg); color: var(--status-neg-fg);
  border: 1px solid color-mix(in srgb, var(--neg-500) 35%, transparent);
}
.ff-block svg { width: 18px !important; height: 18px !important; flex: none; margin-top: 1px; }
.ff-block b { display: block; margin-bottom: 2px; }
.ff-blockline { font-size: var(--fs-xs); line-height: var(--lh-snug); }

/* Die Kacheln. Gleich groß, in einer Reihe, in der Reihenfolge des
   Arbeitsablaufs — man liest sie wie eine Zeile und nicht wie ein
   Formular. */
.ff-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4); }
.ff-tile {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s6) var(--s5) var(--s5);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--surface); min-height: 152px;
  text-align: left; font-family: inherit; color: inherit; width: 100%;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base), background var(--t-base);
}
/* Die Kachel ist die Schaltfläche. Ein Knopf darin wäre ein zweites,
   kleineres Ziel für dieselbe Handlung - und das kleinere gewinnt
   immer, weil man es für das eigentliche hält. */
button.ff-tile { cursor: pointer; }
button.ff-tile:disabled { cursor: default; }
.ff-no {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-sunken); color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.ff-no svg { width: 13px !important; height: 13px !important; }
.ff-title { font-weight: var(--fw-semi); color: var(--text-strong); }
.ff-hint { font-size: var(--fs-2xs); color: var(--text-muted); line-height: var(--lh-snug); flex: 1 1 auto; }
.ff-at { font-size: 10px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
/* Die Aufforderung am Fuß der aktiven Kachel. Kein eigener Knopf, nur
   der Satz mit einem Pfeil - angeklickt wird die ganze Kachel. */
.ff-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s4); padding-top: var(--s4);
  box-shadow: inset 0 1px 0 var(--hairline);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent);
  line-height: 1.25;
}
.ff-cta svg { width: 15px !important; height: 15px !important; flex: none; }

/* Erledigte Kacheln, hinter denen ein Beleg liegt, sagen das leise. */
.ff-open {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s4); font-size: var(--fs-2xs); color: var(--text-subtle);
  opacity: 0; transition: opacity var(--t-fast);
}
.ff-open svg { width: 13px !important; height: 13px !important; }
.ff-tile.openable:hover .ff-open, .ff-tile.openable:focus-visible .ff-open { opacity: 1; }

/* Erledigt: zurückgenommen, aber lesbar. Das Grün sagt "erledigt", die
   gedämpfte Fläche sagt "hier ist nichts mehr zu tun". */
.ff-tile.done {
  background: color-mix(in srgb, var(--pos-500) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--pos-500) 24%, transparent);
  opacity: .78;
}
.ff-tile.done .ff-no { background: var(--pos-500); color: #fff; }
.ff-tile.done .ff-title { color: var(--status-pos-fg); }
.ff-tile.done.openable:hover { opacity: 1; border-color: color-mix(in srgb, var(--pos-500) 45%, transparent); }

/* Kommende Schritte: blass und stumm. */
.ff-tile.waiting { opacity: .42; }
.ff-tile.blocked { border-color: color-mix(in srgb, var(--neg-500) 35%, transparent); }
.ff-tile.blocked .ff-no { background: var(--status-neg-bg); color: var(--status-neg-fg); }
.ff-tile.skipped { opacity: .3; }

/* Die nächste Kachel ist die einzige, die etwas anbietet — sie darf
   auffallen und ein wenig herausstehen. */
.ff-tile.next {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--sh-2);
  transform: translateY(-2px); background: var(--fill-surface); opacity: 1;
}
.ff-tile.next .ff-no { background: var(--accent); color: #fff; }
.ff-tile.next:hover { box-shadow: 0 0 0 3px var(--accent-soft), var(--sh-3); transform: translateY(-3px); }
.ff-tile.next:active { transform: translateY(-1px); box-shadow: 0 0 0 3px var(--accent-soft), var(--sh-1); }
.ff-tile.next:disabled { opacity: .6; }

/* Die Lieferanschrift am Packtisch - gesetzt wie auf dem Etikett, damit
   man beides gegeneinander lesen kann, ohne umzudenken. */
.ff-address {
  padding: var(--s5) var(--s6); border-radius: var(--r-lg);
  border: 1px solid var(--hairline-strong); background: var(--surface);
  display: flex; flex-direction: column; gap: var(--s4);
}
.ff-address.warn { border-color: color-mix(in srgb, var(--warn-500) 45%, transparent); background: var(--status-warn-bg); }
.ff-address.bad  { border-color: color-mix(in srgb, var(--neg-500) 50%, transparent); background: var(--status-neg-bg); }

.ff-addrlabel {
  display: flex; align-items: center; gap: var(--s4);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.ff-addrbody { line-height: 1.45; }
.ff-addrname { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text-strong); }
.ff-addrline { font-size: var(--fs-sm); color: var(--text); }
.ff-addrzip { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); }
.ff-addrland { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }

.ff-addrissues { display: flex; flex-direction: column; gap: var(--s3); }
.ff-addrissue { display: flex; gap: var(--s4); font-size: var(--fs-xs); line-height: var(--lh-snug); }
.ff-addrissue b { display: block; color: var(--text-strong); }
.ff-addrissue > div > div { color: var(--text-muted); }
.ff-addrissue .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--text-subtle); }
.ff-addrissue .dot.neg { background: var(--neg-500); }
.ff-addrissue .dot.warn { background: var(--warn-500); }

.ff-track {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  padding: var(--s5) var(--s6); border-radius: var(--r-lg);
  background: var(--fill-sunken); box-shadow: inset 0 0 0 1px var(--hairline);
}
.ff-tracklabel { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }
.ff-track b { font-size: var(--fs-md); letter-spacing: .04em; }

.ff-attn { display: flex; flex-direction: column; }
.ff-attnrow { display: flex; align-items: center; gap: var(--s5); padding: var(--s5) 0; box-shadow: inset 0 -1px 0 var(--hairline-soft); }
.ff-attnrow:last-child { box-shadow: none; }
.ff-attndot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--warn-500); }
.ff-attndot.neg { background: var(--neg-500); }

@media (max-width: 1500px) {
  .ff-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1240px) {
  .ff { grid-template-columns: 1fr; }
  .ff-queue { position: static; }
  .ff-list { max-height: 280px; }
}
@media (max-width: 720px) {
  .ff-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   Momentaufnahme
   Das Brett nach dem Vorbild der "Weltweiten Momentaufnahme": eine Reihe
   gleich großer Felder, durch Haarlinien getrennt statt durch Abstände.
   Das ist kein Geschmack, sondern Lesbarkeit — gleich große Felder in
   einem geschlossenen Block liest das Auge als *eine* Aussage und
   vergleicht sie untereinander. Einzeln schwebende Karten liest es als
   sechs voneinander unabhängige Nachrichten.
   ===================================================================== */
.snapshot {
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--fill-surface); box-shadow: var(--sh-card), var(--sheen);
  overflow: clip; margin-bottom: var(--gap);
}

.snap-head {
  display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap;
  padding: var(--s5) var(--card-pad);
  box-shadow: inset 0 -1px 0 var(--hairline);
}
.snap-title { display: flex; align-items: baseline; gap: var(--s5); flex-wrap: wrap; }
.snap-title h2 {
  font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-weight);
  letter-spacing: var(--h2-track); color: var(--text-strong); margin: 0;
}
.snap-live { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--fs-2xs); color: var(--text-muted); }
.snap-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--pos-500); flex: none;
  animation: pulseBeat 2.8s var(--e-in-out) infinite;
}

/* Der Zeitraum-Umschalter. Fünf feste Spannen, kein Datumsfeld: die
   eine Frage, die hier gestellt wird, lautet "läuft es" — und die
   beantwortet man nicht mit einem Kalender. */
.snap-periods {
  margin-left: auto; display: flex; gap: 2px;
  padding: 3px; border-radius: var(--r-full); background: var(--fill-sunken);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
.snap-period {
  border: 0; background: transparent; cursor: pointer;
  padding: 4px var(--s5); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-muted);
  font-family: inherit; white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.snap-period:hover { color: var(--text-strong); }
.snap-period.on {
  background: var(--surface); color: var(--text-strong);
  box-shadow: var(--sh-1), inset 0 0 0 1px var(--hairline);
}

.snap-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px; background: var(--hairline);
}
.snap-tile {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--s6) var(--s6) 0;
  background: var(--surface); min-height: 126px;
  transition: background var(--t-fast);
}
.snap-tile:hover { background: var(--surface-hover); }

.snap-label {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.snap-value {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 650;
  letter-spacing: -.025em; color: var(--text-strong); line-height: 1.2;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
/* Die erste Kachel ist die Antwort auf die Frage; die anderen erklären
   sie. Also darf sie größer sein. */
.snap-tile.lead .snap-value { font-size: var(--fs-3xl); }

.snap-compare { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s3); }
.snap-prev { font-size: var(--fs-2xs); color: var(--text-subtle); white-space: nowrap; }

.snap-spark { width: 100%; height: 26px; display: block; margin-top: auto; }
.sp-now  { stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sp-prev { stroke: var(--text-subtle); stroke-width: 1.2; opacity: .4; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.sp-area { fill: color-mix(in srgb, var(--accent) 11%, transparent); stroke: none; }

/* Die untere Zeile: nicht wie es läuft, sondern was liegt. Jeder
   Eintrag führt dorthin, wo man ihn erledigt — eine Zahl, die man nur
   ansehen kann, ist eine halbe Zahl. */
.snap-nowbar {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s5) var(--card-pad);
  background: var(--fill-sunken); box-shadow: inset 0 1px 0 var(--hairline);
}
.snap-nowlabel {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: .1em; margin-right: var(--s2);
}
.snap-now {
  display: inline-flex; align-items: baseline; gap: var(--s3);
  padding: 3px var(--s5); border-radius: var(--r-full);
  border: 1px solid var(--hairline-strong); background: var(--surface);
  font-size: var(--fs-xs); color: var(--text); font-family: inherit; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.snap-now:hover { background: var(--surface-hover); transform: translateY(-1px); }
.snap-now b { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--text-strong); }
.snap-now.accent { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.snap-now.pos  b { color: var(--status-pos-fg); }
.snap-now.warn { border-color: color-mix(in srgb, var(--warn-500) 45%, transparent); }
.snap-now.warn b { color: var(--status-warn-fg); }
.snap-now.neg  { border-color: color-mix(in srgb, var(--neg-500) 50%, transparent); background: var(--status-neg-bg); }
.snap-now.neg b { color: var(--status-neg-fg); }
.snap-openamount { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Schmale Fenster: sechs Felder nebeneinander werden zu zweien
   untereinander, bevor die Zahlen umbrechen. */
@media (max-width: 1180px) {
  .snap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .snap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snap-periods { margin-left: 0; width: 100%; overflow-x: auto; }
}

/* --- Arbeitsvorrat der Bestellabwicklung -----------------------------
   Die Leiste ist der Arbeitstag: links, was jetzt zu tun ist, rechts,
   was nur nachzuschlagen ist. Die Zahl steht über der Beschriftung und
   nicht daneben — man sucht die Menge, nicht den Namen.
   --------------------------------------------------------------------- */
/* Oben und unten etwas Luft: die Kachel hebt sich beim Überfahren um
   einen Punkt und trägt im gewählten Zustand einen weichen Schein.
   Ohne diesen Rand schnitte der waagrechte Rollbereich beides ab. */
.workbar {
  display: flex; align-items: stretch; gap: var(--s2);
  margin-bottom: var(--gap); overflow-x: auto;
  padding: 3px 2px 6px;
}
.wb-tab {
  --wb: var(--text-muted);
  /* Alle Kacheln gleich breit - unabhängig davon, wie lang ihr Name ist
     (Wunsch Inhaber 14.09.2026). Die Leiste teilt die Breite gerecht auf;
     wird es zu eng, scrollt sie, statt Kacheln zu stauchen. */
  position: relative; flex: 1 1 0; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 118px; padding: var(--s5) var(--s6);
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--fill-surface); box-shadow: var(--sh-card), var(--sheen);
  cursor: pointer; text-align: left;
  transition: border-color var(--t-base), box-shadow var(--t-base),
              transform var(--t-fast) var(--e-out);
}

/* Der Farbton der Kachel.
 *
 * Ein eigener Belag statt eines zweiten Hintergrunds: eine Deckkraft
 * lässt sich weich überblenden, ein Farbverlauf nicht. Damit nimmt die
 * ganze Kachel den Ton ihres Faches an - man sieht auf einen Blick,
 * welcher Bereich gerade offen ist, ohne eine Umrandung zu suchen. */
.wb-tab::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--wb);
  opacity: 0; transition: opacity var(--t-base) var(--e-out);
  pointer-events: none;
}
.wb-tab:hover { transform: translateY(-1px); box-shadow: var(--sh-card-hover), var(--sheen); }
.wb-tab:hover::after { opacity: .05; }

/* Der Druckpunkt: die Kachel gibt kurz nach. Schneller als alles
   andere, denn eine Rückmeldung auf den Finger kommt sofort oder
   gar nicht. */
.wb-tab:active { transform: translateY(0) scale(.985); transition-duration: 70ms; }

/* Die Tonleiste an der Oberkante wächst aus der Mitte - dieselbe
   Sprache wie bei den Kennzahlkacheln, damit man sie nicht zweimal
   lernen muss. */
.wb-tab::before {
  content: ""; position: absolute; left: 50%; top: 0; height: 3px; width: 0;
  transform: translateX(-50%); border-radius: 0 0 3px 3px;
  background: var(--wb); opacity: 0;
  transition: width var(--t-base) var(--e-out), opacity var(--t-fast);
}
.wb-tab.active {
  border-color: color-mix(in srgb, var(--wb) 52%, var(--hairline));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--wb) 13%, transparent),
    0 8px 20px -10px color-mix(in srgb, var(--wb) 70%, transparent),
    var(--sheen);
}
.wb-tab.active::after { opacity: .09; }
.wb-tab.active::before { width: calc(100% - 22px); opacity: 1; }
.wb-tab:focus-visible { outline: 2px solid var(--wb); outline-offset: 2px; }

/* Drei Farben: grün läuft, rot braucht jemanden, grau ist eine Angabe.
   Die Tonnamen bleiben, damit im Programmcode steht, was gemeint ist. */
.wb-tab.tone-accent  { --wb: var(--signal-pos); }
.wb-tab.tone-pos     { --wb: var(--signal-pos); }
.wb-tab.tone-warn    { --wb: var(--signal-warn); }
.wb-tab.tone-neg     { --wb: var(--signal-neg); }
.wb-tab.tone-info    { --wb: var(--signal-quiet); }
.wb-tab.tone-neutral { --wb: var(--signal-quiet); }

.wb-count {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 660;
  letter-spacing: -.025em; line-height: 1.1; color: var(--text-strong);
  font-variant-numeric: tabular-nums; font-feature-settings: var(--num-features);
}
.wb-count, .wb-label { position: relative; }
.wb-tab.active .wb-count { color: color-mix(in srgb, var(--wb) 88%, var(--text-strong)); }
/* Ein leeres Fach ist eine gute Nachricht: es bleibt stehen, tritt aber
   zurück. Ausblenden würde die Leiste bei jeder Änderung umbauen. */
.wb-tab.empty .wb-count { color: var(--text-subtle); }
.wb-tab.empty { opacity: .72; }
.wb-tab.active.empty { opacity: 1; }
.wb-label {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
  transition: color var(--t-base);
}
.wb-tab.active .wb-label { color: var(--text-strong); }
.wb-sep { flex: 0 0 1px; background: var(--hairline-strong); margin: var(--s4) var(--s4); }

/* --- Befunde ---------------------------------------------------------- */
.issuebar {
  border: 1px solid var(--hairline); border-left: 3px solid var(--neg-500);
  border-radius: var(--r-card); background: var(--fill-surface);
  box-shadow: var(--sh-card), var(--sheen);
  padding: var(--card-pad-y) var(--card-pad); margin-bottom: var(--gap);
}
.issuebar-head {
  display: flex; align-items: center; gap: var(--s4);
  font-weight: var(--fw-semi); color: var(--text-strong); margin-bottom: var(--s5);
}
.issuebar-head svg { color: var(--neg-500); }
.issue-chips { display: flex; flex-wrap: wrap; gap: var(--s4); }
.issue-chip {
  display: inline-flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5); border-radius: var(--r-full);
  border: 1px solid var(--hairline-strong); background: var(--surface);
  cursor: pointer; font-size: var(--fs-sm); color: var(--text);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.issue-chip:hover { background: var(--surface-hover); }
.issue-chip b { font-variant-numeric: tabular-nums; }
.issue-chip.red    { border-color: var(--status-neg-bg); }
.issue-chip.red b   { color: var(--neg-500); }
.issue-chip.amber  { border-color: var(--status-warn-bg); }
.issue-chip.amber b { color: var(--warn-500); }
.issue-chip.blue   { border-color: var(--status-info-bg); }
.issue-chip.blue b  { color: var(--info-500); }
.issue-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }

.issue-action {
  display: flex; gap: var(--s4); margin-top: var(--s5);
  padding: var(--s4) var(--s5); border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent-text);
  font-size: var(--fs-sm); line-height: var(--lh-snug);
}
.issue-action svg { flex: none; margin-top: 2px; width: 13px !important; height: 13px !important; }

/* --- Betriebsbereitschaft -------------------------------------------- */
.check-row {
  display: flex; gap: var(--s5); padding: var(--s5) var(--card-pad);
  box-shadow: inset 0 -1px 0 var(--hairline-soft);
}
.check-row:last-child { box-shadow: none; }
.check-mark {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--status-neutral-bg); color: var(--text-muted); margin-top: 1px;
}
.check-row.ok .check-mark { background: var(--status-pos-bg); color: var(--status-pos-fg); }
.check-row.critical .check-mark { background: var(--status-neg-bg); color: var(--status-neg-fg); }
.check-row.important .check-mark { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.check-row.info .check-mark { background: var(--status-info-bg); color: var(--status-info-fg); }
.check-row .check-mark svg { width: 13px !important; height: 13px !important; }
/* Die Handlungsanweisung hebt sich ab: sie ist das, was man tun soll,
   nicht das, was man wissen soll. */
.check-action {
  display: flex; gap: var(--s4); margin-top: var(--s4);
  padding: var(--s4) var(--s5); border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent-text);
  font-size: var(--fs-sm); line-height: var(--lh-snug);
}
.check-action svg { flex: none; margin-top: 2px; width: 13px !important; height: 13px !important; }

/* --- Auswahllisten in Eingabemasken ---------------------------------- */
.pickbox {
  border: 1px solid var(--hairline-strong); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--sh-2);
  max-height: 300px; overflow-y: auto; margin-top: var(--s3);
}
.pick-row {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s4) var(--s5); cursor: pointer;
  box-shadow: inset 0 -1px 0 var(--hairline-soft);
  transition: background var(--t-fast);
}
.pick-row:last-child { box-shadow: none; }
.pick-row:hover { background: var(--surface-sel); }
.pick-row .m { font-weight: var(--fw-medium); }
.pick-row .s { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 1px; }

/* --- Hilfeseiten ----------------------------------------------------- */
.helphead { padding: var(--s8) 0 var(--s9); }
.article { max-width: 74ch; }
.article h1 { font-size: var(--fs-2xl); letter-spacing: -.024em; color: var(--text-strong); }
.article h3 { color: var(--text-strong); }
.article p { line-height: var(--lh-relax); }
.article .lead { font-size: var(--fs-md); color: var(--text-muted); line-height: var(--lh-relax); }
.article-list, .article-steps { margin: var(--s5) 0; padding-left: 0; list-style: none; }
.article-list li, .article-steps li {
  position: relative; padding-left: 30px; margin-bottom: var(--s5); line-height: var(--lh-relax);
}
.article-list li::before {
  content: ""; position: absolute; left: 9px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
/* Nummerierte Schritte: die Ziffer sitzt in einer eigenen Plakette,
   damit man beim Arbeiten die Zeile wiederfindet, in der man war. */
.article-steps { counter-reset: step; }
.article-steps li { counter-increment: step; padding-left: 36px; }
.article-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  display: grid; place-items: center;
}

/* --- Claude-Partner --------------------------------------------------- */
.partner {
  position: relative; overflow: hidden;
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--fill-surface);
  box-shadow: var(--sh-card), var(--sheen);
  transition: box-shadow var(--t-slow) var(--e-out), border-color var(--t-slow);
}
.partner.on {
  border-color: var(--accent-border);
  box-shadow: var(--sh-3), var(--glow-accent), var(--sheen);
}
/* Der Lichthof liegt hinter allem und wächst beim Zuschalten. */
.partner-glow {
  position: absolute; inset: -60% -20% auto -20%; height: 260px; pointer-events: none;
  background: radial-gradient(closest-side, var(--accent) 0%, transparent 70%);
  opacity: 0; transform: scale(.6);
  transition: opacity var(--t-slower) var(--e-out), transform var(--t-slower) var(--e-out);
}
.partner.on .partner-glow { opacity: .13; transform: scale(1); }

.partner-body {
  position: relative; display: flex; align-items: center; gap: var(--s6);
  padding: var(--s8) var(--card-pad) var(--s6);
}
.partner-mark {
  width: 46px; height: 46px; border-radius: var(--r-lg); flex: none;
  display: grid; place-items: center;
  background: var(--fill-sunken); color: var(--text-subtle);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background var(--t-slow), color var(--t-slow), box-shadow var(--t-slow);
}
.partner.on .partner-mark {
  background: var(--accent-soft); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-border), 0 0 20px -4px var(--accent);
}
.partner-glyph { width: 28px !important; height: 28px !important; }
/* Die äußeren Punkte kreisen erst, wenn zugeschaltet ist — Bewegung als
   Zustandsanzeige, nicht als Zierde. */
.partner.on .partner-glyph { animation: partnerSpin 14s linear infinite; }
@keyframes partnerSpin { to { transform: rotate(360deg); } }

.partner-name {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  letter-spacing: .16em; font-size: var(--fs-sm); color: var(--text-strong);
}
.partner-state {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--fs-sm); color: var(--text-muted); margin-top: 3px;
}
.partner-state i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-subtle);
  transition: background var(--t-base), box-shadow var(--t-base);
}
.partner.on .partner-state { color: var(--accent-text); }
.partner.on .partner-state i {
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
  animation: partnerPulse 2.6s var(--e-in-out) infinite;
}
@keyframes partnerPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
  50% { box-shadow: 0 0 0 7px transparent; }
}

.partner-switch {
  width: 58px; height: 30px; border-radius: var(--r-full); flex: none;
  border: 1px solid var(--hairline-strong); background: var(--fill-sunken);
  cursor: pointer; position: relative; padding: 0;
  box-shadow: inset 0 1px 3px rgba(19,33,25,.1);
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.partner-switch .knob {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--fill-surface); box-shadow: 0 1px 3px rgba(19,33,25,.3), var(--sheen);
  transition: transform var(--t-base) var(--e-spring), background var(--t-base);
}
.partner.on .partner-switch {
  background: var(--fill-accent); border-color: var(--accent-active);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2), 0 0 14px -3px var(--accent);
}
.partner.on .partner-switch .knob { transform: translateX(28px); background: #fff; }

.partner-foot {
  position: relative;
  padding: var(--s5) var(--card-pad) var(--s7);
  font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-snug);
  box-shadow: inset 0 1px 0 var(--hairline);
}

.spin-sm {
  width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.32);
  border-top-color: #fff; border-radius: 50%; display: inline-block;
  animation: spin .7s linear infinite; flex: none;
}

.report {
  margin: 0; max-height: 420px; overflow: auto;
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  background: var(--fill-sunken); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: var(--s6);
  color: var(--text-muted);
}

/* --- Farbwelten auswählen -------------------------------------------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s5); }
.theme-card {
  border: 1px solid var(--hairline-strong); border-radius: var(--r-lg);
  padding: var(--s4); cursor: pointer; background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.theme-card:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.theme-card[aria-pressed="true"] {
  border-color: var(--accent); box-shadow: var(--glow-accent);
}
/* Die Vorschau zeigt, worauf es ankommt: Grundfläche, Karte, Akzent. */
.theme-swatch {
  height: 52px; border-radius: var(--r-md); position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.theme-swatch i { position: absolute; display: block; }
.theme-swatch .bg { inset: 0; }
.theme-swatch .card { left: 8px; right: 8px; top: 12px; height: 28px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.theme-swatch .dot { left: 14px; top: 18px; width: 14px; height: 6px; border-radius: 3px; }
.theme-swatch .dot2 { left: 32px; top: 18px; width: 22px; height: 6px; border-radius: 3px; opacity: .6; }
.theme-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-top: var(--s4); text-align: center; }

@media print {
  .sidebar, .topbar, .btn, .toasts, .bulkbar, .filterbar { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .view { overflow: visible; padding: 0; }
  body { overflow: visible; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* ---------------------------------------------------------------------
   Retouren: anlegen, zählen, nächster Schritt
   --------------------------------------------------------------------- */
.rq-liste { display: flex; flex-direction: column; gap: var(--s3); }
.rq-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--fill-surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.rq-zeile.aus { opacity: .55; }
.rq-zeile.pruef { grid-template-columns: minmax(0, 1.4fr) auto minmax(130px, .8fr) minmax(140px, .8fr); align-items: end; }
.rq-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rq-name b { font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.rq-name .subtle { font-size: var(--fs-2xs); }
.rq-feld { display: flex; flex-direction: column; min-width: 0; }
.rq-menge { display: inline-flex; align-items: center; gap: var(--s2); }
.rq-menge .btn { width: 34px; height: 34px; font-size: 18px; line-height: 1; justify-content: center; }
.rq-zahl { width: 56px; text-align: center; font-weight: var(--fw-semi); }
.rq-fehlt { color: var(--signal-neg); font-size: var(--fs-sm); font-weight: var(--fw-medium); min-height: 0; }
.rq-fehlt:empty { display: none; }
.rq-summe {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s5); flex-wrap: wrap;
  padding: var(--s4) var(--s5); border-radius: var(--r-md);
  background: var(--gold-soft); border: 1px solid var(--hairline);
}
.rq-summe b { font-size: var(--fs-lg); }
.rq-meldung { color: var(--signal-neg); font-size: var(--fs-sm); min-height: 1.2em; }
.rq-check { display: flex; gap: var(--s4); align-items: flex-start; cursor: pointer; }
.rq-check input { margin-top: 4px; width: 16px; height: 16px; }
.rq-check .subtle { font-size: var(--fs-2xs); }
.rq-next { margin-bottom: var(--gap); }
.rq-next b { font-size: var(--fs-lg); }
.rq-schritte { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.rq-schritt { display: flex; gap: var(--s4); align-items: center; color: var(--text-muted); }
.rq-schritt .nr {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); border: 1px solid var(--hairline); background: var(--fill-surface);
}
.rq-schritt.aktiv { color: var(--text-strong); font-weight: var(--fw-medium); }
.rq-schritt.aktiv .nr { background: var(--accent); color: #fff; border-color: transparent; }
.rq-suche { display: flex; flex-direction: column; gap: var(--s2); max-height: 50vh; overflow: auto; }
.rq-treffer {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--s5); align-items: center;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: var(--s4) var(--s5); border-radius: var(--r-md);
  background: var(--fill-surface); border: 1px solid var(--hairline);
}
.rq-treffer:hover { border-color: var(--accent); }
@media (max-width: 720px) {
  .rq-zeile.pruef { grid-template-columns: 1fr 1fr; }
  .rq-zeile.pruef .rq-name { grid-column: 1 / -1; }
  .rq-treffer { grid-template-columns: 1fr auto; }
}

/* Belege nach Tagen */
table.data.docs-days tr.dayrow td {
  background: var(--fill-subtle, rgba(0,0,0,.03));
  border-top: 1px solid var(--hairline);
  padding-top: var(--s5); padding-bottom: var(--s4);
  font-size: var(--fs-sm);
}
table.data.docs-days tbody:first-of-type tr.dayrow td { border-top: 0; }
table.data.docs-days tr.dayrow b { color: var(--text-strong); }

/* ---------------------------------------------------------------------
   Zahlungen im Bank-Stil
   --------------------------------------------------------------------- */
.bank-kopf {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s8);
  padding: 26px 28px; border-radius: var(--r-card, 12px); color: #f4f7f5;
  background:
    radial-gradient(60% 120% at 88% 10%, rgba(214, 178, 94, .30), transparent 60%),
    radial-gradient(70% 140% at 15% 110%, rgba(52, 168, 110, .35), transparent 60%),
    radial-gradient(40% 90% at 55% -10%, rgba(143, 224, 176, .18), transparent 70%),
    linear-gradient(135deg, #0b2016 0%, #14372a 45%, #1d5a3f 100%);
  box-shadow: 0 22px 48px -26px rgba(8, 30, 20, .8), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.25);
}
/* Feine Lichtkante oben - Gold läuft über die ganze Breite */
.bank-kopf::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(243, 221, 146, .75) 25%, rgba(255, 255, 255, .9) 50%, rgba(243, 221, 146, .75) 75%, transparent);
}
/* Der leuchtende Verlauf: ein breiter Lichtschweif wandert langsam über den ganzen Balken */
.bank-kopf::after {
  content: ''; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 60%; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(143, 224, 176, .06) 30%,
    rgba(255, 255, 255, .22) 48%,
    rgba(243, 221, 146, .16) 55%,
    rgba(143, 224, 176, .06) 70%,
    transparent 100%);
  filter: blur(6px);
  transform: skewX(-12deg);
  animation: bankLicht 7s cubic-bezier(.45, .05, .35, 1) infinite;
}
@keyframes bankLicht {
  0%   { left: -60%; opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
.bank-kopf > * { position: relative; z-index: 1; }
.bank-stand { text-shadow: 0 2px 18px rgba(143, 224, 176, .35), 0 1px 2px rgba(0,0,0,.4); }
.bank-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); opacity: .8; letter-spacing: .02em; }
.bank-label svg { width: 16px; height: 16px; }
.bank-stand { font-size: clamp(30px, 4.2vw, 44px); font-weight: 650; letter-spacing: -.02em; margin: 6px 0 2px; }
.bank-sub { font-size: var(--fs-xs); opacity: .65; }
.bank-kopf-rechts { display: grid; grid-template-columns: repeat(2, minmax(150px, auto)); gap: 10px 28px; }
.bank-wert { display: flex; flex-direction: column; gap: 2px; }
.bank-wert span { font-size: var(--fs-2xs); opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.bank-wert b { font-size: var(--fs-lg); font-weight: 600; }
.bank-kopf .pos { color: #8fe0b0; }
.bank-kopf .neg { color: #f2a59c; }

.bank-auszug { display: flex; flex-direction: column; gap: var(--gap); }
.bank-tag {
  background: var(--fill-surface); border: 1px solid var(--hairline); border-radius: var(--r-card, 12px);
  overflow: hidden;
}
.bank-tag-kopf {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); align-items: baseline; justify-content: space-between;
  padding: 10px 18px; font-size: var(--fs-sm); font-weight: var(--fw-semi);
  background: var(--fill-subtle, rgba(0,0,0,.03)); border-bottom: 1px solid var(--hairline);
}
.bank-tag-kopf span:first-child { flex: 1 1 auto; color: var(--text-strong); }
.bank-zeile {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto minmax(110px, auto); gap: var(--s5); align-items: center;
  width: 100%; padding: 12px 18px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: transparent; border: 0; border-top: 1px solid var(--hairline);
  transition: background var(--t-fast);
}
.bank-tag-kopf + .bank-zeile { border-top: 0; }
.bank-zeile:hover { background: var(--fill-hover, rgba(0,0,0,.035)); }
.bank-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.bank-icon svg { width: 17px; height: 17px; }
.bank-icon.ein { background: var(--status-pos-bg); color: var(--pos-500); }
.bank-icon.aus { background: var(--status-neg-bg); color: var(--neg-500); }
.bank-text { display: flex; flex-direction: column; min-width: 0; }
.bank-text b { font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-text .subtle { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-notiz { font-style: italic; }
.bank-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bank-betrag { display: flex; flex-direction: column; align-items: flex-end; }
.bank-betrag b { font-size: var(--fs-base); font-weight: 650; }
.bank-betrag .subtle { font-size: var(--fs-2xs); }
.bank-auszug .pos { color: var(--pos-500); }
.bank-auszug .neg { color: var(--neg-500); }
.ampel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.ampel.gruen { background: var(--pos-500); box-shadow: 0 0 0 3px var(--status-pos-bg); }
.ampel.gelb { background: var(--warn-500); box-shadow: 0 0 0 3px var(--status-warn-bg); }
.ampel.rot { background: var(--neg-500); box-shadow: 0 0 0 3px var(--status-neg-bg); }
@media (max-width: 760px) {
  .bank-kopf-rechts { grid-template-columns: 1fr 1fr; width: 100%; }
  .bank-zeile { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .bank-meta { display: none; }
}

/* ---------------------------------------------------------------------
   Steuer: Formular im Stil des Amts
   --------------------------------------------------------------------- */
.fo-fristen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s5); margin: var(--s5) 0 var(--gap); }
.fo-frist {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px;
  background: var(--fill-surface); border: 1px solid var(--hairline); border-left: 4px solid var(--pos-500);
  border-radius: var(--r-md);
}
.fo-frist span:first-child { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.fo-frist b { font-size: var(--fs-lg); }
.fo-frist.warn { border-left-color: var(--warn-500); }
.fo-frist.neg { border-left-color: var(--neg-500); }

.fo-formular {
  background: #fff; color: #1a1a1a; border: 1px solid #c9ccd1; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px -22px rgba(0,0,0,.35);
  font-size: 13.5px; overflow: hidden;
}
.fo-kopf {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-end;
  padding: 18px 22px 16px; background: #f3f4f6; border-bottom: 3px solid #b3121f;
}
.fo-amt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #5b616b; }
.fo-titel { font-size: 21px; font-weight: 700; margin-top: 2px; }
.fo-form { font-size: 12px; color: #5b616b; }
.fo-zeitraum { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.fo-zeitraum span:first-child { font-size: 11px; color: #5b616b; text-transform: uppercase; letter-spacing: .05em; }
.fo-zeitraum b { font-size: 17px; }
.fo-zeitraum .subtle { font-size: 11.5px; color: #6b7280; }
.fo-spalten, .fo-zeile {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 170px 150px; gap: 12px; align-items: center;
  padding: 0 22px;
}
.fo-spalten { padding-top: 10px; padding-bottom: 6px; font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.fo-spalten span:nth-child(3), .fo-spalten span:nth-child(4) { text-align: right; }
.fo-abschnitt {
  margin-top: 6px; padding: 8px 22px; background: #e8eaee; font-weight: 700; font-size: 12.5px; color: #2b2f36;
  border-top: 1px solid #d5d8dd; border-bottom: 1px solid #d5d8dd;
}
.fo-abschnitt.klein { background: transparent; border: 0; font-weight: 600; color: #5b616b; padding-top: 10px; padding-bottom: 2px; }
.fo-zeile { min-height: 40px; border-bottom: 1px dotted #d5d8dd; }
.fo-zeile.einrueck .fo-text { padding-left: 14px; }
.fo-zeile.summe { font-weight: 700; background: #fafbfc; }
.fo-zeile.leer .fo-feld { color: #9aa0a8; }
.fo-kz {
  display: inline-grid; place-items: center; height: 24px; min-width: 42px; padding: 0 6px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700;
  color: #2b2f36; background: #eceef1; border: 1px solid #c9ccd1; border-radius: 3px; justify-self: start;
}
.fo-kz:empty { visibility: hidden; }
.fo-text { line-height: 1.35; padding: 6px 0; }
.fo-feld {
  text-align: right; font-family: var(--font-mono, ui-monospace, monospace); font-size: 13.5px;
  padding: 5px 9px; border: 1px solid #c9ccd1; border-radius: 3px; background: #fffef3; min-height: 28px;
}
.fo-feld:empty { background: transparent; border-color: transparent; }
.fo-zeile.fehlt .fo-feld.steuer { color: #b3121f; font-family: inherit; font-size: 12px; font-style: italic; background: #fff5f5; border-color: #efc2c2; }
.fo-zeile.fehlt .fo-feld:not(.steuer) { background: transparent; border-color: transparent; }
.fo-ergebnis {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 14px 22px 0; padding: 12px 16px; background: #1f2937; color: #fff; border-radius: 4px;
}
.fo-ergebnis b { font-size: 19px; }
.fo-fuss { padding: 14px 22px 18px; font-size: 11.5px; color: #5b616b; line-height: 1.5; }
@media (max-width: 760px) {
  .fo-spalten { display: none; }
  .fo-zeile { grid-template-columns: 52px minmax(0, 1fr); padding: 6px 14px; }
  .fo-zeile .fo-feld { grid-column: 2; }
  .fo-kopf, .fo-abschnitt, .fo-fuss { padding-left: 14px; padding-right: 14px; }
}
@media print {
  .fo-fristen, .callout { break-inside: avoid; }
  .fo-formular { box-shadow: none; }
}

/* Anbindungen: Lampen */
.led {
  flex: none; width: 12px; height: 12px; border-radius: 50%; align-self: flex-start; margin-top: 4px;
  background: #9aa0a8; box-shadow: inset 0 -1px 2px rgba(0,0,0,.25);
}
.led.gruen { background: radial-gradient(circle at 35% 30%, #b9f5cf, #22c55e 55%, #15803d); box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 0 12px rgba(34,197,94,.75); animation: ledPuls 2.4s ease-in-out infinite; }
.led.rot { background: radial-gradient(circle at 35% 30%, #fecaca, #ef4444 55%, #b91c1c); box-shadow: 0 0 0 3px rgba(239,68,68,.18), 0 0 12px rgba(239,68,68,.8); animation: ledPuls 1.2s ease-in-out infinite; }
.led.gelb { background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 55%, #b45309); box-shadow: 0 0 0 3px rgba(245,158,11,.18), 0 0 10px rgba(245,158,11,.6); }
.led.grau { background: radial-gradient(circle at 35% 30%, #e5e7eb, #9ca3af 60%, #6b7280); }
@keyframes ledPuls { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.led-text { margin-top: var(--s4); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.led-text.gruen { color: var(--pos-500); }
.led-text.rot { color: var(--neg-500); }
.led-text.gelb { color: var(--warn-500); }
.led-text.grau { color: var(--text-muted); }

/* Betriebsbereitschaft: Fahrplan */
.rdy-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s6); }
.rdy-spalte { display: flex; flex-direction: column; gap: var(--s4); }
.rdy-kopf { display: flex; flex-direction: column; padding-bottom: var(--s3); border-bottom: 2px solid var(--hairline); }
.rdy-kopf b { font-size: var(--fs-base); }
.rdy-kopf .subtle { font-size: var(--fs-xs); }
.rdy-punkt {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; font-size: var(--fs-sm); line-height: 1.45;
  background: var(--fill-surface); border: 1px solid var(--hairline); border-left: 3px solid var(--info-500); border-radius: var(--r-md);
}
.rdy-punkt.critical { border-left-color: var(--neg-500); }
.rdy-punkt.important { border-left-color: var(--warn-500); }

/* Sicherung: Erklärung */
.bak-erkl { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s6); }
.bak-spalte { padding: 12px 14px; border-radius: var(--r-md); background: var(--fill-subtle, rgba(0,0,0,.03)); border: 1px solid var(--hairline); }
.bak-spalte.ja { border-top: 3px solid var(--pos-500); }
.bak-spalte.nein { border-top: 3px solid var(--warn-500); }
.bak-kopf { display: flex; align-items: center; gap: 6px; font-weight: var(--fw-semi); margin-bottom: 6px; }
.bak-kopf svg { width: 15px; height: 15px; }
.bak-spalte ul { margin: 0; padding-left: 18px; font-size: var(--fs-sm); line-height: 1.5; }
.bak-spalte li + li { margin-top: 4px; }

/* Lager: Handbuchung */
.lg-treffer { display: flex; flex-direction: column; gap: 4px; }
.lg-treffer:empty { display: none; }
.lg-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s5); align-items: center;
  text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 8px 12px;
  background: var(--fill-surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.lg-zeile:hover { border-color: var(--accent); }
.lg-artikel {
  display: flex; gap: var(--s5); align-items: center; padding: 10px 12px;
  background: var(--accent-soft, rgba(47,125,79,.08)); border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.lg-icon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--fill-surface); }
.lg-vorschau { display: flex; gap: var(--s4); align-items: baseline; font-size: var(--fs-base); min-height: 1.4em; }
.lg-vorschau .pos { color: var(--pos-500); }
.lg-vorschau .neg { color: var(--neg-500); }

/* Betriebsbereitschaft: Systemmeldungen */
.sys-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px 18px; }
.sys-meldung { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dotted var(--hairline); font-size: var(--fs-sm); }
.sys-meldung .led { margin-top: 5px; }
.sys-meldung .subtle { line-height: 1.45; }

/* Shopfaces: Marktplätze */
.markt-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); }
.markt-karte { position: relative; overflow: hidden; }
.markt-karte::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; }
.markt-karte.amazon::before { background: #ff9900; }
.markt-karte.ebay::before { background: linear-gradient(90deg, #e53238, #0064d2, #f5af02, #86b817); }
.markt-karte.kaufland::before { background: #e10915; }
.markt-karte.shopware::before { background: #189eff; }
.markt-logo {
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: none;
  font-weight: 800; font-size: 18px; color: #fff;
}
.markt-logo.amazon { background: #232f3e; color: #ff9900; }
.markt-logo.ebay { background: #0064d2; }
.markt-logo.kaufland { background: #e10915; }
.markt-logo.shopware { background: #189eff; }
.transit-schluesse { display: flex; flex-direction: column; gap: var(--s4); }

/* Versandpartner: Übertragungen je Tag */
.sup-uebertragen { padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--hairline); }
.sup-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sup-tag { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--fs-xs); min-width: 0; }
.sup-tagbalken { width: 100%; max-width: 34px; height: 46px; display: flex; align-items: flex-end; background: var(--fill-subtle, rgba(0,0,0,.04)); border-radius: 5px; overflow: hidden; }
.sup-tagbalken i { display: block; width: 100%; background: linear-gradient(180deg, var(--accent), var(--pos-500)); border-radius: 5px 5px 0 0; min-height: 0; }
.sup-tagzeit { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-height: 12px; }

/* Benutzer: Rechte-Matrix */
table.rechte-matrix th.center, table.rechte-matrix td.center { text-align: center; width: 90px; }
table.rechte-matrix tr.gruppe td {
  background: var(--fill-subtle, rgba(0,0,0,.03)); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.rechte-punkt { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--hairline); }
.rechte-punkt.edit { background: var(--pos-500); border-color: transparent; box-shadow: 0 0 0 3px var(--status-pos-bg); }
.rechte-punkt.view { background: var(--info-500); border-color: transparent; box-shadow: 0 0 0 3px var(--status-info-bg, rgba(59,130,246,.15)); }

/* Diagramme: echte Breite, lesbare Achsen */
.chart-box { position: relative; }
.chart .axis-text { font-size: 11px; letter-spacing: 0; }
.menu-led { width: 9px; height: 9px; margin: 0 0 0 8px; align-self: center; animation: none; }
.verlauf-einzel { display: flex; flex-direction: column; gap: var(--s5); padding: var(--s4) 0; }
.verlauf-wert { display: grid; grid-template-columns: minmax(180px, 260px) 160px 1fr; gap: var(--s5); align-items: center; }
.verlauf-wert b { font-size: var(--fs-lg); }
@media (max-width: 720px) { .verlauf-wert { grid-template-columns: 1fr; } }

/* Tagesverkauf: Verkaufsrhythmus mit Erkenntnissen */
.rhythmus { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr); gap: var(--s8); align-items: start; }
.rhythmus .heat-cell { height: 26px; position: relative; display: grid; place-items: center; overflow: hidden; }
.heat-wert {
  font-size: 10.5px; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; color: var(--text-strong);
  opacity: 0; transition: opacity var(--t-fast); white-space: nowrap; pointer-events: none;
}
.heat-cell.l3 .heat-wert, .heat-cell.l4 .heat-wert { color: #fff; }
.rhythmus .heat-cell.l2 .heat-wert, .rhythmus .heat-cell.l3 .heat-wert, .rhythmus .heat-cell.l4 .heat-wert { opacity: .92; }
.rhythmus .heat:hover .heat-wert { opacity: .9; }
.heat-cell.zukunft { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); border: 0; opacity: .5;
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--hairline) 5px 6px); }

.erk-liste { display: flex; flex-direction: column; gap: 10px; }
.erk {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 14px;
  border-radius: var(--r-md); background: var(--fill-subtle, rgba(0,0,0,.03)); border: 1px solid var(--hairline);
  border-left: 3px solid var(--hairline);
}
.erk.pos { border-left-color: var(--pos-500); }
.erk.neg { border-left-color: var(--neg-500); }
.erk-k { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: var(--fw-semi); align-self: center; }
.erk-v { font-size: var(--fs-lg); font-weight: 650; text-align: right; color: var(--text-strong); }
.erk.pos .erk-v { color: var(--pos-500); }
.erk.neg .erk-v { color: var(--neg-500); }
.erk-t { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }

.rhythmus-stunden { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--hairline); }
.wg-kopf { margin-bottom: var(--s4); font-size: var(--fs-sm); }
.wg { display: flex; flex-direction: column; gap: 3px; }
.wg-zeile { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 3px; align-items: center; }
.wg-achse span { font-size: 10px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.wg-tag { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-subtle); letter-spacing: .06em; }
.wg-zelle { display: block; height: 18px; border-radius: 3px; }
.wg-zelle.leer { background: var(--bg-sunken); }
.wg-zelle.voll { background: color-mix(in srgb, var(--accent) var(--staerke, 50%), var(--surface)); }
.wg-zelle:hover { outline: 1px solid var(--accent); }
@media (max-width: 980px) { .rhythmus { grid-template-columns: 1fr; } }

/* Packtisch: Anschrift + Paketinfo nebeneinander */
.ff-kopf { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 2fr); gap: var(--s5); align-items: stretch; }
.ff-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); }
.ff-info-block {
  padding: var(--s4) var(--s5); border-radius: var(--r-lg); border: 1px solid var(--hairline); background: var(--surface);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.ff-info-kopf { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.ff-info-kopf b { font-weight: var(--fw-bold); color: var(--text-muted); }
.ff-info-kopf .subtle { margin-left: auto; text-transform: none; letter-spacing: 0; }
.ff-info-kopf svg { width: 13px; height: 13px; }
.ff-inhalt { display: flex; flex-direction: column; gap: 3px; max-height: 150px; overflow: auto; }
.ff-inhalt-zeile { display: grid; grid-template-columns: 28px 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: var(--fs-xs); line-height: 1.35; }
.ff-menge { font-weight: var(--fw-bold); color: var(--accent); font-variant-numeric: tabular-nums; }
.ff-inhalt-name { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.ff-inhalt-name .subtle { font-size: 10.5px; }
.ff-platz {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 600; padding: 1px 6px;
  border-radius: 4px; background: var(--bg-sunken); color: var(--text-strong); white-space: nowrap;
}
.ff-hinweise { display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow: auto; }
.ff-hinweis { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: 11.5px; line-height: 1.35; padding: 5px 8px; border-radius: 6px; background: var(--fill-subtle, rgba(0,0,0,.03)); }
.ff-hinweis svg { width: 14px; height: 14px; margin-top: 1px; color: var(--text-muted); }
.ff-hinweis b { display: block; font-weight: var(--fw-semi); color: var(--text-strong); }
.ff-hinweis > div > div { color: var(--text-muted); }
.ff-hinweis.neg { background: var(--status-neg-bg); } .ff-hinweis.neg svg, .ff-hinweis.neg b { color: var(--neg-500); }
.ff-hinweis.warn { background: var(--status-warn-bg); } .ff-hinweis.warn svg { color: var(--warn-500); }
.ff-hinweis.pos svg { color: var(--gold, #b08a3e); }
.ff-hinweis.ruhig svg { color: var(--pos-500); }
@media (max-width: 1250px) { .ff-info { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .ff-kopf { grid-template-columns: 1fr; } }

/* Menüs: nie abgeschnitten - die Breite richtet sich nach dem Inhalt */
.menu { width: max-content; max-width: calc(100vw - 16px); }
.menu .menu-item { gap: 10px; }
.menu .menu-item .subtle { margin-left: 18px; }

/* Shopface-Menü: Marktplätze hochwertig */
.menu-item.markt { padding-top: 7px; padding-bottom: 7px; }
.menu-item.markt .grow {
  font-weight: 600; letter-spacing: .01em; color: var(--text-strong);
  text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.12);
}
:root[data-theme="dark"] .menu-item.markt .grow { text-shadow: 0 1px 2px rgba(0,0,0,.55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu-item.markt .grow { text-shadow: 0 1px 2px rgba(0,0,0,.55); } }
.menu-item.markt .subtle { font-size: 11px; font-style: italic; }
.menu-logo {
  width: 22px; height: 22px; border-radius: 6px; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff; letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 3px rgba(0,0,0,.22);
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.menu-logo.amazon { background: linear-gradient(160deg, #37475a, #131a22); color: #ff9900; }
.menu-logo.ebay { background: linear-gradient(160deg, #3b8ae6, #0053ba); }
.menu-logo.kaufland { background: linear-gradient(160deg, #ff3b45, #b8000b); }
.menu-logo.shopware { background: linear-gradient(160deg, #4fb6ff, #0f7fd8); }
.menu-item.markt .menu-led { margin-left: 10px; }
.menu-item.markt:hover .grow { color: var(--accent); }

/* Kommandozentrale: Schaltverlauf zum Aufklappen */
details.schalt-verlauf { margin-top: var(--gap); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); }
details.schalt-verlauf > summary {
  list-style: none; cursor: pointer; padding: 10px 16px; display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-muted);
}
details.schalt-verlauf > summary::-webkit-details-marker { display: none; }
details.schalt-verlauf > summary svg { width: 15px; height: 15px; }
details.schalt-verlauf > summary .subtle { font-weight: 400; font-size: var(--fs-xs); }
details.schalt-verlauf[open] > summary { border-bottom: 1px solid var(--hairline); color: var(--text-strong); }

/* Export: viele Datensätze - kleine, helle Schrift, enge Zeilen */
table.data.kompakt th { font-size: 10px; padding-top: 6px; padding-bottom: 6px; }
table.data.kompakt td { font-size: 11.5px; color: var(--text-muted); padding-top: 4px; padding-bottom: 4px; line-height: 1.3; }
table.data.kompakt tr:hover td { color: var(--text-strong); }

/* =====================================================================
   Prestige-Diagramme - Tagesübersicht
   ===================================================================== */
.card.prestige {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, #c9a227 7%, transparent), transparent 60%),
    var(--surface);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 32px -22px rgba(20, 40, 30, .45), var(--sh-1, 0 1px 2px rgba(0,0,0,.05));
}
.card.prestige::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #c9a227 20%, #f3dd92 50%, #c9a227 80%, transparent);
  opacity: .75;
}
.card.prestige .card-head h2 { letter-spacing: .01em; text-shadow: 0 1px 0 rgba(255,255,255,.7); }

/* Ring */
.pd { position: relative; display: grid; place-items: center; padding: 6px 0 12px; }
/* Die allgemeine Symbolregel (.app svg = 16px) darf den Ring nicht schrumpfen */
.pd-svg, .app svg.pd-svg, .modal svg.pd-svg { overflow: visible; width: 210px; height: 210px; max-width: 100%; flex: none; }
.pd-mulde { stroke: var(--bg-sunken); opacity: .8; }
.pd-scheibe { fill: var(--surface); filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); }
.pd-seg {
  cursor: pointer; transition: transform 220ms cubic-bezier(.2,.8,.2,1), filter 220ms;
  animation: pdEin 1100ms cubic-bezier(.2,.8,.2,1) both;
}
.pd-seg { pointer-events: none; }
.pd-treffer { pointer-events: stroke; cursor: pointer; }
.pd-seg.an { transform: translate(calc(var(--dy) * -1), var(--dx)); filter: brightness(1.12) saturate(1.1); }
@keyframes pdEin { from { stroke-dasharray: 0 var(--start); opacity: .2; } }
.pd.aktiv .pd-seg:not(.an) { opacity: .45; }
.pd-seg { transition: transform 220ms cubic-bezier(.2,.8,.2,1), filter 220ms, opacity 220ms; }
.pd-wert {
  fill: var(--text-strong); font-family: var(--font-display, var(--font-ui)); font-size: 21px; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.pd-label { fill: var(--text-subtle); font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pd-anteil { fill: #b08a1e; font-size: 11px; font-weight: 700; letter-spacing: .04em; }

/* Podest */
.podium { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.podium-zeile {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(70px, 1.1fr) auto; gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: 10px; transition: background 180ms, transform 180ms;
  animation: podiumEin 600ms cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--verz);
}
.podium-zeile:hover { background: var(--fill-subtle, rgba(0,0,0,.03)); transform: translateX(2px); }
@keyframes podiumEin { from { opacity: 0; transform: translateY(6px); } }
.podium-zeile.gold { background: linear-gradient(90deg, color-mix(in srgb, #c9a227 11%, transparent), transparent 70%); }
.podium-zeile.silber { background: linear-gradient(90deg, color-mix(in srgb, #9aa3ad 9%, transparent), transparent 65%); }
.podium-zeile.bronze { background: linear-gradient(90deg, color-mix(in srgb, #b8733a 8%, transparent), transparent 60%); }

/* Medaillen - geprägtes Metall: Rändelrand, polierte Fläche, eingeschlagene Ziffer, wandernder Glanz */
.medaille {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; justify-self: center;
  font-size: 11px; font-weight: 800; color: var(--text-muted); background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.medaille.gold, .medaille.silber, .medaille.bronze {
  --m-hell: #fff; --m-mitte: #ccc; --m-tief: #888; --m-dunkel: #555; --m-ziffer: #333; --m-licht: rgba(255,255,255,.9);
  position: relative; isolation: isolate; overflow: hidden;
  width: 30px; height: 30px;
  font-family: var(--font-display, var(--font-ui)); font-size: 13px; font-weight: 800; letter-spacing: -.02em;
  color: var(--m-ziffer);
  /* eingeschlagen: Lichtkante unten, Schattenkante oben */
  text-shadow: 0 1px 0 var(--m-licht), 0 -1px 0 rgba(0,0,0,.28);
  /* Rand: gerändelt + umlaufender Metallglanz */
  background:
    repeating-conic-gradient(from 0deg, rgba(0,0,0,.14) 0 4deg, rgba(255,255,255,.10) 4deg 8deg),
    conic-gradient(from 215deg, var(--m-dunkel), var(--m-hell), var(--m-tief), var(--m-hell), var(--m-dunkel), var(--m-mitte), var(--m-hell), var(--m-dunkel));
  box-shadow:
    inset 0 0 0 .5px rgba(0,0,0,.35),
    0 1px 1px rgba(0,0,0,.22),
    0 4px 9px -4px rgba(0,0,0,.5);
}
/* polierte Prägefläche mit feinen Drehriefen */
.medaille.gold::before, .medaille.silber::before, .medaille.bronze::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; z-index: -1;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.95) 0 6%, rgba(255,255,255,.35) 18%, transparent 38%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.05) 1px 2px),
    radial-gradient(circle at 40% 32%, var(--m-hell) 0%, var(--m-mitte) 34%, var(--m-tief) 72%, var(--m-dunkel) 100%);
  box-shadow: inset 0 1px 1.5px rgba(0,0,0,.45), inset 0 -1px 1px rgba(255,255,255,.55);
}
/* Glanzstreif, der regelmäßig über die Medaille zieht */
.medaille.gold::after, .medaille.silber::after, .medaille.bronze::after {
  content: ''; position: absolute; top: -40%; bottom: -40%; left: -90%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85) 50%, transparent);
  transform: skewX(-20deg); mix-blend-mode: soft-light;
  animation: medailleGlanz 4.8s ease-in-out infinite;
}
@keyframes medailleGlanz { 0%, 58% { left: -90%; } 100% { left: 145%; } }
.medaille.silber::after { animation-delay: .35s; }
.medaille.bronze::after { animation-delay: .7s; }

.medaille.gold {
  --m-hell: #fff6cf; --m-mitte: #f0c94f; --m-tief: #b8860b; --m-dunkel: #6f4f06; --m-ziffer: #5a3f02; --m-licht: rgba(255,244,200,.95);
  box-shadow:
    inset 0 0 0 .5px rgba(90,60,0,.5),
    0 1px 1px rgba(0,0,0,.22),
    0 4px 9px -4px rgba(90,60,0,.6),
    0 0 12px -3px rgba(240,190,50,.75);
}
.medaille.silber {
  --m-hell: #ffffff; --m-mitte: #dde2e7; --m-tief: #9aa3ab; --m-dunkel: #5f666d; --m-ziffer: #3d444b; --m-licht: rgba(255,255,255,.95);
}
.medaille.bronze {
  --m-hell: #ffe0c2; --m-mitte: #de9a5e; --m-tief: #a4602b; --m-dunkel: #5a300f; --m-ziffer: #4a2608; --m-licht: rgba(255,222,190,.9);
}
.podium-name {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.podium-zeile.gold .podium-name { font-weight: 700; }
.podium-sub { font-size: 10.5px; color: var(--text-subtle); }
.podium-balken { height: 8px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.podium-balken i {
  display: block; height: 100%; width: var(--breite); border-radius: 99px; position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--farbe) 70%, #ffffff), var(--farbe));
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--farbe) 70%, transparent);
  animation: balkenEin 900ms cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--verz); transform-origin: left;
}
.podium-balken i::after {
  content: ''; position: absolute; inset: 0 0 50% 0; border-radius: 99px 99px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
}
@keyframes balkenEin { from { transform: scaleX(0); } }
.podium-werte { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.podium-werte b { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.podium-werte span { font-size: 10.5px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.podium-zeile.gold .podium-werte span { color: #b08a1e; font-weight: 600; }
.podium-rest { font-size: var(--fs-xs); color: var(--text-subtle); padding: 4px 10px 0 48px; }

/* Verlauf: Endpunkt */
.chart .end-punkt { stroke: var(--surface); stroke-width: 2.5; }
.chart .end-puls { opacity: .25; transform-box: fill-box; transform-origin: center; animation: endPuls 2.2s ease-out infinite; }
@keyframes endPuls { 0% { transform: scale(.5); opacity: .45; } 100% { transform: scale(2.2); opacity: 0; } }
.chart .end-wert { fill: var(--text-strong); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.chart .area { opacity: .24; }
.chart .line { stroke-width: 2.6; }

:root[data-theme="dark"] .podium-name, :root[data-theme="dark"] .card.prestige .card-head h2 { text-shadow: 0 1px 2px rgba(0,0,0,.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .podium-name { text-shadow: 0 1px 2px rgba(0,0,0,.5); } }

/* =====================================================================
   Steuer → Buchhaltung (BMD / DATEV)
   ===================================================================== */
.fibu-kopf {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s6);
  padding: 18px 22px; border-radius: var(--r-card, 12px); color: #eef3f0;
  background:
    radial-gradient(60% 120% at 88% 10%, rgba(214, 178, 94, .30), transparent 60%),
    radial-gradient(70% 140% at 15% 110%, rgba(52, 168, 110, .35), transparent 60%),
    radial-gradient(40% 90% at 55% -10%, rgba(143, 224, 176, .18), transparent 70%),
    linear-gradient(135deg, #0b2016 0%, #14372a 45%, #1d5a3f 100%);
  box-shadow: 0 22px 48px -26px rgba(8, 30, 20, .8), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.25);
}
/* Gleicher Schimmer wie im Geschäftskonto (Zahlungen) - ein Stil für alle Prestige-Balken */
.fibu-kopf::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(243, 221, 146, .75) 25%, rgba(255, 255, 255, .9) 50%, rgba(243, 221, 146, .75) 75%, transparent);
}
.fibu-kopf::after {
  content: ''; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(143, 224, 176, .06) 30%, rgba(255, 255, 255, .22) 48%, rgba(243, 221, 146, .16) 55%, rgba(143, 224, 176, .06) 70%, transparent 100%);
  filter: blur(6px); transform: skewX(-12deg);
  animation: bankLicht 7s cubic-bezier(.45, .05, .35, 1) infinite;
  animation-delay: 1.2s;
}
.fibu-kopf > * { position: relative; z-index: 1; }
.fibu-titel { text-shadow: 0 2px 18px rgba(143, 224, 176, .35), 0 1px 2px rgba(0,0,0,.4); }
.fibu-kopf .subtle { color: rgba(238,243,240,.7); }
.fibu-titel { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.fibu-titel svg { width: 20px; height: 20px; }
.fibu-kopf-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fibu-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.1); font-size: var(--fs-xs); font-weight: 600; }
.fibu-status .led { margin: 0; }

.fibu-monate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-top: var(--gap); }
.fibu-monat {
  display: grid; grid-template-columns: auto 1fr; gap: 0 6px; align-items: center; text-align: left;
  font: inherit; color: inherit; cursor: pointer; padding: 8px 9px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--hairline); transition: transform 150ms, box-shadow 150ms, border-color 150ms;
}
.fibu-monat:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(0,0,0,.3); }
.fibu-monat.aktiv { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.fibu-monat .led { width: 9px; height: 9px; margin: 0; grid-row: span 2; align-self: start; margin-top: 4px; }
.fibu-monat b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fibu-monat .subtle { font-size: 10px; grid-column: 2; }
.fibu-monat-zahl { grid-column: 1 / -1; font-size: 10.5px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; }
.fibu-monat.offen .fibu-monat-zahl { color: var(--neg-500); font-weight: 600; }
.fibu-monat.leer { opacity: .6; }
@media (max-width: 1200px) { .fibu-monate { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.fibu-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s8); align-items: start; }
.fibu-summen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fibu-kachel { padding: 10px 12px; border-radius: 10px; background: var(--fill-subtle, rgba(0,0,0,.03)); border: 1px solid var(--hairline); display: flex; flex-direction: column; }
.fibu-kachel span { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.fibu-kachel b { font-size: var(--fs-lg); font-weight: 700; }
.fibu-arten { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.fibu-art { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; font-size: var(--fs-sm); padding: 4px 2px; border-bottom: 1px dotted var(--hairline); }
.fibu-pruef { grid-template-columns: 1fr; }
details.fibu-zeilen, details.fibu-einst { margin-top: var(--s6); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); }
details.fibu-zeilen > summary, details.fibu-einst > summary {
  list-style: none; cursor: pointer; padding: 10px 16px; display: flex; align-items: center; gap: 8px; font-weight: var(--fw-semi); font-size: var(--fs-sm);
}
details.fibu-zeilen > summary::-webkit-details-marker, details.fibu-einst > summary::-webkit-details-marker { display: none; }
details.fibu-zeilen > summary svg, details.fibu-einst > summary svg { width: 15px; height: 15px; }
details[open].fibu-zeilen > summary, details[open].fibu-einst > summary { border-bottom: 1px solid var(--hairline); }
.fibu-einst-inhalt { padding: 16px; display: flex; flex-direction: column; gap: var(--s6); }
.fibu-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); }
.fibu-spalten h4 { margin: 0 0 8px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.fibu-spalten h4:not(:first-child) { margin-top: 16px; }
.fibu-feld { display: flex; flex-direction: column; margin-bottom: 8px; }
.fibu-kontokopf, .fibu-kontozeile { display: grid; grid-template-columns: minmax(0, 1.3fr) 90px 110px; gap: 8px; align-items: center; margin-bottom: 6px; font-size: var(--fs-sm); }
.fibu-kontokopf span { font-size: var(--fs-2xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: .06em; }
.fibu-bestaetigt { padding: 10px 12px; border-radius: 10px; background: var(--status-warn-bg); align-items: flex-start; }
.fibu-anleitung ol { margin: 6px 0 8px; padding-left: 20px; line-height: 1.55; font-size: var(--fs-sm); }
.fibu-verlauf { display: flex; flex-direction: column; }
.fibu-uebergabe { padding: 12px 16px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 6px; }
.fibu-uebergabe:first-child { border-top: 0; }
.fibu-uebergabe.storniert { opacity: .6; }
.fibu-ueb-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.fibu-ueb-info { font-size: var(--fs-xs); }
.fibu-dateien { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 1100px) { .fibu-grid, .fibu-spalten { grid-template-columns: 1fr; } }

/* =====================================================================
   Marktplatz-Münzen (Originallogo in AURA-Plakette)
   ===================================================================== */
.muenze {
  --marke: #9aa3ad;
  position: relative; flex: none; display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden;
  width: 26px; height: 26px; isolation: isolate;
  /* Silbermünze: gebürstetes Metall mit Glanzkante */
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0 8%, transparent 32%),
    conic-gradient(from 210deg, #f4f6f8, #b9c0c7, #eef1f4, #9aa3ad, #e3e7eb, #b3bac2, #f4f6f8);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.7),
    inset 0 0 0 3px rgba(120,130,140,.35),
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 2px 6px -2px rgba(0,0,0,.35);
  transition: box-shadow 250ms, transform 250ms;
}
.muenze.gross { width: 40px; height: 40px; }
/* Prägefläche */
.muenze::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 40% 30%, #fbfcfd, #dfe4e9 70%, #c9d0d6);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
/* Lichtschweif - wie im Geschäftskonto-Balken */
.muenze::after {
  content: ''; position: absolute; top: -30%; bottom: -30%; left: -80%; width: 55%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.75) 50%, transparent);
  transform: skewX(-18deg);
  animation: muenzeLicht 5.5s ease-in-out infinite;
}
@keyframes muenzeLicht { 0%, 62% { left: -80%; } 100% { left: 130%; } }
.muenze.ebay::after { animation-delay: .6s; }
.muenze.kaufland::after { animation-delay: 1.2s; }
.muenze.shopware::after { animation-delay: 1.8s; }

.muenze-logo {
  position: absolute; inset: 24%; z-index: 1;
  background: #6f7883;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.8));
  transition: background 250ms;
}
.muenze.gross .muenze-logo { inset: 25%; }
.muenze-text { font-size: 12px; font-weight: 800; color: #6f7883; }

/* Angebunden: Goldmünze mit Markenfarbe und Leuchten */
.muenze.aktiv {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.9) 0 8%, transparent 32%),
    conic-gradient(from 210deg, #fff1bd, #c9a227, #f3dd92, #9c7a18, #f3dd92, #b8911f, #fff1bd);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.6),
    inset 0 0 0 3px rgba(156,122,24,.4),
    0 0 12px -2px var(--marke),
    0 2px 6px -2px rgba(0,0,0,.4);
}
.muenze.aktiv::before { background: radial-gradient(circle at 40% 30%, #1c2530, #0f151c 75%); }
.muenze.aktiv .muenze-logo { background: var(--marke); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--marke) 60%, transparent)); }

/* Überfahren: die Marke zeigt kurz ihre Farbe */
.menu-item.markt:hover .muenze .muenze-logo,
.markt-karte:hover .muenze .muenze-logo { background: var(--marke); }
.menu-item.markt:hover .muenze,
.markt-karte:hover .muenze { transform: rotate(-8deg) scale(1.06); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7), inset 0 0 0 3px rgba(120,130,140,.35), 0 0 12px -2px var(--marke), 0 2px 6px -2px rgba(0,0,0,.35); }

/* Münzen, Stufe 2: Hologramm-Logo und Aufkleber-Rand (intern, Wunsch Inhaber 15.09.2026) */
.muenze.ebay .muenze-logo { inset: 12%; }
.muenze.gross.ebay .muenze-logo { inset: 13%; }
.muenze.kaufland .muenze-logo { inset: 27%; }

/* Nicht angebunden: silbern geprägt - Licht oben, Schatten unten */
.muenze:not(.aktiv) .muenze-logo {
  background: linear-gradient(180deg, #8a939d, #5c656f);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 -1px 0 rgba(0,0,0,.18));
}

/* Angebunden und beim Überfahren: Hologramm in Markenfarbe mit wanderndem Glanz */
.muenze.aktiv .muenze-logo,
.menu-item.markt:hover .muenze .muenze-logo,
.markt-karte:hover .muenze .muenze-logo {
  background:
    linear-gradient(115deg,
      var(--marke) 0%, var(--marke) 30%,
      color-mix(in srgb, var(--marke) 45%, #ffffff) 45%,
      #ffffff 50%,
      color-mix(in srgb, var(--marke) 45%, #ffffff) 55%,
      var(--marke) 70%, color-mix(in srgb, var(--marke) 80%, #000000) 100%);
  background-size: 250% 100%;
  animation: holoLogo 3.8s ease-in-out infinite;
  /* Aufkleber: helle Kontur rundum und ein kleiner Schlagschatten */
  filter:
    drop-shadow(.6px 0 0 rgba(255,255,255,.9)) drop-shadow(-.6px 0 0 rgba(255,255,255,.9))
    drop-shadow(0 .6px 0 rgba(255,255,255,.9)) drop-shadow(0 -.6px 0 rgba(255,255,255,.9))
    drop-shadow(0 1.5px 1px rgba(0,0,0,.55))
    drop-shadow(0 0 4px color-mix(in srgb, var(--marke) 70%, transparent));
}
@keyframes holoLogo { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
.muenze.aktiv.ebay .muenze-logo { animation-delay: .5s; }
.muenze.aktiv.kaufland .muenze-logo { animation-delay: 1s; }
.muenze.aktiv.shopware .muenze-logo { animation-delay: 1.5s; }

/* =====================================================================
   Solide Klickart - überall wie in der Seitenleiste (Wunsch Inhaber 15.09.2026)
   Nichts hebt sich, kippt, rutscht oder staucht beim Überfahren und Klicken.
   Rückmeldung kommt aus Fläche, Farbe und einer leuchtenden Kante.
   Das Anmeldefenster bleibt bewusst unverändert.
   ===================================================================== */
.card.hoverable:hover, .kpi:hover, .kpi:hover .medallion, .shoptile:hover,
.ff-tab:hover, .ff-tab:active, .ff-row:hover, .ff-tile.next:hover, .ff-tile.next:active,
.snap-now:hover, .wb-tab:hover, .wb-tab:active, .theme-card:hover, .fibu-monat:hover,
.podium-zeile:hover, .attn-row:hover > svg, .btn:active:not(:disabled),
.rfm-cell:hover, .cohort-cell:hover, .walk-dot:hover, .heat-cell:hover,
.menu-item.markt:hover .muenze, .markt-karte:hover .muenze { transform: none; }

/* Gedrückt: die Fläche sinkt ein - kurz, fest, ohne Nachwippen */
.card.hoverable:active, .shoptile:active, .ff-tab:active, .wb-tab:active, .ff-row:active,
.ff-tile.next:active, .snap-now:active, .theme-card:active, .fibu-monat:active {
  box-shadow: inset 0 1px 3px rgba(19,33,25,.16), 0 0 0 1px var(--hairline-strong);
  filter: brightness(.985); transition-duration: 60ms;
}
.segmented button:active { background: var(--surface-active); box-shadow: inset 0 1px 2px rgba(19,33,25,.14); transition-duration: 60ms; }
.nav-item:active { background: var(--sidebar-sel-bg); box-shadow: inset 0 1px 3px rgba(0,0,0,.28); }
.menu-item:active { box-shadow: inset 0 1px 2px rgba(19,33,25,.14); }

/* Datenzellen: statt Aufblähen ein klarer Rahmen */
.rfm-cell:hover, .cohort-cell:hover, .heat-cell:hover { box-shadow: 0 0 0 1.5px var(--accent), 0 4px 10px -6px rgba(0,0,0,.35); position: relative; z-index: 1; }
.walk-dot:hover { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Reiter: die leuchtende Kante wie am aktiven Eintrag der Seitenleiste */
.ff-tab::before { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--tab) 60%, transparent); }
.wb-tab::before { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--wb) 60%, transparent); }
.tab[aria-selected="true"]::after { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.segmented button { position: relative; }
.segmented button::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; height: 2px; width: 0; border-radius: 2px;
  transform: translateX(-50%); background: var(--accent); opacity: 0;
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: width var(--t-base) var(--e-out), opacity var(--t-fast);
  pointer-events: none;
}
.segmented button[aria-pressed="true"]::after { width: 14px; opacity: .9; }

/* Podest: Zeile wird fest hinterlegt, links die leuchtende Kante */
.podium-zeile { position: relative; }
.podium-zeile::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 0 3px 3px 0;
  transform: translateY(-50%); background: var(--farbe, var(--accent));
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--farbe, var(--accent)) 55%, transparent);
  transition: height var(--t-base) var(--e-out);
}
.podium-zeile:hover::before { height: 60%; }

/* Seitenleiste: seriöses Aufleuchten beim Überfahren (Test, Wunsch Inhaber 15.09.2026)
   Schrift und Symbol glimmen kurz leuchtgrün auf, die Kante deutet sich an,
   ohne Lichtschleier. Nichts bewegt sich. */
.nav-item span, .nav-item svg { transition: color 260ms ease, text-shadow 260ms ease, filter 260ms ease, opacity 260ms ease; }
.nav-item:hover:not(.active) span:not(.nav-badge) {
  color: #b4f0c9;
  text-shadow: 0 0 12px rgba(110,220,150,.75), 0 0 3px rgba(110,220,150,.45);
}
.nav-item:hover:not(.active) svg {
  color: #86e8aa; opacity: 1;
  filter: drop-shadow(0 0 6px rgba(110,220,150,.8));
}
.nav-item:hover:not(.active)::before { height: 9px; opacity: .7; }
/* Lichtschleier entfernt (Inhaber 15.09.2026: "Lichtblitzer weg") - Glimmen und Farbe bleiben. */

/* Rücksendeetikett in der Retoure */
.rl-karte { gap: var(--s4); }
.rl-kopf { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.rl-zusteller {
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .1em; padding: 3px 8px; border-radius: 6px;
  background: var(--text-strong); color: var(--surface);
}
.rl-nummer { font-size: var(--fs-md); font-weight: 650; letter-spacing: .04em; }
.rl-gesendet { display: flex; align-items: center; gap: var(--s3); color: var(--status-pos-fg); font-size: var(--fs-sm); }
.rl-gesendet svg { width: 14px; height: 14px; }
/* Ruhiges Nachladen (Inhaber 15.09.2026: "nichts darf beim Klicken hüpfen")
   laedt-still  alter Inhalt bleibt stehen, leicht gedämpft, bis der neue da ist
   ruhig        neu gezeichneter Inhalt läuft nicht erneut ein.
   Dauerhafte Effekte (Schimmer, Glanz, Puls) bleiben unberührt. */
.laedt-still { opacity: .6; pointer-events: none; transition: opacity 160ms ease; }
.ruhig .stagger tbody tr,
.ruhig .bar > i,
.ruhig .chart .line, .ruhig .chart .area, .ruhig .chart .bar-rect, .ruhig .chart .donut-seg,
.ruhig .pd-seg, .ruhig .podium-zeile, .ruhig .podium-balken i,
.ruhig .answer-card, .ruhig .filter-chip { animation: none !important; }
/* Anbieterkonten in Zahlungen - bewusst schlicht */
.ak-leiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s5); margin-top: var(--s6); }
.ak-kachel {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s5) var(--s6); border-radius: var(--r-card);
  border: 1px solid var(--hairline); background: var(--fill-surface);
  box-shadow: var(--sh-card), var(--sheen);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.ak-kachel:hover { border-color: var(--hairline-strong); box-shadow: var(--sh-card-hover), var(--sheen); }
.ak-kachel:active { box-shadow: inset 0 1px 3px rgba(19,33,25,.16), 0 0 0 1px var(--hairline-strong); transition-duration: 60ms; }
.ak-kopf { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-sm); }
.ak-kopf .led { width: 7px; height: 7px; }
.ak-status { color: var(--text-subtle); font-size: var(--fs-2xs); margin-left: auto; white-space: nowrap; }
.ak-betrag { font-family: var(--font-display, var(--font-ui)); font-size: var(--fs-lg); font-weight: 650; color: var(--text-strong); letter-spacing: -.01em; margin-top: 2px; }
.ak-sub { font-size: var(--fs-2xs); color: var(--text-subtle); }
.ak-hinweise { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }

.ak-dialog { gap: var(--s6); }
.ak-dialog-kopf { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-sm); }
.ak-dialog-kopf .led { width: 8px; height: 8px; }
.ak-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.ak-zahlen > div { display: flex; flex-direction: column; gap: 2px; padding: var(--s4) var(--s5); border-radius: var(--r-md); background: var(--bg-sunken); }
.ak-zahlen span { font-size: var(--fs-2xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: .06em; }
.ak-zahlen b { font-size: var(--fs-md); }
.ak-abschnitt h4 { margin: 0 0 var(--s3); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.ak-liste { display: flex; flex-direction: column; }
.ak-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s5); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--hairline); }
.ak-zeile:last-child { border-bottom: 0; }
.ak-zeile .neg, .ak-zahlen .neg { color: var(--signal-neg); }
@media (max-width: 520px) { .ak-zahlen { grid-template-columns: 1fr; } .ak-zeile { grid-template-columns: 1fr auto; } }
/* Druckvorschau am Packtisch - Belege und Etikett direkt auf der Seite */
.ff-druck {
  border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface);
  display: flex; flex-direction: column; overflow: hidden;
}
.ff-druck-kopf {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--hairline); background: var(--surface-alt, var(--surface));
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
}
.ff-druck-kopf > svg { width: 14px; height: 14px; }
.ff-druck-kopf .btn { text-transform: none; letter-spacing: 0; }
.ff-druck-wahl { display: inline-flex; gap: 2px; padding: 2px; margin-left: var(--s4); border-radius: var(--r-md); background: var(--fill-sunken); box-shadow: inset 0 0 0 1px var(--hairline); }
.ff-druck-wahl button {
  border: 0; background: transparent; cursor: pointer; font: inherit; text-transform: none; letter-spacing: 0;
  font-size: var(--fs-sm); color: var(--text-muted); padding: 3px var(--s4); border-radius: calc(var(--r-md) - 2px);
  display: inline-flex; gap: 6px; align-items: baseline; transition: background var(--t-fast), color var(--t-fast);
}
.ff-druck-wahl button .mono { font-size: var(--fs-2xs); color: var(--text-subtle); }
.ff-druck-wahl button:hover { background: var(--surface-hover); color: var(--text); }
.ff-druck-wahl button.on { background: var(--fill-surface); color: var(--text-strong); font-weight: var(--fw-semi); box-shadow: 0 1px 2px rgba(19,33,25,.09), 0 0 0 1px var(--hairline); }
.ff-druck-flaeche { background: #525659; display: flex; justify-content: center; padding: var(--s5); }
.ff-druck-rahmen { display: block; border: 0; width: 100%; height: 720px; background: #525659; }
/* Etikett 10 x 15: schmal und hoch statt quer über die ganze Breite */
.ff-druck.label .ff-druck-rahmen { width: min(100%, 520px); height: 760px; }
.ff-druck.leer .ff-druck-leer { padding: var(--s7) var(--s6); color: var(--text-subtle); font-size: var(--fs-sm); text-align: center; }
/* Packtisch: gesperrter Kunde - Rückfrage */
.ff-sperre {
  display: flex; gap: var(--s5); align-items: flex-start;
  padding: var(--s5) var(--s6); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--signal-neg) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--signal-neg) 28%, var(--hairline));
  border-left: 3px solid var(--signal-neg);
}
.ff-sperre > svg { width: 18px; height: 18px; flex: none; color: var(--signal-neg); margin-top: 2px; }
.ff-sperre b { display: block; color: var(--text-strong); margin-bottom: 2px; }
.ff-sperre div > div { font-size: var(--fs-sm); color: var(--text-muted); }
/* Kopfzeile ruhig: Titel und Unterzeile haben immer dieselbe Höhe */
.topbar-title { display: flex; flex-direction: column; justify-content: center; height: 40px; }
.topbar h1 { line-height: 1.25; }
.topbar .crumb { line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.topbar .crumb.leer { visibility: hidden; }
/* Shopface-Umschalter: AURA-Zeichen in Miniatur bei "Alle" */
.shop-aura { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; }
.app .shop-aura svg { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 1px 1.5px rgba(40, 20, 90, .28)); }
/* Packtisch: Kachel "Unterwegs" - sichtbar, sobald Pakete auf dem Weg sind */
/* Gelb wie DHL und Post - Rot bleibt fuer 'Brauchen jemanden' (Wunsch Inhaber 15.09.2026) */
.ff-tab.transit { --tab: #d9a400; }
.ff-tab.transit .ff-tabcount { color: #b58700 !important; }
.ff-tab.transit::after { opacity: .045; }
.ff-tab.transit .ff-tabcount { color: var(--tab); }
.ff-tab.transit .ff-tablabel { color: color-mix(in srgb, var(--tab) 70%, var(--text-muted)); }
.ff-tab.transit::before { width: calc(100% - 26px); opacity: .55; box-shadow: 0 0 10px 1px color-mix(in srgb, var(--tab) 45%, transparent); }
.ff-wegspur {
  position: relative; display: block; height: 2px; margin-top: 6px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tab) 35%, transparent) 0 6px, transparent 6px 10px);
}
.ff-wegspur i {
  position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--tab); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tab) 18%, transparent), 0 0 8px color-mix(in srgb, var(--tab) 60%, transparent);
  animation: wegPunkt 11s linear infinite;
}
@keyframes wegPunkt { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
/* Packtisch: Reihenfolge der Packliste */
.ff-queuehead .ff-reihe { width: auto; height: 26px; padding: 0 26px 0 8px; font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; }
/* Bestellliste: nichts läuft über die eigene Spalte hinaus (Befund Inhaber 15.09.2026) */
.orow > * { min-width: 0; }
.orow-state { min-width: 0; max-width: 100%; }
.orow-issue { min-width: 0; max-width: 100%; flex-wrap: nowrap; }
.orow-issue-badge { max-width: 100%; min-width: 0; }
.orow-issue-badge .badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.orow-issue > .orow-meta { flex: none; }
/* =====================================================================
   Zählerwerk - Auswertungen (Bestellungen und Umsatz seit Beginn)
   Stufe 3 (Inhaber 15.09.2026: "kein Casino - Meilensteine, wichtige
   Unternehmenszahlen"): kompakt, sachlich, ruhige Farben. Die Ziffern
   rollen kurz hoch und stehen dann still. Kein Glitzern, kein Schein.
   ===================================================================== */
.zw { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s5); margin-bottom: var(--s6); align-items: stretch; }
.zw-laden { min-height: 150px; }
@media (max-width: 1100px) { .zw { grid-template-columns: 1fr; } }

.zw-werk {
  position: relative; overflow: hidden; color: #e8eee9;
  padding: 14px 18px 14px; border-radius: var(--r-card, 12px);
  background: linear-gradient(160deg, #0d1f16 0%, #12291e 100%);
  box-shadow: 0 12px 28px -20px rgba(4, 16, 10, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
  display: flex; flex-direction: column; gap: 10px;
}
.zw-werk::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(243, 221, 146, .35); pointer-events: none; }
.zw-werk::after { content: none; }
.zw-werk > * { position: relative; z-index: 1; }
.zw-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.zw-marke { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(232, 238, 233, .7); }
.zw-marke svg { width: 12px; height: 12px; color: #d9bd6a; }
.zw-seit { font-size: 10.5px; color: rgba(232, 238, 233, .5); }

.zw-zahlen { display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: end; }
@media (max-width: 640px) { .zw-zahlen { grid-template-columns: 1fr; } }
.zw-zeile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.zw-zeile + .zw-zeile { padding-top: 0; border-top: 0; }
.zw-label { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(232, 238, 233, .55); }

.zw-fenster { display: inline-flex; align-items: flex-start; gap: 0; padding: 0; background: none; box-shadow: none; line-height: 1; }
.zw-walze {
  position: relative; display: inline-block; overflow: hidden;
  width: .6em; height: 1.1em; font-size: 28px;
  background: none; box-shadow: none; border-radius: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.zw-walze::after { content: none; }
.zw-band { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; transition-property: transform; transition-timing-function: cubic-bezier(.2, .8, .25, 1); will-change: transform; }
.zw-band span {
  height: 1.1em; display: flex; align-items: center; justify-content: center; flex: none;
  font-family: var(--font-display, var(--font-ui)); font-size: 1em; font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #f4f1e6; text-shadow: none; filter: none;
}
.zw-walze.leer { opacity: .18; }
.zw-trenner { font-family: var(--font-display, var(--font-ui)); font-size: 28px; font-weight: 600; line-height: 1.1; color: rgba(244, 241, 230, .7); margin: 0; padding: 0; align-self: flex-start; }
.zw-trenner.leer { opacity: .18; }
.zw-einheit { font-family: var(--font-display, var(--font-ui)); font-size: 15px; font-weight: 500; color: rgba(244, 241, 230, .7); margin: 6px 5px 0 0; }
.zw-komma { display: none; }
.zw-cent { display: inline-flex; margin: 3px 0 0 3px; padding-left: 0; border-left: 0; }
.zw-walze.cent { font-size: 14px; }
.zw-walze.cent .zw-band span { font-weight: 500; color: rgba(244, 241, 230, .75); background: none; }
.zw-walze.rot { background: none; }

.zw-ziele { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin-top: 2px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .07); }
@media (max-width: 640px) {
  .zw-ziele { grid-template-columns: 1fr; }
  .zw-walze, .zw-trenner { font-size: 24px; }
}
.zw-ziel-text { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; color: rgba(232, 238, 233, .75); margin-bottom: 5px; }
.zw-ziel-text b { font-weight: 500; }
.zw-ziel-text span { color: rgba(232, 238, 233, .45); white-space: nowrap; }
.zw-ziel-balken { height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; box-shadow: none; }
.zw-ziel-balken i {
  display: block; height: 100%; border-radius: 99px; background: #c9a64a; box-shadow: none;
  animation: balkenEin 1.2s cubic-bezier(.2,.8,.2,1) both; transform-origin: left;
}

/* Woche / Monat / Jahr / Heute */
.zw-perioden { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.zw-periode {
  padding: 14px 16px; border-radius: var(--r-card); background: var(--fill-surface);
  border: 1px solid var(--hairline); box-shadow: var(--sh-card), var(--sheen);
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.zw-p-titel { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }
.zw-p-zahl { font-family: var(--font-display, var(--font-ui)); font-size: 26px; font-weight: 700; color: var(--text-strong); letter-spacing: -.02em; line-height: 1.15; }
.zw-p-zahl small { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.zw-p-umsatz { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text, var(--green-600)); }
.zw-p-vergleich { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 4px; line-height: 1.35; }
.zw-p-vergleich.plus { color: var(--status-pos-fg, #1f7a45); font-weight: 600; }
.zw-p-vergleich.gold { color: #a67c12; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.zw-p-vergleich.gold svg { width: 12px; height: 12px; }
/* Zählerwerk Stufe 3: Zeitraum-Kacheln kompakt und sachlich */
.zw-perioden { gap: var(--s4); }
.zw-periode { padding: 10px 14px; gap: 1px; }
.zw-p-titel { font-size: 10px; letter-spacing: .08em; }
.zw-p-zahl { font-size: 19px; font-weight: 650; }
.zw-p-zahl small { font-size: 11px; }
.zw-p-umsatz { font-size: var(--fs-xs); }
.zw-p-vergleich { font-size: 10.5px; margin-top: 2px; }
.zw-werk { justify-content: space-between; }

/* =====================================================================
   Packtisch: offene Bestellungen als Werte sichtbar (Wunsch Inhaber
   16.09.2026). Champagner-Gold statt Ocker: zurückhaltend, edel, mit einem
   feinen Lichtreflex, der langsam über die Kante wandert - kein Blinken.
   Gewählt bleibt grün, gesperrt bleibt rot.
   ===================================================================== */
.ff-row:not(.on):not(.blocked) {
  --champ-tief: #a8926a;
  --champ: #cdbb93;
  --champ-hell: #f4ecda;
  border-color: color-mix(in srgb, var(--champ) 42%, var(--hairline));
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--champ-hell) 55%, transparent), transparent 38%),
    var(--fill-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 1px 2px rgba(60, 50, 30, .05),
    0 8px 20px -16px rgba(120, 100, 60, .35);
}
.ff-row:not(.on):not(.blocked)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg,
    var(--champ-tief) 0%, var(--champ) 30%, #fffaf0 50%, var(--champ) 70%, var(--champ-tief) 100%);
  background-size: 100% 300%;
  animation: ffGoldSchimmer 9s ease-in-out infinite;
}
.ff-row:not(.on):not(.blocked):hover {
  border-color: color-mix(in srgb, var(--champ-tief) 55%, var(--hairline));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 0 0 3px color-mix(in srgb, var(--champ) 18%, transparent),
    0 10px 22px -16px rgba(120, 100, 60, .4);
}
:root[data-theme="dark"] .ff-row:not(.on):not(.blocked) {
  --champ-tief: #8f7d58; --champ: #c9b68c; --champ-hell: rgba(201, 182, 140, .10);
  box-shadow: 0 8px 20px -16px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ff-row:not(.on):not(.blocked) {
    --champ-tief: #8f7d58; --champ: #c9b68c; --champ-hell: rgba(201, 182, 140, .10);
    box-shadow: 0 8px 20px -16px rgba(0, 0, 0, .6);
  }
}
@keyframes ffGoldSchimmer {
  0%, 100% { background-position: 0 0%; }
  50%      { background-position: 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ff-row:not(.on):not(.blocked)::before { animation: none; }
}
/* =====================================================================
   Versandpartner anlegen - mittiges, ruhiges Formular (16.09.2026)
   ===================================================================== */
.modal.spf-modal { width: min(640px, calc(100vw - 32px)); }
.spf-modal .modal-head { align-items: flex-start; padding-block: var(--s7); }
.spf-title { display: flex; gap: var(--s5); align-items: center; }
.spf-title b { display: block; font-size: var(--h3-size); color: var(--text-strong); }
.spf-title small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.spf-titleicon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--signal-pos);
  background: color-mix(in srgb, var(--signal-pos) 10%, var(--fill-surface));
  border: 1px solid color-mix(in srgb, var(--signal-pos) 22%, var(--hairline));
}
.spf-titleicon svg { width: 20px; height: 20px; }
.spf { display: flex; flex-direction: column; gap: var(--s6); }
.spf-section {
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: var(--s6) var(--s7) var(--s7);
  background: color-mix(in srgb, var(--fill-muted, #f4f5f4) 45%, var(--fill-surface));
}
.spf-sechead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s5); margin-bottom: var(--s5); }
.spf-sechead b { font-size: var(--fs-sm); color: var(--text-strong); }
.spf-sechead span { font-size: var(--fs-xs); color: var(--text-muted); }
.spf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) var(--s6); }
@media (max-width: 560px) { .spf-grid { grid-template-columns: minmax(0, 1fr); } }
.spf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.spf-field.span { grid-column: 1 / -1; }
.spf-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-default, var(--text-strong)); }
.spf-req { color: var(--signal-neg); font-style: normal; }
.spf-field .input { height: 40px; font-size: var(--fs-sm); background: var(--fill-surface); }
.spf-field select.input { cursor: pointer; }
.spf-field .input:focus {
  border-color: color-mix(in srgb, var(--signal-pos) 55%, var(--hairline));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-pos) 15%, transparent);
  outline: none;
}
.spf-field .input.invalid {
  border-color: var(--signal-neg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-neg) 14%, transparent);
}
.spf-suffix { position: relative; display: flex; align-items: center; }
.spf-suffix .input { width: 100%; padding-right: 76px; }
.spf-suffix span { position: absolute; right: 12px; font-size: var(--fs-xs); color: var(--text-muted); pointer-events: none; }
.spf-hint { font-size: var(--fs-2xs, 11px); color: var(--text-subtle, var(--text-muted)); line-height: 1.35; }
.spf-err:empty { display: none; }
.spf-err { font-size: var(--fs-2xs, 11px); color: var(--signal-neg); font-weight: 500; }
.spf-modal .modal-foot { gap: var(--s5); }
.spf-modal .modal-foot .btn { min-width: 128px; height: 40px; justify-content: center; }
/* Packtisch: Herkunft der Bestellung (Kanal) - 16.09.2026 */
.ff-kanal {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-family: var(--font-body, inherit); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .03em;
  line-height: 1; padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--bg-sunken); color: var(--text-muted); border: 1px solid var(--hairline);
}
.ff-kanal svg { width: 11px; height: 11px; }
.ff-kanal small { font-weight: 500; letter-spacing: 0; opacity: .8; margin-left: 2px; }
.ff-kanal.web { color: var(--text-muted); }
.ff-kanal.amazon { background: #fff4e0; color: #8a4b00; border-color: #f5c77e; }
.ff-kanal.ebay { background: #e9f1ff; color: #0b4fb3; border-color: #a9c6f5; }
.ff-kanal.phone, .ff-kanal.manual { background: #f1ecfb; color: #5b3aa0; border-color: #d3c3f0; }
.ff-order .ff-kanal { align-self: center; font-size: var(--fs-xs); padding: 4px 9px; margin-left: var(--s3); }
:root[data-theme="dark"] .ff-kanal.amazon { background: rgba(245,160,40,.14); color: #f5c77e; border-color: rgba(245,160,40,.35); }
:root[data-theme="dark"] .ff-kanal.ebay { background: rgba(80,140,240,.14); color: #a9c6f5; border-color: rgba(80,140,240,.35); }
:root[data-theme="dark"] .ff-kanal.phone, :root[data-theme="dark"] .ff-kanal.manual { background: rgba(150,110,230,.14); color: #d3c3f0; border-color: rgba(150,110,230,.35); }
/* Zeichen des Versanddienstleisters (16.09.2026). Originallogo, sobald die
   Datei unter /assets/logos/zusteller-<id>.svg liegt - sonst der Name in
   den Markenfarben. Nichts nachgezeichnet. */
.zst {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 18px; padding: 0 7px; border-radius: 4px; white-space: nowrap;
  font-size: var(--fs-2xs); line-height: 1; letter-spacing: .02em;
  border: 1px solid var(--hairline); background: var(--bg-sunken); color: var(--text-muted);
}
.zst .zst-name { font-weight: 800; }
.zst.dhl { background: #FFCC00; border-color: #e6b800; color: #D40511; }
.zst.dhl .zst-name { font-style: italic; letter-spacing: .04em; }
.zst.post_at { background: #FFDD00; border-color: #e6c700; color: #1d1d1b; }
.zst.mit-logo { padding: 0 6px; }
.zst .zst-logo { height: 12px; width: auto; display: block; }
.zst.gross { height: 24px; padding: 0 9px; font-size: var(--fs-xs); border-radius: 5px; }
.zst.gross .zst-logo { height: 16px; }
/* Dezenter Zurück-Knopf in der Kopfzeile (Wunsch Inhaber 17.09.2026).
   Solide Klickart: keine Bewegung, Rückmeldung nur über Fläche. */
.topbar-back {
  flex: none; width: 30px; height: 30px; margin-right: calc(-1 * var(--s3));
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-muted);
  cursor: pointer; transition: background-color .15s, color .15s;
}
.topbar-back[hidden] { display: none; }
.topbar-back svg { width: 18px; height: 18px; }
.topbar-back:hover { background: var(--hairline); color: var(--text-strong); }
.topbar-back:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 1px; }

/* Artikelbezeichnung wie in einem ERP: eine Zeile Kernname, darunter klein
   SKU · ASIN. Voller Marktplatz-Titel im Tooltip (Wunsch Inhaber 17.09.2026). */
.artikel { min-width: 0; max-width: 100%; }
/* Volle Bezeichnung, umbrechend - nie abgeschnitten (Inhaber 17.09.2026). */
.artikel-name {
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; color: var(--text-strong);
  white-space: normal; overflow-wrap: anywhere;
}
/* Auswertungslisten: ruhig gesetzt, zwei Zeilen, danach weich ausgeblendet.
   Der volle Name steht im Tooltip und auf den Belegen (Inhaber 18.09.2026). */
.artikel.ruhig { max-width: 460px; }
.artikel.ruhig .artikel-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: var(--fw-medium); letter-spacing: -.005em;
}
.artikel.ruhig .artikel-meta {
  margin-top: 3px; font-size: 10.5px; letter-spacing: .02em;
  color: var(--text-subtle);
}
table.data tbody tr:hover .artikel.ruhig .artikel-name { color: var(--accent-700, var(--accent)); }
.artikel-meta {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; line-height: 1.3;
  color: var(--text-muted); letter-spacing: .01em; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.data td .artikel { max-width: 420px; }
.orow-pname, .ff-rowpname { white-space: normal; overflow: visible; text-overflow: clip; display: block; -webkit-line-clamp: unset; overflow-wrap: anywhere; }

/* Kopierbare Kennungen (SKU, ASIN): Klick kopiert, winziges "kopiert" daneben.
   Solide Klickart - keine Bewegung, nur Fläche. */
.kopier-wrap { position: relative; display: inline; white-space: nowrap; }
.kopierbar { cursor: copy; border-radius: 3px; padding: 0 2px; margin: 0 -2px; transition: background-color .12s, color .12s; }
.kopierbar:hover { background: var(--hairline); color: var(--text-strong); }
.kopierbar:focus-visible { outline: 1px solid var(--pos-500); outline-offset: 1px; }
.kopiert {
  font-family: var(--font-sans, inherit); font-size: 9.5px; letter-spacing: .02em; color: var(--pos-500);
  margin-left: 4px; opacity: 0; transition: opacity .15s; pointer-events: none;
}
.kopiert.an { opacity: 1; }

/* Klärfälle am Packtisch: zurückgestellt, sichtbar, aber nicht im Weg (Inhaber 17.09.2026). */
.ff-klaer-trenner {
  display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 2px var(--s2);
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: #9a6b12;
}
.ff-klaer-trenner svg { width: 14px; height: 14px; }
/* Oben in der Liste: Klärfälle gibt es - mit Sprung dorthin (Goldbarren-Prinzip). */
.ff-klaer-hinweis {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  margin: 0 0 var(--s4); padding: 9px 12px; border-radius: var(--r-md);
  border: 1px solid #f0d49a; border-left: 3px solid #e0a73a; background: #fffaf0;
  color: #7a4f08; font-size: var(--fs-sm); text-align: left; cursor: pointer;
}
.ff-klaer-hinweis:hover { background: #fff3dc; }
.ff-klaer-hinweis svg { width: 15px; height: 15px; flex: none; }
.ff-row.klaerfall { border-left: 3px solid #e0a73a; background: #fffaf0; }
.ff-klaer-grund {
  margin-top: 6px; font-size: var(--fs-xs); color: #8a5a0a; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left;
}

/* Neu eingegangen - oben, bis jemand die Bestellung öffnet (Inhaber 19.09.2026).
   Solide Klickart: keine Bewegung, Rückmeldung nur über Fläche und Kante. */
.ff-neu-trenner, .ff-klaer-trenner.ff-rest-trenner {
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px 4px; font-size: var(--fs-xs); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: .04em;
}
.ff-neu-trenner { color: #1d4f91; }
.ff-klaer-trenner.ff-rest-trenner { color: var(--ink-3, #6b7280); }
.ff-neu-trenner svg, .ff-rest-trenner svg { width: 14px; height: 14px; }
.ff-neu-marke {
  font-size: 10px; font-weight: var(--fw-semibold, 600); letter-spacing: .05em;
  padding: 1px 6px; border-radius: 999px; background: #2f6fd0; color: #fff;
}
.neu-eingang {
  margin: 0 0 var(--s4); padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid #bcd3f5; border-left: 3px solid #2f6fd0; background: #f3f8ff;
}
.neu-eingang-kopf { display: flex; align-items: center; gap: var(--s2); color: #1d4f91; font-size: var(--fs-sm); }
.neu-eingang-kopf svg { width: 15px; height: 15px; flex: none; }
.neu-eingang-liste { display: grid; gap: 4px; margin-top: 8px; }
.neu-eingang-eintrag {
  display: grid; grid-template-columns: minmax(150px, auto) 90px minmax(0, 1fr) auto auto auto;
  align-items: center; gap: var(--s3); width: 100%; padding: 6px 10px; text-align: left;
  border: 1px solid #d6e4f8; border-radius: var(--r-sm, 6px); background: #fff;
  font-size: var(--fs-sm); color: inherit; cursor: pointer;
}
.neu-eingang-eintrag:hover { background: #eaf2ff; border-color: #2f6fd0; }
@media (max-width: 720px) {
  .neu-eingang-eintrag { grid-template-columns: 1fr auto; }
}

/* Amazon-Versandmeldung am Packtisch */
.ff-tabs .grow { flex: 1; }
/* Die beiden Amazon-Knöpfe: gleiche Höhe, champagnerfarben (Inhaber 17.09.2026). */
.ff-tabs .ff-amazonknopf {
  align-self: center; height: 38px;
  display: inline-flex; align-items: center; gap: var(--s3);
  background: linear-gradient(180deg, var(--gold-50), var(--gold-100));
  border: 1px solid var(--gold-200); color: var(--gold-700, var(--gold-600));
  font-weight: var(--fw-medium);
}
.ff-tabs .ff-amazonknopf:hover { background: linear-gradient(180deg, var(--gold-100), var(--gold-200)); border-color: var(--gold-300); }
.ff-tabs .ff-amazonknopf svg { color: var(--gold-500); }
/* Stand des stündlichen Einlesens - leise, nur bei Handlungsbedarf farbig. */
.ff-tabs .ff-ordnerstand {
  align-self: center; font-size: var(--fs-xs); color: var(--text-muted);
  white-space: nowrap; user-select: none;
}
.ff-tabs .ff-ordnerstand .ff-ordner-warn { color: var(--warn-500); font-weight: var(--fw-semi); }

/* Verlauf am Packtisch: was zuletzt passiert ist (Inhaber 18.09.2026). */
.ff-verlauf {
  margin-top: var(--gap); border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--fill-surface); overflow: hidden;
}
.ff-verlauf-kopf {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s6); background: var(--bg-sunken);
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
}
.ff-verlauf-kopf svg { width: 13px; height: 13px; }
.ff-verlauf-liste { display: flex; flex-direction: column; }
.ff-verlauf-zeile {
  display: grid; grid-template-columns: 12px 58px minmax(0, 1fr) auto; gap: var(--s4);
  align-items: baseline; padding: 5px var(--s6); font-size: var(--fs-xs);
  border-top: 1px solid var(--hairline);
}
.ff-verlauf-zeile:first-child { border-top: none; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ff-verlauf-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); align-self: center; }
.ff-verlauf-zeile.beleg .ff-verlauf-punkt { background: var(--gold-400, #c2a253); }
.ff-verlauf-zeile.transit .ff-verlauf-punkt { background: var(--info-500, #3a7bd5); }
.ff-verlauf-zeile.neg .ff-verlauf-punkt { background: var(--neg-500); }
.ff-verlauf-zeit { font-variant-numeric: tabular-nums; color: var(--text-subtle); }
.ff-verlauf-text { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-verlauf-wer { color: var(--text-subtle); font-size: var(--fs-2xs); }

/* Logbuch im Wächter: was von selbst weiterläuft (Inhaber 17.09.2026). */
.lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); }
.lb-karte {
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--fill-surface); padding: var(--s5) var(--s6);
  display: flex; flex-direction: column; gap: 4px;
}
.lb-kopf { display: flex; align-items: center; gap: var(--s4); }
.lb-punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.lb-karte.laeuft .lb-punkt { animation: lbPuls 2.6s ease-in-out infinite; }
.lb-karte.wartet .lb-punkt { background: var(--text-subtle); box-shadow: 0 0 0 4px var(--bg-sunken); }
.lb-karte.ueberfaellig { border-color: var(--warn-300, var(--hairline)); }
.lb-karte.ueberfaellig .lb-punkt { background: var(--warn-500); box-shadow: 0 0 0 4px var(--status-warn-bg, transparent); }
.lb-karte.fehler { border-color: var(--neg-300, var(--hairline)); background: var(--status-neg-bg, var(--fill-surface)); }
.lb-karte.fehler .lb-punkt { background: var(--neg-500); box-shadow: 0 0 0 4px var(--status-neg-bg, transparent); }
@keyframes lbPuls { 0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); } 50% { box-shadow: 0 0 0 7px transparent; } }
.lb-takt {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .02em;
  color: var(--gold-700, var(--text-muted)); background: var(--gold-50); border: 1px solid var(--gold-200);
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}
.lb-was { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.35; }
.lb-fuss { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: var(--fs-2xs); color: var(--text-subtle); }
.lb-zustand { font-weight: var(--fw-bold); color: var(--text-muted); }
.lb-zahl { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.lb-info { font-size: var(--fs-2xs); color: var(--text-muted); font-style: italic; }
.lb-niemals { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px dashed var(--hairline); }
.lb-niemals-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px var(--s6); margin-top: 6px; }
.lb-niemals-liste > div { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-xs); color: var(--text-muted); }
.lb-niemals-liste svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--text-subtle); }

/* DATA CENTRE - Archiv nur zur Auswertung (Inhaber 19.09.2026). Eigene,
   ruhige Kopfzeile: auf den ersten Blick "nicht Live-Betrieb". */
.datacentre-kopf {
  display: flex; gap: var(--s6); align-items: flex-start; flex-wrap: wrap;
  padding: var(--s6) var(--s7); margin-bottom: var(--s7);
  border-radius: var(--r-lg); border: 1px dashed var(--border-strong);
  background: var(--bg-sunken);
}
.datacentre-marke {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-weight: 700; letter-spacing: .14em; font-size: var(--fs-sm);
  color: var(--gold); white-space: nowrap; user-select: none;
}
.datacentre-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--s2); font-size: var(--fs-sm); }
.datacentre-text b { color: var(--text-strong); }

/* Newsletter (Inhaber 19.09.2026) */
.nl-kopf { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap; }
.nl-kopf .grow { flex: 1; }
.nl-zahl { padding: 10px 14px; font-size: var(--fs-sm); border-bottom: 1px solid var(--hairline); }
.card.kpi.clickable { cursor: pointer; }
.card.kpi.clickable:hover { border-color: var(--border-strong); }
.nl-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nl-hint { font-size: var(--fs-xs); }
.nl-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: var(--s6); align-items: start; }
.nl-vorschau-spalte { position: sticky; top: var(--s5); }
.nl-vorschau { width: 100%; height: 900px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: #fff; }
.nl-artikel { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 10px 12px; }
.nl-artikel-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s3) var(--s4); margin-top: 8px; }
.nl-warn { margin-top: 6px; font-size: var(--fs-xs); color: #8a5a0a; }
.nl-treffer { display: grid; gap: 2px; margin-top: 4px; }
.nl-treffer-zeile { display: flex; gap: 8px; width: 100%; text-align: left; padding: 6px 10px; border: 1px solid var(--hairline); border-radius: var(--r-sm, 6px); background: var(--fill-surface); color: inherit; cursor: pointer; font-size: var(--fs-sm); }
.nl-treffer-zeile:hover { border-color: var(--border-strong); background: var(--bg-sunken); }
.nl-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); margin-top: 6px; cursor: pointer; }
.nl-zahlbox { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--hairline); }
.nl-zahl-gross { font-size: 28px; font-weight: var(--fw-bold, 700); }
.nl-zahl-gross span { font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
@media (max-width: 1100px) { .nl-editor { grid-template-columns: 1fr; } .nl-vorschau-spalte { position: static; } }

/* Lage des Pakets in der Unterwegs-Liste (Inhaber 19.09.2026) */
.ff-lage { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 320px; min-width: 260px; max-width: 460px; padding: 0 var(--s5); }
.ff-lage-punkt { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--border-strong); }
.ff-lage-text { font-size: var(--fs-sm); font-weight: var(--fw-medium, 500); color: var(--text); line-height: 1.3; }
.ff-lage-detail { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.ff-lage.ton-ok .ff-lage-punkt { background: #2e7d5b; }
.ff-lage.ton-ok .ff-lage-text { color: #2e7d5b; }
.ff-lage.ton-unterwegs .ff-lage-punkt { background: #b4892c; box-shadow: 0 0 0 3px rgba(180,137,44,.16); }
.ff-lage.ton-warten .ff-lage-punkt { background: #9aa0a6; }
.ff-lage.ton-warn .ff-lage-punkt { background: #b3261e; box-shadow: 0 0 0 3px rgba(179,38,30,.14); }
.ff-lage.ton-warn .ff-lage-text { color: #b3261e; }
@media (max-width: 900px) { .ff-lage { flex-basis: 100%; padding: 6px 0 0 0; } }