/* Shortcut bar on the left edge (24.10.2026, modules/shortcutLeiste.js). Tokens only (web3-design.css --w3-*, else the
   design-tokens.css surfaces); light and dark follow the tokens. Surface like the bar card (#tableTabsNav): same fill,
   glow and inner edge, rounded on the right only. 56 px collapsed (the page keeps that margin), 240 px open over the
   content. Phones / no hover: no rail, a drawer from #shortcutLeisteKnopf in the bar. Web3 mode: nothing at all. */

:root { --sl-breite: 56px; --sl-breite-offen: 240px; }

.sl-leiste,
.sl-dialog {
  --sl-karte: var(--w3-karte, var(--surface-1));
  --sl-glanz: var(--w3-glanz, none);
  --sl-kante: var(--w3-kante, inset 0 0 0 1px var(--border-1));
  --sl-kante-feld: var(--w3-kante-feld, inset 0 0 0 1px var(--border-2));
  --sl-schatten: var(--w3-schatten, var(--shadow-lg));
  --sl-text: var(--w3-text, var(--text-1));
  --sl-text-2: var(--w3-text-2, var(--text-2));
  --sl-text-3: var(--w3-text-3, var(--text-3));
  --sl-fuellung: var(--w3-fuellung, var(--surface-2));
  --sl-fuellung-stark: var(--w3-fuellung-stark, var(--surface-3));
  --sl-akzent: var(--w3-akzent, var(--text-1));
  --sl-akzent-flaeche: var(--w3-akzent-flaeche, var(--surface-3));
  --sl-akzent-rand: var(--w3-akzent-rand, var(--border-3));
  --sl-akzent-text: var(--w3-akzent-text, var(--text-inv));
  --sl-ring: var(--w3-ring, var(--focus-ring));
  --sl-radius: var(--w3-radius-karte, var(--radius-lg));
  --sl-radius-feld: var(--w3-radius-feld, var(--radius-pill));
  --sl-dauer: .18s;
}

/* ── Rail ── */
.sl-leiste {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  /* Above the bar (120) and its flyout, below drawers (150) and modals. */
  z-index: calc(var(--z-drawer, 150) - 10);
  width: var(--sl-breite);
  font-family: var(--frf-font);
}
.sl-leiste[hidden] { display: none; }
.sl-flaeche {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: var(--sl-breite);
  padding: var(--space-3) 8px;
  overflow: hidden;
  border-radius: 0 var(--sl-radius) var(--sl-radius) 0;
  background: var(--sl-glanz), var(--sl-karte);
  box-shadow: var(--sl-kante);
  transition: width var(--sl-dauer) ease, box-shadow var(--sl-dauer) ease;
}
.sl-offen .sl-flaeche { width: var(--sl-breite-offen); box-shadow: var(--sl-kante), var(--sl-schatten); }

.sl-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  /* Only the rail may scroll, never the page (12 entries fit from ~720 px height). */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.sl-liste::-webkit-scrollbar { display: none; }
.sl-gruppe { display: flex; flex-direction: column; gap: 2px; }

/* Category: collapsed a short gradient hairline („Kniff 2“), open a small uppercase name; same height in both states. */
.sl-gruppe-kopf {
  position: relative;
  flex: none;
  height: 20px;
}
.sl-gruppe-kopf::before,
.sl-fuss::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sl-akzent) 45%, transparent), transparent);
  transition: opacity var(--sl-dauer) ease;
}
.sl-gruppe:first-child .sl-gruppe-kopf::before { opacity: 0; }
.sl-gruppe-name {
  display: block;
  padding: 0 12px;
  overflow: hidden;
  color: var(--sl-text-3);
  font-size: var(--fs-11, 11px);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity var(--sl-dauer) ease;
}
.sl-offen .sl-gruppe-name { opacity: 1; }
.sl-offen .sl-gruppe-kopf::before { opacity: 0; }

