/* pb_public/css/app.css – Gemeinsame Styles.
   Die `--brand-*`-Custom-Properties in :root sind die Default-Palette;
   sie werden zur Laufzeit aus `portal_settings.brand_*` per `applyBranding`
   in api.js überschrieben (Style-Tag #branding-vars). */

/* Wiederverwendbare ausklappbare Card (E-Mail-Vorlagen, Prüfverläufe, …) */
.collapse-card { margin-bottom: .75rem; }
.collapse-card .card-header { background: #f1f3f5; cursor: pointer; }
.collapse-card .card-header .toggle-arrow { transition: transform .15s; display: inline-block; }
.collapse-card .card-header.collapsed .toggle-arrow { transform: rotate(-90deg); }

:root {
  --brand-primary: #00a17c;
  --brand-primary-dark: #008a6a;
  --brand-primary-rgb: 0, 161, 124;
  --brand-bg-light: #e9f7f4;
  --brand-accent: #a0d8c8;
  --brand-text: #2a2a2a;
  --brand-text-muted: #737373;
  --brand-bg: #f7f7f7;
  --brand-orange: #ff8200;
}

body {
  background-color: var(--brand-bg);
  font-family: "Helvetica", "Arial", sans-serif;
  color: var(--brand-text);
}

.app-navbar {
  background: transparent !important;
  padding-top: 1rem;
  padding-bottom: 0;
}

.app-navbar .app-navbar__container {
  width: min(calc(100% - clamp(1.5rem, 4vw, 3rem)), 1320px);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.app-navbar__shell {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .9rem 1rem;
  border-radius: 1rem;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, var(--brand-primary) 0%, #0c7c65 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 36px rgba(var(--brand-primary-rgb), .18);
}

.app-navbar--user .app-navbar__shell {
  gap: .7rem;
}

.app-navbar .navbar-collapse {
  flex-grow: 1;
}

.app-navbar--user .app-navbar__user-collapse {
  display: flex !important;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
}

.app-navbar--user .app-navbar__user-toggler {
  display: none;
}

.app-navbar__brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  margin-right: 0;
  color: #fff;
  text-decoration: none;
}

.app-navbar__brand:hover {
  color: #fff;
}

.app-navbar__logo-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .85rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(11, 64, 52, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}

.app-navbar__brand:hover .app-navbar__logo-frame,
.app-navbar__brand:focus .app-navbar__logo-frame {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(11, 64, 52, .16);
}

.app-navbar__logo {
  display: block;
  width: auto;
  height: 38px;
  max-width: min(220px, 45vw);
}

.app-navbar__back {
  display: inline-flex;
  align-items: center;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}

.app-navbar__toggler {
  padding: .45rem .7rem;
  border-radius: .8rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.1);
}

.app-navbar__toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.18);
}

.app-navbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .7rem;
  flex-wrap: wrap;
}

.app-navbar--user .app-navbar__actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.app-navbar__mobile-panel {
  display: none;
}

.app-navbar__mobile-group {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.app-navbar__mobile-link {
  display: block;
  padding: .75rem .9rem;
  border-radius: .85rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}

.app-navbar__mobile-link:hover,
.app-navbar__mobile-link:focus {
  color: #fff;
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

.app-navbar__mobile-link.active {
  background: rgba(255,255,255,.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.app-navbar__mobile-overview {
  display: none;
}

.app-navbar__mobile-logout {
  width: 100%;
  justify-content: center;
}

.app-navbar__user-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 42px;
  max-width: 100%;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.12);
  color: #fff;
}

.app-navbar__user-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}

#user-name {
  display: block;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.app-navbar__action-btn {
  min-height: 42px;
  padding: .55rem .95rem;
  border-radius: .85rem;
  font-size: .92rem;
  font-weight: 600;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.app-navbar__action-btn:hover,
.app-navbar__action-btn:focus {
  transform: translateY(-1px);
}

.app-navbar__action-btn--ghost {
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
}

.app-navbar__action-btn--ghost:hover,
.app-navbar__action-btn--ghost:focus,
.app-navbar__action-btn--ghost.active {
  color: #fff;
  background: rgba(255,255,255,.2);
  box-shadow: 0 10px 24px rgba(11, 64, 52, .16);
}

.app-navbar__logout {
  color: var(--brand-primary-dark);
  background: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(11, 64, 52, .12);
}

.app-navbar__logout:hover,
.app-navbar__logout:focus {
  color: var(--brand-primary-dark);
  background: #f5fffc;
}

.app-navbar__menu {
  margin-top: .8rem;
  padding: .45rem;
  border: none;
  border-radius: 1rem;
  background: rgba(255,255,255,.96);
  box-shadow: 0 20px 40px rgba(31, 38, 53, .16);
}

.app-navbar__menu .dropdown-item {
  padding: .65rem .8rem;
  border-radius: .75rem;
  color: var(--brand-text);
  font-weight: 500;
}

.app-navbar__menu .dropdown-item:hover,
.app-navbar__menu .dropdown-item:focus {
  color: var(--brand-primary-dark);
  background: rgba(var(--brand-primary-rgb), .08);
}

.app-navbar__menu .dropdown-item.active,
.app-navbar__menu .dropdown-item:active {
  color: var(--brand-primary-dark);
  background: var(--brand-bg-light);
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: .02em;
}

.card {
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border-radius: .5rem;
}

.card-header {
  background-color: var(--brand-bg-light);
  color: var(--brand-text);
  border-bottom: 2px solid var(--brand-primary);
}

.admin-nutzer-filter-card .card-header {
  border-bottom: 0;
}

.vwn-action-buttons-anchor {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  margin-left: auto;
}

.vwn-action-buttons {
  align-items: center;
  justify-content: flex-end;
}

.vwn-action-buttons.is-floating {
  position: fixed;
  right: max(1rem, calc((100vw - 1320px) / 2 + 1rem));
  bottom: 1rem;
  z-index: 1040;
  padding: .55rem;
  border: 1px solid rgba(var(--brand-primary-rgb), .22);
  border-radius: .5rem;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

#content.vwn-actions-floating {
  padding-bottom: 5rem;
}

.vwn-anlagen-card .vwn-anlagen-toggle .toggle-arrow {
  display: inline-block;
  transition: transform .15s;
}

.vwn-anlagen-card .vwn-anlagen-toggle.collapsed .toggle-arrow {
  transform: rotate(-90deg);
}
/* Beleg-Typ-Auffangoption „Sonstiges" fett + kursiv hervorheben. */
option.belegtyp-sonstiges {
  font-weight: 700;
  font-style: italic;
}
.delegation-widget {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--brand-primary-rgb), .2);
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.delegation-widget::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: .25rem;
  background: var(--brand-primary);
}

.delegation-widget__header {
  padding: .85rem 1rem .8rem 1.15rem;
  background: linear-gradient(90deg, rgba(var(--brand-primary-rgb), .1), rgba(var(--brand-primary-rgb), .03));
  border-bottom: 1px solid rgba(var(--brand-primary-rgb), .14);
}

.delegation-widget__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}

.delegation-widget__title {
  font-weight: 700;
  color: var(--brand-text);
}

.delegation-widget__type {
  flex: 0 0 auto;
  padding: .15rem .5rem;
  border: 1px solid rgba(var(--brand-primary-rgb), .18);
  border-radius: 999px;
  background: rgba(var(--brand-primary-rgb), .08);
  color: var(--brand-primary-dark);
  font-size: .75rem;
  font-weight: 600;
}

.delegation-widget__current {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}

.delegation-widget__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(var(--brand-primary-rgb), .18);
  font-size: .85rem;
  font-weight: 700;
}

.delegation-widget__avatar--image {
  overflow: hidden;
  background: #fff;
  padding: 0;
}

.delegation-widget__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delegation-widget__current-text {
  min-width: 0;
}

.delegation-widget__label {
  color: var(--brand-text-muted);
  font-size: .76rem;
  line-height: 1.2;
}

.delegation-widget__name {
  overflow-wrap: anywhere;
  font-weight: 700;
  line-height: 1.25;
}

