/*
 * Holy ERP - application styles.
 * Bootstrap 5.3 provides the base; this file sets the palette and the few
 * components of our own.
 *
 * Palette
 *   night  #1b2536  navigation and brand panel (deep slate blue)
 *   amber  #f2a900  the "record light": wordmark dot, main call to action, focus
 *   paper  #eceff4  page background        surface #ffffff  panels
 *
 * Amber is used sparingly on purpose: it marks the one thing to press.
 */

:root,
[data-bs-theme="light"] {
  --hs-night: #1b2536;
  --hs-amber: #f2a900;
  --hs-amber-hover: #ffbc26;
  --hs-amber-ink: #2b1f00;
  --hs-surface: #ffffff;
  --hs-line: #d5dce6;
  --hs-line-strong: #b4bfd0;
  --hs-muted: #556175;
  --hs-primary: #26344d;
  --hs-primary-hover: #1b2536;
  --hs-ok: #1f7a4d;
  --hs-bad: #b3261e;
  --hs-person: #7247c4;   /* release 75: symbol of a person; release 76: violet instead of blue */
  --hs-company: #b05a00;  /* release 75: symbol of a company */
  --hs-blue: #2563eb;
  --hs-violet: #7c3aed;

  --bs-body-bg: #eceff4;
  --bs-body-color: #1c2431;
  --bs-secondary-color: #556175;
  --bs-border-color: #d5dce6;
  --bs-link-color: #1f4f95;
  --bs-link-color-rgb: 31, 79, 149;
  --bs-link-hover-color: #163a70;
  --bs-link-hover-color-rgb: 22, 58, 112;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-border-radius: 0.3rem;
}

[data-bs-theme="dark"] {
  --hs-night: #0f1520;
  --hs-surface: #1c2434;
  --hs-line: #2f3b52;
  --hs-line-strong: #465572;
  --hs-muted: #9ba7bc;
  --hs-primary: #4a68a3;
  --hs-primary-hover: #5a7ab8;
  --hs-bad: #f0706a;   /* release 62: was missing in the dark theme (red on dark background) */
  --hs-ok: #4cc38a;    /* release 66: green readable on the dark background */
  --hs-person: #b69cff;
  --hs-company: #f2a541;

  --bs-body-bg: #141a26;
  --bs-body-color: #e4e9f1;
  --bs-secondary-color: #9ba7bc;
  --bs-border-color: #2f3b52;
  --bs-link-color: #8db4f2;
  --bs-link-color-rgb: 141, 180, 242;
  --bs-link-hover-color: #b3cdf7;
  --bs-link-hover-color-rgb: 179, 205, 247;
}

body {
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

h2, .h2, .h5 {
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Keyboard focus must always be visible */
:focus-visible {
  outline: 3px solid var(--hs-amber);
  outline-offset: 2px;
}

.form-control:focus,
.form-check-input:focus,
.btn:focus-visible {
  border-color: var(--hs-amber);
  box-shadow: 0 0 0 0.2rem rgba(242, 169, 0, 0.35);
  outline: none;
}

.form-control,
.form-select {
  background-color: var(--hs-surface);
}

.form-check-input:not(:checked) {
  border-color: var(--hs-muted);
}

.form-check-input:checked {
  background-color: var(--hs-primary);
  border-color: var(--hs-primary);
}

.form-label {
  font-weight: 600;
  font-size: 0.925rem;
}

.form-text {
  color: var(--hs-muted);
}

/* ---------- Buttons ---------- */

.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--hs-primary);
  --bs-btn-border-color: var(--hs-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--hs-primary-hover);
  --bs-btn-hover-border-color: var(--hs-primary-hover);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--hs-primary-hover);
  --bs-btn-active-border-color: var(--hs-primary-hover);
  --bs-btn-disabled-bg: var(--hs-primary);
  --bs-btn-disabled-border-color: var(--hs-primary);
}

.btn-amber {
  --bs-btn-color: var(--hs-amber-ink);
  --bs-btn-bg: var(--hs-amber);
  --bs-btn-border-color: var(--hs-amber);
  --bs-btn-hover-color: var(--hs-amber-ink);
  --bs-btn-hover-bg: var(--hs-amber-hover);
  --bs-btn-hover-border-color: var(--hs-amber-hover);
  --bs-btn-active-color: var(--hs-amber-ink);
  --bs-btn-active-bg: var(--hs-amber-hover);
  --bs-btn-active-border-color: var(--hs-amber-hover);
  font-weight: 600;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--hs-line-strong);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: rgba(128, 144, 170, 0.16);
  --bs-btn-hover-border-color: var(--hs-line-strong);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: rgba(128, 144, 170, 0.26);
  --bs-btn-active-border-color: var(--hs-line-strong);
}

/* ---------- Wordmark ---------- */

.wordmark {
  display: inline-block;
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
}

.wordmark::after {
  content: "";
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.05em;
  border-radius: 50%;
  background: var(--hs-amber);
}

/* ---------- Navigation ---------- */

.hs-nav {
  background: var(--hs-night);
}

.hs-nav .navbar {
  padding-top: 0;
  padding-bottom: 0;
}

.hs-nav .navbar-brand {
  font-size: 1.75rem;
  margin-right: 2rem;
  padding: 0.6rem 0;
}

/* Release 80: the wing of the sign of the software before the wordmark (not on phones); the wordmark of the
   navigation without the dot, with "ERP" small and spaced below "hol": its bottom on the descender of the y, the
   P ending with the right edge of the l. */
.nav-mark {
  display: none;
  flex: 0 0 auto;
  position: relative;
  top: 0;
  height: 3.2rem;   /* Release 81: the wing with the tail - taller, so that the wing itself keeps its size */
  aspect-ratio: 406 / 788;
  margin-right: 0.1rem;
  background-color: var(--hs-amber);
  -webkit-mask: url("../img/curruca-wing-tail.png") center / contain no-repeat;
  mask: url("../img/curruca-wing-tail.png") center / contain no-repeat;
}
@media (min-width: 768px) {
  .nav-mark { display: block; }
}
@media (max-width: 991.98px) {
  .hs-nav .navbar-toggler { margin-left: auto; }
  .nav-mark { height: 2.9rem; }   /* the collapsed bar is lower: the wing must not make it taller */
}
.hs-nav .wordmark::after { content: none; }
.wm-hol { position: relative; display: inline-block; }
.wm-erp {
  position: absolute;
  right: -1.22em;   /* takes back the spacing after the P */
  bottom: -0.8em;
  white-space: nowrap;
  color: var(--hs-amber);
  font-size: 0.165em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.5em;
}

.hs-nav .nav-link {
  color: rgba(255, 255, 255, 0.72);
  padding: 1rem 0.9rem calc(0.85rem + 3px);
}

.hs-nav .nav-link:hover,
.hs-nav .nav-link:focus-visible {
  color: #ffffff;
}

.hs-nav .nav-link.active,
.hs-nav .nav-link.show {
  color: #ffffff;
}

/* Release 81: the current or open menu carries a 2px amber line below its text; text menus that are current also
   stand on the feet of the sign. The line ends flush with the top of the feet, an open menu starts right below the
   line and covers the feet. Symbol menus get the line only. */
@media (min-width: 992px) {
  .hs-nav {
    --nav-feet-h: 14px;                              /* height of the feet */
    --nav-line-y: calc(var(--nav-feet-h) - 1px);     /* lower edge of the line, measured from the bottom of the link */
  }
  .hs-nav .nav-link {
    position: relative;
  }
  .hs-nav .nav-link-icon {
    height: 100%;         /* as tall as the text menus, so that all lines sit at the same height */
    padding-top: 0.8rem;  /* keeps the symbol where it was: the text line is 0.2rem taller than the symbol */
  }
  .hs-nav .nav-link.active,
  .hs-nav .nav-link.show {
    background: linear-gradient(var(--hs-amber), var(--hs-amber)) left bottom var(--nav-line-y) / 100% 2px no-repeat;
  }
  .hs-nav .nav-link.active:not(.nav-link-icon)::before,
  .hs-nav .nav-link.show:not(.nav-link-icon)::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    height: var(--nav-feet-h);
    aspect-ratio: 253 / 122;
    transform: translateX(-50%);
    background-color: var(--hs-amber);
    -webkit-mask: url("../img/curruca-feet.png") center / contain no-repeat;
    mask: url("../img/curruca-feet.png") center / contain no-repeat;
    pointer-events: none;
  }
  .hs-nav .nav-link + .dropdown-menu {
    margin-top: calc(-1 * var(--nav-line-y));
  }
}

.hs-nav .dropdown-menu {
  --bs-dropdown-border-color: #33415c;
  --bs-dropdown-bg: #212c40;
  margin-top: 0;
}

.hs-nav .dropdown-item.active,
.hs-nav .dropdown-item:active {
  background: #33415c;
  color: #ffffff;
}

.hs-nav .dropdown-menu form {
  margin: 0;
}

.hs-nav .dropdown-menu button.dropdown-item {
  width: 100%;
}

@media (max-width: 991.98px) {
  .hs-nav .nav-link {
    padding: 0.6rem 0;
  }
  .hs-nav .nav-link.active {
    box-shadow: inset 3px 0 0 var(--hs-amber);
    padding-left: 0.75rem;
  }
}

/* ---------- Page structure ---------- */

.app-main {
  padding-top: 2rem;
  padding-bottom: 3rem;
  min-height: calc(100vh - 8rem);
}

.app-foot {
  padding-bottom: 1.5rem;
  font-size: 0.85rem;
  color: var(--hs-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;   /* company and software stand on the same line of writing */
  gap: 0.15rem 1.1rem;   /* release 79: a little room between the company and the sign of the software */
}
/* Release 79: the two halves of the sign of the software (wing, head) in the colour of the text around them */
.foot-software {
  display: inline-flex;
  align-items: baseline;   /* wing and head stand on the line of writing, the text does not float above them */
  gap: 0.4em;
  white-space: nowrap;
}
.foot-mark {
  display: inline-block;
  flex: 0 0 auto;
  position: relative;
  top: 0.22em;   /* a little below the line of writing, like a descender - so text and sign share one middle */
  height: 1.35em;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.foot-mark-wing {
  top: 0.125em;
  aspect-ratio: 129 / 192;
  -webkit-mask-image: url("../img/curruca-wing.png");
  mask-image: url("../img/curruca-wing.png");
}
.foot-mark-head {
  top: 0.32em;   /* the head carries its weight at the top (beak, eye), so it hangs lower than the wing */
  aspect-ratio: 185 / 192;
  -webkit-mask-image: url("../img/curruca-head.png");
  mask-image: url("../img/curruca-head.png");
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.page-head h1 {
  margin: 0;
}

.page-intro {
  max-width: 62ch;
  margin-bottom: 1.5rem;
}

.panel {
  background: var(--hs-surface);
  border: 1px solid var(--hs-line);
  border-radius: 0.6rem;
}

.panel-pad {
  padding: 1.5rem;
}

.panel-title {
  margin: 0;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hs-line);
}

.panel .table {
  --bs-table-bg: transparent;
  margin-bottom: 0;
}

.panel .table > :not(caption) > * > * {
  padding: 0.8rem 1.25rem;
}

.panel .table thead th {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--hs-muted);
  border-bottom-color: var(--hs-line-strong);
  white-space: nowrap;
}

.panel .table tbody tr:last-child > * {
  border-bottom-width: 0;
}

.roles-cell {
  min-width: 13rem;
}

.detail-cell {
  overflow-wrap: anywhere;
  max-width: 44ch;
}

.form-narrow {
  max-width: 34rem;
}

.stack > * + * {
  margin-top: 1.25rem;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 2rem;
  margin: 1rem 0 0;
}

.facts dt {
  font-weight: 600;
  color: var(--hs-muted);
}

.facts dd {
  margin: 0;
  /* Release 72: long links and e-mail addresses may break, so the grid never gets wider than a phone. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Release 72: on a phone the label stands above its value - side by side the values got only a narrow column. */
@media (max-width: 575.98px) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem 0;
  }
  .facts dd {
    margin-bottom: 0.6rem;
  }
}

/* Users and status ---------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--hs-muted);
}

.status-active::before { background: var(--hs-ok); }
.status-invited::before { background: var(--hs-amber); }
.status-fail::before { background: var(--hs-bad); }
.status-inactive { color: var(--hs-muted); }

.role-tag {
  display: inline-block;
  margin: 0 0.3rem 0.25rem 0;
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--hs-line-strong);
  border-radius: 99px;
  font-size: 0.8rem;
  color: var(--hs-muted);
  white-space: nowrap;
}

.role-tag-admin {
  border-color: var(--hs-amber);
  color: var(--bs-body-color);
}

/* ---------- Error pages ---------- */

.error-page {
  max-width: 30rem;
}

.error-code {
  margin: 0 0 0.25rem;
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--hs-line-strong);
}

/* ---------- Login and password pages ---------- */

.auth-shell {
  display: grid;
  grid-template-columns: minmax(20rem, 5fr) 7fr;
  min-height: 100vh;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2.5rem;
  background: var(--hs-night);
  color: #ffffff;
}

/* Release 81: the whole sign of the software to the left of the wordmark "holy" with "ERP" below (as in the
   navigation, without the dot). Everything is measured in em of the wordmark. */
.auth-logo {
  display: flex;
  align-items: center;
  font-size: clamp(2.4rem, 4.6vw, 4.6rem);
  text-decoration: none;
}
.auth-logo .wordmark {
  position: relative;
  top: 0.1em;
  font-size: 1em;
}
.auth-logo .wordmark::after { content: none; }
.auth-bird {
  flex: none;
  height: 1.9em;
  aspect-ratio: 761 / 788;
  margin-right: 0.22em;
  background-color: var(--hs-amber);
  -webkit-mask: url("../img/curruca-bird.png") center / contain no-repeat;
  mask: url("../img/curruca-bird.png") center / contain no-repeat;
}

.auth-claim {
  max-width: 22rem;
  margin: 2rem 0 0;
  font-size: 1.25rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
}

.auth-note {
  max-width: 22rem;
  margin: auto 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.62);
}

.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

/* Viewfinder corner marks around the form: the one bit of decoration. */
.frame {
  --mark: 26px;
  --stroke: 2px;
  --mark-color: var(--hs-line-strong);
  width: 100%;
  max-width: 26rem;
  padding: 2.75rem 2.5rem;
  background:
    linear-gradient(var(--mark-color), var(--mark-color)) top left / var(--mark) var(--stroke) no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) top left / var(--stroke) var(--mark) no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) top right / var(--mark) var(--stroke) no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) top right / var(--stroke) var(--mark) no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) bottom left / var(--mark) var(--stroke) no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) bottom left / var(--stroke) var(--mark) no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) bottom right / var(--mark) var(--stroke) no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) bottom right / var(--stroke) var(--mark) no-repeat;
}

.auth-title {
  margin: 0 0 1.25rem;
}

.auth-lead {
  margin: -0.5rem 0 1.5rem;
  color: var(--hs-muted);
}

.auth-links {
  margin: 1.5rem 0 0;
  font-size: 0.925rem;
}

@media (max-width: 991.98px) {
  .auth-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .auth-brand {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.5rem 2rem;
    padding: 1.25rem 1.5rem;
  }
  .auth-logo { font-size: 2.4rem; }
  .auth-claim { margin: 0; font-size: 1rem; }
  .auth-note { display: none; }
  .frame { padding: 2rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Release 12: cost centres ---------- */

.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.amount-neg {
  color: var(--hs-bad);
}

.panel .table tfoot th,
.panel .table tfoot td {
  font-weight: 600;
  border-top: 2px solid var(--hs-line-strong);
  border-bottom-width: 0;
}

.panel-toolbar {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--hs-line);
}

.panel-toolbar .form-control {
  max-width: 26rem;
}

.toolbar-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.panel-foot {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--hs-line);
}

.prod-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.prod-list li + li {
  margin-top: 0.15rem;
}

/* Tabs sit directly on top of the panel below them */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--hs-line);
  --bs-nav-tabs-link-active-bg: var(--hs-surface);
  --bs-nav-tabs-link-active-border-color: var(--hs-line) var(--hs-line) var(--hs-surface);
  --bs-nav-tabs-link-active-color: var(--bs-body-color);
  --bs-nav-tabs-link-hover-border-color: var(--hs-line);
  border-bottom-color: var(--hs-line);
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

.nav-tabs .nav-link {
  font-weight: 500;
  padding: 0.7rem 1.25rem;
}