/* Entry: 40 × 40 tile collapsed, a pill row open (the same element, it only grows). */
.sl-eintrag {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  flex: none;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--sl-radius-feld);
  background: transparent;
  color: var(--sl-text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast, .12s), color var(--t-fast, .12s);
}
.sl-eintrag:hover { background: var(--sl-fuellung-stark); color: var(--sl-text); }
.sl-eintrag:focus-visible { outline: none; box-shadow: var(--sl-ring); color: var(--sl-text); }
.sl-eintrag[aria-current="page"] {
  background: var(--sl-akzent-flaeche);
  box-shadow: inset 0 0 0 1px var(--sl-akzent-rand);
  color: var(--sl-akzent);
}
.sl-eintrag[aria-current="page"]:focus-visible { box-shadow: inset 0 0 0 1px var(--sl-akzent-rand), var(--sl-ring); }
.sl-symbol { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
/* Icons: the bar's own (tabbar.css --leiste-symbol), 20 px in currentColor. */
.sl-maske {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--leiste-symbol, none) center / contain no-repeat;
  mask: var(--leiste-symbol, none) center / contain no-repeat;
}
.sl-steuer { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-right: 12px;
  opacity: 0;
  transition: opacity var(--sl-dauer) ease;
}
.sl-offen .sl-text { opacity: 1; }
.sl-titel,
.sl-ort { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sl-titel { color: inherit; font-size: var(--fs-13, 13px); font-weight: 500; line-height: 1.25; }
.sl-ort { color: var(--sl-text-3); font-size: var(--fs-12, 12px); line-height: 1.25; }
.sl-eintrag[aria-current="page"] .sl-ort { color: color-mix(in srgb, var(--sl-akzent) 70%, transparent); }

/* Foot: one pill „Shortcut hinzufügen“ with a pencil, only in the open rail / drawer (user 24.10.2026). Collapsed it
   stays in the tab order (opacity, not visibility): keyboard focus on it opens the rail like any entry. */
.sl-fuss { position: relative; display: flex; flex: none; padding-top: 20px; opacity: 0; pointer-events: none; transition: opacity var(--sl-dauer) ease; }
.sl-fuss::before { top: 10px; opacity: 0; }
.sl-offen .sl-fuss { opacity: 1; pointer-events: auto; }
.sl-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--sl-radius-feld);
  background: var(--sl-fuellung);
  box-shadow: var(--sl-kante-feld);
  color: var(--sl-text-2);
  font: inherit;
  font-size: var(--fs-13, 13px);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast, .12s), color var(--t-fast, .12s);
}
.sl-plus .sl-steuer { flex: none; width: 16px; height: 16px; }
.sl-plus:hover { background: var(--sl-fuellung-stark); color: var(--sl-text); }
.sl-plus:focus-visible { outline: none; box-shadow: var(--sl-kante-feld), var(--sl-ring); color: var(--sl-text); }

/* Tip next to a collapsed entry (shared .value-tip-layer). */
.value-tip-layer .sl-tip-ort { display: block; margin-top: 2px; color: var(--w3-text-3, var(--text-3)); font-size: 12px; }

/* Room for the collapsed rail: the whole page (bar, views, sticky #tableTabsNav) starts right of it. */
@media (min-width: 761px) and (hover: hover) {
  html.sl-an body { margin-left: var(--sl-breite); }
  .sl-kopf-knopf { display: none !important; }
  .sl-schleier { display: none !important; }
}

/* ── Phone / no hover: drawer from the bar button ── */
.sl-kopf-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  margin-right: var(--space-2);
  padding: 0;
  border: 0;
  border-radius: var(--w3-radius-feld, var(--radius-pill));
  background: var(--w3-fuellung, var(--surface-2));
  box-shadow: var(--w3-kante-feld, inset 0 0 0 1px var(--border-2));
  color: var(--w3-text, var(--text-1));
  cursor: pointer;
}
.sl-kopf-knopf[hidden] { display: none; }
.sl-kopf-knopf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-kopf-knopf:hover,
.sl-kopf-knopf[aria-expanded="true"] { background: var(--w3-fuellung-stark, var(--surface-3)); }
.sl-kopf-knopf:focus-visible { outline: none; box-shadow: var(--w3-kante-feld, inset 0 0 0 1px var(--border-2)), var(--w3-ring, var(--focus-ring)); }

.sl-schleier { position: fixed; inset: 0; z-index: var(--z-drawer, 150); background: var(--overlay); }
.sl-schleier[hidden] { display: none; }

@media (max-width: 760px), (hover: none) {
  .sl-leiste { display: none; }
  .sl-leiste.sl-schublade {
    display: block;
    z-index: calc(var(--z-drawer, 150) + 1);
    width: min(300px, 86vw);
  }
  .sl-schublade .sl-flaeche {
    width: 100%;
    padding-top: var(--space-4);
    box-shadow: var(--sl-kante), var(--sl-schatten);
    transition: transform .2s ease;
  }
  @starting-style { .sl-schublade .sl-flaeche { transform: translateX(-100%); } }
  .sl-schublade .sl-eintrag { height: 44px; grid-template-columns: 44px minmax(0, 1fr); }
  .sl-schublade .sl-symbol { width: 44px; height: 44px; }
}

/* Reduced motion: no sliding or growing, only fading. */
@media (prefers-reduced-motion: reduce) {
  .sl-flaeche,
  .sl-schublade .sl-flaeche { transition: opacity .15s ease; }
  @starting-style { .sl-schublade .sl-flaeche { transform: none; opacity: 0; } }
}

/* Web3 mode (in the platform frame) and pinned single-tab pages: no rail, no button, no margin. */
html[data-frf-modus="web3"] :is(.sl-leiste, .sl-kopf-knopf, .sl-schleier),
body.single-tab-host :is(.sl-leiste, .sl-kopf-knopf, .sl-schleier) { display: none !important; }
html[data-frf-modus="web3"] body,
html:has(body.single-tab-host) body { margin-left: 0 !important; }

html.sl-scroll-sperre { overflow: hidden; }