.delegation-widget__body {
  padding: .9rem 1rem 1rem 1.15rem;
}

.delegation-widget__form {
  display: grid;
  grid-template-columns: minmax(12rem, .9fr) minmax(14rem, 1.4fr) auto;
  gap: .75rem;
  align-items: start;
}

.delegation-widget__field .form-label {
  color: var(--brand-text);
  font-weight: 600;
}

.delegation-widget__field:not(.delegation-widget__note) {
  grid-column: 1;
}

.delegation-widget__note {
  grid-column: 2;
}

.delegation-widget__actions {
  display: flex;
  grid-column: 3;
  justify-content: flex-end;
  padding-top: 1.65rem;
}

.delegation-widget__save {
  min-width: 10rem;
  white-space: nowrap;
}

.delegation-widget__history {
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(var(--brand-primary-rgb), .12);
}

.delegation-widget__history-toggle {
  padding: 0;
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: none;
}

.delegation-widget__history-toggle:hover,
.delegation-widget__history-toggle:focus {
  color: var(--brand-primary-dark);
  text-decoration: none;
}

.delegation-widget__history-toggle .toggle-arrow {
  display: inline-block;
  transition: transform .15s;
}

.delegation-widget__history-toggle.collapsed .toggle-arrow {
  transform: rotate(-90deg);
}

.delegation-widget__history-list {
  margin-top: .55rem;
}

.delegation-widget__history-item {
  padding: .55rem 0;
  border-color: rgba(var(--brand-primary-rgb), .1);
  background: transparent;
}

.delegation-widget__history-note {
  margin-top: .35rem;
  padding: .45rem .55rem;
  border-radius: .375rem;
  background: rgba(var(--brand-primary-rgb), .06);
  color: var(--brand-text);
  font-size: .85rem;
  white-space: pre-wrap;
}

#delegation-standalone-modal .modal-body {
  overflow-x: hidden;
}

#delegation-standalone-modal .delegation-widget {
  box-shadow: none;
}

.account-profile {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .9rem;
  border: 1px solid rgba(var(--brand-primary-rgb), .16);
  border-radius: .5rem;
  background: rgba(var(--brand-primary-rgb), .04);
}

.account-profile__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(var(--brand-primary-rgb), .18);
  font-size: 1.35rem;
  font-weight: 700;
  overflow: hidden;
}

.account-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-profile__avatar--image {
  background: #fff;
}

.account-profile__content {
  min-width: 0;
  flex: 1 1 auto;
}

.ansprechperson-contact {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.ansprechperson-contact dd {
  margin-bottom: 0;
}

.ansprechperson-avatar {
  display: block;
  width: 2.9rem;
  height: 2.9rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), .18);
}

@media (max-width: 767.98px) {
  .delegation-widget__title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: .35rem;
  }

  .delegation-widget__form {
    grid-template-columns: 1fr;
  }

  .delegation-widget__field:not(.delegation-widget__note),
  .delegation-widget__note,
  .delegation-widget__actions {
    grid-column: auto;
  }

  .delegation-widget__actions {
    justify-content: stretch;
    padding-top: 0;
  }

  .delegation-widget__save {
    width: 100%;
  }

  .account-profile {
    flex-direction: column;
  }
}

.admin-nutzer-table-wrap {
  border-top: 2px solid var(--brand-primary);
}

.admin-kategorien-toolbar {
  row-gap: .6rem;
}

.settings-page {
  width: min(calc(100% - clamp(1.5rem, 4vw, 3rem)), var(--settings-page-max-width, 1320px));
}

.settings-page--sm {
  --settings-page-max-width: 780px;
}

.settings-page--md {
  --settings-page-max-width: 820px;
}

.settings-page--lg {
  --settings-page-max-width: 900px;
}

.settings-page--xl {
  --settings-page-max-width: 980px;
}

.settings-page > .row {
  margin-left: 0;
  margin-right: 0;
}

.settings-page-hero,
.admin-kategorien-hero {
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(var(--brand-primary-rgb), .16);
  border-left: .35rem solid var(--brand-primary);
  border-radius: .5rem;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.settings-page-eyebrow,
.admin-kategorien-eyebrow,
.admin-kategorien-control-card__label {
  color: var(--brand-primary-dark);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-kategorien-control-card .card-body {
  padding: 1rem;
}

.admin-kategorien-default-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto;
  gap: .6rem;
  align-items: center;
}

.admin-kategorien-section {
  margin-top: 1.75rem;
}

.admin-kategorien-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}

.admin-kategorien-list {
  display: grid;
  gap: .65rem;
}

.admin-kategorien-empty {
  padding: 1.6rem 1rem;
  border: 1px dashed rgba(var(--brand-primary-rgb), .26);
  border-radius: .5rem;
  background: rgba(var(--brand-primary-rgb), .04);
  text-align: center;
}

.admin-kategorien-empty__title {
  color: var(--brand-text);
  font-weight: 700;
}

.admin-kategorien-category {
  overflow: hidden;
  border: 1px solid rgba(var(--brand-primary-rgb), .14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.admin-kategorien-category .card-header {
  border-bottom: 1px solid rgba(var(--brand-primary-rgb), .14);
  background: linear-gradient(90deg, rgba(var(--brand-primary-rgb), .08), rgba(var(--brand-primary-rgb), .02));
}

.admin-kategorien-category__header {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) 8rem auto;
  gap: .75rem;
  align-items: end;
  padding: .85rem 1rem;
}

.admin-kategorien-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-bottom: .3rem;
  padding: .12rem .45rem;
  border: 1px solid rgba(var(--brand-primary-rgb), .16);
  border-radius: 999px;
  background: rgba(var(--brand-primary-rgb), .08);
  color: var(--brand-primary-dark);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
}

.admin-kategorien-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
  margin: 0;
}

.admin-kategorien-field > span {
  color: var(--brand-text-muted);
  font-size: .75rem;
  font-weight: 700;
}

.admin-kategorien-field-label--hidden {
  display: none;
}

.admin-kategorien-field--order {
  min-width: 6.5rem;
}

.admin-kategorien-category__actions,
.admin-kategorien-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
}

.admin-kategorien-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  line-height: 1;
}

.admin-kategorien-sublist {
  background: #fff;
}

.admin-kategorien-subrow {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: end;
  padding: .42rem .85rem;
  border-color: rgba(var(--brand-primary-rgb), .1);
}

.admin-kategorien-subrow__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1.85rem;
  border-radius: 50%;
  background: rgba(var(--brand-primary-rgb), .08);
  color: var(--brand-primary-dark);
  font-weight: 700;
}

.admin-kategorien-subrow__fields {
  display: grid;
  grid-template-columns: minmax(10rem, 1.2fr) 7rem minmax(12rem, 1fr);
  gap: .5rem;
  align-items: end;
  min-width: 0;
}

.admin-kategorien-muted-row {
  padding: .85rem 1rem;
  color: var(--brand-text-muted);
  font-size: .88rem;
  background: rgba(var(--brand-primary-rgb), .03);
}

.admin-kategorien-sachbericht {
  min-width: 0;
}

.admin-kategorien-tabs {
  gap: .35rem;
  border-bottom-color: rgba(var(--brand-primary-rgb), .18);
}

.admin-kategorien-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: .5rem .5rem 0 0;
  color: var(--brand-text-muted);
  font-weight: 700;
}

.admin-kategorien-tabs .nav-link.active {
  color: var(--brand-primary-dark);
  border-color: rgba(var(--brand-primary-rgb), .18) rgba(var(--brand-primary-rgb), .18) #fff;
}

.admin-kategorien-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: rgba(var(--brand-primary-rgb), .1);
  color: var(--brand-primary-dark);
  font-size: .75rem;
  font-weight: 700;
}

.admin-kategorien-tab-content {
  padding: 1rem;
  border: 1px solid rgba(var(--brand-primary-rgb), .18);
  border-top: 0;
  border-radius: 0 0 .5rem .5rem;
  background: var(--brand-bg);
}