.nav-tabs .nav-link.active {
  font-weight: 600;
  box-shadow: inset 0 3px 0 var(--hs-amber);
}

.tab-panel {
  border-top-left-radius: 0;
}

/* Release 82: the start page - greeting with the last login, two tabs ("Info", "Meine Holy-Daten"), the sections of
   the chosen tab below the line of the tabs. */
.start-tabs {
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--hs-line) var(--hs-line) var(--bs-body-bg);
  margin-bottom: 0;
}
nav + .start-body {
  padding-top: 1.5rem;
}

.summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 3rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hs-line);
}

.summary-strip span {
  display: block;
  font-size: 0.85rem;
  color: var(--hs-muted);
}

.summary-strip strong {
  font-size: 1.25rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.pos-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  min-width: 16rem;
}

.pos-list li + li {
  margin-top: 0.25rem;
}

.pos-acc {
  display: block;
  font-size: 0.8rem;
  color: var(--hs-muted);
}

.foreign-note {
  display: block;
  font-size: 0.78rem;
  color: var(--hs-muted);
}

.pager {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--hs-line);
}

.pager-info {
  font-size: 0.9rem;
  color: var(--hs-muted);
}

.btn.disabled {
  opacity: 0.45;
}

/* Access editor: list of checkboxes */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--hs-line);
  cursor: pointer;
}

.check-item:hover {
  background: rgba(128, 144, 170, 0.1);
}

.check-item .form-check-input {
  flex: none;
  margin-top: 0.2rem;
}

.check-name {
  display: block;
  font-weight: 500;
}

.check-sub {
  display: block;
  font-size: 0.82rem;
  color: var(--hs-muted);
}

/* ---------- Release 13: budgets ---------- */

.panel .table.budget-table > :not(caption) > * > * {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.budget-table .row-group {
  --bs-table-bg: rgba(128, 144, 170, 0.14);
}

.budget-table .row-group.row-top {
  --bs-table-bg: rgba(128, 144, 170, 0.26);
}

.budget-table .row-group > * {
  font-weight: 600;
}

.budget-table .cell-code {
  color: var(--hs-muted);
  font-size: 0.875rem;
}

.budget-table td.cell-title {
  min-width: 18rem;
}

.panel .table.budget-table td.depth-1 { padding-left: 2.25rem; }
.panel .table.budget-table td.depth-2 { padding-left: 3.25rem; }
.panel .table.budget-table td.depth-3 { padding-left: 4.25rem; }
.panel .table.budget-table td.depth-4 { padding-left: 5.25rem; }
.panel .table.budget-table td.depth-5 { padding-left: 6.25rem; }
.panel .table.budget-table td.depth-6 { padding-left: 7.25rem; }
.panel .table.budget-table td.depth-7 { padding-left: 8.25rem; }

.cell-sub {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--hs-muted);
}

.cell-error {
  color: var(--hs-bad);
}

.tag-chip {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.45rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(31, 79, 149, 0.13);
  color: var(--bs-link-color);
}

/* ---------- Release 14: worklist, budget tabs ---------- */

.status-fail {
  color: var(--hs-bad);
}

.wl-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 1.25rem;
  align-items: end;
}

.wl-filter-actions {
  display: flex;
  gap: 0.5rem;
}

.wl-item {
  margin-bottom: 1.25rem;
}

.wl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--hs-line);
}

.wl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  font-size: 0.9rem;
  color: var(--hs-muted);
}

.wl-amount {
  font-weight: 600;
  color: var(--bs-body-color);
  font-variant-numeric: tabular-nums;
}

.wl-pos {
  margin-bottom: 0;
  table-layout: fixed;
  min-width: 48rem;
}

/* Same column widths in every voucher card, so the cards line up. Column 1 is the checkbox
   (added in Release 22); the rest keep their original share, just shifted by one. */
.wl-pos th:nth-child(1) { width: 2.25rem; }
.wl-pos th:nth-child(2) { width: 34%; }
.wl-pos th:nth-child(3) { width: 8.5rem; }
.wl-pos th:nth-child(4) { width: 30%; }
.wl-pos th:nth-child(5) { width: 15rem; }
.wl-pos th:nth-child(6) { width: 7.5rem; }

.wl-pos td,
.wl-pos th {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.wl-pos td:first-child,
.wl-pos th:first-child {
  padding-left: 0.75rem;
  padding-right: 0.25rem;
}

.member-add {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
}

.member-add select {
  min-width: 16rem;
}

/* ---------- Release 15: budget editor ---------- */

.edit-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.edit-table .row-actions .btn {
  min-width: 2.1rem;
}

.edit-table .row-add > * {
  padding-top: 0.2rem;
  padding-bottom: 0.4rem;
  border-bottom-width: 0;
  font-size: 0.875rem;
}

.edit-table .row-add a {
  margin-right: 1rem;
}

.basis-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin-bottom: 0.6rem;
}

.basis-row .form-check-input {
  flex: none;
  margin-top: 0;
}

/* a long label without a select next to it: takes the rest of the row and wraps inside */
.basis-row .form-check-label.grow {
  flex: 1 1 0;
  min-width: 0;
}

.basis-row .form-select {
  flex: 1 1 14rem;
  min-width: 12rem;
  width: auto;
}

.inline-rename {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  max-width: 26rem;
}

fieldset > legend.form-label {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: 0.4rem;
}

/* ---------- Release 16: sevDesk ---------- */

.row-deleted > td {
  opacity: 0.6;
}

.deleted-alloc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin-bottom: 0.25rem;
}

.col-alloc {
  min-width: 27rem;
}

/* ---------- Release 20: page jump, help, sevDesk link ---------- */

/* Click the page text of a pager to type a page number. */
.pager-jump {
  cursor: pointer;
  border-bottom: 1px dashed var(--hs-muted);
}
.pager-jump:hover,
.pager-jump:focus-visible {
  color: var(--bs-body-color);
  border-bottom-color: var(--bs-body-color);
}
.pager-editing {
  cursor: default;
  border-bottom: 0;
}
.pager-input {
  display: inline-block;
  width: 5rem;
  margin: 0 0.25rem;
  vertical-align: baseline;
}

/* The sevDesk symbol in front of a voucher number: it is the link, in the colour of the number. */
.sd-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  margin: -2px 0.25rem -2px 0;
  border-radius: 0.25rem;
  color: inherit;
  line-height: 1;
  vertical-align: middle;
}
a.sd-link:hover,
a.sd-link:focus-visible {
  color: var(--hs-amber);
  background: rgba(242, 169, 0, 0.14);
}
a.sd-link:focus-visible {
  outline: 2px solid var(--hs-amber);
  outline-offset: 1px;
}
.sd-link-empty {
  pointer-events: none;
}

/* The info button next to a main heading. */
.title-with-help {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.title-with-help h1 {
  margin: 0;
}
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
  border-radius: 50%;
  color: var(--hs-muted);
  line-height: 1;
}
.help-icon:hover,
.help-icon:focus-visible {
  color: var(--hs-amber);
}
.help-nav svg {
  vertical-align: -0.3em;
}

/* The help window. */
.help-dialog {
  width: min(42rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0;
  overflow: auto;
  color: var(--bs-body-color);
  background: var(--hs-surface);
  border: 1px solid var(--hs-line-strong);
  border-radius: 0.5rem;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
}
.help-dialog::backdrop {
  background: rgba(10, 14, 22, 0.6);
}
.help-dialog-inner {
  padding: 1.25rem 1.5rem;
}
.help-dialog-title {
  margin-bottom: 0.75rem;
}
.help-dialog-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hs-line);
}
.help-dialog-foot form {
  margin: 0;
}
.help-summary {
  margin-bottom: 0.75rem;
}
.help-h {
  margin: 1rem 0 0.4rem;
  color: var(--hs-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
}
.help-list {
  margin: 0 0 0.5rem;
  padding-left: 1.2rem;
}
.help-list li {
  margin-bottom: 0.35rem;
}

/* The page with all topics. */
.help-search {
  margin-bottom: 1rem;
}
.help-toc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 1.5rem;
  margin-bottom: 2rem;
}
.help-area {
  margin-bottom: 1.5rem;
}
.help-area > h2 {
  margin: 1.5rem 0 0.75rem;
}
.help-topic {
  margin-bottom: 1rem;
}

@media print {
  .hs-nav,
  .app-foot,
  .help-search,
  .help-toc,
  .help-icon,
  .pager,
  .sd-link {
    display: none !important;
  }
  .help-topic {
    break-inside: avoid;
    border: 1px solid #999;
  }
  .help-area > h2 {
    break-after: avoid;
  }
}

/* ---------- Release 21: release overview ---------- */
.release > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
}
.release[open] > summary {
  border-bottom: 1px solid var(--hs-line);
}
.release-dates {
  margin-left: auto;
}
.release-body h2:first-child {
  margin-top: 0;
}

/* ---------- Release 22: search, inline assignment, Sammelzuordnung ---------- */

/* The search field spans the full width of the filter grid, above the dropdowns. */
.wl-search {
  grid-column: 1 / -1;
}

/* Checkbox column of the position table. */
.wl-pick {
  width: 2.25rem;
}
.wl-row-disabled {
  opacity: 0.45;
}

/* Inline assignment panel, opened below a position row. */
.assign-row-cell {
  padding: 0 !important;
  border-top: 0 !important;
}
.assign-panel {
  padding: 1rem 1.25rem 1.25rem;
  background: var(--hs-surface-2, rgba(255, 255, 255, 0.03));
  border-top: 1px dashed var(--hs-line);
  border-bottom: 1px dashed var(--hs-line);
}
.assign-panel-inline {
  border-left: 3px solid var(--hs-amber);
}
.assign-panel section + section {
  margin-top: 1.25rem;
}
.assign-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.assign-feedback {
  min-height: 1.2em;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.assign-feedback:empty {
  display: none;
}
a[data-assign-toggle][aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Sammelzuordnung: toolbar and dialog. */
.wl-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.bulk-dialog {
  width: min(48rem, calc(100vw - 2rem));
}
.bulk-dialog table input.form-control,
.bulk-dialog table select.form-select {
  min-width: 9rem;
}

/* ---------- Release 23: tag share (Anteil) input on the line form ---------- */
.tag-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.tag-row .form-check {
  min-width: 12rem;
  margin-bottom: 0;
}
.tag-share-input {
  width: 6.5rem;
}

/* ---------- Release 23: back arrow on the budget page ---------- */
.page-head-title {
  min-width: 0;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--bs-body-color);
}
.btn-back:hover,
.btn-back:focus-visible {
  color: var(--hs-amber);
  background: rgba(242, 169, 0, 0.14);
}

/* ---------- Release 24: tag catalogue (Titel/Beschreibung) ---------- */
.tag-card > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 0.9rem;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
}
.tag-card[open] > summary {
  border-bottom: 1px solid var(--hs-line);
}
.tag-card-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tag-card-counts {
  margin-left: auto;
}

/* ---------- Release 25: group Art (Einnahmen/Fertigungsgemeinkosten/Gewinn) ---------- */
.kind-tag {
  display: inline-block;
  margin: 0 0.3rem 0.25rem 0;
  padding: 0.05rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
}
.kind-einnahmen {
  border-color: var(--hs-ok);
  color: var(--hs-ok);
}
.kind-fgk {
  border-color: var(--hs-blue);
  color: var(--hs-blue);
}
.kind-gewinn {
  border-color: var(--hs-violet);
  color: var(--hs-violet);
}

.income-panel {
  border-top: 3px solid var(--hs-ok);
}
.income-panel #income-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---------- Release 25: search fields (magnifying glass, clear button) ---------- */
.search-field {
  position: relative;
}
.search-field input[type="search"] {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}
.search-field::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  pointer-events: none;
  background-color: var(--hs-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 1 0 4.9 14.32l5.39 5.38a1 1 0 0 0 1.42-1.41l-5.39-5.39A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 1 0 4.9 14.32l5.39 5.38a1 1 0 0 0 1.42-1.41l-5.39-5.39A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-field input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.search-clear {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hs-muted);
  font-size: 1.1rem;
  line-height: 1;
}
.search-field.has-value .search-clear {
  display: flex;
}
.search-clear:hover,
.search-clear:focus-visible {
  color: var(--bs-body-color);
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- Release 26: tag amounts at every Position and Gruppe ---------- */
.tag-toggle {
  margin: 0;
}
.tag-toggle-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.tag-toggle-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
}
.tag-toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.tag-toggle-item input {
  margin: 0;
}
/* Without JavaScript, "Anzeigen" (a normal form submit) is how a checkbox takes effect,
   so the button always stays reachable; JavaScript hides it once it can update instantly instead. */
[data-tag-toggle-form].js-instant [data-tag-toggle-submit] {
  display: none;
}

.tag-detail {
  display: none; /* shown by the static .tag-detail-visible class (server-rendered, or added by app.js) */
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--hs-muted);
}
.tag-detail-visible {
  display: block;
}

/* ---------- Release 27: magnifying glass at Gebucht/Verpflichtet ---------- */
.magnifier-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-left: 0.15rem;
  border-radius: 50%;
  color: var(--hs-muted);
  vertical-align: -0.2em;
}
.magnifier-link:hover,
.magnifier-link:focus-visible {
  color: var(--hs-amber);
  background: rgba(242, 169, 0, 0.14);
}
/* Gebucht/Verpflichtet/Erhalten cells reserve the icon's width whether or not this particular row
   has one, so the number itself stays flush with the other, icon-free columns (Summe, Rest, ...). */