/* ── Edit dialog (look of the former dashboard shortcuts dialog) ── */
.sl-dialog {
  box-sizing: border-box;
  width: min(760px, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100vh - 2 * var(--space-6));
  overflow: auto;
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--w3-flaeche, var(--surface-2));
  box-shadow: var(--sl-schatten), var(--sl-kante);
  color: var(--sl-text);
  font-family: var(--frf-font);
  font-size: var(--fs-14, 14px);
}
.sl-dialog::backdrop { background: var(--overlay); }
.sl-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.sl-dialog-kopf h3 { margin: 0; font-size: var(--fs-17, 17px); font-weight: 600; }
.sl-erklaerung { margin: 0 0 var(--space-4); color: var(--sl-text-2); font-size: var(--fs-13, 13px); }
.sl-form { display: flex; flex-direction: column; gap: var(--space-3); }
.sl-abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.sl-abschnitt-kopf h4,
.sl-katalog-kopf { margin: 0; color: var(--sl-text-3); font-size: var(--fs-12, 12px); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sl-klein { color: var(--sl-text-3); font-size: var(--fs-12, 12px); }
.sl-eingabe {
  box-sizing: border-box;
  flex: 1 1 220px;
  max-width: 320px;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--input-border, var(--border-2));
  border-radius: var(--sl-radius-feld);
  background: var(--input-bg, var(--sl-fuellung));
  color: var(--sl-text);
  font: inherit;
  font-size: var(--fs-13, 13px);
}
.sl-eingabe::placeholder { color: var(--input-placeholder, var(--sl-text-3)); }
.sl-eingabe:focus { outline: none; border-color: var(--sl-akzent-rand); box-shadow: var(--sl-ring); }

.sl-auswahl { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sl-auswahl-zeile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 44px;
  border-radius: var(--radius-md);
  background: var(--sl-fuellung);
  color: var(--sl-text);
}
.sl-auswahl-zeile .sl-text,
.sl-katalog-eintrag .sl-text { opacity: 1; }
.sl-auswahl-leer { padding: var(--space-3); border-radius: var(--radius-md); background: var(--sl-fuellung); color: var(--sl-text-3); font-size: var(--fs-13, 13px); }
.sl-auswahl-knoepfe { display: flex; gap: 2px; padding-right: var(--space-2); }

.sl-katalog { display: flex; flex-direction: column; gap: var(--space-3); }
.sl-katalog-gruppe { display: flex; flex-direction: column; gap: var(--space-2); }
.sl-katalog-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); }
.sl-katalog-eintrag {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--sl-fuellung);
  color: var(--sl-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sl-katalog-eintrag:hover:not(:disabled) { background: var(--sl-fuellung-stark); }
.sl-katalog-eintrag:disabled { opacity: .45; cursor: default; }
.sl-katalog-eintrag[aria-checked="true"] { background: var(--sl-akzent-flaeche); }
.sl-haken { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--border-3); color: var(--sl-akzent); }
.sl-katalog-eintrag[aria-checked="true"] .sl-haken { box-shadow: inset 0 0 0 1px var(--sl-akzent-rand); }
.sl-haken .sl-steuer { width: 13px; height: 13px; stroke-width: 2.4; }

.sl-symbol-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--sl-radius-feld);
  background: var(--sl-fuellung);
  color: var(--sl-akzent);
  cursor: pointer;
}
.sl-symbol-knopf:hover:not(:disabled) { background: var(--sl-fuellung-stark); }
.sl-symbol-knopf:disabled { opacity: .35; cursor: default; }
.sl-symbol-knopf.sl-leise { background: transparent; color: var(--sl-text-3); }
.sl-symbol-knopf.sl-leise:hover { color: var(--sl-text); }
.sl-symbol-knopf .sl-steuer { width: 16px; height: 16px; }

.sl-form-knoepfe { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.sl-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--sl-radius-feld);
  background: var(--sl-fuellung);
  box-shadow: var(--sl-kante-feld);
  color: var(--sl-text);
  font: inherit;
  font-size: var(--fs-13, 13px);
  font-weight: 500;
  cursor: pointer;
}
.sl-knopf:hover { background: var(--sl-fuellung-stark); }
.sl-knopf-primaer { background: var(--sl-akzent); box-shadow: none; color: var(--sl-akzent-text); font-weight: 600; }
.sl-knopf-primaer:hover { background: var(--sl-akzent); filter: brightness(1.08); }
.sl-knopf:disabled { opacity: .5; cursor: default; }
.sl-knopf .sl-steuer { width: 16px; height: 16px; }
.sl-fehler { margin: 0; color: var(--w3-negativ-text, var(--danger)); font-size: var(--fs-13, 13px); }
.sl-fehler[hidden] { display: none; }
:is(.sl-symbol-knopf, .sl-knopf, .sl-katalog-eintrag):focus-visible { outline: none; box-shadow: var(--sl-ring); }

@media (max-width: 640px) {
  .sl-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; padding: var(--space-4); }
  .sl-eingabe { max-width: none; }
  .sl-katalog-raster { grid-template-columns: 1fr; }
}