/* Inner Sachbericht-Sub-Tabs liegen jetzt in einem äußeren tab-content der
 * 3-Tab-Navigation (VWN-Kategorien / Sachbericht / Belegliste). Doppel-
 * Rahmen vermeiden. */
.admin-kategorien-tab-content .admin-kategorien-tab-content {
  padding: .85rem 0 0;
  border: none;
  background: transparent;
}

.admin-kategorien-tab-save {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

@media (max-width: 659.98px) {
  .admin-kategorien-tab-save .btn {
    width: 100%;
  }
}

.admin-kategorien-sf-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}

.admin-kategorien-question {
  margin-bottom: .8rem;
  border: 1px solid rgba(var(--brand-primary-rgb), .18);
  border-left: 5px solid var(--brand-primary);
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.admin-kategorien-question:last-child {
  margin-bottom: 0;
}

.admin-kategorien-question__body {
  padding: .75rem .9rem;
}

/* Sachbericht-Frage-Row: Topbar mit Drag-Handle + Checkboxen, darunter der
 * eigentliche Editor-Body. Im Drag-Modus (.sf-dragging-mode auf #sf-container)
 * werden alle Rows auf eine kompakte Zeile (Nummer + Fragetext) kollabiert,
 * damit man Drop-Positionen leichter sieht. */
.sf-frage-row__topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .45rem .6rem .45rem 0;
  background: rgba(var(--brand-primary-rgb), .04);
  border-bottom: 1px solid rgba(var(--brand-primary-rgb), .1);
}

.sf-frage-row__body {
  min-width: 0;
}

.sf-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  align-self: stretch;
  cursor: grab;
  user-select: none;
  color: var(--brand-text-muted);
  font-size: 1.1rem;
}

.sf-drag-handle:active { cursor: grabbing; }

.sf-frage-row.dragging { opacity: .5; }

.sf-verwendung {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.sf-verwendung .form-check-label {
  color: var(--brand-text-muted);
  font-weight: 600;
}

/* Compact-Titel — nur sichtbar während Drag (siehe .sf-dragging-mode-Regeln). */
.sf-frage-row__compact-title {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: var(--brand-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sf-container.sf-dragging-mode .sf-frage-row__body { display: none; }
#sf-container.sf-dragging-mode .sf-verwendung    { display: none; }
#sf-container.sf-dragging-mode .sf-frage-row__compact-title { display: inline-block; }
#sf-container.sf-dragging-mode .sf-frage-row__topbar {
  border-bottom: none;
  padding: .35rem .6rem .35rem 0;
  background: transparent;
}

/* Pro Tab eigene Nummerierung im Drag-Modus. */
#sf-container.sf-dragging-mode .sf-list { counter-reset: sf-nr; }
#sf-container.sf-dragging-mode .sf-frage-row { counter-increment: sf-nr; }
#sf-container.sf-dragging-mode .sf-frage-row__compact-title::before {
  content: counter(sf-nr) ". ";
  color: var(--brand-text-muted);
  margin-right: .25rem;
  font-weight: 700;
}

.admin-kategorien-question__grid {
  display: grid;
  grid-template-columns: minmax(11rem, .55fr) minmax(20rem, 2fr);
  gap: .65rem;
  align-items: start;
}

.admin-kategorien-question__grid--choice {
  grid-template-columns: minmax(11rem, .55fr) minmax(18rem, 1.55fr) minmax(12rem, .95fr);
}

.admin-kategorien-question__side,
.admin-kategorien-question__main {
  display: grid;
  gap: .5rem;
  min-width: 0;
}

.admin-kategorien-question__side {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.admin-kategorien-question__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 1.85rem;
}

.admin-kategorien-question__main {
  grid-template-columns: 1fr;
}

.admin-kategorien-question__text textarea {
  min-height: 3rem;
  resize: vertical;
}

.admin-kategorien-question__delete {
  flex: 0 0 auto;
  line-height: 1.2;
}

.admin-kategorien-question__options textarea {
  min-height: 5.15rem;
  resize: vertical;
}

.admin-kategorien-question__options[hidden] {
  display: none;
}

.admin-kategorien-question__grid:not(.admin-kategorien-question__grid--choice) .admin-kategorien-question__main {
  grid-column: 2;
}

@media (max-width: 991.98px) {
  .admin-kategorien-category__header {
    grid-template-columns: minmax(0, 1fr) 8rem;
  }

  .admin-kategorien-category__actions {
    grid-column: 1 / -1;
  }

  .admin-kategorien-subrow__fields {
    grid-template-columns: 1fr 7rem;
  }

  .admin-kategorien-question__grid {
    grid-template-columns: minmax(11rem, .55fr) minmax(0, 1.45fr);
  }

  .admin-kategorien-question__grid--choice {
    grid-template-columns: minmax(11rem, .55fr) minmax(0, 1.45fr);
  }

  .admin-kategorien-question__options {
    grid-column: 1 / -1;
  }

  .admin-kategorien-question__grid:not(.admin-kategorien-question__grid--choice) .admin-kategorien-question__main {
    grid-column: 2;
  }

}

@media (max-width: 659.98px) {
  .settings-page {
    width: calc(100% - 1rem);
  }

  .settings-page-hero,
  .admin-kategorien-hero,
  .admin-kategorien-control-card .card-body,
  .admin-kategorien-tab-content {
    padding: .9rem;
  }

  .admin-kategorien-default-row,
  .admin-kategorien-section-head,
  .admin-kategorien-sf-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-kategorien-default-row {
    display: flex;
  }

  .admin-kategorien-section-head > .btn,
  .admin-kategorien-sf-toolbar .btn,
  .admin-kategorien-default-row .btn {
    width: 100%;
  }

  .admin-kategorien-category__header,
  .admin-kategorien-subrow,
  .admin-kategorien-subrow__fields,
  .admin-kategorien-question__grid {
    grid-template-columns: 1fr;
  }

  .admin-kategorien-question__type,
  .admin-kategorien-question__delete,
  .admin-kategorien-question__options,
  .admin-kategorien-question__meta,
  .admin-kategorien-question__info,
  .admin-kategorien-question__grid--choice .admin-kategorien-question__meta,
  .admin-kategorien-question__grid--choice .admin-kategorien-question__info,
  .admin-kategorien-question__grid:not(.admin-kategorien-question__grid--choice) .admin-kategorien-question__main {
    grid-column: auto;
    grid-row: auto;
  }

  .admin-kategorien-subrow__marker {
    display: none;
  }

  .admin-kategorien-category__actions,
  .admin-kategorien-row-actions {
    justify-content: stretch;
  }

  .admin-kategorien-category__actions .btn:not(.admin-kategorien-icon-btn) {
    flex: 1 1 auto;
  }

  .admin-kategorien-row-actions .btn {
    width: 100%;
  }

  .admin-kategorien-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .admin-kategorien-tabs .nav-link {
    white-space: nowrap;
  }
}

.btn-primary,
.btn-success {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}

.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-outline-primary:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.btn-outline-light:hover {
  color: var(--brand-primary);
}

/* Gedämpfter Akzent-Button — z.B. Sekundäraktion „Aufgabe weitergeben"
   im Aufgabendashboard. Nutzt die Brand-Accent-Farbe als Fläche. */
.btn-accent {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-text);
}
.btn-accent:hover, .btn-accent:focus {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.btn-accent:hover img { filter: brightness(0) invert(1); }

a {
  color: var(--brand-primary);
}
a:hover {
  color: var(--brand-primary-dark);
}

.badge.bg-info {
  background-color: var(--brand-orange) !important;
  color: #fff !important;
}

.badge.bg-success {
  background-color: var(--brand-primary) !important;
}

.spinner-border.text-primary {
  color: var(--brand-primary) !important;
}

.alert-success {
  background-color: var(--brand-bg-light);
  border-color: var(--brand-primary);
  color: #007d5f;
}

.dashboard-vwn-row .badge,
.dashboard-vwn-row .btn-sm,
.admin-detail-table-row .badge,
.admin-detail-table-row .btn-sm {
  font-size: inherit;
}

.dashboard-vwn-row > td,
.admin-detail-table-row > td {
  vertical-align: middle;
}

.dashboard-vwn-row .badge,
.admin-detail-table-row .badge {
  padding: .28em .5em;
  line-height: 1.1;
}

.dashboard-vwn-row .btn-sm,
.admin-detail-table-row .btn-sm {
  padding: .22rem .55rem;
  line-height: 1.2;
}

/* --- Modals: auf schmaleren Bildschirmen Platz besser ausnutzen --- */
.modal {
  --bs-modal-margin: 30px;
}

.modal-dialog {
  width: calc(100vw - var(--bs-modal-margin) - var(--bs-modal-margin));
  max-width: min(var(--bs-modal-width), calc(100vw - var(--bs-modal-margin) - var(--bs-modal-margin)));
  margin-right: auto;
  margin-left: auto;
}

.modal-dialog.modal-lg {
  --bs-modal-width: 800px;
}

.modal-dialog.modal-xl {
  --bs-modal-width: 1140px;
}

@media (max-width: 991.98px) {
  .app-navbar__shell {
    padding: .85rem;
  }

  .app-navbar .navbar-collapse {
    width: 100%;
  }

  .app-navbar__actions--desktop {
    display: none;
  }

  .app-navbar__mobile-panel {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    width: 100%;
    padding-top: .85rem;
  }

  .app-navbar__actions {
    width: 100%;
    justify-content: flex-start;
    padding-top: .85rem;
  }

  .app-navbar--user .app-navbar__actions {
    width: auto;
    justify-content: flex-end;
    padding-top: 0;
  }

  .app-navbar--user .app-navbar__user-collapse {
    width: auto;
  }

  .app-navbar--user .app-navbar__user-mobile-panel {
    display: none;
  }
}

@media (min-width: 992px) {
  .app-navbar__mobile-panel {
    display: none;
  }
}

@media (min-width: 680px) and (max-width: 991.98px) {
  .app-navbar--admin .app-navbar__admin-toggler {
    display: none;
  }

  .app-navbar--admin .app-navbar__admin-collapse {
    display: flex !important;
    flex-basis: auto;
    width: auto;
  }

  .app-navbar--admin .app-navbar__admin-actions {
    display: flex;
    width: auto;
    justify-content: flex-end;
    padding-top: 0;
  }

  .app-navbar--admin .app-navbar__admin-mobile-panel {
    display: none;
  }
}

/* Zwischen 680px und 865.98px ist die inline-Zeile zu eng für den
   zusätzlichen „Meine Aufgaben"-Button — dort wird er in das
   Einstellungs-Dropdown gespiegelt. Default: dropdown-Eintrag versteckt. */
.app-navbar__menu li.dropdown-item-aufgaben { display: none; }
@media (min-width: 680px) and (max-width: 865.98px) {
  .app-navbar--admin .app-navbar__action-aufgaben { display: none; }
  .app-navbar__menu li.dropdown-item-aufgaben { display: block; }
}

@media (max-width: 659.98px) {
  .app-navbar--user .app-navbar__brand {
    flex: 0 1 auto;
  }

  .app-navbar--user .app-navbar__back {
    display: none;
  }

  .app-navbar--user .app-navbar__user-toggler {
    display: block;
    margin-left: auto;
  }

  .app-navbar--user .app-navbar__user-collapse {
    flex-basis: 100%;
    width: 100%;
  }

  .app-navbar--user .app-navbar__user-collapse:not(.show) {
    display: none !important;
  }

  .app-navbar--user .app-navbar__user-collapse.show,
  .app-navbar--user .app-navbar__user-collapse.collapsing {
    display: block !important;
  }

  .app-navbar--user .app-navbar__user-actions {
    display: none;
  }

  .app-navbar--user .app-navbar__user-mobile-panel {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    width: 100%;
    padding-top: .85rem;
  }
}

@media (max-width: 575.98px) {
  .modal {
    --bs-modal-margin: 5px;
  }

  .app-navbar__logo {
    height: 32px;
    max-width: min(190px, 58vw);
  }

  .app-navbar__actions > .dropdown,
  .app-navbar__actions > .app-navbar__action-btn,
  .app-navbar__actions > .app-navbar__user-pill {
    width: 100%;
  }

  .app-navbar__actions .dropdown-toggle,
  .app-navbar__actions .app-navbar__action-btn,
  .app-navbar__actions .app-navbar__user-pill {
    justify-content: center;
  }

  .app-navbar--user .app-navbar__actions > .app-navbar__action-btn {
    width: auto;
  }

  #user-name {
    max-width: none;
  }
}