.cell-icon-num {
  position: relative;
  padding-right: 1.7rem !important;
}
.cell-icon-num .magnifier-link {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

/* ---------- Release 30: Zitat auf der Startseite ---------- */
.quote-panel {
  border-left: 3px solid var(--hs-amber);
}
.quote-text {
  font-size: 1.15rem;
  font-style: italic;
}
.quote-author {
  font-size: 0.9rem;
}

/* ---------- Release 31: symbols in the main navigation ---------- */
.hs-nav .nav-link-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.hs-nav .nav-icon {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
}
/* Release 80: the head of the sign as the symbol of Admin - colour of the other symbols, amber when pointed at,
   open or current */
.hs-nav .nav-icon-head {
  display: inline-block;
  aspect-ratio: 185 / 192;
  width: auto;
  background-color: currentColor;
  -webkit-mask: url("../img/curruca-head.png") center / contain no-repeat;
  mask: url("../img/curruca-head.png") center / contain no-repeat;
}
.hs-nav .nav-link:hover .nav-icon-head,
.hs-nav .nav-link:focus-visible .nav-icon-head,
.hs-nav .nav-link.active .nav-icon-head,
.hs-nav .nav-link.show .nav-icon-head {
  background-color: var(--hs-amber);
}
.hs-nav .nav-link-icon.dropdown-toggle::after {
  margin-left: 0.15rem;
  vertical-align: 0.1em;
}
.hs-nav .dropdown-header {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
}
@media (min-width: 992px) {
  .hs-nav .nav-link-icon {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
}
@media (max-width: 991.98px) {
  .hs-nav .nav-icon-label {
    margin-left: 0.5rem;
  }
}

/* ---------- Release 31: Personal ---------- */
.hr-tag {
  display: inline-block;
  margin: 0 0.3rem 0.25rem 0;
  padding: 0.05rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.hr-tag-ok {
  border-color: var(--hs-ok);
  color: var(--hs-ok);
}
.hr-tag-warn {
  border-color: var(--hs-amber);
  background: var(--hs-amber);
  color: var(--hs-amber-ink);
}
.hr-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
}
.hr-facts-grid .panel {
  margin: 0;
}
.hr-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem 1.25rem;
}
/* Release 76: a field two columns wide (e.g. the name of a company); one column on narrow screens */
@media (min-width: 48rem) {
  .hr-form-grid > .hr-form-wide {
    grid-column: span 2;
  }
}
.hr-form fieldset legend {
  float: none;
  width: auto;
  margin-bottom: 0.75rem;
}
.hr-employment-beendet {
  opacity: 0.8;
}
.hr-terms-current td {
  background: color-mix(in srgb, var(--hs-ok) 8%, transparent);
}
.hr-settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
.hr-settings-row > div:first-of-type {
  flex: 1 1 14rem;
}
.hr-audit-value {
  max-width: 22rem;
  overflow-wrap: anywhere;
}
.hr-audit-bank td {
  box-shadow: inset 3px 0 0 var(--hs-amber);
}
.hr-audit-bank td + td {
  box-shadow: none;
}

/* ---------- Release 32 ---------- */
.hr-settings-row > .hr-abbr {
  flex: 0 0 8rem;
}

/* ---------- Release 33: Stunden je Tag ---------- */
.hr-days-wrap {
  grid-column: 1 / -1;
}
.hr-days {
  display: grid;
  grid-template-columns: repeat(5, minmax(3.5rem, 5rem)) auto;
  gap: 0.5rem;
  align-items: end;
}
.hr-days .form-control {
  text-align: right;
}
.hr-days-sum {
  padding: 0 0 0.45rem 0.5rem;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .hr-days {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .hr-days-sum {
    grid-column: 1 / -1;
    padding: 0;
  }
}
.hr-days-text {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Release 35: Abwesenheiten ---------- */
.hr-abs {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0 0.2rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  background: #5b6475;
}
.hr-abs-urlaub { background: #1f6fb2; }
.hr-abs-krankenstand { background: #a8322d; }
.hr-abs-pflegefreistellung { background: #7a4fa0; }
.hr-abs-sonderurlaub { background: #1f7a4d; }
.hr-abs-zeitausgleich { background: #8a6d00; }
.hr-abs-unbezahlt { background: #5b6475; }
.hr-abs-mutterschutz { background: #b0457a; }
.hr-abs-karenz { background: #8c3d63; }
.hr-month {
  font-size: 0.8rem;
}
.hr-month th, .hr-month td {
  padding: 0.2rem 0.15rem;
  text-align: center;
  vertical-align: middle;
}
.hr-month .hr-month-name {
  text-align: left;
  white-space: nowrap;
  padding-right: 0.5rem;
  position: sticky;
  left: 0;
  background: var(--hs-surface);
  z-index: 1;
}
.hr-month .hr-month-day {
  min-width: 1.9rem;
}
.hr-month .hr-off {
  background: color-mix(in srgb, var(--bs-secondary-color) 16%, transparent);
}
.hr-month .hr-none {
  background: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--bs-secondary-color) 18%, transparent) 4px 6px);
}
.hr-settings-row > .hr-date {
  flex: 0 0 11rem;
}
.panel .table.hr-month > :not(caption) > * > * {
  padding: 0.2rem 0.1rem;
}
.panel .table.hr-month > :not(caption) > * > .hr-month-name {
  padding: 0.2rem 0.6rem 0.2rem 0.75rem;
}
.panel .table.hr-month thead th {
  text-transform: none;
  letter-spacing: 0;
}
.hr-month .hr-month-day,
.hr-month .hr-month-cell {
  width: 2rem;
  min-width: 2rem;
}

/* ---------- Release 36: Fristen ---------- */
.hr-tag-danger {
  border-color: var(--hs-bad);
  background: var(--hs-bad);
  color: #fff;
}
.hr-overdue td {
  box-shadow: inset 3px 0 0 var(--hs-bad);
}
.hr-overdue td + td {
  box-shadow: none;
}
.hr-reminder-done {
  opacity: 0.65;
}
.hr-reminder-done .hr-reminder-text {
  text-decoration: line-through;
}

/* ---------- Release 37: Anträge ---------- */
.hr-abs.hr-abs-pending {
  background: transparent;
  color: var(--hs-ink, currentColor);
  border: 1px dashed currentColor;
  font-weight: 600;
}
.hr-change-bank td {
  background: color-mix(in srgb, var(--hs-amber) 18%, transparent);
}

/* ---------- Release 39/41: Budget-Kopfzeile, Herstellung links, Einnahmen und Ergebnis rechts ---------- */
/* Release 41: whether both sides fit in one line is measured on the header itself (app.js sets .bs-inline),
   not on the window width. Without the class the income side gets its own line, right-aligned. The income
   side has the same horizontal padding and border width in both states, so switching never changes the fit. */
.budget-summary {
  justify-content: space-between;
  gap: 0.75rem 2.5rem;
}
.budget-summary .bs-side {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}
.budget-summary .bs-income {
  flex-basis: 100%;
  margin-left: auto;
  justify-content: flex-end;
  text-align: right;
  padding: 0.75rem 0 0 2rem;
  border-left: 1px solid transparent;
  border-top: 1px solid var(--hs-line);
}
.budget-summary.bs-inline .bs-income {
  flex-basis: auto;
  padding-top: 0;
  border-left-color: var(--hs-line);
  border-top: 0;
}
.budget-summary [title] {
  cursor: help;
}
@media (max-width: 767.98px) {
  .budget-summary:not(.bs-inline) .bs-income {
    margin-left: 0;
    justify-content: flex-start;
    text-align: left;
    padding-left: 0;
    border-left: 0;
  }
}
@media print {
  .budget-summary [title] {
    cursor: auto;
  }
}

/* ---------- Release 40: Eigenleistung (interne Leistung) ---------- */
.budget-summary .bs-sub {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: var(--hs-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.own-work-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.45rem;
  border: 1px solid var(--hs-line);
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--hs-muted);
  white-space: nowrap;
  vertical-align: middle;
}
.own-work-alert {
  margin: 0;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--hs-line);
  border-left: 4px solid var(--hs-amber);
  background: color-mix(in srgb, var(--hs-amber) 10%, transparent);
}
.own-work-alert ul {
  padding-left: 1.1rem;
}

/* ---------- Release 42: Produktion ---------- */
.prod-progress {
  width: 5rem;
  height: 0.55rem;
  margin-right: 0.35rem;
  vertical-align: middle;
  accent-color: var(--hs-ok);
}
.prod-team-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--hs-line);
}
.prod-team-list li:last-child {
  border-bottom: 0;
}
.prod-team-add {
  display: flex;
  gap: 0.5rem;
}
.prod-team-add .form-select {
  min-width: 0;
  flex: 1 1 auto;
}
.panel .table.prod-ms-table > caption.prod-ms-caption {
  caption-side: top;
  padding: 0.75rem 1rem 0.5rem;
  font-weight: 600;
  color: var(--bs-body-color);
}
.prod-ms-table td,
.prod-ms-table th {
  vertical-align: middle;
}
.prod-ms-na td {
  color: var(--hs-muted);
}
.prod-ms-form .prod-ms-status {
  min-width: 9.5rem;
}
.prod-ms-form .prod-ms-date {
  min-width: 9.5rem;
}
.prod-ms-actions {
  position: sticky;
  bottom: 0;
  padding: 0.75rem 0;
  background: var(--bs-body-bg);
  border-top: 1px solid var(--hs-line);
}
.prod-skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.25rem 1rem;
}
.prod-list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.prod-list-row > form.hr-settings-row {
  flex: 1 1 28rem;
}
.prod-row-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.prod-move {
  display: inline-flex;
  gap: 0.25rem;
}
.prod-group-head {
  border-bottom: 1px solid var(--hs-line);
  background: color-mix(in srgb, var(--hs-line) 30%, transparent);
}
.prod-ms-row {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--hs-line);
  align-items: center;
}
.prod-ms-row > form.hr-settings-row {
  align-items: center;
}
.prod-inactive input[type="text"] {
  color: var(--hs-muted);
  font-style: italic;
}
.prod-ms-new {
  background: transparent;
}
.hr-overdue > th:first-child {
  box-shadow: inset 3px 0 0 var(--hs-bad);
}
/* Narrow screens: each milestone of the form becomes a small card (name, status, then the two dates). */
@media (max-width: 575.98px) {
  .prod-ms-form .prod-ms-table thead {
    display: none;
  }
  .prod-ms-form .prod-ms-table,
  .prod-ms-form .prod-ms-table tbody {
    display: block;
    width: 100%;
  }
  .prod-ms-form .prod-ms-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.5rem;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--hs-line);
  }
  .panel .table.prod-ms-table > tbody > tr > * {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .prod-ms-form .prod-ms-table tbody tr > th,
  .prod-ms-form .prod-ms-table tbody tr > td[data-label="Status"] {
    grid-column: 1 / -1;
  }
  .prod-ms-form .prod-ms-table tbody tr > td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    color: var(--hs-muted);
  }
  .prod-ms-form .prod-ms-table tbody tr.hr-overdue {
    box-shadow: inset 3px 0 0 var(--hs-bad);
  }
  .prod-ms-form .prod-ms-table tbody tr.hr-overdue > th:first-child {
    box-shadow: none;
  }
  .prod-ms-form .prod-ms-status,
  .prod-ms-form .prod-ms-date {
    min-width: 0;
  }
}
.prod-ms-row .hr-settings-row > div:first-of-type {
  flex: 3 1 16rem;
}

/* ---------- Release 43: Farbcode, Kontakt, Produktionsnotiz ---------- */
.prod-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.1rem;
  border-radius: 50%;
  border: 1px solid transparent;
  vertical-align: -0.05rem;
  flex: 0 0 auto;
}
.prod-dot-green { background: #2e9d5a; }
.prod-dot-orange { background: #e8870e; }
.prod-dot-grey { background: #8a94a6; }
.prod-dot-darkred { background: #8b1a1a; }
.prod-dot-black { background: #000000; }
[data-bs-theme="dark"] .prod-dot-black,
[data-bs-theme="dark"] .prod-dot-darkred {
  border-color: #c8cfdb;
}
.prod-team-person {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.prod-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  overflow-wrap: anywhere;
}
.prod-note {
  color: var(--hs-muted);
  overflow-wrap: anywhere;
}
.prod-rating-choice .form-check-label {
  white-space: nowrap;
}

/* ---------- Release 44 ---------- */
.prod-role-skills {
  display: grid;
  gap: 0.75rem;
}
.prod-region {
  overflow-wrap: anywhere;
}

/* ---------- Release 45: sortable tables ---------- */
.sort-btn {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: inherit;
  cursor: pointer;
}
.sort-btn:hover {
  color: var(--bs-link-hover-color, var(--bs-link-color));
}
.sort-btn:focus-visible {
  outline: 2px solid var(--bs-focus-ring-color, #86b7fe);
  outline-offset: 2px;
  border-radius: 2px;
}
.sort-icon {
  display: inline-block;
  width: 0.8em;
  margin-left: 0.2rem;
  opacity: 0.35;
  text-align: center;
}
.sort-icon::before {
  content: "↕";
}
[aria-sort="ascending"] .sort-icon,
[aria-sort="descending"] .sort-icon {
  opacity: 1;
}
[aria-sort="ascending"] .sort-icon::before {
  content: "↑";
}
[aria-sort="descending"] .sort-icon::before {
  content: "↓";
}
.position-skill {
  overflow-wrap: anywhere;
}
.panel .table thead th.sort-th {
  white-space: normal;
  vertical-align: bottom;
}

/* ---------- Release 46: compact settings lists (Produktion → Einstellungen) ---------- */
.panel .table.compact-list > :not(caption) > * > * {
  padding: 0.35rem 0.75rem;
}
.compact-list .compact-name {
  width: 50%;
  min-width: 14rem;
}
.compact-list .compact-actions {
  text-align: right;
  white-space: nowrap;
}
.compact-list .compact-actions > *,
.compact-list .compact-actions form,
.compact-list .prod-move {
  display: inline-flex;
  vertical-align: middle;
}
.compact-list .compact-actions > * + * {
  margin-left: 0.35rem;
}
.compact-list .prod-move {
  gap: 0.2rem;
}
.compact-inactive input[type="text"],
.compact-inactive > td:not(.compact-actions) {
  color: var(--hs-muted);
}
.compact-inactive input[type="text"] {
  font-style: italic;
}
.panel .table.compact-list thead tr.compact-group > th {
  color: var(--bs-body-color);
  font-size: inherit;
  white-space: normal;
  background: color-mix(in srgb, var(--hs-line) 35%, transparent);
}
.compact-group-block + .compact-group-block,
.compact-group-new {
  border-top: 1px solid var(--hs-line-strong);
}
.compact-name-pair {
  display: flex;
  gap: 0.4rem;
}
.compact-name-pair .compact-group-select {
  flex: 0 0 11rem;
  width: 11rem;
}
.compact-new-input {
  max-width: 24rem;
}
.compact-new > td {
  border-top: 1px dashed var(--hs-line);
}

/* Narrow screens: every row becomes a small card. */
@media (max-width: 575.98px) {
  .compact-list,
  .compact-list thead,
  .compact-list tbody {
    display: block;
    width: 100%;
  }
  .compact-list thead tr:not(.compact-group) {
    display: none;
  }
  .compact-list tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 0.6rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--hs-line);
  }
  .panel .table.compact-list > :not(caption) > * > * {
    display: block;
    padding: 0;
    border: 0;
    width: auto;
    min-width: 0;
    background: transparent;
  }
  .compact-list .compact-name,
  .compact-list .compact-actions,
  .compact-list td[colspan] {
    grid-column: 1 / -1;
  }
  .compact-list td[colspan] {
    display: none !important;
  }
  .compact-list .compact-actions {
    text-align: left;
    white-space: normal;
  }
  .compact-name-pair {
    flex-direction: column;
  }
  .compact-name-pair .compact-group-select {
    flex: 1 1 auto;
    width: 100%;
  }
}
.panel .table.compact-list thead tr.compact-group > th.small {
  font-size: 0.875em;
}

/* ---------- Release 47 ---------- */
.prod-team-tools {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-self: flex-start;
}

/* Release 60: small remove button "✕" (team entries) */
.btn-x {
  --bs-btn-padding-x: 0.4rem;
  --bs-btn-padding-y: 0.1rem;
  line-height: 1.2;
  color: var(--hs-muted);
  background: transparent;
  border: 1px solid transparent;
}
.btn-x:hover,
.btn-x:focus-visible {
  color: var(--hs-bad);
  border-color: var(--hs-line);
}

/* Admin → Berechtigungen (release 47) */
.perm-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  padding-left: 1.1rem;
}
.panel .table.perm-table > :not(caption) > * > * {
  padding: 0.45rem 0.6rem;
}
.panel .table.perm-table thead th.perm-col {
  white-space: normal;
  min-width: 6.5rem;
  vertical-align: bottom;
}
.perm-table .perm-what {
  min-width: 16rem;
}
.perm-table td.perm-col {
  vertical-align: top;
}
.perm-tag {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  border: 1px solid var(--hs-line-strong);
}
.perm-tag.perm-edit {
  border-color: var(--hs-ok);
  color: var(--hs-ok);
  font-weight: 600;
}
.perm-note {
  display: block;
  font-size: 0.75rem;
  color: var(--hs-muted);
  line-height: 1.25;
  margin-top: 0.15rem;
}
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem 1.5rem;
}

/* ---------- Release 48: skill suggestions below the title of a position ---------- */
.skill-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.skill-chips-row[hidden] {
  display: none;
}
.skill-chips-label {
  font-size: 0.8rem;
  color: var(--hs-muted);
}
.skill-chips {
  display: contents;
}
.skill-chip {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--hs-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--bs-body-color);
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
}
.skill-chip:hover {
  border-color: var(--bs-link-color);
  color: var(--bs-link-color);
}
.skill-chip:focus-visible {
  outline: 2px solid var(--bs-focus-ring-color, #86b7fe);
  outline-offset: 2px;
}

/* ---------- Release 49: production below the title in the budget list ---------- */
.budget-prod {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.45rem;
  margin-top: 0.2rem;
}
.budget-prod .prod-progress {
  width: 4rem;
  margin-right: 0;
}
.budget-prod .hr-tag {
  margin: 0;
}
.budget-prod .hr-tag {
  font-size: 0.72rem;
  padding: 0 0.4rem;
}

/* Release 50: clapperboard instead of the word "Produktion" */
.budget-prod-link {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.budget-prod-link .nav-icon {
  width: 18px;
  height: 18px;
}

/* Release 52: fields of the resource form hidden by kind, quantity or ownership */
[data-inventory-form] [hidden] {
  display: none !important;
}

/* ---------- Release 53: comment of a budget line ---------- */
details.row-comment {
  display: inline;
}
details.row-comment > summary {
  display: inline-flex;
  align-items: center;
  margin-left: 0.3rem;
  padding: 0.05rem 0.2rem;
  border-radius: 0.25rem;
  color: var(--bs-link-color);
  cursor: pointer;
  list-style: none;
  vertical-align: -0.1rem;
}
details.row-comment > summary::-webkit-details-marker {
  display: none;
}
details.row-comment > summary:focus-visible {
  outline: 2px solid var(--bs-focus-ring-color, #86b7fe);
  outline-offset: 1px;
}
details.row-comment[open] > summary {
  background: color-mix(in srgb, var(--bs-link-color) 18%, transparent);
}
.row-comment-text {
  display: block;
  margin: 0.3rem 0 0.1rem;
  padding: 0.35rem 0.6rem;
  border-left: 3px solid var(--hs-line-strong);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--bs-body-color);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---------- Release 54: Planung on the production page ---------- */
/* Release 60: each budget group folds (details/summary); the head carries its figures. */
.plan-group-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  cursor: pointer;
  list-style: none;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-radius: inherit;
}
.plan-group-summary::-webkit-details-marker {
  display: none;
}
.plan-group-summary::before {
  content: "";
  align-self: center;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.15rem;
  border-right: 2px solid var(--hs-muted);
  border-bottom: 2px solid var(--hs-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.plan-group[open] > .plan-group-summary::before {
  transform: rotate(45deg);
}
.plan-group-summary:hover .plan-group-title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.plan-group-summary:focus-visible {
  outline: 2px solid var(--bs-primary, #6ea8fe);
  outline-offset: -2px;
}
.plan-group[open] > .plan-group-summary {
  border-bottom: 1px solid var(--hs-line-strong);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.plan-group-figures {
  margin-left: auto;
}
.plan-groups-bar {
  display: flex;
  justify-content: flex-end;
}
/* Release 61: subgroups fold as well (any depth) */
.plan-sub {
  border-top: 1px solid var(--hs-line);
}
.plan-group-body > .plan-sub:first-child {
  border-top: 0;
}
.plan-sub-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.55rem 1.25rem;
  cursor: pointer;
  list-style: none;
  color: var(--hs-muted);
}
.plan-sub-summary::-webkit-details-marker {
  display: none;
}
.plan-sub-summary::before {
  content: "";
  align-self: center;
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.1rem;
  border-right: 2px solid var(--hs-muted);
  border-bottom: 2px solid var(--hs-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.plan-sub[open] > .plan-sub-summary::before {
  transform: rotate(45deg);
}
.plan-sub-summary:hover .plan-sub-title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.plan-sub-summary:focus-visible {
  outline: 2px solid var(--bs-primary, #6ea8fe);
  outline-offset: -2px;
}
.plan-sub-title {
  color: var(--bs-body-color);
}
.plan-sub-body {
  margin-left: 1.25rem;
  border-left: 2px solid var(--hs-line);
}
.plan-sub-body .plan-pos,
.plan-sub-body .plan-sub-summary {
  padding-left: 1rem;
}
.plan-pos + .plan-sub {
  border-top: 1px solid var(--hs-line);
}
@media (max-width: 575.98px) {
  .plan-sub-body {
    margin-left: 0.5rem;
  }
}
.plan-subgroup {
  margin: 0;
  padding: 0.5rem 1.25rem 0;
  color: var(--hs-muted);
}
.plan-pos {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--hs-line);
}
.plan-pos:last-child {
  border-bottom: 0;
}
.plan-pos-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  margin-bottom: 0.4rem;
}
.plan-pos-title {
  font-weight: 600;
}
.panel .table.plan-table > :not(caption) > * > * {
  padding: 0.3rem 0.4rem;
}
.plan-table td:first-child {
  min-width: 13rem;
}
.plan-when {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.plan-when input[type="date"] {
  width: 9.2rem;
}
.plan-when .plan-half {
  width: 4.6rem;
}
.plan-qty {
  width: 7.5rem;
}
.plan-warn:not(:empty) {
  margin-top: 0.2rem;
  color: #b7791f;
}
[data-bs-theme="dark"] .plan-warn:not(:empty) {
  color: #f0b54a;
}
.plan-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
}
.plan-status.plan-exact { color: var(--hs-ok); }
.plan-status.plan-missing { color: #b7791f; }
[data-bs-theme="dark"] .plan-status.plan-missing { color: #f0b54a; }
.plan-status.plan-over { color: var(--hs-bad); }
.plan-status::before {
  display: inline-block;
  width: 1.1em;
  font-weight: 700;
}
.plan-status.plan-exact::before { content: "✓"; }
.plan-status.plan-missing::before { content: "!"; }
.plan-status.plan-over::before { content: "▲"; }
.plan-readonly {
  padding-left: 1.1rem;
}
.plan-del-nojs {
  white-space: nowrap;
}
.plan-row[hidden] {
  display: none;
}
@media (max-width: 767.98px) {
  .plan-table thead {
    display: none;
  }
  .plan-table,
  .plan-table tbody {
    display: block;
    width: 100%;
  }
  .plan-table tr.plan-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.3rem 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--hs-line);
  }
  .plan-table tr.plan-row > td {
    display: block;
    border: 0;
    padding: 0 !important;
  }
  .plan-table tr.plan-row > td:not(:last-child) {
    grid-column: 1 / 2;
  }
  .plan-table tr.plan-row > td:last-child {
    grid-column: 2;
    grid-row: 1;
  }
  .plan-table td:first-child {
    min-width: 0;
  }
  .plan-table tr.plan-row > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    color: var(--hs-muted);
  }
  .plan-when {
    flex-wrap: wrap;
    white-space: normal;
  }
}

/* ---------- Release 55: search field with suggestions, one date or a span ---------- */
.combo {
  position: relative;
}
.combo input {
  padding-right: 1.8rem;
}
.combo-clear {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--hs-muted);
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.15rem;
  cursor: pointer;
}
.combo-clear[hidden] {
  display: none;
}
.combo-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 24rem;
  max-height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.2rem 0;
  list-style: none;
  background: var(--bs-body-bg);
  border: 1px solid var(--hs-line-strong);
  border-radius: 0.4rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.combo-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.875rem;
  cursor: pointer;
}
.combo-item.active,
.combo-item:hover {
  background: color-mix(in srgb, var(--bs-link-color) 22%, transparent);
}
.combo-item.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.combo-hint {
  font-size: 0.75rem;
  color: var(--hs-muted);
  white-space: nowrap;
}
.combo-none {
  padding: 0.3rem 0.65rem;
  font-size: 0.85rem;
  color: var(--hs-muted);
}
.plan-when {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  white-space: normal;
}
.plan-when-line {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.plan-when .plan-dayhalf {
  width: 7.2rem;
}
.plan-when-to > span {
  width: 1.4rem;
}
/* Release 61: the slot in front of the first date is as wide as "bis" - the dates line up, and "⚠" sits there */
.plan-when-lbl {
  flex: 0 0 1.4rem;
  width: 1.4rem;
  text-align: center;
}
.plan-when > .plan-range-toggle,
.plan-when > .plan-done,
.plan-when > .plan-late {
  margin-left: calc(1.4rem + 0.25rem);
}
.plan-daywarn {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: #d69e2e;
  font-size: 0.95rem;
  line-height: 1;
  cursor: help;
}
.plan-daywarn:focus-visible {
  outline: 2px solid var(--bs-primary, #6ea8fe);
  outline-offset: 2px;
  border-radius: 2px;
}
.plan-daywarn:hover::after,
.plan-daywarn:focus::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: -0.25rem;
  width: max-content;
  max-width: 17rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--hs-line);
  border-radius: 0.375rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.25);
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}
.plan-range-toggle {
  font-size: 0.78rem;
  text-decoration: none;
}
.plan-foot {
  justify-content: flex-start;
}
/* The list of suggestions must not be cut off by the scrolling wrapper of the table. */
.plan-form .table-responsive {
  overflow: visible;
}

/* ---------- Release 56: resources of an Einsatz ---------- */
.plan-table td[data-label="Ressourcen"] {
  min-width: 14rem;
}
.plan-res-list {
  list-style: none;
  margin: 0 0 0.25rem;
  padding: 0;
}
.plan-res-list:empty {
  display: none;
}
.plan-res-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  margin-bottom: 0.2rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--hs-line-strong);
  border-radius: 0.35rem;
  font-size: 0.85rem;
}
.plan-res-chip > span:first-child {
  margin-right: auto;
}
.plan-res-qty {
  width: 4.2rem;
}
.plan-res-status {
  width: 7.5rem;
}
.plan-res-remove {
  border: 0;
  background: none;
  color: var(--hs-muted);
  cursor: pointer;
  padding: 0 0.15rem;
}
.plan-skill-hint {
  margin-top: 0.2rem;
  border-color: #b7791f;
}
/* Release 92: the chosen person is not intern on the planned days; Eigenleistung / Beistellung of a position */
.plan-intern-hint {
  display: inline-block;
  margin-top: 0.2rem;
}
.plan-intern-hint[hidden] {
  display: none;
}
/* Hints on their own line (release 56: resources have long ones: category · intern/extern – owner · free) */
.combo-item {
  display: block;
}
.combo-hint {
  display: block;
  white-space: normal;
}
.combo-list {
  max-width: 26rem;
}

/* Release 57: owner of an external resource in its entry */
.plan-res-owner {
  display: block;
  font-size: 0.75rem;
  color: var(--hs-muted);
}

/* ---------- Release 58: "keine Planung erforderlich", tabs of the production page ---------- */
.plan-noplan {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: -0.15rem 0 0.4rem;
}
.plan-noplan-note[hidden],
.plan-form [data-plan-work][hidden] {
  display: none !important;
}
.plan-status.plan-none {
  color: var(--hs-muted);
}
.plan-status.plan-none::before {
  content: "–";
}
.prod-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.prod-tabs .nav-link {
  white-space: nowrap;
}
.prod-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}
.prod-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0;
}
.prod-figures > div {
  display: flex;
  flex-direction: column;
}
.prod-figures dt {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--hs-muted);
}
.prod-figures dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}
.plan-noplan-check {
  margin-left: 0.5rem;
}