@media (max-width: 454px) {
  .app-navbar__shell {
    align-items: center;
    gap: .75rem;
  }

  .app-navbar__brand {
    flex: 0 1 auto;
  }

  .app-navbar__toggler {
    margin-left: auto;
  }

  .app-navbar__back {
    display: none;
  }

  .app-navbar__mobile-overview {
    display: block;
  }

  .app-navbar .navbar-collapse {
    flex-basis: 100%;
  }
}

/* --- Pflichtfeld-Stern --- */
.text-required { color: #dc3545; }

/* --- Tabelle --- */
.table th,
.table td {
  padding: 6px;
}

.table-vnw th {
  background-color: var(--brand-bg-light);
  color: var(--brand-text);
  white-space: nowrap;
  border-bottom: 2px solid var(--brand-primary);
}

.table-vnw td input {
  border: 1px solid #ced4da;
  border-radius: .25rem;
  padding: .25rem .5rem;
  width: 100%;
  min-width: 80px;
}
.table-vnw td input:focus {
  border-color: var(--brand-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--brand-primary-rgb), .2);
}

/* --- Gruppierung in VWN-Tabelle --- */
.table-vnw .group-header td {
  background-color: var(--brand-primary);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  padding-top: .65rem;
  padding-bottom: .65rem;
  letter-spacing: .02em;
  border-bottom: 2px solid var(--brand-primary-dark);
}

.table-vnw .group-subtotal td {
  background-color: var(--brand-bg-light);
  font-weight: 700;
  font-size: .88rem;
  border-top: 2px solid var(--brand-accent);
  border-bottom: 2px solid var(--brand-accent);
  color: var(--brand-text);
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.table-vnw .group-subtotal td:first-child::before {
  content: "Σ ";
  font-weight: 800;
  color: var(--brand-primary);
}

.table-vnw tbody tr:not(.group-header):not(.group-subtotal) td:first-child {
  padding-left: 1.5rem;
}

.table-vnw tfoot td {
  font-weight: 700;
  background-color: var(--brand-text);
  color: #fff;
  font-size: .95rem;
  border-top: 2px solid #1a1a1a;
}

/* Bemerkungs-Zelle in der VWN-Tabelle: lange Texte auf 1 Zeilen klammern,
   damit die Zeilenhöhe konstant bleibt. Vollständiger Text wird per
   Bootstrap-Popover ausgeklappt — `.bemerkung-trigger` ist der klickbare
   Vorschau-Container mit Help-Cursor. */
.bemerkung-cell { max-width: 260px; }
.bemerkung-trigger {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  cursor: help;
  color: inherit;
}
.bemerkung-trigger:hover { color: var(--brand-primary); }
.bl-row-number {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
}
.bl-user-comment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  width: 1rem;
  height: 1rem;
  line-height: 1;
  flex: 0 0 auto;
}
.bl-user-comment-icon img {
  display: block;
  width: 1rem;
  height: 1rem;
}
.bl-user-comment-icon:focus {
  outline: 2px solid rgba(var(--brand-primary-rgb), .35);
  outline-offset: 2px;
  border-radius: .2rem;
}
.bemerkung-popover .popover-body {
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 360px;
  max-height: 300px;
  overflow-y: auto;
}

/* --- Upload-Zone --- */
.upload-zone {
  border: 2px dashed var(--brand-accent);
  border-radius: .5rem;
  padding: 2rem;
  text-align: center;
  color: var(--brand-text-muted);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--brand-primary);
  background: var(--brand-bg-light);
  color: var(--brand-primary);
}

.upload-zone.is-uploading {
  cursor: progress;
  opacity: .85;
  pointer-events: none;
  background: var(--brand-bg-light);
}

/* --- Belegliste: nachgereichte Datei im Upload-Button hervorheben --- */
.bl-file-action img {
  filter: brightness(0) invert(1);
}

/* --- Status-Badges --- */
.badge-status-draft         { background-color: var(--brand-text-muted); }
.badge-status-submitted     { background-color: var(--brand-orange); }
.badge-status-in_review     { background-color: #6f42c1; }
.badge-status-approved      { background-color: var(--brand-primary); }
.badge-status-rejected      { background-color: #e51919; }
.badge-status-unvollstaendig{ background-color: #d19003; }

/* --- Info-Tooltip-Icon (Bootstrap-Icons info-circle-fill als SVG-Maske) ---
   Span sollte leer sein (kein "i"/"ⓘ" als Inhalt); Form kommt aus der Maske,
   Farbe aus background-color. Größe in em → skaliert mit der Eltern-Schrift. */
.info-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 6px;
  vertical-align: -0.15em;
  flex-shrink: 0;
  cursor: help;
  background-color: var(--brand-primary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/></svg>") center / contain no-repeat;
}
.info-icon:hover { background-color: var(--brand-primary-hover, #1d6f3a); }

/* --- "+N weitere"-Badge bei mehreren Zuweisungen (admin-nutzer.html) --- */
.zuweisung-more { cursor: help; }

/* --- KPI-Karten --- */
.kpi-card {
  text-align: center;
  padding: 1rem;
  border-radius: .5rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.kpi-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.kpi-card.active {
  border-color: currentColor;
}
.kpi-card .kpi-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-primary);
}
.kpi-card .kpi-label {
  font-size: .85rem;
  color: var(--brand-text-muted);
}

/* --- KPI Status-Bar (kompakte Karte Zeile 1) --- */
.kpi-status-bar {
  min-height: 100%;
  cursor: default;
}
.kpi-status-bar:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.kpi-status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: .35rem .6rem;
  border-radius: .375rem;
  transition: background .15s;
}
.kpi-status-item:hover {
  background: rgba(0,0,0,.04);
}
.kpi-status-item.active {
  background: rgba(0,0,0,.07);
  box-shadow: inset 0 0 0 2px currentColor;
  border-radius: .375rem;
}
.kpi-status-value {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}
.kpi-status-label {
  font-size: .75rem;
  color: var(--brand-text-muted);
}

/* --- KPI Finanzzeile --- */
.kpi-row-finance .kpi-card .kpi-value {
  font-size: 1.4rem;
}
.kpi-row-finance .kpi-card .kpi-label {
  font-size: .8rem;
}
.kpi-row-finance .kpi-card {
  cursor: default;
}
.kpi-row-finance .kpi-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.kpi-durchschnitt-detail {
  font-size: .85rem;
  min-width: 260px;
}
.kpi-durchschnitt-detail td, .kpi-durchschnitt-detail th {
  padding: .25rem .5rem;
}
.kpi-durchschnitt-detail th {
  border-bottom: 1px solid #dee2e6;
}

/* --- Förderungsübersicht: Status-Iconfilter --- */
.status-icon-filter-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}
.status-icon-filter-btn {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
}
.status-icon-filter-btn img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}
.status-icon-filter-btn.active {
  background: var(--brand-bg-light);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .15rem rgba(var(--brand-primary-rgb), .18);
}

/* --- Kopfdaten-Card --- */
.kopfdaten dt {
  font-weight: 600;
  color: var(--brand-text);
}
.kopfdaten dd {
  margin-bottom: .5rem;
  color: var(--brand-text-muted);
}

.foerderlinie-box {
  background: #e8f5ee;
  border: 1px solid #8fc8aa;
  border-radius: .375rem;
  padding: .75rem 1rem;
}

.foerderlinie-box .row {
  align-items: center;
}

.foerderlinie-box dd {
  color: #135c38;
  font-weight: 600;
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

/* --- Unterkategorie-Einrückung (Admin-Kategorien) --- */
.kat-sub {
  padding-left: 2rem !important;
}

/* Überschreitungsfeld im Förderungs-Modal: breit einzeilig, mobil zweizeilig. */
.kat-ueberschreitung-group {
  flex-wrap: nowrap;
  min-width: 12rem;
}
.kat-ueberschreitung-label {
  white-space: nowrap;
}
.kat-ueberschreitung-group #new-ueberschreitung {
  min-width: 5.5rem;
}

/* --- Betrag-/Bemerkung-Inputs innerhalb VWN-Tabelle --- */
.betrag-input, .gepl-input, .bemerkung-input {
  border: 1px solid #ced4da;
  border-radius: .25rem;
  padding: .25rem .5rem;
  width: 100%;
  min-width: 70px;
}
.betrag-input:focus, .bemerkung-input:focus {
  border-color: var(--brand-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--brand-primary-rgb), .2);
}
.bemerkung-input.is-invalid {
  border-color: #dc3545;
  background-color: #fff5f5;
}
.bemerkung-input.is-invalid:focus {
  box-shadow: 0 0 0 2px rgba(220, 53, 69, .2);
}

/* Bemerkung als Textarea: im Ruhezustand 1 Zeile (Tabellenzeile bleibt
   kompakt), beim Fokussieren auf 4 Zeilen ausklappen. `position: relative`
   + erhöhter z-index sorgt dafür, dass die expandierte Textarea andere
   Tabellenzellen visuell überlagert und die Nachbarzeilen nicht
   hochschiebt. Interner Scroll bei sehr langem Text. */
textarea.bemerkung-input {
  resize: none;
  height: 1.7rem;
  line-height: 1.2;
  overflow: hidden;
  white-space: pre-wrap;
  font-family: inherit;
  transition: height .15s ease;
}
textarea.bemerkung-input:focus {
  height: 5.5rem;
  overflow-y: auto;
  position: relative;
  z-index: 5;
  background: #fff;
}

/* --- Mobile Responsive --- */
@media (max-width: 767.98px) {
  h2 { font-size: 1.3rem; }

  .table th, .table td { font-size: .82rem; padding: .35rem .4rem; }
  .table-vnw td input,
  .table-vnw td textarea.bemerkung-input { font-size: .82rem; padding: .2rem .35rem; min-width: 60px; }
  .kat-ueberschreitung-group {
    flex-wrap: wrap;
    min-width: 8rem;
  }
  .kat-ueberschreitung-label {
    flex: 0 0 100%;
    justify-content: center;
    white-space: normal;
    border-top-right-radius: var(--bs-border-radius-sm) !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .kat-ueberschreitung-group #new-ueberschreitung {
    min-width: 5.5rem;
    border-top-left-radius: 0 !important;
  }
  .kat-ueberschreitung-group .input-group-text:last-child {
    border-top-right-radius: 0 !important;
  }

  .kpi-card { padding: .6rem; }
  .kpi-card .kpi-value { font-size: 1.5rem; }
  .kpi-card .kpi-label { font-size: .75rem; }
  .kpi-row-finance .kpi-card .kpi-value { font-size: 1.1rem; }
  .kpi-row-finance .kpi-card .kpi-label { font-size: .7rem; }

  .kopfdaten dt { font-size: .85rem; }
  .kopfdaten dd { font-size: .85rem; }

  .modal-dialog { margin: var(--bs-modal-margin) auto; }
  .modal-body { padding: .75rem; }

  .card-header { font-size: .9rem; padding: .5rem .75rem; }
}