/* ---------- Release 59: deadlines ---------- */
.plan-done {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.plan-done[hidden],
.plan-res[hidden] {
  display: none !important;
}
.plan-late {
  margin-left: 0;
}
.overdue-box {
  border-left: 4px solid var(--hs-bad);
}
.me-plan-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.6rem 1.25rem;
  border-top: 1px solid var(--hs-line);
}

/* Release 60: free text with suggestions (Personal → Stammdaten) - no clear button, so no room for one. */
.combo.suggest input {
  padding-right: 0.75rem;
}

/* Release 62: resource conflicts - red (A: request while confirmed for others, B: confirmed but not enough),
   yellow (C: others asked as well). The message sits below the resource, on the whole width of the chip. */
.plan-res-chip.is-bad,
.plan-res-list > li.plan-res-bad {
  border-color: var(--hs-bad);
  box-shadow: 0 0 0 1px var(--hs-bad);
}
.plan-res-chip.is-warn,
.plan-res-list > li.plan-res-warn {
  border-color: #d69e2e;
}
.plan-res-msg {
  flex: 1 0 100%;
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--hs-bad);
}
.plan-res-chip.is-warn .plan-res-msg,
.plan-res-list > li.plan-res-warn .plan-res-msg {
  color: #d69e2e;
}
.plan-row-bad > td:first-child {
  box-shadow: inset 3px 0 0 var(--hs-bad);
}
.plan-save-error ul {
  padding-left: 1.1rem;
}
tr.booking-bad > td:first-child {
  box-shadow: inset 3px 0 0 var(--hs-bad);
}
tr.booking-warn > td:first-child {
  box-shadow: inset 3px 0 0 #d69e2e;
}
.booking-msg {
  display: block;
  font-size: 0.8rem;
}
.booking-msg-danger {
  color: var(--hs-bad);
}
.booking-msg-warn {
  color: #d69e2e;
}

/* Release 64: productions of a person as chips (list of people); "+n" opens the rest */
.prod-chips {
  min-width: 9rem;
}
.prod-chip {
  display: inline-block;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--hs-line-strong);
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--bs-link-color) 10%, transparent);
}
a.prod-chip:hover,
a.prod-chip:focus-visible {
  border-color: var(--bs-link-color);
  color: var(--bs-link-color);
}
.prod-chip-more {
  display: inline;
}
.prod-chip-more > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  color: var(--hs-muted);
}
.prod-chip-more > summary::-webkit-details-marker {
  display: none;
}
.prod-chip-more[open] > summary {
  display: none;
}
.people-prod-filter {
  min-width: 14rem;
}