@media (max-width: 575.98px) {
  .container { padding-left: .75rem; padding-right: .75rem; }
  .table th, .table td { font-size: .78rem; padding: .25rem .3rem; }
  .badge { font-size: .7rem; }

  .vwn-action-buttons-anchor,
  .vwn-action-buttons {
    width: 100%;
    justify-content: flex-start;
  }

  .vwn-action-buttons.is-floating {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    width: auto;
    justify-content: stretch;
  }

  .vwn-action-buttons.is-floating .btn {
    flex: 1 1 10rem;
    min-width: 0;
  }

  #content.vwn-actions-floating {
    padding-bottom: 7rem;
  }
}

/* --- Akzente --- */
.text-warning {
  color: var(--brand-orange) !important;
}


/* ---------- Prüfvermerk Rich-Text-Felder ---------- */
.pv-rt-input {
  min-height: 2.6em;
  white-space: pre-wrap;
  word-break: break-word;
}
.pv-rt-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb, 0,0,0), .15);
}
/* Placeholder via attr(data-pv-placeholder) — wird nur bei leerem Feld
   gezeigt. Klassen-Toggle „pv-rt-empty" setzt JS, weil CSS kein
   zuverlässiges „contenteditable ist leer" kann. */
.pv-rt-input.pv-rt-empty::before {
  content: attr(data-pv-placeholder);
  color: #adb5bd;
  pointer-events: none;
}
.pv-rt-toolbar .btn {
  line-height: 1.1;
}

/* =====================================================================
   Sachbericht-Fragen-Karten (sachbericht-modal.js + admin-sachbericht.js)
   ===================================================================== */
/* Modal-Body bekommt einen leicht abgesetzten Hintergrund, sodass die
   weißen Frage-Cards klar herausragen. Nur für das Sachbericht-Modal
   (nicht für andere Modals im Portal). */
#sachbericht-modal .modal-body {
  background: var(--brand-bg);
}
/* Jede Frage = eigene Karte mit farbigem Linksrand, weißem Hintergrund
   und deutlichem Schatten. Klare visuelle Trennung der Fragen. */
.sb-frage-card {
  background: #fff;
  border-left: 5px solid var(--brand-primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
  border-radius: .5rem;
}
.sb-frage-card .card-body {
  padding: 1.25rem 1.5rem;
}
/* Nummern-Circle in Brand-Farbe. flex-shrink:0 verhindert, dass er
   in schmalen Layouts zusammengedrückt wird. */
.sb-frage-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  flex-shrink: 0;
  user-select: none;
  box-shadow: 0 2px 6px rgba(var(--brand-primary-rgb), .35);
}
.sb-frage-text {
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--brand-text);
}
/* Pflicht-Asterisk in dezentem Rot. inline-block + leichtes margin-left
   verhindert ein Wegrutschen am Zeilenumbruch. */
.sb-pflicht-mark {
  color: #dc3545;
  font-weight: 700;
  margin-left: .25rem;
  font-size: 1.1em;
  line-height: 1;
}
/* Hilfsklasse für flex-grow:1 + min-width:0 — sonst läuft contenteditable
   bei langen Wörtern aus dem Flex-Container raus. */
.min-width-0 { min-width: 0; }

/* Collapse-Header der Frage-Karte: Cursor pointer + animierter Pfeil + dezenter
   Hover. Stütz sich auf die globale .card-header Regel (brand-bg-light +
   border-bottom). `.collapsed` setzt der Bootstrap-show.bs.collapse-Listener
   in sachbericht-modal.js (Event-Delegation auf #sb-antworten). */
.sb-frage-header {
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease;
}
.sb-frage-header:hover {
  background: rgba(var(--brand-primary-rgb), .12);
}
.sb-frage-header.collapsed {
  border-bottom-color: transparent;
}
.sb-frage-header .toggle-arrow {
  display: inline-block;
  transition: transform .15s ease;
  color: var(--brand-primary-dark);
  font-size: .95rem;
  line-height: 1;
}
.sb-frage-header.collapsed .toggle-arrow {
  transform: rotate(-90deg);
}

/* Toolbar-Buttons im Sachbericht-Rich-Text-Editor (B/I/U). Im Normalzustand
   etwas kräftiger umrandet als ein Standard-`btn-outline-secondary`, damit
   die Toolbar als eigenständige Gruppe sichtbar ist. Im Aktiv-Zustand voll
   in Brand-Primary gefüllt mit dunklerer Border-Farbe für klare Abgrenzung —
   ohne Glow-Shadow. */
.sb-rt-btn {
  border-color: var(--brand-text-muted);
  font-weight: 600;
}
.sb-rt-btn:focus {
  box-shadow: none;
}
.sb-rt-btn.active,
.sb-rt-btn.active:hover,
.sb-rt-btn.active:focus {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary-dark);
  color: #fff;
  box-shadow: none;
}

/* Single-Choice / Skala – Readonly-Darstellung mit allen Optionen.
   Gewählte fett + primary-farbiges ●, übrige grau mit ○. */
.sb-choice-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.sb-choice-item {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  padding: .15rem 0;
}
.sb-choice-item.is-selected {
  color: var(--brand-text);
  font-weight: 600;
}
.sb-choice-item.is-muted {
  color: var(--brand-text-muted);
  font-weight: 400;
}
.sb-choice-dot {
  min-width: 1em;
  text-align: center;
  color: var(--brand-text-muted);
}
.sb-choice-item.is-selected .sb-choice-dot {
  color: var(--brand-primary);
}
.sb-skala-endpoint {
  margin-left: .25rem;
  color: var(--brand-text-muted);
  font-size: .85em;
  font-style: italic;
  font-weight: 400;
}

/* Sachbericht – Projektbilder-Galerie (User-Modal + Admin-Review) */
.sb-img-block {
  margin-top: .75rem;
}
.sb-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
  margin-bottom: .5rem;
}
.sb-img-grid--sm {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .5rem;
}
.sb-img-tile {
  margin: 0;
  border: 1px solid var(--brand-bg-light, #e5e5e5);
  border-radius: .375rem;
  background: var(--brand-bg, #fff);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sb-img-thumb-link {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--brand-bg-light, #f4f4f4);
  overflow: hidden;
}
/* Absolut gefüllt statt height:100% — aspect-ratio ist nur eine "preferred
   size" und würde sonst von hochformatigen Bildern aufgedehnt (PB liefert
   bei zu kleinen Quellbildern das Original statt des 4:3-Thumbs). */
.sb-img-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Platzhalter-Kachel für Formate ohne Browser-Vorschau (HEIC). */
.sb-img-thumb--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .15rem;
  padding: .25rem;
  color: var(--brand-text-muted);
  font-size: .8em;
}
.sb-img-meta {
  padding: .4rem .5rem;
  display: flex;
  gap: .35rem;
  align-items: center;
}
.sb-img-meta .sb-img-caption-input {
  flex: 1 1 auto;
  min-width: 0;
}
/* Bildunterschrift kompakt (1 Zeile), beim Fokussieren auf 4 Zeilen
   ausklappen — analog textarea.bemerkung-input in vwn.js. */
textarea.sb-img-caption-input {
  resize: none;
  height: 1.7rem;
  line-height: 1.2;
  overflow: hidden;
  white-space: pre-wrap;
  font-family: inherit;
  transition: height .15s ease;
}
textarea.sb-img-caption-input:focus {
  height: 5.5rem;
  overflow-y: auto;
  position: relative;
  z-index: 5;
  background: #fff;
}
/* Placeholder kleiner setzen, damit „Bildunterschrift (optional)" auch im
   schmalen Tile in eine Zeile passt. Greift nicht, sobald der User tippt. */
textarea.sb-img-caption-input::placeholder { font-size: .7em; }
.sb-img-caption {
  padding: .4rem .5rem;
  font-size: .85em;
  font-style: italic;
  color: var(--brand-text-muted);
}
.sb-img-delete {
  flex: 0 0 auto;
  line-height: 1;
  padding: .15rem .45rem;
}
.sb-img-upload {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.sb-img-upload-btn {
  margin: 0;
}
.sb-img-tile--sm .sb-img-meta {
  padding: .25rem .35rem;
  font-size: .85em;
}
.sb-img-tile--sm .sb-img-caption {
  padding: .25rem .35rem;
  font-size: .75em;
}

/* Geteilter Rich-Text-Editor (pb_public/js/rich-text-editor.js).
   Wird sowohl von admin-emails.js als auch von admin-faqs.js benutzt.
   `.active` auf den Toolbar-Buttons spiegelt queryCommandState (B/I/U/Listen). */
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 4px;
  border: 1px solid #dee2e6;
  border-bottom: 0;
  background: #f8f9fa;
  border-radius: .375rem .375rem 0 0;
}
.editor-toolbar .btn {
  padding: 2px 8px;
  font-size: .85rem;
}
.editor-toolbar .btn.active {
  background: var(--brand-bg-light);
  border-color: var(--brand-primary);
  color: var(--brand-primary-dark);
}
.editor-toolbar .form-select-sm {
  width: auto;
  padding: 2px 24px 2px 6px;
  font-size: .8rem;
}
.editor-body {
  min-height: 160px;
  padding: 8px 12px;
  border: 1px solid #dee2e6;
  border-radius: 0 0 .375rem .375rem;
  background: #fff;
  font-family: Calibri, Arial, sans-serif;
  font-size: 14px;
  overflow: auto;
}
.editor-body:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}
.editor-body--small {
  min-height: 110px;
}
.var-chip {
  display: inline-block;
  padding: 0 5px;
  margin: 1px;
  background: #e7f1ff;
  color: #0a58ca;
  border-radius: 4px;
  font-family: monospace;
  font-size: .75rem;
  line-height: 1.4;
  cursor: pointer;
  border: 1px solid #b6d4fe;
}
.var-chip:hover {
  background: #cfe2ff;
}
.signature-preview {
  border: 1px dashed #ced4da;
  padding: 12px;
  background: #fafbfc;
  border-radius: .375rem;
}
.var-group__title {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6c757d;
  margin-bottom: 2px;
}
.var-group + .var-group {
  margin-top: .4rem;
}

/* Admin-FAQs (pb_public/admin-faqs.html): Drag-and-Drop für Kategorien und
   Fragen, sowie das FAQ-Edit-Modal mit Bilder-Galerie unter dem Editor. */
.faq-cat {
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding: .75rem;
  background: #fff;
}
.faq-cat.dragging,
.faq-row.dragging {
  opacity: .4;
}
.faq-cat-header {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: .5rem;
}
.faq-row {
  border: 1px solid transparent;
  border-radius: .375rem;
}
.faq-row + .faq-row {
  border-top-color: #f0f0f0;
}
.faq-row:hover {
  background: var(--brand-bg-light);
}
.faq-drag-handle {
  cursor: grab;
  color: var(--brand-text-muted);
  user-select: none;
  -webkit-user-select: none;
  padding: 0 .35rem;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  /* touch-action: none lässt Touch-Geräte direkt Drag-Events feuern,
     statt Scroll als Default-Aktion zu starten. */
  touch-action: none;
}
.faq-drag-handle:hover {
  color: var(--brand-primary-dark);
}
.faq-drag-handle:active {
  cursor: grabbing;
}

/* FAQ-Seite (pb_public/faq.html, auth-gated): Sektion = Kategorie-Header
   + sb-frage-card-Stack für die Antworten (Design aus dem Sachbericht-Modal).
   Bilder werden unter der Antwort in voller Container-Breite gestapelt. */
.faq-section + .faq-section {
  margin-top: 2rem;
}
.faq-section__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand-primary-dark);
  border-bottom: 2px solid var(--brand-primary);
  padding-bottom: .25rem;
  margin-bottom: .75rem;
}
.faq-answer {
  font-family: Calibri, Arial, sans-serif;
  line-height: 1.55;
}
.faq-answer img {
  max-width: 100%;
  height: auto;
}
.faq-bilder {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.faq-bild {
  margin: 0;
}
.faq-bild a {
  display: block;
}
.faq-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .375rem;
  border: 1px solid #dee2e6;
}
.faq-bild-caption {
  margin-top: .5rem;
  padding: .35rem .65rem;
  font-size: .85rem;
  font-style: italic;
  color: var(--brand-text-muted);
  text-align: left;
  border-left: 3px solid var(--brand-accent);
  background: var(--brand-bg-light);
  border-radius: 0 .25rem .25rem 0;
}
.faq-bild-caption::before {
  content: "Abb.: ";
  font-style: normal;
  font-weight: 600;
  color: var(--brand-primary-dark);
  margin-right: .15rem;
}

/* Globaler Portal-Footer (pb_public/js/footer.js).
   Optisch an die Navbar angelehnt (gleiche Container-Breite, Brand-Gradient
   in einer abgeschwächten Variante). Sticky-Footer: body wird zur Flex-Spalte,
   damit der Footer immer am unteren Rand klebt, auch bei kurzen Seiten.
   Login-Seite bindet bewusst keinen Footer ein und ist daher hier irrelevant. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > .app-footer {
  margin-top: auto;
}
.app-footer {
  padding: 1rem 0 1.25rem;
}
.app-footer__container {
  width: min(calc(100% - clamp(1.5rem, 4vw, 3rem)), 1320px);
  margin: 0 auto;
}
.app-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .55rem 1.1rem;
  border-radius: .9rem;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, var(--brand-primary) 0%, #0c7c65 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(var(--brand-primary-rgb), .12);
  color: #fff;
}
.app-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 1.1rem;
  align-items: center;
}
.app-footer__link {
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
  font-size: .88rem;
  padding: .1rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.app-footer__link:hover,
.app-footer__link:focus {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .8);
}
.app-footer__meta {
  font-size: .78rem;
  color: rgba(255, 255, 255, .8);
}
/* Beim Umbruch auf schmalen Viewports den Zeilenabstand zwischen Links
   verringern, damit der Footer nicht plötzlich doppelt so hoch wird. */
@media (max-width: 560px) {
  .app-footer {
    padding: .75rem 0 1rem;
  }
  .app-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: .35rem;
    padding: .5rem .9rem;
  }
  .app-footer__nav {
    gap: .05rem .75rem;
  }
  .app-footer__link {
    padding: 0;
    font-size: .85rem;
    line-height: 1.35;
  }
  .app-footer__meta {
    font-size: .72rem;
    line-height: 1.3;
  }
}

/* =====================================================================
   In-App-Benachrichtigungen (Glocke in der User-Navbar)
   ===================================================================== */
.app-navbar__bell-wrap {
  position: relative;
  flex: 0 0 auto;
}

.app-navbar__bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  min-width: 42px;
  padding: .45rem .6rem;
  border-radius: .85rem;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  transition: background-color .18s ease, box-shadow .18s ease;
}

.app-navbar__bell:hover,
.app-navbar__bell:focus,
.app-navbar__bell[aria-expanded="true"] {
  color: #fff;
  background: rgba(255,255,255,.2);
  box-shadow: 0 10px 24px rgba(11, 64, 52, .16);
}

.app-navbar__bell-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: .66rem;
  padding: .22em .42em;
  border-radius: 999px;
}

.benachrichtigungen-menu {
  width: min(92vw, 380px);
  max-height: min(70vh, 480px);
  overflow-y: auto;
  padding: 0;
  border-radius: .85rem;
  box-shadow: 0 14px 34px rgba(11, 64, 52, .18);
}

.benachr-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.benachr-kopf .benachr-alle-gelesen {
  font-size: .78rem;
  text-decoration: none;
  color: var(--brand-primary);
  white-space: nowrap;
}

.benachr-item {
  display: flex;
  gap: .6rem;
  padding: .65rem .9rem;
  text-decoration: none;
  color: var(--brand-text);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.benachr-item:last-child { border-bottom: 0; }

.benachr-item:hover {
  background: var(--brand-bg-light);
  color: var(--brand-text);
}

.benachr-item__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: .45rem;
  border-radius: 50%;
  background: transparent;
}

.benachr-item--unread .benachr-item__dot {
  background: var(--brand-primary);
}