/* ---------- Release 65: App "Wiener Linien" - departure monitor (black, amber LED look) ---------- */
.wl-monitor {
  --wl-amber: #ffb400;
  --wl-amber-dim: #a87a12;
  position: relative;
  padding: 1rem 1.25rem 0.75rem;
  border-radius: 0.75rem;
  background: #050505;
  color: var(--wl-amber);
  font-family: "DejaVu Sans Mono", "Consolas", "Menlo", ui-monospace, monospace;
  box-shadow: inset 0 0 0 1px #222, 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}
.wl-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #2a2a2a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wl-title {
  font-weight: 700;
  margin-right: auto;
}
.wl-clock {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px rgba(255, 180, 0, 0.45);
}
.wl-full {
  border: 1px solid #333;
  border-radius: 0.35rem;
  background: #111;
  color: var(--wl-amber);
  padding: 0 0.45rem;
  line-height: 1.6;
}
.wl-full:hover,
.wl-full:focus-visible {
  border-color: var(--wl-amber);
}
.wl-stations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 0 2rem;
}
.wl-station {
  padding-top: 0.75rem;
}
.wl-station-name {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #f2f2f2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wl-row {
  display: grid;
  grid-template-columns: 5.2rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed #1f1f1f;
}
.wl-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 4.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  color: #fff;
}
.wl-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}
/* line colours as on the Vienna network maps */
.wl-u1 { background: #e20613; }
.wl-u2 { background: #a762a3; }
.wl-u3 { background: #ee7d00; }
.wl-u4 { background: #009540; }
.wl-u5 { background: #00969b; }
.wl-u6 { background: #9d6930; }
.wl-metro { background: #555; }
.wl-tram { background: #c8102e; }
.wl-wlb { background: #0f4c81; }
.wl-bus { background: #0a2d62; }
.wl-night { background: #0a2d62; color: #ffd600; }
.wl-other { background: #444; }
.wl-towards {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 0 4px rgba(255, 180, 0, 0.35);
}
.wl-deps {
  display: flex;
  gap: 0.9rem;
  justify-content: flex-end;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wl-dep {
  min-width: 2.2ch;
  text-align: right;
  text-shadow: 0 0 5px rgba(255, 180, 0, 0.5);
}
.wl-dep.wl-planned {
  color: var(--wl-amber-dim);
  text-shadow: none;
}
.wl-dep[hidden] {
  display: none;
}
.wl-bf {
  margin-left: 0.15rem;
  font-size: 0.7em;
  vertical-align: super;
  color: #8fc3ff;
  text-shadow: none;
}
.wl-info {
  margin: 0.15rem 0 0.35rem 6rem;
  padding: 0.15rem 0.5rem;
  border-left: 3px solid #ffd600;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  color: #ffe680;
}
.wl-empty {
  margin: 0.25rem 0;
  font-size: 0.85rem;
  color: #8a8a8a;
}
.wl-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid #2a2a2a;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.75rem;
  color: #8a8a8a;
}
.wl-foot .wl-warn {
  color: #ffd600;
}
.wl-attr {
  margin-left: auto;
}
.wl-expired {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wl-expired[hidden] {
  display: none;
}
/* full screen (button) and display link: big letters, whole screen */
.wl-monitor-full,
.wl-monitor-display {
  min-height: 100vh;
  border-radius: 0;
  font-size: clamp(1rem, 1.6vw, 2rem);
}
.wl-monitor-full .wl-row,
.wl-monitor-display .wl-row {
  grid-template-columns: 4.6em 1fr auto;
}
.wl-monitor-full .wl-line,
.wl-monitor-display .wl-line {
  min-width: 4.2em;
}
.wl-monitor-full .wl-clock,
.wl-monitor-display .wl-clock {
  font-size: 1.6em;
}
.wl-monitor-full .wl-station-name,
.wl-monitor-display .wl-station-name {
  font-size: 0.8em;
}
.wl-monitor-full .wl-icon,
.wl-monitor-display .wl-icon {
  width: 1.1em;
  height: 1.1em;
}
.display-body {
  margin: 0;
  background: #050505;
}
.display-main {
  min-height: 100vh;
}
@media (max-width: 575.98px) {
  .wl-monitor {
    padding: 0.75rem;
  }
  .wl-stations {
    grid-template-columns: 1fr;
  }
  .wl-row {
    grid-template-columns: 4.6rem 1fr auto;
    gap: 0.5rem;
  }
  .wl-line {
    min-width: 4rem;
  }
  .wl-deps {
    gap: 0.6rem;
  }
  .wl-info {
    margin-left: 0;
  }
}

/* ---------- Release 66: Belege - finished vouchers leave the list ---------- */

.wl-item {
  transition: opacity 0.4s ease, box-shadow 0.3s ease;
}
.wl-item.wl-done {
  box-shadow: 0 0 0 2px var(--hs-ok);
}
.wl-item.wl-done .wl-head::after {
  content: "✓ zugeordnet";
  color: var(--hs-ok);
  font-weight: 600;
}
.wl-item.wl-fading {
  opacity: 0;
}
.wl-item.wl-restored {
  box-shadow: 0 0 0 2px var(--hs-amber, #f2a900);
}
.wl-item:focus {
  outline: none;
}
.wl-item:focus-visible {
  outline: 2px solid var(--bs-link-color);
  outline-offset: 2px;
}
/* Hidden table labels (position: absolute) stayed outside the scroll box and widened the page on phones. */
.wl-item .table-responsive {
  position: relative;
}
.wl-done-notes {
  position: sticky;
  top: 0.5rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.wl-done-notes:empty {
  display: none;
}
.wl-done-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem 0.45rem 0.85rem;
  background: var(--hs-surface);
  border: 1px solid var(--hs-ok);
  border-left-width: 4px;
  border-radius: var(--bs-border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.wl-done-note .btn-x {
  margin-left: auto;
}

/* ---------- Release 66: Budgets - back to the same place ---------- */

#budget-table tbody tr {
  scroll-margin-top: 5rem;
}
#budget-table tbody tr.row-flash > * {
  animation: row-flash 2.5s ease-out;
}
@keyframes row-flash {
  0%, 40% { background-color: color-mix(in srgb, var(--hs-amber, #f2a900) 28%, transparent); }
  100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-item { transition: none; }
  #budget-table tbody tr.row-flash > * {
    animation: none;
    background-color: color-mix(in srgb, var(--hs-amber, #f2a900) 20%, transparent);
  }
}

/* ---------- Release 67: Storno statt Löschen ---------- */

/* Reversed allocations: struck through, muted, but still readable (they count nowhere). position: relative keeps
   the visually hidden "storniert:" inside the cell - otherwise it escapes the scrolling table and widens the page. */
.row-reversed > td {
  position: relative;
  color: var(--bs-secondary-color);
}
.row-reversed .rev-strike {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.reversal-info {
  display: block;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
}

/* The "Stornieren" button opens its small form in place (works without JavaScript). */
.reverse-box {
  display: inline-block;
  vertical-align: middle;
}
.reverse-box > summary {
  list-style: none;
  cursor: pointer;
}
.reverse-box > summary::-webkit-details-marker {
  display: none;
}
.reverse-box[open] > summary {
  margin-bottom: 0.5rem;
}
.reverse-form {
  display: grid;
  gap: 0.5rem;
  min-width: 16rem;
  max-width: 22rem;
  padding: 0.75rem;
  text-align: left;
  white-space: normal;
  border: 1px solid var(--hs-bad);
  border-radius: 0.375rem;
  background: var(--bs-body-bg);
}
.reverse-form .form-label {
  margin-bottom: 0.2rem;
  font-size: 0.875rem;
}

/* Keep visually hidden texts (table headers like "Aktionen", "storniert:") inside their scrolling table: without a
   positioned ancestor they escape the scroll container and make the whole page scroll sideways on a phone. */
.assign-panel,
.table-contain {
  position: relative;
}

/* List of reversed allocations below the active ones in the assignment panel. */
.reversed-list {
  position: relative;
}
.reversed-list > summary {
  cursor: pointer;
  color: var(--bs-secondary-color);
  margin-bottom: 0.5rem;
}

/* ---------- Release 68: In sevDesk geändert ---------- */

.role-tag-warn {
  border-color: var(--hs-amber);
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--hs-amber) 14%, transparent);
  text-decoration: none;
}
a.role-tag-warn:hover,
a.role-tag-warn:focus-visible {
  background: color-mix(in srgb, var(--hs-amber) 28%, transparent);
}
.fin-change-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
}
.fin-change:target {
  box-shadow: 0 0 0 2px var(--hs-amber);
}
.fin-mismatch {
  color: var(--hs-bad);
  font-weight: 600;
}
.fin-lines > summary {
  cursor: pointer;
  color: var(--bs-secondary-color);
  margin-bottom: 0.5rem;
}

/* Release 73: person import ------------------------------------------- */
.import-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem 2rem;
}
.import-row-missing {
  border-color: var(--hs-bad);
  box-shadow: 0 0 0 1px var(--hs-bad);
}
/* Correction of release 73: groups with a read-only comparison and an editable import row. The comparison keeps its
   columns readable; on a phone it scrolls sideways inside its box. */
.import-compare table {
  min-width: 50rem;
}
.import-compare td,
.import-compare th {
  vertical-align: top;
}
.import-erp > * {
  background: var(--bs-tertiary-bg);
}
.import-acts {
  margin: 0;
  padding: 0;
  border: 0;
}
.import-notice {
  white-space: normal;
  max-width: 12rem;
}
.import-final {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 0.75rem;
}
.import-final-wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.import-skill-open {
  border-style: dashed;
}
.skill-aliases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.skill-alias {
  display: inline;
  margin: 0;
}
.skill-alias-x {
  border: 0;
  background: none;
  padding: 0 0 0 0.25rem;
  color: inherit;
  line-height: 1;
  cursor: pointer;
}
.skill-alias-x:hover,
.skill-alias-x:focus-visible {
  color: var(--hs-bad);
}

.import-outcome {
  border-left: 3px solid var(--bs-primary);
  padding: 0.4rem 0.75rem;
  background: var(--bs-tertiary-bg);
  border-radius: 0.25rem;
}

.import-skill-map {
  color: var(--hs-muted);
}

/* Release 75: symbols of a person and a company (contact_icon(), HolyCombo) ---- */
.kind-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  vertical-align: -0.2em;
  margin-right: 0.1rem;
}
.kind-icon svg {
  width: 1rem;
  height: 1rem;
}
.kind-person {
  color: var(--hs-person);
}
.kind-company {
  color: var(--hs-company);
}
.kind-name {
  display: inline-flex;
  align-items: baseline;
}
h1 .kind-icon {
  width: 1.6rem;
  height: 1.6rem;
  vertical-align: -0.15em;
}
h1 .kind-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}
/* the combobox shows the symbol of the chosen contact inside the field, and in each suggestion */
.combo-kind {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
}
.combo-kind .kind-icon {
  margin-right: 0;
}
.combo.has-kind input {
  padding-left: 1.9rem;
}
.combo-item .kind-icon {
  margin-right: 0.4rem;
}

/* Release 77: Kalender ------------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --cal-off: #f1f3f7;        /* weekend, holiday */
  --cal-today: #fff6dc;
  --cal-conf: #c92a2a;
  --cal-seg: #9aa5b8;
}
[data-bs-theme="dark"] {
  --cal-off: #232c3e;
  --cal-today: #3a3320;
  --cal-conf: #ff6b6b;
  --cal-seg: #5b6880;
}
.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
}
.cal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.cal-range {
  margin-left: 0.5rem;
}
.cal-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cal-filter > summary {
  cursor: pointer;
  font-weight: 600;
}
.cal-filter-top {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.cal-checks {
  margin-bottom: 0.75rem;
}
.cal-checks legend {
  font-size: 1rem;
  float: none;
  width: auto;
}
.cal-scroll {
  position: relative;   /* visually-hidden text inside needs a positioned ancestor */
  overflow-x: auto;
  background: var(--hs-surface);
  border: 1px solid var(--hs-line);
  border-radius: var(--bs-border-radius);
}
.panel > .cal-scroll {
  border: 0;
}
.cal-grid {
  --cal-lab: 13rem;
  --cal-half: 1.6rem;
}
.cal-row {
  display: grid;
  grid-template-columns: var(--cal-lab) 1fr;
  border-bottom: 1px solid var(--hs-line);
}
.cal-lab {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--hs-surface);
  padding: 0.3rem 0.6rem;
  border-right: 1px solid var(--hs-line);
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.cal-title {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
}
.cal-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--hs-muted);
}
.cal-notready .cal-title::after {
  content: " ⚠";
  color: var(--cal-conf);
}
.cal-head .cal-lab {
  font-weight: 600;
  font-size: 0.8rem;
  display: flex;
  align-items: flex-end;
}
.cal-track {
  display: grid;
  position: relative;
  padding: 0.2rem 0;
}
.cal-head .cal-track {
  padding: 0;
}
.cal-bg {
  grid-row: 1 / -1;
  border-left: 1px solid var(--hs-line);
  margin: -0.2rem 0;
}
.cal-head .cal-bg {
  margin: 0;
}
.cal-we,
.cal-hol {
  background: var(--cal-off);
}
.cal-today {
  background: var(--cal-today);
}
.cal-dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 0.3rem 0;
  font-weight: 600;
}
.cal-dayhead .cal-dn {
  font-weight: 400;
  color: var(--hs-muted);
}
.cal-hol .cal-wd::after {
  content: "*";
}
.cal-bar {
  position: relative;
  z-index: 1;
  align-self: start;
  height: calc(1.9rem - 2px);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  margin: 1px 1px;
  padding: 0 0.35rem;
  border-radius: 0.35rem;
  background: var(--cal-c);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  border: 2px solid transparent;
}
a.cal-bar:hover,
a.cal-bar:focus {
  color: #fff;
  text-decoration: underline;
}
.cal-bar:focus-visible {
  outline: 3px solid var(--hs-amber);
  outline-offset: 1px;
}
.cal-bar-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-bs-theme="dark"] .cal-bar {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.cal-req {
  background: color-mix(in srgb, var(--cal-c) 14%, var(--hs-surface));
  color: var(--bs-body-color);
  border: 2px dashed var(--cal-c);
}
[data-bs-theme="dark"] .cal-req {
  border-color: color-mix(in srgb, var(--cal-c) 55%, #ffffff);
}
a.cal-req:hover,
a.cal-req:focus {
  color: var(--bs-body-color);
}
.cal-conf {
  border: 2px solid var(--cal-conf);
  box-shadow: 0 0 0 1px var(--cal-conf);
}
.cal-warn {
  border-color: var(--cal-conf);
}
.cal-conf-tag {
  flex: 0 0 auto;
  background: var(--cal-conf);
  color: #fff;
  border-radius: 0.2rem;
  padding: 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
}
[data-bs-theme="dark"] .cal-conf-tag {
  color: #1c2434;
}
.cal-cut-s {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.cal-cut-s::before {
  content: "‹";
}
.cal-cut-e {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.cal-cut-e::after {
  content: "›";
  margin-left: auto;
}
.cal-free {
  --cal-c: #5d6779;
}
.cal-hidden {
  --cal-c: #5d6779;
  background: repeating-linear-gradient(135deg, #5d6779, #5d6779 6px, #4c5566 6px, #4c5566 12px);
}
/* Release 78: Personen & Firmen - deadline, "nicht verfügbar" */
.cal-dl {
  border-radius: 1rem;
  font-weight: 600;
  justify-content: center;
}
.cal-dl-done {
  background: color-mix(in srgb, var(--cal-c) 25%, var(--hs-surface));
  color: var(--hs-muted);
  font-weight: 400;
}
a.cal-dl-done:hover,
a.cal-dl-done:focus {
  color: var(--bs-body-color);
}
.cal-absent {
  background: repeating-linear-gradient(135deg, var(--cal-off), var(--cal-off) 5px, var(--hs-line) 5px, var(--hs-line) 10px);
  color: var(--bs-body-color);
  border: 1px solid var(--hs-line-strong);
}
[data-bs-theme="dark"] .cal-absent {
  box-shadow: none;
}
.cal-legend-absent {
  background: repeating-linear-gradient(135deg, var(--cal-off), var(--cal-off) 4px, var(--hs-line) 4px, var(--hs-line) 8px);
  color: var(--bs-body-color);
  border: 1px solid var(--hs-line-strong);
  padding: 0 0.2rem;
}
.cal-lab .kind-name {
  display: inline;
}
.cal-group > summary {
  list-style: none;
  cursor: pointer;
  background: color-mix(in srgb, var(--hs-line) 35%, var(--hs-surface));
}
.cal-group > summary::-webkit-details-marker {
  display: none;
}
.cal-group > summary .cal-lab {
  background: inherit;
  font-weight: 600;
  font-size: 0.85rem;
}
.cal-gname::before {
  content: "▸ ";
  display: inline-block;
  width: 1em;
}
.cal-group[open] > summary .cal-gname::before {
  content: "▾ ";
}
.cal-gcount {
  font-weight: 400;
  color: var(--hs-muted);
}
.cal-seg {
  grid-row: 1;
  background: var(--cal-seg);
  border-radius: 0.2rem;
  margin: 0.35rem 0;
  min-height: 0.6rem;
}
.cal-seg-conf {
  background: var(--cal-conf);
}
.cal-group[open] > summary .cal-seg {
  display: none;
}
.cal-empty {
  padding: 0.75rem;
  margin: 0;
}
.cal-legend-req {
  border: 2px dashed var(--hs-muted);
  padding: 0 0.2rem;
}
.cal-legend-conf {
  border: 2px solid var(--cal-conf);
  padding: 0 0.2rem;
}
.cal-tip {
  position: fixed;   /* release 103: viewport coordinates (also in Vollbild) */
  z-index: 1080;
  max-width: 22rem;
  padding: 0.45rem 0.6rem;
  background: var(--hs-surface);
  color: var(--bs-body-color);
  border: 1px solid var(--hs-line-strong);
  border-radius: 0.35rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: pre-line;
  pointer-events: none;
}
.cal-agenda-day {
  margin-top: 1rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--hs-line);
}
.cal-agenda-day:first-of-type {
  margin-top: 0.25rem;
}
.cal-agenda-off {
  color: var(--hs-muted);
}
.cal-agenda-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0.25rem;
}
.cal-agenda-list li {
  padding: 0.2rem 0;
  overflow-wrap: anywhere;
}
.cal-agenda-part {
  display: inline-block;
  min-width: 6.5rem;
  color: var(--hs-muted);
  font-size: 0.85rem;
}
.cal-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--cal-c);
  margin-right: 0.1rem;
  vertical-align: -0.05em;
}
.cal-dot.cal-req {
  background: transparent;
  border: 2px dashed var(--cal-c);
}
@media (min-width: 48rem) {
  .cal-auto-list {
    display: none;
  }
}
@media (max-width: 47.99rem) {
  .cal-auto-tl {
    display: none;
  }
  .cal-grid {
    --cal-lab: 8.5rem;
  }
}
.cal-p0 {
  --cal-c: #3b5bdb;
}
.cal-p1 {
  --cal-c: #2b7a3b;
}
.cal-p2 {
  --cal-c: #b8235a;
}
.cal-p3 {
  --cal-c: #a8480a;
}
.cal-p4 {
  --cal-c: #6741d9;
}
.cal-p5 {
  --cal-c: #0b6e7f;
}
.cal-p6 {
  --cal-c: #5c6a12;
}
.cal-p7 {
  --cal-c: #9c36b5;
}
.cal-p8 {
  --cal-c: #1864ab;
}
.cal-p9 {
  --cal-c: #7a4f01;
}
/* Grid of the Zeitleiste (release 103: as variables, up to 190 half days - Calendar::MAX_HALVES).
   cal-nN = N half days; gs-N = starts at half day N; gw-N = N half days wide. From 56 half days narrower columns. */
.cal-grid {
  min-width: calc(var(--cal-lab) + var(--cal-n, 14) * var(--cal-half));
}
.cal-grid .cal-track {
  grid-template-columns: repeat(var(--cal-n, 14), minmax(0, 1fr));
}
.cal-bg,
.cal-bar,
.cal-seg {
  grid-column: var(--gs, auto) / span var(--gw, 1);
}
.cal-dayhead .cal-dn {
  font-size: var(--cal-dn, inherit);
}
.cal-n2 { --cal-n: 2; }
.cal-n4 { --cal-n: 4; }
.cal-n6 { --cal-n: 6; }
.cal-n8 { --cal-n: 8; }
.cal-n10 { --cal-n: 10; }
.cal-n12 { --cal-n: 12; }
.cal-n14 { --cal-n: 14; }
.cal-n16 { --cal-n: 16; }
.cal-n18 { --cal-n: 18; }
.cal-n20 { --cal-n: 20; }
.cal-n22 { --cal-n: 22; }
.cal-n24 { --cal-n: 24; }
.cal-n26 { --cal-n: 26; }
.cal-n28 { --cal-n: 28; }
.cal-n30 { --cal-n: 30; }
.cal-n32 { --cal-n: 32; }
.cal-n34 { --cal-n: 34; }
.cal-n36 { --cal-n: 36; }
.cal-n38 { --cal-n: 38; }
.cal-n40 { --cal-n: 40; }
.cal-n42 { --cal-n: 42; }
.cal-n44 { --cal-n: 44; }
.cal-n46 { --cal-n: 46; }
.cal-n48 { --cal-n: 48; }
.cal-n50 { --cal-n: 50; }
.cal-n52 { --cal-n: 52; }
.cal-n54 { --cal-n: 54; }
.cal-n56 { --cal-n: 56; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n58 { --cal-n: 58; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n60 { --cal-n: 60; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n62 { --cal-n: 62; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n64 { --cal-n: 64; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n66 { --cal-n: 66; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n68 { --cal-n: 68; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n70 { --cal-n: 70; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n72 { --cal-n: 72; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n74 { --cal-n: 74; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n76 { --cal-n: 76; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n78 { --cal-n: 78; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n80 { --cal-n: 80; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n82 { --cal-n: 82; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n84 { --cal-n: 84; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n86 { --cal-n: 86; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n88 { --cal-n: 88; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n90 { --cal-n: 90; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n92 { --cal-n: 92; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n94 { --cal-n: 94; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n96 { --cal-n: 96; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n98 { --cal-n: 98; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n100 { --cal-n: 100; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n102 { --cal-n: 102; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n104 { --cal-n: 104; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n106 { --cal-n: 106; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n108 { --cal-n: 108; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n110 { --cal-n: 110; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n112 { --cal-n: 112; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n114 { --cal-n: 114; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n116 { --cal-n: 116; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n118 { --cal-n: 118; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n120 { --cal-n: 120; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n122 { --cal-n: 122; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n124 { --cal-n: 124; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n126 { --cal-n: 126; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n128 { --cal-n: 128; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n130 { --cal-n: 130; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n132 { --cal-n: 132; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n134 { --cal-n: 134; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n136 { --cal-n: 136; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n138 { --cal-n: 138; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n140 { --cal-n: 140; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n142 { --cal-n: 142; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n144 { --cal-n: 144; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n146 { --cal-n: 146; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n148 { --cal-n: 148; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n150 { --cal-n: 150; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n152 { --cal-n: 152; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n154 { --cal-n: 154; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n156 { --cal-n: 156; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n158 { --cal-n: 158; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n160 { --cal-n: 160; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n162 { --cal-n: 162; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n164 { --cal-n: 164; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n166 { --cal-n: 166; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n168 { --cal-n: 168; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n170 { --cal-n: 170; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n172 { --cal-n: 172; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n174 { --cal-n: 174; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n176 { --cal-n: 176; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n178 { --cal-n: 178; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n180 { --cal-n: 180; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n182 { --cal-n: 182; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n184 { --cal-n: 184; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n186 { --cal-n: 186; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n188 { --cal-n: 188; --cal-half: 1rem; --cal-dn: 0.65rem; }
.cal-n190 { --cal-n: 190; --cal-half: 1rem; --cal-dn: 0.65rem; }
.gs-1 { --gs: 1; }
.gs-2 { --gs: 2; }
.gs-3 { --gs: 3; }
.gs-4 { --gs: 4; }
.gs-5 { --gs: 5; }
.gs-6 { --gs: 6; }
.gs-7 { --gs: 7; }
.gs-8 { --gs: 8; }
.gs-9 { --gs: 9; }
.gs-10 { --gs: 10; }
.gs-11 { --gs: 11; }
.gs-12 { --gs: 12; }
.gs-13 { --gs: 13; }
.gs-14 { --gs: 14; }
.gs-15 { --gs: 15; }
.gs-16 { --gs: 16; }
.gs-17 { --gs: 17; }
.gs-18 { --gs: 18; }
.gs-19 { --gs: 19; }
.gs-20 { --gs: 20; }
.gs-21 { --gs: 21; }
.gs-22 { --gs: 22; }
.gs-23 { --gs: 23; }
.gs-24 { --gs: 24; }
.gs-25 { --gs: 25; }
.gs-26 { --gs: 26; }
.gs-27 { --gs: 27; }
.gs-28 { --gs: 28; }
.gs-29 { --gs: 29; }
.gs-30 { --gs: 30; }
.gs-31 { --gs: 31; }
.gs-32 { --gs: 32; }
.gs-33 { --gs: 33; }
.gs-34 { --gs: 34; }
.gs-35 { --gs: 35; }
.gs-36 { --gs: 36; }
.gs-37 { --gs: 37; }
.gs-38 { --gs: 38; }
.gs-39 { --gs: 39; }
.gs-40 { --gs: 40; }
.gs-41 { --gs: 41; }
.gs-42 { --gs: 42; }
.gs-43 { --gs: 43; }
.gs-44 { --gs: 44; }
.gs-45 { --gs: 45; }
.gs-46 { --gs: 46; }
.gs-47 { --gs: 47; }
.gs-48 { --gs: 48; }
.gs-49 { --gs: 49; }
.gs-50 { --gs: 50; }
.gs-51 { --gs: 51; }
.gs-52 { --gs: 52; }
.gs-53 { --gs: 53; }
.gs-54 { --gs: 54; }
.gs-55 { --gs: 55; }
.gs-56 { --gs: 56; }
.gs-57 { --gs: 57; }
.gs-58 { --gs: 58; }
.gs-59 { --gs: 59; }
.gs-60 { --gs: 60; }
.gs-61 { --gs: 61; }
.gs-62 { --gs: 62; }
.gs-63 { --gs: 63; }
.gs-64 { --gs: 64; }
.gs-65 { --gs: 65; }
.gs-66 { --gs: 66; }
.gs-67 { --gs: 67; }
.gs-68 { --gs: 68; }
.gs-69 { --gs: 69; }
.gs-70 { --gs: 70; }
.gs-71 { --gs: 71; }
.gs-72 { --gs: 72; }
.gs-73 { --gs: 73; }
.gs-74 { --gs: 74; }
.gs-75 { --gs: 75; }
.gs-76 { --gs: 76; }
.gs-77 { --gs: 77; }
.gs-78 { --gs: 78; }
.gs-79 { --gs: 79; }
.gs-80 { --gs: 80; }
.gs-81 { --gs: 81; }
.gs-82 { --gs: 82; }
.gs-83 { --gs: 83; }
.gs-84 { --gs: 84; }
.gs-85 { --gs: 85; }
.gs-86 { --gs: 86; }
.gs-87 { --gs: 87; }
.gs-88 { --gs: 88; }
.gs-89 { --gs: 89; }
.gs-90 { --gs: 90; }
.gs-91 { --gs: 91; }
.gs-92 { --gs: 92; }
.gs-93 { --gs: 93; }
.gs-94 { --gs: 94; }
.gs-95 { --gs: 95; }
.gs-96 { --gs: 96; }
.gs-97 { --gs: 97; }
.gs-98 { --gs: 98; }
.gs-99 { --gs: 99; }
.gs-100 { --gs: 100; }
.gs-101 { --gs: 101; }
.gs-102 { --gs: 102; }
.gs-103 { --gs: 103; }
.gs-104 { --gs: 104; }
.gs-105 { --gs: 105; }
.gs-106 { --gs: 106; }
.gs-107 { --gs: 107; }
.gs-108 { --gs: 108; }
.gs-109 { --gs: 109; }
.gs-110 { --gs: 110; }
.gs-111 { --gs: 111; }
.gs-112 { --gs: 112; }
.gs-113 { --gs: 113; }
.gs-114 { --gs: 114; }
.gs-115 { --gs: 115; }
.gs-116 { --gs: 116; }
.gs-117 { --gs: 117; }
.gs-118 { --gs: 118; }
.gs-119 { --gs: 119; }
.gs-120 { --gs: 120; }
.gs-121 { --gs: 121; }
.gs-122 { --gs: 122; }
.gs-123 { --gs: 123; }
.gs-124 { --gs: 124; }
.gs-125 { --gs: 125; }
.gs-126 { --gs: 126; }
.gs-127 { --gs: 127; }
.gs-128 { --gs: 128; }
.gs-129 { --gs: 129; }
.gs-130 { --gs: 130; }
.gs-131 { --gs: 131; }
.gs-132 { --gs: 132; }
.gs-133 { --gs: 133; }
.gs-134 { --gs: 134; }
.gs-135 { --gs: 135; }
.gs-136 { --gs: 136; }
.gs-137 { --gs: 137; }
.gs-138 { --gs: 138; }
.gs-139 { --gs: 139; }
.gs-140 { --gs: 140; }
.gs-141 { --gs: 141; }
.gs-142 { --gs: 142; }
.gs-143 { --gs: 143; }
.gs-144 { --gs: 144; }
.gs-145 { --gs: 145; }
.gs-146 { --gs: 146; }
.gs-147 { --gs: 147; }
.gs-148 { --gs: 148; }
.gs-149 { --gs: 149; }
.gs-150 { --gs: 150; }
.gs-151 { --gs: 151; }
.gs-152 { --gs: 152; }
.gs-153 { --gs: 153; }
.gs-154 { --gs: 154; }
.gs-155 { --gs: 155; }
.gs-156 { --gs: 156; }
.gs-157 { --gs: 157; }
.gs-158 { --gs: 158; }
.gs-159 { --gs: 159; }
.gs-160 { --gs: 160; }
.gs-161 { --gs: 161; }
.gs-162 { --gs: 162; }
.gs-163 { --gs: 163; }
.gs-164 { --gs: 164; }
.gs-165 { --gs: 165; }
.gs-166 { --gs: 166; }
.gs-167 { --gs: 167; }
.gs-168 { --gs: 168; }
.gs-169 { --gs: 169; }
.gs-170 { --gs: 170; }
.gs-171 { --gs: 171; }
.gs-172 { --gs: 172; }
.gs-173 { --gs: 173; }
.gs-174 { --gs: 174; }
.gs-175 { --gs: 175; }
.gs-176 { --gs: 176; }
.gs-177 { --gs: 177; }
.gs-178 { --gs: 178; }
.gs-179 { --gs: 179; }
.gs-180 { --gs: 180; }
.gs-181 { --gs: 181; }
.gs-182 { --gs: 182; }
.gs-183 { --gs: 183; }
.gs-184 { --gs: 184; }
.gs-185 { --gs: 185; }
.gs-186 { --gs: 186; }
.gs-187 { --gs: 187; }
.gs-188 { --gs: 188; }
.gs-189 { --gs: 189; }
.gs-190 { --gs: 190; }
.gw-1 { --gw: 1; }
.gw-2 { --gw: 2; }
.gw-3 { --gw: 3; }
.gw-4 { --gw: 4; }
.gw-5 { --gw: 5; }
.gw-6 { --gw: 6; }
.gw-7 { --gw: 7; }
.gw-8 { --gw: 8; }
.gw-9 { --gw: 9; }
.gw-10 { --gw: 10; }
.gw-11 { --gw: 11; }
.gw-12 { --gw: 12; }
.gw-13 { --gw: 13; }
.gw-14 { --gw: 14; }
.gw-15 { --gw: 15; }
.gw-16 { --gw: 16; }
.gw-17 { --gw: 17; }
.gw-18 { --gw: 18; }
.gw-19 { --gw: 19; }
.gw-20 { --gw: 20; }
.gw-21 { --gw: 21; }
.gw-22 { --gw: 22; }
.gw-23 { --gw: 23; }
.gw-24 { --gw: 24; }
.gw-25 { --gw: 25; }
.gw-26 { --gw: 26; }
.gw-27 { --gw: 27; }
.gw-28 { --gw: 28; }
.gw-29 { --gw: 29; }
.gw-30 { --gw: 30; }
.gw-31 { --gw: 31; }
.gw-32 { --gw: 32; }
.gw-33 { --gw: 33; }
.gw-34 { --gw: 34; }
.gw-35 { --gw: 35; }
.gw-36 { --gw: 36; }
.gw-37 { --gw: 37; }
.gw-38 { --gw: 38; }
.gw-39 { --gw: 39; }
.gw-40 { --gw: 40; }
.gw-41 { --gw: 41; }
.gw-42 { --gw: 42; }
.gw-43 { --gw: 43; }
.gw-44 { --gw: 44; }
.gw-45 { --gw: 45; }
.gw-46 { --gw: 46; }
.gw-47 { --gw: 47; }
.gw-48 { --gw: 48; }
.gw-49 { --gw: 49; }
.gw-50 { --gw: 50; }
.gw-51 { --gw: 51; }
.gw-52 { --gw: 52; }
.gw-53 { --gw: 53; }
.gw-54 { --gw: 54; }
.gw-55 { --gw: 55; }
.gw-56 { --gw: 56; }
.gw-57 { --gw: 57; }
.gw-58 { --gw: 58; }
.gw-59 { --gw: 59; }
.gw-60 { --gw: 60; }
.gw-61 { --gw: 61; }
.gw-62 { --gw: 62; }
.gw-63 { --gw: 63; }
.gw-64 { --gw: 64; }
.gw-65 { --gw: 65; }
.gw-66 { --gw: 66; }
.gw-67 { --gw: 67; }
.gw-68 { --gw: 68; }
.gw-69 { --gw: 69; }
.gw-70 { --gw: 70; }
.gw-71 { --gw: 71; }
.gw-72 { --gw: 72; }
.gw-73 { --gw: 73; }
.gw-74 { --gw: 74; }
.gw-75 { --gw: 75; }
.gw-76 { --gw: 76; }
.gw-77 { --gw: 77; }
.gw-78 { --gw: 78; }
.gw-79 { --gw: 79; }
.gw-80 { --gw: 80; }
.gw-81 { --gw: 81; }
.gw-82 { --gw: 82; }
.gw-83 { --gw: 83; }
.gw-84 { --gw: 84; }
.gw-85 { --gw: 85; }
.gw-86 { --gw: 86; }
.gw-87 { --gw: 87; }
.gw-88 { --gw: 88; }
.gw-89 { --gw: 89; }
.gw-90 { --gw: 90; }
.gw-91 { --gw: 91; }
.gw-92 { --gw: 92; }
.gw-93 { --gw: 93; }
.gw-94 { --gw: 94; }
.gw-95 { --gw: 95; }
.gw-96 { --gw: 96; }
.gw-97 { --gw: 97; }
.gw-98 { --gw: 98; }
.gw-99 { --gw: 99; }
.gw-100 { --gw: 100; }
.gw-101 { --gw: 101; }
.gw-102 { --gw: 102; }
.gw-103 { --gw: 103; }
.gw-104 { --gw: 104; }
.gw-105 { --gw: 105; }
.gw-106 { --gw: 106; }
.gw-107 { --gw: 107; }
.gw-108 { --gw: 108; }
.gw-109 { --gw: 109; }
.gw-110 { --gw: 110; }
.gw-111 { --gw: 111; }
.gw-112 { --gw: 112; }
.gw-113 { --gw: 113; }
.gw-114 { --gw: 114; }
.gw-115 { --gw: 115; }
.gw-116 { --gw: 116; }
.gw-117 { --gw: 117; }
.gw-118 { --gw: 118; }
.gw-119 { --gw: 119; }
.gw-120 { --gw: 120; }
.gw-121 { --gw: 121; }
.gw-122 { --gw: 122; }
.gw-123 { --gw: 123; }
.gw-124 { --gw: 124; }
.gw-125 { --gw: 125; }
.gw-126 { --gw: 126; }
.gw-127 { --gw: 127; }
.gw-128 { --gw: 128; }
.gw-129 { --gw: 129; }
.gw-130 { --gw: 130; }
.gw-131 { --gw: 131; }
.gw-132 { --gw: 132; }
.gw-133 { --gw: 133; }
.gw-134 { --gw: 134; }
.gw-135 { --gw: 135; }
.gw-136 { --gw: 136; }
.gw-137 { --gw: 137; }
.gw-138 { --gw: 138; }
.gw-139 { --gw: 139; }
.gw-140 { --gw: 140; }
.gw-141 { --gw: 141; }
.gw-142 { --gw: 142; }
.gw-143 { --gw: 143; }
.gw-144 { --gw: 144; }
.gw-145 { --gw: 145; }
.gw-146 { --gw: 146; }
.gw-147 { --gw: 147; }
.gw-148 { --gw: 148; }
.gw-149 { --gw: 149; }
.gw-150 { --gw: 150; }
.gw-151 { --gw: 151; }
.gw-152 { --gw: 152; }
.gw-153 { --gw: 153; }
.gw-154 { --gw: 154; }
.gw-155 { --gw: 155; }
.gw-156 { --gw: 156; }
.gw-157 { --gw: 157; }
.gw-158 { --gw: 158; }
.gw-159 { --gw: 159; }
.gw-160 { --gw: 160; }
.gw-161 { --gw: 161; }
.gw-162 { --gw: 162; }
.gw-163 { --gw: 163; }
.gw-164 { --gw: 164; }
.gw-165 { --gw: 165; }
.gw-166 { --gw: 166; }
.gw-167 { --gw: 167; }
.gw-168 { --gw: 168; }
.gw-169 { --gw: 169; }
.gw-170 { --gw: 170; }
.gw-171 { --gw: 171; }
.gw-172 { --gw: 172; }
.gw-173 { --gw: 173; }
.gw-174 { --gw: 174; }
.gw-175 { --gw: 175; }
.gw-176 { --gw: 176; }
.gw-177 { --gw: 177; }
.gw-178 { --gw: 178; }
.gw-179 { --gw: 179; }
.gw-180 { --gw: 180; }
.gw-181 { --gw: 181; }
.gw-182 { --gw: 182; }
.gw-183 { --gw: 183; }
.gw-184 { --gw: 184; }
.gw-185 { --gw: 185; }
.gw-186 { --gw: 186; }
.gw-187 { --gw: 187; }
.gw-188 { --gw: 188; }
.gw-189 { --gw: 189; }
.gw-190 { --gw: 190; }
.cal-r1 {
  grid-template-rows: repeat(1, minmax(1.9rem, 1fr));
}
.cal-r2 {
  grid-template-rows: repeat(2, minmax(1.9rem, 1fr));
}
.cal-r3 {
  grid-template-rows: repeat(3, minmax(1.9rem, 1fr));
}
.cal-r4 {
  grid-template-rows: repeat(4, minmax(1.9rem, 1fr));
}
.cal-r5 {
  grid-template-rows: repeat(5, minmax(1.9rem, 1fr));
}
.cal-r6 {
  grid-template-rows: repeat(6, minmax(1.9rem, 1fr));
}
.cal-r7 {
  grid-template-rows: repeat(7, minmax(1.9rem, 1fr));
}
.cal-r8 {
  grid-template-rows: repeat(8, minmax(1.9rem, 1fr));
}
.cal-r9 {
  grid-template-rows: repeat(9, minmax(1.9rem, 1fr));
}
.cal-r10 {
  grid-template-rows: repeat(10, minmax(1.9rem, 1fr));
}
.cal-r11 {
  grid-template-rows: repeat(11, minmax(1.9rem, 1fr));
}
.cal-r12 {
  grid-template-rows: repeat(12, minmax(1.9rem, 1fr));
}
.gl-1 {
  grid-row: 1;
}
.gl-2 {
  grid-row: 2;
}
.gl-3 {
  grid-row: 3;
}
.gl-4 {
  grid-row: 4;
}
.gl-5 {
  grid-row: 5;
}
.gl-6 {
  grid-row: 6;
}
.gl-7 {
  grid-row: 7;
}
.gl-8 {
  grid-row: 8;
}
.gl-9 {
  grid-row: 9;
}
.gl-10 {
  grid-row: 10;
}
.gl-11 {
  grid-row: 11;
}
.gl-12 {
  grid-row: 12;
}

/* ---------- Release 83: the eye of a password field, the page "Passwort ändern" ---------- */
.pw-toggle {
  display: inline-flex;
  align-items: center;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}
.pw-toggle[hidden] {
  display: none;
}
.pw-toggle .pw-eye-off,
.pw-toggle[aria-pressed="true"] .pw-eye {
  display: none;
}
.pw-toggle[aria-pressed="true"] .pw-eye-off {
  display: inline;
}
/* without the eye (no script) the field keeps its round corners */
.input-group > .form-control:has(+ .pw-toggle[hidden]) {
  border-top-right-radius: var(--bs-border-radius) !important;   /* Bootstrap's input-group rule is more specific */
  border-bottom-right-radius: var(--bs-border-radius) !important;
}
.pw-change {
  max-width: 32rem;
}

/* ---------- Release 84: "Nur ich" in the calendar, links from "Meine Planung" ---------- */
.cal-me {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.me-plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}
.me-plan-head h2 {
  margin: 0;
}
.me-plan-link {
  color: inherit;
  text-decoration: none;
}
.me-plan-link:hover strong,
.me-plan-link:focus-visible strong {
  text-decoration: underline;
}

/* ---------- Release 85: Zeiterfassung - tabs with counters, task cards ---------- */
.tab-count {
  font-weight: 400;
}
.tab-badge {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.05em 0.4em;
  border-radius: 0.35rem;
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  vertical-align: 0.08em;
}
.tab-badge-warn {
  background: var(--hs-amber);
  color: #1b2536;
}
.tab-badge-info,
.task-tag-info {
  background: var(--hs-night);
  color: #ffffff;
}
[data-bs-theme="dark"] .tab-badge-info,
[data-bs-theme="dark"] .task-tag-info {
  background: #5b7bb5;
  color: #ffffff;
}
.task {
  margin-bottom: 1rem;
}
.task-overdue {
  border-left: 4px solid var(--hs-amber);
}
.task-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.75rem;
}
.task-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}
.task-sum {
  white-space: nowrap;
}
.task-add {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
.task-add .form-label {
  margin-bottom: 0.15rem;
}
.task-add .task-hours {
  width: 6.5rem;
}
.task-add .task-note {
  flex: 1 1 12rem;
}
.task-total th,
.task-total td {
  border-bottom: 0;
}
/* the closing action of the task: a row of its own, the main button wide */
.task-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hs-line);
}
.task-close .task-main {
  text-align: left;
  white-space: normal;
}
.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}
.task-close + details {
  margin-top: 0.75rem;
}
.task-done > summary {
  cursor: pointer;
}
.task-cancelled li + li {
  margin-top: 0.15rem;
}

/* ---------- Release 86: "Zu bestätigen" ---------- */
.zb-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}
.info-pending .list-inline-item {
  margin-bottom: 0.3rem;
}
a.task-tag-info {
  text-decoration: none;
}
a.task-tag-info:hover,
a.task-tag-info:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}
/* on a phone each row becomes a block, so the buttons are reachable without scrolling sideways */
@media (max-width: 767.98px) {
  .zb-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .zb-table,
  .zb-table tbody,
  .zb-table tr,
  .zb-table td {
    display: block;
    width: 100%;
  }
  .zb-table tr {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--hs-line);
  }
  .zb-table tr:last-child {
    border-bottom: 0;
  }
  .table.zb-table > tbody > tr > td {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    border: 0;
    text-align: left !important;
  }
  .zb-table td:empty {
    display: none;
  }
  .zb-actions {
    justify-content: flex-start;
    margin-top: 0.3rem;
  }
}

/* ---------- Release 87: Kostensatz ---------- */
.cost-figure {
  font-size: 1.15rem;
}
.cost-figure strong {
  font-size: 1.6rem;
}
.cost-table {
  max-width: 46rem;
}
.cost-table th {
  font-weight: 400;
}
.cost-table .cell-sub {
  display: block;
}
.cost-table .cost-sum th,
.cost-table .cost-sum td,
.cost-table .cost-result th,
.cost-table .cost-result td {
  font-weight: 600;
}
.cost-table .cost-result th,
.cost-table .cost-result td {
  border-top: 2px solid var(--hs-amber);
  border-bottom: 0;
}
.cost-date {
  width: 10rem;
}
/* Release 100: Konditionen on the person page - one more column (Jahreskosten), so headers wrap and cells are tighter */
.panel .table.hr-terms-table > :not(caption) > * > * {
  padding: 0.6rem 0.75rem;
}
.panel .table.hr-terms-table thead th {
  white-space: normal;
  vertical-align: bottom;
}
.hr-terms-table .cell-sub {
  display: block;
}
.hr-terms-table td:first-child .hr-tag {
  display: block;
  width: fit-content;
  margin: 0.25rem 0 0 !important;
}
/* Release 101: what the categories of a Beschäftigungsart mean */
.hr-category-info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin-bottom: 0;
}
.hr-category-info dt {
  font-weight: 600;
}
.hr-category-info dd {
  margin: 0;
}
@media (max-width: 575.98px) {
  .hr-category-info {
    grid-template-columns: 1fr;
  }
  .hr-category-info dd {
    margin-bottom: 0.5rem;
  }
}
/* Release 100: Lohnnebenkosten - one line per levy in the derivation, the settings form */
.cost-table .cost-levy th {
  padding-left: 1rem;
}
.cost-table .cost-levy th,
.cost-table .cost-levy td {
  font-size: 0.875rem;
}
.payroll-years {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}
.payroll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.5rem 1rem;
}
.payroll-states {
  max-width: 40rem;
}
.payroll-states input {
  max-width: 7rem;
}
/* Budget: positions that wait for Belege of third parties but are staffed with own people */
.internal-alert {
  margin: 0;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--hs-line);
  border-left: 4px solid var(--hs-night);
  background: color-mix(in srgb, var(--hs-night) 7%, transparent);
}
[data-bs-theme="dark"] .internal-alert {
  border-left-color: var(--bs-secondary-color);
  background: color-mix(in srgb, var(--bs-body-color) 7%, transparent);
}
.internal-alert ul {
  padding-left: 1.1rem;
}
.budget-table tr[id^="bz-"] {
  scroll-margin-top: 6rem;
}
.budget-table tr[id^="bz-"]:target > td {
  background: color-mix(in srgb, var(--hs-amber) 14%, transparent);
}
.hr-settings-row.cost-year-form > div:first-of-type {
  flex: 0 0 8rem;
}

/* ---------- Release 89: Eigenleistung - Soll und Ist, Reiter der Personal-Einstellungen ---------- */
.hr-settings-body {
  padding-top: 1.25rem;
}
.prod-search {
  max-width: 28rem;
}
.ow-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
.ow-filter-row > div {
  flex: 0 1 14rem;
}
.ow-prod-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 0.15rem 1.25rem;
  max-height: 16rem;
  overflow-y: auto;
}
.ow-prod > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
}
.ow-prod[open] > summary {
  border-bottom: 1px solid var(--hs-line);
}
.ow-prod-name {
  flex: 1 1 16rem;
}
.ow-figs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  font-variant-numeric: tabular-nums;
}
.ow-figs > span {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 6.5rem;
  font-weight: 600;
}
.ow-figs small {
  font-weight: 400;
  color: var(--hs-muted);
}
.ow-table .ow-pos > th {
  font-weight: 600;
}
.ow-table .ow-person > td {
  border-bottom-color: transparent;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  color: var(--bs-secondary-color);
}
.ow-table .ow-person-name {
  padding-left: 1.5rem;
}
.ow-hint {
  display: block;
  font-weight: 400;
}
.ow-norate {
  color: var(--hs-danger, #b42318);
}
[data-bs-theme="dark"] .ow-norate {
  color: #ff9d8f;
}
.ow-unplanned {
  border-top: 1px solid var(--hs-line);
  box-shadow: inset 4px 0 0 var(--hs-night);
}
[data-bs-theme="dark"] .ow-unplanned {
  box-shadow: inset 4px 0 0 var(--bs-secondary-color);
}
.ow-total-hints > span {
  display: block;
}

/* ---------- Release 90: Abstimmung ---------- */
.rec-status {
  border-left: 6px solid var(--hs-muted);
}
.rec-status.rec-ok {
  border-left-color: var(--hs-ok);
}
.rec-status.rec-open {
  border-left-color: var(--hs-night);
}
[data-bs-theme="dark"] .rec-status.rec-open {
  border-left-color: var(--bs-secondary-color);
}
.rec-status.rec-warn {
  border-left-color: var(--hs-amber);
}
.rec-status.rec-bad {
  border-left-color: #c0392b;
}
.rec-table .rec-head > th,
.rec-table .rec-head > td,
.rec-table .rec-sum > th,
.rec-table .rec-sum > td {
  font-weight: 600;
}
.rec-table .rec-sum > th,
.rec-table .rec-sum > td {
  border-top: 2px solid var(--hs-line-strong);
}
.rec-table .rec-plain > th,
.rec-table .rec-sub > th {
  font-weight: 400;
}
.rec-table .rec-sub > th {
  padding-left: 2.25rem;
}
.rec-table .rec-note > td {
  border-bottom: 0;
  padding-bottom: 0;
}
.rec-table .rec-unexplained > th,
.rec-table .rec-unexplained > td {
  color: #c0392b;
}
[data-bs-theme="dark"] .rec-table .rec-unexplained > th,
[data-bs-theme="dark"] .rec-table .rec-unexplained > td {
  color: #ff9d8f;
}
.rec-table .rec-finding > th,
.rec-table .rec-finding > td {
  background: color-mix(in srgb, var(--hs-amber) 10%, transparent);
}
.rec-table .rec-open-cell {
  font-weight: 600;
}
.rec-table thead th[rowspan] {
  vertical-align: bottom;
}
.rec-exports {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.rec-table tbody th[scope="row"] {
  min-width: 12rem;
}

/* Release 93: the last instalment is calculated, not typed */
.form-control[data-instalment-last] { background: var(--bs-secondary-bg); }

/* Release 94: place directory - the proposals hang below the field; Umkreissuche in the filters */
.place-cell { position: relative; }
.place-list { max-width: min(32rem, 92vw); }
.near-filter { min-width: 0; margin: 0; padding: 0; border: 0; }
.near-filter legend { float: none; width: auto; font-size: inherit; }
.near-fields { display: flex; align-items: center; gap: 0.4rem; }
.near-km { width: 5.5rem; flex: none; }
.near-um { white-space: nowrap; color: var(--hs-muted); }
.near-fields .place-cell { flex: 1 1 10rem; min-width: 8rem; }
progress { height: 0.9rem; accent-color: var(--bs-link-color); }
@media (min-width: 40rem) {
  .wl-filter .near-filter { grid-column: span 2; }
}

/* Release 95: Kontakte -> Karte. Drawn by the ERP itself; the only colours are the contacts. */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 62rem) {
  .map-layout { grid-template-columns: minmax(0, 1fr) 21rem; }
  .map-list { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; }
  .map-list-body { overflow-y: auto; }
}
.map-panel { overflow: hidden; }
.map-head, .map-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--hs-line); }
.map-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.map-tools[hidden] { display: none; }
.map-stage {
  --map-water: #eef1f6;
  --map-land: #dfe4ec;
  --map-land-home: #cbd4e2;
  --map-border: #aab5c7;
  --map-region: #b9c3d3;
  --map-ink: #ffffff;
  position: relative;
  background: var(--map-water);
  line-height: 0;
}
[data-bs-theme="dark"] .map-stage {
  --map-water: #111724;
  --map-land: #1a2233;
  --map-land-home: #26314a;
  --map-border: #44516d;
  --map-region: #37435d;
  --map-ink: #141a26;
}
.map-svg { display: block; width: 100%; height: auto; max-height: 78vh; }
.map-live { height: min(72vh, 46rem); min-height: 22rem; touch-action: none; cursor: grab; user-select: none; }
.map-live .map-svg { height: 100%; max-height: none; }
.map-live.map-dragging { cursor: grabbing; }
.map-live:focus-visible { outline: 3px solid var(--hs-amber); outline-offset: -3px; }
.map-land { fill: var(--map-land); stroke: var(--map-border); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-land-home { fill: var(--map-land-home); }
.map-region { fill: none; stroke: var(--map-region); stroke-width: 0.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-far .map-region { display: none; }
.map-country { fill: var(--hs-muted); opacity: 0.75; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
svg:not([viewBox^="0 0"]) .map-country { font-size: 62px; }
.map-place-name { fill: var(--bs-body-color); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--map-water); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.map-dot { stroke: var(--map-water); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.map-dot-firm { fill: var(--hs-company); }
.map-dot-person { fill: var(--hs-person); }
.map-count { fill: var(--map-ink); font-weight: 700; pointer-events: none; }
.map-marker { cursor: pointer; }
.map-halo { fill: transparent; stroke: transparent; stroke-width: 3; }
.map-marker:hover .map-halo { stroke: color-mix(in srgb, var(--hs-amber) 55%, transparent); }
.map-marker.is-selected .map-halo { stroke: var(--hs-amber); fill: color-mix(in srgb, var(--hs-amber) 22%, transparent); }
.map-marker:focus { outline: none; }
.map-marker:focus-visible .map-halo { stroke: var(--hs-amber); stroke-dasharray: 4 3; }
a.map-marker:focus-visible { outline: 3px solid var(--hs-amber); }
.map-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1.5rem; padding: 0.7rem 1.1rem; border-top: 1px solid var(--hs-line); line-height: 1.4; }
.map-legend { font-size: 0.875rem; }
.map-legend svg { vertical-align: -2px; }
.map-legend .map-dot { stroke: none; }
.map-help { font-size: 0.8rem; color: var(--hs-muted); max-width: 44rem; }
.map-selection { margin: 0; padding: 0.55rem 1.1rem; font-weight: 600; border-bottom: 1px solid var(--hs-line); border-left: 4px solid var(--hs-amber); }
.map-country-title { margin: 0; padding: 0.55rem 1.1rem 0.3rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-muted); }
.map-place { padding: 0.35rem 1.1rem 0.6rem; border-top: 1px solid var(--hs-line); scroll-margin-top: 5rem; }
.map-place:target, .map-place:focus { outline: none; box-shadow: inset 4px 0 0 var(--hs-amber); }
.map-place-title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.2rem; font-size: 0.95rem; font-weight: 600; }
.map-show { padding: 0; font-size: 0.8rem; white-space: nowrap; }
.map-contacts li { padding: 0.1rem 0; font-size: 0.9rem; }
.map-off { padding: 0.7rem 1.1rem; border-top: 1px solid var(--hs-line); }
@media (prefers-reduced-motion: no-preference) {
  .map-halo { transition: stroke 0.15s ease, fill 0.15s ease; }
}
.map-core { fill: var(--map-water); }
.map-count-mixed { fill: var(--bs-body-color); }
svg:not([viewBox^="0 0"]) .map-country { font-size: 92px; }

/* Release 95: the buttons of a filter stand in a row of their own - three of them do not fit into one column */
.wl-filter-actions { grid-column: 1 / -1; flex-wrap: wrap; align-items: center; }
.wl-filter-actions .btn { flex: none; white-space: nowrap; }

/* ---- Release 96: choosing the budget line as a tree (worklist/_assign_panel.php, _bulk_modal.php; app.js) ---- */
.form-narrow:has(.node-chooser:not([hidden])) {
  max-width: 46rem;
}
.nc-native {
  display: none;
}
.node-chooser {
  display: grid;
  gap: 0.5rem;
}
.nc-suggest,
.nc-budgets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.nc-suggest-label {
  font-size: 0.8rem;
  color: var(--hs-muted);
}
.nc-chip,
.nc-budget {
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--hs-line-strong);
  border-radius: 99px;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: left;
}
.nc-chip {
  border-color: var(--hs-amber);
  border-radius: 0.9rem;
}
.nc-chip:hover,
.nc-budget:hover:not(:disabled) {
  background: color-mix(in srgb, var(--hs-amber) 18%, transparent);
}
.nc-budget[aria-pressed="true"] {
  border-color: var(--hs-amber);
  background: color-mix(in srgb, var(--hs-amber) 26%, transparent);
  font-weight: 600;
}
.nc-budget:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.nc-chip:focus-visible,
.nc-budget:focus-visible,
.nc-group:focus-visible {
  outline: 2px solid var(--bs-link-color);
  outline-offset: 1px;
}
.nc-head,
.nc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 6.2rem);
  align-items: baseline;
  column-gap: 0.5rem;
  padding: 0.28rem 0.6rem;
}
.nc-head {
  padding-bottom: 0;
  margin-bottom: -0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hs-muted);
}
.nc-list {
  max-height: 19rem;
  overflow-y: auto;
  border: 1px solid var(--hs-line-strong);
  border-radius: 0.4rem;
  background: var(--bs-body-bg);
  position: relative;
}
.nc-row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--hs-line);
  background: transparent;
  color: var(--bs-body-color);
  font-size: 0.875rem;
  text-align: left;
}
.nc-row:last-child {
  border-bottom: 0;
}
.nc-name {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  padding-left: calc(var(--nc-depth, 0) * 1rem);
}
.nc-num {
  flex: none;
  min-width: 2.2rem;
  font-variant-numeric: tabular-nums;
  color: var(--hs-muted);
}
.nc-title {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.nc-note {
  flex: none;
  padding: 0 0.4rem;
  border: 1px solid var(--hs-line-strong);
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--hs-muted);
}
.nc-fig {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nc-neg {
  color: var(--hs-bad);
  font-weight: 600;
}
.nc-group {
  font-weight: 600;
  background: color-mix(in srgb, var(--hs-line) 45%, transparent);
  cursor: pointer;
}
.nc-group .nc-num::before {
  content: "▾";
  display: inline-block;
  width: 1rem;
  color: var(--hs-muted);
}
.nc-group[aria-expanded="false"] .nc-num::before {
  content: "▸";
}
.nc-group .nc-num {
  min-width: 3.2rem;
  color: inherit;
}
.nc-line .nc-name {
  padding-left: calc(var(--nc-depth, 0) * 1rem + 1rem);
}
.nc-line {
  cursor: pointer;
}
.nc-line:hover:not(.nc-off),
.nc-line.active {
  background: color-mix(in srgb, var(--bs-link-color) 16%, transparent);
}
.nc-line[aria-selected="true"] {
  background: color-mix(in srgb, var(--hs-amber) 26%, transparent);
  box-shadow: inset 3px 0 0 var(--hs-amber);
  font-weight: 600;
}
.nc-off {
  opacity: 0.5;
  cursor: not-allowed;
}
.nc-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--hs-muted);
}
.nc-control {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--hs-line-strong);
  border-left: 3px solid var(--hs-ok);
  border-radius: 0.4rem;
  font-size: 0.9rem;
}
.nc-control:has(.nc-warn) {
  border-left-color: var(--hs-amber);
}
.nc-control p {
  margin: 0;
}
.nc-control p + p {
  margin-top: 0.3rem;
}
.nc-warn::before {
  content: "⚠ ";
}
.nc-warn-note {
  font-size: 0.8rem;
  color: var(--hs-muted);
}
@media (max-width: 575.98px) {
  .nc-head,
  .nc-row {
    grid-template-columns: minmax(0, 1fr) 5.4rem;
  }
  /* On the phone only "Rest" - Budget and Gebucht are on the budget page. */
  .nc-head .nc-fig:not(:last-child),
  .nc-row .nc-fig:not(:last-child) {
    display: none;
  }
  .nc-name {
    flex-wrap: wrap;
    row-gap: 0.1rem;
    padding-left: calc(var(--nc-depth, 0) * 0.5rem);
  }
  .nc-title {
    flex: 1 1 55%;
  }
  .nc-line .nc-name {
    padding-left: calc(var(--nc-depth, 0) * 0.5rem + 0.6rem);
  }
}

/* ---------- Release 97: "Frei verfügbar" stands apart, top right; production lines of a Jahresbudget ---------- */
.budget-summary .bs-free {
  margin-left: auto;
  padding: 0.35rem 0.9rem;
  border-left: 3px solid var(--hs-amber);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--hs-amber) 12%, transparent);
  text-align: right;
  align-self: flex-start;
}
.budget-summary .bs-free span {
  color: var(--bs-body-color);
  font-weight: 600;
}
.budget-summary .bs-free strong {
  font-size: 1.6rem;
  line-height: 1.15;
}
@media (max-width: 767.98px) {
  .budget-summary .bs-free {
    order: -1;
    flex-basis: 100%;
    margin-left: 0;
    text-align: left;
  }
}
.row-prodline .cell-title a {
  font-weight: 600;
}
.annual-x {
  max-width: 11rem;
}

/* ---------- Release 98: header of a Jahresbudget; groups of a budget fold ---------- */
.annual-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hs-line);
  overflow-x: auto;
}
.annual-head-table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.annual-head-table thead th {
  padding: 0 0 0.3rem 2.5rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--hs-muted);
  text-align: right;
  white-space: nowrap;
}
.annual-head-table tbody th {
  padding: 0.3rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.annual-head-table tbody td {
  padding: 0.3rem 0 0.3rem 2.5rem;
  font-size: 1.25rem;
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
}
.annual-head-table .ah-result th,
.annual-head-table .ah-result td {
  padding-top: 0.55rem;
  border-top: 1px solid var(--hs-line);
}
.annual-head-table .ah-sub {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--hs-muted);
}
.annual-head-table [title] {
  cursor: help;
}
@media (max-width: 575.98px) {
  .annual-head-table {
    width: 100%;
  }
  .annual-head {
    padding: 0.75rem;
  }
  .annual-head-table thead th,
  .annual-head-table tbody td {
    padding-left: 0.4rem;
  }
  .annual-head-table thead th {
    font-size: 0.75rem;
  }
  .annual-head-table tbody th {
    font-size: 0.8rem;
  }
  .annual-head-table tbody td {
    font-size: 0.85rem;
  }
}
.collapse-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 0;
}
.collapse-tools.ct-plain {
  padding: 0 0 0.75rem;
}
.budget-table tr.is-folded {
  display: none;
}
.budget-table tr.grp-foldable {
  cursor: pointer;
}
.grp-toggle {
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.2rem 0.25rem -0.2rem -0.35rem;
  padding: 0;
  border: 0;
  border-radius: 0.3rem;
  background: transparent;
  color: var(--hs-muted);
  line-height: 1;
  vertical-align: baseline;
}
.grp-toggle::before {
  content: "▾";
}
.grp-toggle[aria-expanded="false"]::before {
  content: "▸";
}
.grp-toggle:hover {
  background: color-mix(in srgb, var(--hs-line-strong) 45%, transparent);
  color: var(--bs-body-color);
}
.grp-toggle:focus-visible {
  outline: 2px solid var(--bs-link-color);
  outline-offset: 1px;
}
@media print {
  .budget-table tr.is-folded {
    display: table-row;
  }
  .grp-toggle,
  .collapse-tools {
    display: none !important;
  }
}

/* ---------- Release 99: list of people in a hint, in columns when there is room ---------- */
.hint-columns {
  columns: 16rem auto;
  column-gap: 2rem;
}

/* Release 102: Kalender - drag and drop, the popup of a bar, the message with "Rückgängig" */
.cal-drag {
  cursor: grab;
  touch-action: pan-x pan-y;
  user-select: none;
}
.cal-drag.cal-edge {
  cursor: ew-resize;
}
.cal-dragging {
  cursor: grabbing;
  z-index: 5;
  opacity: 0.85;
  overflow: visible;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.35);
}
.cal-bar.cal-dragging[data-cal-delta]::after {
  content: attr(data-cal-delta);
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  margin: 0;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--bs-body-color);
  color: var(--hs-surface);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.cal-saving {
  opacity: 0.5;
}
.cal-row.cal-drop > .cal-lab,
.cal-row.cal-drop > .cal-track {
  background: color-mix(in srgb, var(--hs-amber) 18%, var(--hs-surface));
}
.cal-dlg {
  width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--hs-line-strong);
  border-radius: 0.6rem;
  background: var(--hs-surface);
  color: var(--bs-body-color);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
}
.cal-dlg::backdrop {
  background: rgba(10, 14, 22, 0.55);
}
.cal-dlg-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: 0.6rem 0.6rem 0;
  background: var(--hs-surface);
}
.cal-dlg-body {
  padding: 0 1.25rem 1.25rem;
}
.cal-dlg-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.6rem 1rem;
}
.cal-dlg-pair .form-select-sm {
  margin-top: 0.35rem;
}
.cal-dlg-res {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--hs-line);
}
.cal-dlg-res .form-select-sm {
  width: auto;
}
.cal-dlg-qty {
  max-width: 7rem;
}
.cal-dlg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;
}
.cal-dlg-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
}
.cal-dlg-facts dt {
  font-weight: 600;
}
.cal-dlg-facts dd {
  margin: 0;
}
.cal-dlg-choose li + li {
  margin-top: 0.4rem;
}
.cal-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 1080;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 0.9rem;
  border-radius: 0.5rem;
  background: #1f2937;
  color: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
  font-size: 0.9rem;
}
.cal-toast[hidden] {
  display: none;
}
[data-bs-theme="dark"] .cal-toast {
  background: #e9edf3;
  color: #1c2434;
}
[data-bs-theme="dark"] .cal-toast .btn-close-white {
  filter: none;
}

/* ---------- Release 103: Kalender - toolbar below the filter, "Rückgängig", Vollbild, endless Zeitleiste ---------- */
.cal-left {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.cal-undo-btn[disabled] {
  opacity: 0.45;
}
.cal-switches {
  align-items: center;
}
@media (max-width: 767.98px) {
  .cal-fs-btn {
    display: none;
  }
}
/* the window: exactly as wide as its half days (the script sets --cal-half) */
.cal-grid.cal-win {
  width: calc(var(--cal-lab) + var(--cal-n, 14) * var(--cal-half));
  min-width: 0;
}
.cal-narrow .cal-dayhead {
  font-size: 0.62rem;
}
.cal-narrow .cal-dayhead .cal-dn {
  font-size: 0.58rem;
}
@media (pointer: fine) {
  .cal-scroll:has(.cal-win) .cal-track {
    cursor: grab;
  }
  .cal-scroll:has(.cal-win) .cal-track .cal-bar {
    cursor: pointer;
  }
  .cal-scroll:has(.cal-win) .cal-track .cal-bar.cal-drag {
    cursor: grab;
  }
}
.cal-scroll.cal-panning,
.cal-scroll.cal-panning * {
  cursor: grabbing !important;
  user-select: none;
}
.cal-root.cal-loading .cal-scroll {
  opacity: 0.85;
  transition: opacity 0.15s;
}
/* Vollbild: the calendar part fills the screen (in the browser's full screen or the whole window) */
html.cal-max-on,
html.cal-max-on body {
  overflow: hidden;
}
.cal-root.cal-max {
  position: fixed;
  inset: 0;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  background: var(--bs-body-bg);
  overflow: hidden;
}
.cal-root.cal-max > .cal-filter {
  flex: none;
  max-height: 45vh;
  overflow: auto;
}
.cal-root.cal-max > .cal-me,
.cal-root.cal-max > .cal-toolbar {
  flex: none;
}
.cal-root.cal-max > .cal-timeline {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}
.cal-root.cal-max > .cal-timeline > .cal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.cal-root.cal-max .cal-head {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--hs-surface);
}
.cal-root.cal-max > .cal-agenda {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin-bottom: 0 !important;
}
.cal-root.cal-max .cal-legend {
  flex: none;
}

/* ---------- Release 104: Einstellungen → Produktion → Sonstiges; Kalender ---------- */
.settings-narrow {
  max-width: 36rem;
}
.input-group-narrow {
  max-width: 14rem;
}
.cal-live-note {
  font-size: 0.8rem;
}

/* Release 106: Kontoarten fold - closed on opening, the summary names what is ticked */
.acc-picker > summary {
  cursor: pointer;
  font-weight: 600;
}
.acc-picker > summary [data-acc-summary] {
  font-weight: 400;
  color: var(--bs-secondary-color);
}
.acc-picker[open] > summary {
  border-bottom: 1px solid var(--bs-border-color);
}

/* Release 107: the budget pages use more width on a large screen; the budget table is more compact, starts at its left
   edge and shows a shade where columns are hidden to the side (also with the overlay scrollbars of macOS). */
@media (min-width: 1400px) {
  .container-xxl.container-wide {
    max-width: 1680px;
  }
}
.panel .table.budget-table > :not(caption) > * > * {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}
.panel .table.budget-table > :not(caption) > * > :first-child {
  padding-left: 1.25rem;
}
.panel .table.budget-table > :not(caption) > * > :last-child {
  padding-right: 1.25rem;
}
.scroll-shade {
  position: relative;
}
.scroll-shade > .shade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.25rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 3;
}
.scroll-shade > .shade-l {
  left: 0;
  background: linear-gradient(to right, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0));
}
.scroll-shade > .shade-r {
  right: 0;
  background: linear-gradient(to left, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0));
}
.scroll-shade.at-l-not > .shade-l,
.scroll-shade.at-r-not > .shade-r {
  opacity: 1;
}
[data-bs-theme="dark"] .scroll-shade > .shade-l {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
[data-bs-theme="dark"] .scroll-shade > .shade-r {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
@media (prefers-reduced-motion: reduce) {
  .scroll-shade > .shade { transition: none; }
}