.benachr-item__body {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.benachr-item__titel {
  font-size: .85rem;
  line-height: 1.35;
}

.benachr-item--unread .benachr-item__titel {
  font-weight: 600;
}

.benachr-item__text {
  font-size: .78rem;
  color: var(--brand-text-muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.benachr-item__zeit {
  font-size: .72rem;
  color: var(--brand-text-muted);
}

/* Mobile: Glocke rechts neben dem Hamburger, außerhalb des Collapse. */
@media (max-width: 659.98px) {
  .app-navbar--user .app-navbar__bell-wrap {
    margin-left: auto;
  }
  .app-navbar--user .app-navbar__user-toggler {
    margin-left: 0;
  }
}

/* =====================================================================
   Berichts-Generator (admin-berichte.html)
   ===================================================================== */
.bericht-spalten-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .25rem .9rem;
}

.bericht-spalten-check {
  margin: 0;
  min-width: 0;
}

.bericht-spalten-check .form-check-label {
  font-size: .85rem;
  overflow-wrap: anywhere;
}

.bericht-spalten-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .45rem;
  border-radius: .6rem;
  font-size: .82rem;
  background: var(--brand-bg-light);
  border: 1px solid rgba(var(--brand-primary-rgb), .25);
}

.bericht-spalten-pill .btn-pill-move,
.bericht-spalten-pill .btn-pill-remove {
  border: 0;
  background: transparent;
  padding: 0 .15rem;
  line-height: 1;
  font-size: .95rem;
  color: var(--brand-primary-dark);
  cursor: pointer;
}

.bericht-spalten-pill .btn-pill-move:disabled {
  color: var(--brand-text-muted);
  opacity: .4;
  cursor: default;
}

.bericht-spalten-pill .btn-pill-remove {
  color: #b02a37;
  font-weight: 600;
}

.bericht-filter-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .4rem .6rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .6rem;
  background: #fff;
}

.bericht-filter-label {
  font-size: .82rem;
  font-weight: 600;
  min-width: 9rem;
}

.bericht-filter-controls {
  flex: 1 1 auto;
  min-width: 0;
}

.bericht-filter-remove {
  line-height: 1;
  padding: .1rem .45rem;
}

/* Select-Filter mit vielen/langen Optionen (dynamische Kataloge wie
   Kostenkategorien oder Sachbericht-Fragen) scrollen statt zu wuchern. */
.bericht-filter-optionen {
  max-height: 10.5rem;
  overflow-y: auto;
}

/* Durchsuchbares Multiselect-Dropdown der Select-Filter + Chips */
.bericht-msel {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.bericht-msel-menu {
  min-width: min(26rem, 90vw);
}

.bericht-msel-liste {
  max-height: 14rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.bericht-msel-option {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: .85rem;
  padding: .15rem .3rem;
  border-radius: .35rem;
  cursor: pointer;
  margin: 0;
}

.bericht-msel-option:hover {
  background: var(--brand-bg-light);
}

.bericht-msel-option .form-check-input {
  flex: 0 0 auto;
  margin-top: .2rem;
}

.bericht-msel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-width: 0;
}

.bericht-msel-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--brand-bg-light);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1rem;
  padding: .1rem .3rem .1rem .6rem;
  font-size: .78rem;
  max-width: 18rem;
}

.bericht-msel-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bericht-msel-chip-x {
  border: 0;
  background: transparent;
  line-height: 1;
  padding: 0 .25rem;
  color: #b02a37;
  font-weight: 600;
  cursor: pointer;
}

/* Karte „Werte zusammenfassen" (Mapping) */
.bericht-mapping-gruppe {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .35rem .6rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .6rem;
  background: #fff;
}

.bericht-mapping-name {
  font-size: .85rem;
  font-weight: 600;
}

.bericht-mapping-werte-text {
  flex: 1 1 12rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bericht-mapping-werte {
  max-height: 16rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.bericht-formel-item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 10rem;
  margin: 0;
}

.bericht-preview-wrap {
  max-height: 65vh;
  overflow-y: auto;
}

.bericht-preview thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.bericht-preview td {
  font-size: .85rem;
}

.bericht-aggregat-row td {
  background: var(--brand-bg-light);
  border-top: 2px solid rgba(var(--brand-primary-rgb), .4);
}

@media (max-width: 991.98px) {
  .bericht-spalten-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 659.98px) {
  .bericht-spalten-grid {
    grid-template-columns: 1fr;
  }
  .bericht-filter-label {
    min-width: 100%;
  }
}

/* =====================================================================
   Terminkalender (admin-meine-aufgaben.html, js/terminkalender.js)
   ===================================================================== */

.tk-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.tk-wd {
  font-size: .75rem;
  font-weight: 600;
  color: var(--brand-text-muted);
  text-align: center;
  padding: .25rem 0;
}

.tk-day {
  min-height: 6.5rem;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: .35rem;
  padding: .25rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  min-width: 0;
}

.tk-day.tk-out {
  background: var(--brand-bg-light);
  opacity: .55;
}

.tk-day.tk-today {
  border-color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--brand-primary);
}

.tk-day.tk-has-events {
  cursor: pointer;
}

.tk-day-num {
  font-size: .75rem;
  font-weight: 600;
  flex: 0 0 auto;
}

.tk-today .tk-day-num {
  color: var(--brand-primary);
}

.tk-chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tk-chip {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: .25rem;
  color: #fff;
  font-size: .72rem;
  line-height: 1.3;
  padding: .1rem .3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tk-chip:hover {
  filter: brightness(.9);
}

/* Termintyp-Farben — VWN-Frist = Primary, Tranche = Blau (bewusst NICHT das
   Mittelabruf-Grün bg-success: wäre vom Marken-Primärgrün kaum zu
   unterscheiden), Förderende = Brand-Orange */
.tk-ev-vwn_frist   { background-color: var(--brand-primary); }
.tk-ev-tranche     { background-color: #2563b8; }
.tk-ev-foerderende { background-color: var(--brand-orange); }

/* Überschrittene Frist (VWN nicht rechtzeitig eingereicht) — Rot wie
   .badge-status-rejected; überschreibt die Termintyp-Farbe */
.tk-chip.tk-ueberfaellig,
.tk-dot.tk-ueberfaellig { background-color: #e51919; }

.tk-dot {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.tk-typ-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.tk-more {
  border: 0;
  background: transparent;
  color: var(--brand-primary);
  font-size: .72rem;
  font-weight: 600;
  text-align: left;
  padding: 0 .3rem;
}

.tk-week-day {
  min-height: 9rem;
}

.tk-week-day .tk-chip {
  white-space: normal;
}

.tk-range-input {
  width: auto;
}

.tk-liste-tag + .tk-liste-tag {
  margin-top: 1rem;
}

.tk-liste-datum {
  font-weight: 600;
  font-size: .85rem;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  padding-bottom: .25rem;
  margin-bottom: .25rem;
}

/* Listeneintrag ist ein <button> (öffnet das Vorgang-Quick-View-Modal) */
.tk-liste-event {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .4rem .5rem;
  border: 0;
  border-radius: .35rem;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
}

.tk-liste-event:hover {
  background: var(--brand-bg-light);
  color: inherit;
}

.tk-liste-text {
  min-width: 0;
}

.tk-liste-text strong {
  font-size: .88rem;
}

@media (max-width: 659.98px) {
  /* Monatsraster: Chips werden zu Punkten, Tagesklick öffnet das Popup */
  .tk-grid-monat .tk-day {
    min-height: 3.4rem;
    padding: .15rem;
  }
  .tk-grid-monat .tk-chips {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px;
  }
  .tk-grid-monat .tk-chip {
    width: .5rem;
    height: .5rem;
    padding: 0;
    border-radius: 50%;
    flex: 0 0 auto;
    color: transparent;
    font-size: 0;
    pointer-events: none;
  }
  .tk-grid-monat .tk-more {
    display: none;
  }
  /* Wochenansicht: Tage untereinander stapeln */
  .tk-grid-woche {
    grid-template-columns: 1fr;
  }
  .tk-week-day {
    min-height: 0;
  }
}