@import url("../../inc/fontawesome-free-6.5.1-web/css/all.css");

:root {
  font-size: 95%;
  --bs-btn-font-weight: 550 !important;
}

/* Selectize: Die ausgewählten Einträge (Chips) eines Mehrfachfeldes bekommen
   ihren hellen Hintergrund aus selectize.bootstrap5.min.css und blieben im Dark
   Mode als helle Inseln im dunklen Eingabefeld stehen. Die übrigen Selectize-
   Anpassungen liegen in msvplus-brand.css; diese Regel steht bewusst hier, weil
   brand.css im barrierefreien Farbschema entfällt. */
[data-bs-theme="dark"] .selectize-control.multi .selectize-input > div {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

/* ==========================================================================
   Dashboard-Palette (--dash-*)
   ==========================================================================
   Gemeinsame Farbpalette der Auswertungs-/Dashboard-Ansichten (Statistiken).
   Bewusst hier und nicht in msvplus-brand.css: Diese Datei wird immer geladen,
   brand.css entfällt im barrierefreien Farbschema.

   Wer eine neue Dashboard-Ansicht baut, nimmt diese Variablen, statt eigene
   Hex-Werte zu setzen — dann stimmt der Dark Mode automatisch.
   ========================================================================== */

:root {
  /* Flächen: von der Karte (surface) bis zur hervorgehobenen Zelle */
  --dash-surface: #fff;
  --dash-surface-alt: #f7f8fa;
  --dash-surface-subtle: #fcfcfd;
  --dash-surface-accent: #fafbfc;
  --dash-surface-hover: #f5f7fa;
  --dash-surface-hover-strong: #f0f2f5;
  --dash-surface-active: #e8ecf1;

  --dash-border: #dee2e6;
  --dash-border-soft: #e9ecef;
  --dash-border-softer: #f0f2f5;
  --dash-border-strong: #adb5bd;

  --dash-text: #212529;
  --dash-title: #343a40;
  --dash-text-body: #4a5568;
  --dash-text-label: #5a6370;
  --dash-text-muted: #8b95a2;
  --dash-text-muted-2: #6c757d;

  /* Statusfarben der Auswertungen: über Soll = rot, unter Soll = ocker,
     im Soll = grün. RGB-Tripel zusätzlich für Heatmap-Flächen mit Alpha. */
  --dash-over: #c0392b;
  --dash-under: #b7791f;
  --dash-ok: #2d8a4e;
  --dash-over-rgb: 192, 57, 43;
  --dash-under-rgb: 183, 121, 31;
  --dash-ok-rgb: 45, 138, 78;

  --dash-info-bg: #f0f4f8;
  --dash-info-border: #d0dae4;
  --dash-info-icon: #7b8fa3;

  --dash-warn-bg: #fff8e1;
  --dash-warn-border: #ffe082;
  --dash-warn-text: #6d5a00;

  --dash-select-bg: #f4f8ff;
  --dash-select-border: #0d6efd;
}

/* Dark Mode: Flächen auf die im Projekt üblichen dunklen Töne (vgl. .karte,
   .belegung-card), Akzentfarben aufgehellt. Ohne das stünde heller Theme-Text
   auf hell gebliebenen Flächen. */
[data-bs-theme="dark"] {
  --dash-surface: var(--bs-body-bg);
  --dash-surface-alt: #2a2d30;
  --dash-surface-subtle: #25282b;
  --dash-surface-accent: #26292c;
  --dash-surface-hover: #2f3336;
  --dash-surface-hover-strong: #33373a;
  --dash-surface-active: #3a3e42;

  --dash-border: #3a3f44;
  --dash-border-soft: #343a40;
  --dash-border-softer: #2c3034;
  --dash-border-strong: #5a6268;

  --dash-text: var(--bs-body-color);
  --dash-title: #e9ecef;
  --dash-text-body: #ced4da;
  --dash-text-label: #adb5bd;
  --dash-text-muted: #9aa3ad;
  --dash-text-muted-2: #9aa3ad;

  --dash-over: #f8a0a0;
  --dash-under: #f0c48a;
  --dash-ok: #6ee7a0;
  --dash-over-rgb: 248, 160, 160;
  --dash-under-rgb: 224, 164, 88;
  --dash-ok-rgb: 110, 231, 160;

  --dash-info-bg: #22292f;
  --dash-info-border: #38434e;
  --dash-info-icon: #9ab0c4;

  --dash-warn-bg: #2e2a1a;
  --dash-warn-border: #5c5124;
  --dash-warn-text: #e8d9a0;

  --dash-select-bg: #1e2a3a;
  --dash-select-border: #4d8bf8;
}

@font-face {
  font-family: "Source Sans";
  src: url("../../fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 1 999;
}

@font-face {
  font-family: "Source Sans";
  src: url("../../fonts/Source_Sans_3/SourceSans3-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-style: italic;
  font-weight: 1 999;
}

@font-face {
  font-family: "Source Serif";
  src: url("../../fonts/Source_Serif_4/SourceSerif4-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 1 999;
}

@font-face {
  font-family: "Source Sans";
  src: url("../../fonts/Source_Serif_4/SourceSerif4-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-style: italic;
  font-weight: 1 999;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("../../fonts/Roboto-condensed/RobotoCondensed-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("../../fonts/Roboto-condensed/RobotoCondensed-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-style: italic;
  font-weight: 100 900;
}

body,
.help-block,
.sans-serif {
  font-family: "Source Sans", "Merriweather Sans", system-ui, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans", "Liberation Sans", "Arial", sans-serif;
}

.svg-icon {
  display: inline-block;
  vertical-align: -0.125em;
  overflow: visible;
  fill: currentColor;
}

h1,
h2,
h3,
.dtsb-title,
.serif {
  font-family: "Source Serif", "Merriweather";
  text-rendering: optimizelegibility;
  font-weight: 400 !important;
}

.w-min {
  width: min-content;
}

.w-max {
  width: max-content;
}

.w-33 {
  width: 33%;
}

.h-min {
  height: min-content;
}

.h-max {
  height: max-content;
}

.mav {
  margin: auto 0;
}

.mah {
  margin: 0 auto;
}

.mx-25 {
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

.input-mini {
  width: 75px;
}

.input-small {
  width: 150px;
}

.input-medium {
  width: 250px;
}

.input-large {
  width: 400px;
}

.input-xlarge {
  width: 500px;
}

.input-xxlarge {
  width: 600px;
}

.nav .nav-link.disabled {
  color: var(--bs-nav-link-disabled-color);
}

.btn {
  font-weight: 550 !important;
}

.floating-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1rem;
  padding-left: calc(30px + 4rem);
  width: 100%;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity));
  box-shadow: 0 -0.2rem .5rem rgba(0, 0, 0, 0.08);
  z-index: 95;
}

body:has(.floating-footer) {
  padding-bottom: 6rem;
}

@media (min-width: 992px) {
  body.sidebar-pinned .floating-footer {
    padding-left: 1rem;
    left: 350px;
    width: calc(100% - 350px);
  }
}

#save-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(var(--bs-body-bg-rgb), 0.85);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
@media (min-width: 576px) {
  #save-overlay {
    left: 80px;
  }
  body.sidebar-pinned #save-overlay {
    left: 350px;
  }
}
.save-overlay-content {
  text-align: center;
  font-size: 1.25rem;
}

.aktion-sidebutton {
  border-radius: 23px 0 0 23px;
  position: fixed;
  right: -90px;
  top: 10%;
  z-index: 100;
  transition: right 0.2s ease;
}

#sb-menubar {
  border-radius: 0px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 100;
  transition: left 0.2s ease;
}

#sb-menubar.static {
  border: none;
  left: 0;
  width: 350px;
}

.aktion-sidebutton:hover {
  right: 0;
}

.aktion-twin {
  border-radius: 23px 0 0 23px;
  position: absolute;
  left: -51px;
  top: 10%;
}

.aktion-twin i {
  transition: var(--bs-offcanvas-transition);
}

input[type="date"] {
  min-width: 8em !important;
}

.card {
  box-shadow: 0px 3px 10px #00000022;
}

.karte {
  padding: 0.75em 1rem 1rem 1rem;
  border-radius: 0.3rem;
  box-shadow: 0px 3px 15px #00000022;
  margin-bottom: 1.25rem;
}

.karte h3 {
  font-size: 1.5rem;
}

.karte h4 {
  font-size: 1.25rem;
}

.karte h5 {
  font-size: 1.1rem;
}

.karte.col-6 {
  width: calc(50% - 1.5rem);
  margin: 0.5rem 0.75rem;
}

.inline-form {
  position: relative;
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
  padding: 1rem;
  background-color: var(--bs-tertiary-bg);
  border-radius: var(--bs-border-radius-sm);
  z-index: 1;
  container-type: inline-size;
}

.bg-tertiary-subtle {
  background-color: var(--bs-tertiary-bg) !important;
}

.belegung-card .inline-form {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius) !important;
}

/* Nachrangiger Shortcut unter Speichern/Abbrechen (z.B. "Wechsel zum Stichtag" im End-Datum-Panel) */
.inline-form .stichtag-hinweis {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bs-border-color);
}

.inline-form .stichtag-hinweis .btn-link {
  padding-left: 0;
}

.inline-form-icon {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  font-size: 10rem;
  opacity: 5%;
  z-index: -1 !important;
}

.fill-height {
  height: calc(100% - 1.5rem);
}

.small-karte .karte {
  padding: 0.5em 0.75em;
  margin: 0;
}

ul.karte {
  list-style: none;
}

.card-header.align-items-center * {
  margin-bottom: 0;
}

.kb_spalten h4 {
  font-family: "Merriweather Sans", sans-serif;
  margin-block-start: 15px;
  margin-block-end: 5px;
}

.kb_well {
  min-width: 355px;
  width: 100%;
  max-width: 33%;
}

.text-bg-info {
  background-color: #0d6efd !important;
  color: #fff !important;
}

.float-right {
  margin-left: auto;
  margin-right: 0;
}

.dashboard-info-toggle .card-header h4 {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.dashboard-info-dl {
  margin: 0;
}

.dashboard-info-dl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.dashboard-info-dl-row:last-child {
  border-bottom: none;
}

.dashboard-info-dl dt {
  font-weight: normal;
  color: var(--bs-secondary-color);
}

.dashboard-info-dl dd {
  margin-bottom: 0;
}

.float-bottom {
  flex-shrink: 0;
  width: 100%;
  /* Flexbox-basiertes Layout - keine absolute Positionierung mehr nötig */
}

.no-shadow {
  box-shadow: none !important;
}

.pointer:hover {
  cursor: pointer;
}

.dashboardlogo {
  content: url(/../../img/msvpluslogo_grau_compr.svg);
  height: 0.66em;
}

/**************************************************
 *
 * Navigation per Seitenleiste
 *
 **************************************************/

.sidebar {
  position: fixed;
  height: 100%;
  overflow-y: hidden;
  /* Scrolling jetzt in .sb-main-menu */
  width: calc(30px + 3rem);
  z-index: 999;

  /* Firefox: Schmale Scrollbar, standardmäßig transparent */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  /* Transitions für width und box-shadow */
  /* Hinweis: scrollbar-color ist nicht animierbar (CSS-Spec) - Übergang erfolgt abrupt */
  /* Leichte Verzögerung beim Schließen für stabileres Hover-Verhalten */
  transition:
    width 0.15s ease 0.1s,
    box-shadow 0.4s ease;

  /* Performance-Optimierung für Animationen */
  will-change: width;
  contain: layout;
  /* Firefox unterstützt 'style' nicht */
}

/* Webkit/Chrome: Scrollbar-Styling (gemeinsam für sidebar und overflow-Klassen) */
.sidebar::-webkit-scrollbar,
.sb-overflow::-webkit-scrollbar,
.overflow-25::-webkit-scrollbar,
.overflow-50::-webkit-scrollbar,
.overflow-75::-webkit-scrollbar {
  width: 0;
}

/* Scrollbar-Breite nur bei Hover */
.sidebar:is(:hover, :has(:focus-visible))::-webkit-scrollbar,
.sb-overflow:hover::-webkit-scrollbar,
.overflow-25:hover::-webkit-scrollbar,
.overflow-50:hover::-webkit-scrollbar,
.overflow-75:hover::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track,
.sb-overflow::-webkit-scrollbar-track,
.overflow-25::-webkit-scrollbar-track,
.overflow-50::-webkit-scrollbar-track,
.overflow-75::-webkit-scrollbar-track {
  background: transparent;
  transition: background 0.3s ease;
}

.sidebar::-webkit-scrollbar-thumb,
.sb-overflow::-webkit-scrollbar-thumb,
.overflow-25::-webkit-scrollbar-thumb,
.overflow-50::-webkit-scrollbar-thumb,
.overflow-75::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s ease;
}

/*
 * Die Seitenleiste klappt auf, wenn die Maus darüber steht, wenn sie fixiert
 * ist - und wenn eines ihrer Bedienelemente den Tastaturfokus hat. Letzteres
 * ist notwendig, nicht kosmetisch: eingeklappt liegen die Schalter der
 * Fußzeile mit opacity: 0 hinter dem Rand und wären beim Durchtabben
 * unsichtbar. `:focus-visible` statt `:focus-within`, damit die Leiste nach
 * einem Mausklick nicht ohne erkennbaren Grund offen stehen bleibt; die
 * `:is()`-Hülle macht die Liste nachsichtig, sodass ein Browser ohne
 * `:has()` nur diesen Zusatz verliert und nicht die ganze Regel.
 */
.sidebar:is(:hover, :has(:focus-visible)),
.sidebar.static,
body.sidebar-pinned .sidebar {
  width: 350px;
  box-shadow: 5px 0px 10px #00000022;
  backdrop-filter: blur(7px);

  /* Kein delay beim Öffnen - nur beim Schließen */
  transition:
    width 0.15s ease,
    box-shadow 0.4s ease;

  /* Firefox: Scrollbar bei Hover sichtbar machen */
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

/* Webkit: Scrollbar bei Hover sichtbar machen */
.sidebar:is(:hover, :has(:focus-visible))::-webkit-scrollbar-track,
.sb-overflow:hover::-webkit-scrollbar-track,
.overflow-25:hover::-webkit-scrollbar-track,
.overflow-50:hover::-webkit-scrollbar-track,
.overflow-75:hover::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar:is(:hover, :has(:focus-visible))::-webkit-scrollbar-thumb,
.sb-overflow:hover::-webkit-scrollbar-thumb,
.overflow-25:hover::-webkit-scrollbar-thumb,
.overflow-50:hover::-webkit-scrollbar-thumb,
.overflow-75:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

.sidebar:is(:hover, :has(:focus-visible))::-webkit-scrollbar-thumb:hover,
.sb-overflow:hover::-webkit-scrollbar-thumb:hover,
.overflow-25:hover::-webkit-scrollbar-thumb:hover,
.overflow-50:hover::-webkit-scrollbar-thumb:hover,
.overflow-75:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Hover-Effekte - Farben in msvplus-brand.css */

.sb-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: 130%;
  width: 100%;
}

.sb-main-menu {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  /* Wichtig für Flexbox-Scrolling */

  /* Scrollbar-Styling von .sidebar übernehmen */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.sidebar:is(:hover, :has(:focus-visible)) .sb-main-menu,
.sidebar.static .sb-main-menu {
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

/* Webkit-Scrollbar für .sb-main-menu */
.sb-main-menu::-webkit-scrollbar {
  width: 0;
}

.sidebar:is(:hover, :has(:focus-visible)) .sb-main-menu::-webkit-scrollbar,
.sidebar.static .sb-main-menu::-webkit-scrollbar {
  width: 6px;
}

.sb-main-menu::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar:is(:hover, :has(:focus-visible)) .sb-main-menu::-webkit-scrollbar-track,
.sidebar.static .sb-main-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.sb-main-menu::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}

.sidebar:is(:hover, :has(:focus-visible)) .sb-main-menu::-webkit-scrollbar-thumb,
.sidebar.static .sb-main-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

.sidebar:is(:hover, :has(:focus-visible)) .sb-main-menu::-webkit-scrollbar-thumb:hover,
.sidebar.static .sb-main-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/*
 * Die Schalter der Seitenleiste sind <button>-Elemente, damit sie Rolle,
 * Fokus und Tastaturbedienung von sich aus mitbringen. Der Reset nimmt ihnen
 * das Aussehen des Browser-Defaults; ohne `color: inherit` fielen die Symbole
 * auf `buttontext` zurück und wären auf dem dunklen Grund der Seitenleiste
 * unlesbar - in beiden Farbschemata gleichermaßen.
 */
.sb-icon,
.sb-hover {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
}

.sb-icon {
  display: inline-flex;
  cursor: pointer;
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  overflow-x: hidden;
  white-space: nowrap;
  /*  transition: background-color .2s ease;*/
  width: 100%;
}

.sb-icon i {
  line-height: inherit;
  min-width: 30px;
  text-align: center;
}

.sb-footer i:not(.fa-user) {
  min-width: 0;
}

/*
 * Fußzeile der Seitenleiste: Nutzername, Hilfe, Pin und Modus-Umschalter
 * teilen sich eine Flex-Zeile in der fest 350px breiten Seitenleiste.
 *
 * Der Nutzername muss nachgeben, wenn der Platz knapp wird - sonst schiebt
 * er die Symbole rechts von sich aus der Seitenleiste, wo sie durch
 * overflow-x: hidden abgeschnitten werden. Ohne min-width: 0 ist der Block
 * wegen white-space: nowrap nicht schrumpfbar, d.h. schon Anmeldenamen ab
 * etwa sechs Zeichen lassen den Modus-Umschalter verschwinden.
 */
.sb-footer .sb-display > * {
  flex: 0 0 auto;
}

#sb-username {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* Auslassungspunkte greifen nur, wenn der Name kein Inline-Element ist -
   als Flex-Kind von #sb-username ist er blockartig. */
#sb-username .sb-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Eingeklappt bietet die Leiste nur Platz für das Nutzersymbol. Die übrigen
 * Schaltflächen werden ausgeblendet, statt angeschnitten stehen zu bleiben -
 * pointer-events verhindert außerdem Klicks auf unsichtbare Schaltflächen.
 */
.sb-footer .sb-display > :not(#sb-username) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.sidebar:is(:hover, :has(:focus-visible)) .sb-footer .sb-display > :not(#sb-username),
.sidebar.static .sb-footer .sb-display > :not(#sb-username) {
  opacity: 1;
  pointer-events: auto;
}

.sidebar .sb-text {
  padding-left: 1rem;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.sidebar .nav-link,
.sidebar .sb-heading-hide {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.sidebar:is(:hover, :has(:focus-visible)) .sb-text,
.sidebar.static .sb-text,
.sidebar:is(:hover, :has(:focus-visible)) .nav-link,
.sidebar.static .nav-link,
.sidebar:is(:hover, :has(:focus-visible)) .sb-heading-hide,
.sidebar.static .sb-heading-hide {
  opacity: 1;
}

.sidebar:is(:hover, :has(:focus-visible)) .sb-container,
.sidebar.static .sb-container {
  text-align: left;
}

.sidebar ul {
  padding-left: 0;
  margin: 0;
}

.sidebar li {
  font-size: initial;
  list-style: none;
  padding: 0.3rem 0.3rem 0.3rem 2rem;
}

.sb-heading,
.nav-header {
  opacity: 0.8;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 0.3rem;
  padding-top: 0.6rem !important;
}

/* Erste Überschrift in Submenus braucht keine Trennlinie */
.sb-overflow>li.sb-heading:first-child,
.overflow-25>li.sb-heading:first-child,
.overflow-50>li.sb-heading:first-child,
.overflow-75>li.sb-heading:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0.3rem !important;
}

.offcanvas-heading {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0;
}

.sb-nav-item {
  position: relative;
}

.sb-nav-dot {
  margin: auto;
  position: absolute;
  font-size: 50%;
  top: 50%;
  left: 6%;
  transform: translate(0, -50%);
  transition: opacity .15s ease;
  opacity: 1;
}

.sidebar:is(:hover, :has(:focus-visible)) .sb-nav-dot,
.sidebar.static .sb-nav-dot {
  opacity: 0;
}

/* Focus-Styles für Keyboard-Navigation (WCAG 2.1) - Farben in msvplus-brand.css */

.subtle {
  font-size: 60% !important;
  margin: auto 0;
}

/* macOS Keyboard Symbols: Etwas größer für bessere Lesbarkeit */
[data-use-symbols="true"] kbd {
  font-size: 1.05em;
  padding: 0.1em 0.3em;
}

/* Gemeinsame Scroll-Regeln für alle Overflow-Klassen */
.sb-overflow,
.overflow-25,
.overflow-50,
.overflow-75 {
  overflow-y: auto;
  scroll-behavior: smooth;

  /* Firefox: Schmale Scrollbar, standardmäßig transparent */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  /* Hinweis: scrollbar-color ist nicht animierbar (CSS-Spec) - Übergang erfolgt abrupt */
}

/* Firefox: Scrollbar bei Hover sichtbar machen (nur overflow-Klassen) */
.sb-overflow:hover,
.overflow-25:hover,
.overflow-50:hover,
.overflow-75:hover {
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

/* Spezifische max-height Werte */
.sb-overflow {
  max-height: 30vh;
}

.overflow-25 {
  max-height: 25vh;
}

.overflow-50 {
  max-height: 50vh;
}

.overflow-75 {
  max-height: 75vh;
}

.sidebar .collapse {
  position: relative;
}

/* Prefers-Reduced-Motion Support (WCAG 2.1) */
@media (prefers-reduced-motion: reduce) {

  /* Sidebar-Animationen komplett deaktivieren */
  .sidebar,
  .sidebar:is(:hover, :has(:focus-visible)),
  .sidebar.static,
  .sidebar .collapse,
  .sidebar .sb-text,
  .sidebar .nav-link,
  .sidebar .sb-heading-hide,
  .sb-nav-dot {
    transition: none !important;
  }

  /* Pin-Icon Animation ebenfalls deaktivieren */
  #sb-pin i {
    transition: none !important;
  }

  /* Smooth Scrolling in Submenüs deaktivieren */
  .sb-overflow,
  .overflow-25,
  .overflow-50,
  .overflow-75 {
    scroll-behavior: auto;
  }

  /* Aufklappen des aktuellen Schritts in der Ersteinrichtungs-Karte */
  .eek-extra {
    animation: none !important;
  }
}

legend {
  font-size: 100%;
  margin-top: 0.5rem;
}

.popover {
  max-width: 400px;
}

/* Responsive Sidebar-Schriftgrößen bei kleinen Bildschirmhöhen */
@media (max-height: 750px) {
  .sb-container {
    font-size: 120%;
  }

  .sb-icon {
    padding: 0.6rem 1.25rem;
    min-height: 40px;
  }

  .sidebar li {
    padding: 0.25rem 0.3rem 0.25rem 2rem;
  }
}

@media (max-height: 650px) {
  .sb-container {
    font-size: 110%;
  }

  .sb-icon {
    padding: 0.5rem 1.25rem;
    min-height: 36px;
  }

  .sidebar li {
    padding: 0.2rem 0.3rem 0.2rem 2rem;
  }
}

/* Reduced Motion: Animationen deaktivieren für Nutzer mit entsprechender Einstellung */
@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition: none;
  }

  .sidebar:is(:hover, :has(:focus-visible)),
  .sidebar.static {
    transition: none;
  }

  .sidebar .collapse {
    transition: none;
  }

  .sidebar .sb-text,
  .sidebar .nav-link,
  .sidebar .sb-heading-hide {
    transition: none;
  }

  /* Pin-Icon Animation ebenfalls deaktivieren */
  #sb-pin i {
    transition: none !important;
  }
}

/* Sidebar-Pin-Toggle Styling */
#sb-pin i {
  transition: transform 0.2s ease, color 0.2s ease;
  transform: rotate(45deg);
}

.sidebar.static #sb-pin i {
  transform: rotate(0deg);
  color: var(--bs-primary, #0d6efd);
}

/* Content-Verschiebung bei gepinnter Sidebar (nur Desktop) */
@media (min-width: 576px) {
  body.sidebar-pinned .ps-sm-sb-1 {
    padding-left: calc(350px + 0.25rem) !important;
  }
}

@media (min-width: 992px) {
  body.sidebar-pinned .ps-lg-sb-3 {
    padding-left: calc(350px + 1rem) !important;
  }
}

/**************************************************
 *
 * Schnellsuche und Ergebnisse
 *
 **************************************************/

#suche {
  font-size: 150%;
  padding: 1rem 2rem;
  margin: 0 auto;
}

.quicksearch {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
}

/* Der Treffer-Link füllt die gesamte Zeile, damit die klickbare Fläche mit der
   (ganzzeiligen) Hover-Markierung übereinstimmt: Ein Klick irgendwo in der Zeile
   öffnet den Treffer bzw. löst das Nachladen ("…") aus. Das Padding wandert dazu
   vom <li> auf den Link, der jetzt die Textzeile samt Ellipsis-Kürzung bildet. */
.quicksearch > a {
  display: block;
  padding: 0.5em 2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selectedresult a,
.selectedresult {
  text-decoration: none;
  white-space: nowrap;
  overflow: visible;
}

#searchresults {
  overflow: auto;
  /* Deckel reserviert konstant Platz für das umgebende Chrome (Suchfeld oben,
     "Wie funktioniert die Suche?"-Hinweis unten, Dialog-Ränder), damit die
     Trefferliste den Hinweis bei vielen Treffern nicht aus dem Fenster drängt.
     Der max(12rem, …)-Boden verhindert, dass die Liste auf sehr niedrigen
     Viewports (Mobil quer) auf nahezu null zusammenfällt und unbrauchbar wird. */
  max-height: max(12rem, calc(100vh - 17rem));
  width: 100%;
  margin-top: 5px;
}

#searchresults b,
#searchresults h3,
#searchresults i {
  padding-left: 2rem;
}

#searchresults ul {
  list-style: none;
  margin-left: -2em;
  margin-bottom: 5px;
}

.accordion-button:not(.collapsed) {
  color: initial;
  background-color: initial;
}

.a-edit {
  font-size: 60%;
  vertical-align: super;
  padding-left: 0.25rem;
}

.infobutton {
  font-size: 6pt;
  padding: 1px 5px;
}

.text-subtle,
.msvplus-page-subheader,
.msvplus-modal-subheader,
.msvplus-subheader,
h1 small,
h2 small,
h3 small,
h4 small {
  color: var(--bs-tertiary-color);
}

.dt-buttons .dropdown-menu,
input[type="select-one"] {
  width: max-content !important;
}

.dropzone {
  border: none;
  border-radius: 1em;
}

.dropzone .dz-preview {
  margin: 0 !important;
  min-height: 0 !important;
}

.alert-sm {
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-weight: 500;
}

/* Hinweis-/Fehlerkasten neben dem Speichern-Knopf der Konfigurationsseiten:
   .alert-sm setzt margin-bottom auf 0; bei längerem Text bricht der Kasten auf
   volle Breite um und klebt dann an den darunterliegenden Knöpfen. */
#saveError,
.js-save-error {
  margin-bottom: 0.5rem;
}

.rotate-90l {
  transform: rotate(-90deg);
}

.rotate-180 {
  transform: rotate(-180deg);
}

/**************************************************
 *
 * eingene Icons
 *
 **************************************************/

.msvplus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.msvplus-icon::before {
  content: "";
  width: var(--msvplus-icon-size, 1rem);
  height: var(--msvplus-icon-size, 1rem);
  background-color: currentColor;
  mask-size: contain;
}

.msvplus-icon-zahlperson::before {
  mask: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 576 512'%3E%3Cpath d='m 224,256 a 128,128 0 1 0 0,-256 128,128 0 1 0 0,256 z m -45.7,48 C 79.8,304 0,383.8 0,482.3 0,498.7 13.3,512 29.7,512 H 418.3 C 434.7,512 448,498.7 448,482.3 448,383.8 368.2,304 269.7,304 Z' /%3E%3Cpath d='m 394.40748,245.54292 c -0.0654,1.76463 -0.0654,3.46391 -0.0654,5.22854 v 10.45708 c 0,1.76462 0,3.46391 0.0654,5.22853 h -10.52244 c -11.56813,0 -20.91415,9.34601 -20.91415,20.91416 0,11.56814 9.34602,20.91415 20.91415,20.91415 H 402.381 c 19.34559,54.83429 71.69633,94.11369 133.13165,94.11369 h 15.68562 c 11.56814,0 20.91416,-9.34602 20.91416,-20.91415 0,-11.56815 -9.34602,-20.91416 -20.91416,-20.91416 h -15.68562 c -37.84154,0 -70.71597,-21.17558 -87.51265,-52.28537 h 82.28412 c 11.56814,0 20.91415,-9.34601 20.91415,-20.91415 0,-11.56816 -9.34601,-20.91416 -20.91415,-20.91416 h -93.98298 c -0.0654,-1.69927 -0.13072,-3.46391 -0.13072,-5.22853 v -10.45708 c 0,-1.76463 0.0654,-3.52927 0.13072,-5.22854 h 93.98298 c 11.56814,0 20.91415,-9.34601 20.91415,-20.91416 0,-11.56813 -9.34601,-20.91415 -20.91415,-20.91415 H 448 c 16.79668,-31.1098 49.67111,-52.28538 87.51265,-52.28538 h 15.68562 c 11.56814,0 20.91416,-9.34602 20.91416,-20.91415 0,-11.56815 -9.34602,-20.91416 -20.91416,-20.91416 h -15.68562 c -61.43532,0 -113.78606,39.2794 -133.13165,94.11369 h -18.49596 c -11.56813,0 -20.91415,9.34602 -20.91415,20.91415 0,11.56815 9.34602,20.91416 20.91415,20.91416 z' /%3E%3C/svg%3E") no-repeat center;
}

.msvplus-icon-sm {
  --msvplus-icon-size: 0.75rem;
}

.msvplus-icon-lg {
  --msvplus-icon-size: 1.25rem;
}

.msvplus-icon-xl {
  --msvplus-icon-size: 1.5rem;
}

.msvplus-icon-2x {
  --msvplus-icon-size: 2rem;
}

.msvplus-icon-3x {
  --msvplus-icon-size: 3rem;
}

.msvplus-icon-fs-3 {
  --msvplus-icon-size: calc(1.3rem + 0.6vw);
}

/**************************************************
 *
 * versteckte Klassen
 *
 **************************************************/

.vergangene,
.pkabgeschlossen,
.sbabgeschlossen,
.psabgeschlossen,
.unsichtbar,
.hide,
.hidden {
  display: none;
}

/**************************************************
 *
 * Stundenplan
 *
 **************************************************/

/* Stundenplan-Tabelle: Feste Breite beibehalten, nicht auf 100% strecken */
.stundenplan {
  --plan-font-size: 0.75rem;
  --plan-line-height: 1.2;
  --plan-cell-padding: 2px 4px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  table-layout: fixed;
  width: max-content;
  border-collapse: separate;
  border-spacing: 0;
}

/* Border-Kollaps simulieren: Nur linke+obere Borders auf Zellen,
   rechter+unterer Rand kommt vom table-border selbst */
.stundenplan :is(td, th) {
  border-right: none;
  border-bottom: none;
}

/* Wochenplan (WL/WR): volle Breite, Mindestbreite pro Spalte.
   Bei Unterschreitung scrollt .stundenplan-draggable horizontal. */
.stundenplan.stundenplan-fullwidth {
  table-layout: auto;
  width: 100%;
  min-width: max-content;
}

.stundenplan.stundenplan-fullwidth td.planspalte {
  min-width: 80px;
}

.stundenplan.stundenplan-fullwidth td.planspalte .std,
.stundenplan.stundenplan-fullwidth td.planspalte .vfg {
  width: 100% !important;
}

/* Sticky Header: Der transformierte thead bekommt per JS transform + z-index.
   tbody braucht einen eigenen Stacking Context mit niedrigerem z-index,
   damit die absolut positionierten .plankurs-Elemente UNTER dem thead bleiben. */
.stundenplan-header {
  position: relative;
  z-index: 2;
  will-change: transform;
}

.stundenplan-header th {
  background-color: var(--bs-body-bg);
}

#stundenplan_core {
  position: relative;
  z-index: 1;
}

/* Zeitspalte in fullwidth-Ansicht auf Inhaltsbreite schrumpfen lassen.
   Bei table-layout:auto verteilt der Browser sonst überschüssigen Platz
   proportional auf alle Spalten — width:1px + nowrap erzwingt shrink-to-fit. */
.stundenplan.stundenplan-fullwidth td.zeitspalte,
.stundenplan.stundenplan-fullwidth th.zeit-col {
  width: 1px !important;
  white-space: nowrap;
}

.stundenplan.stundenplan-fullwidth td.zeitspalte > div {
  width: auto !important;
}

.stundenplan td.zeitspalte {
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: var(--bs-body-bg);
  vertical-align: top;
}

.stundenplan-header .pauseninfo-content,
.stundenplan-header .spalten-header-row th,
.stundenplan-header .standorte-row th {
  padding: 0.5rem .75rem;
}

.stundenplan-header .pauseninfo {
  font-weight: 500;
}

.stundenplan-header .standort-pauseninfo,
.stundenplan-header .spalte-pauseninfo {
  font-size: .9em;
  font-weight: 600;
  line-height: 1;
}

.stundenplan-header .standort-name,
.stundenplan-header .spalte-name {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 600;
  color: var(--bs-body-color);
  overflow-wrap: break-word;
  word-break: break-word;
}

.stundenplan-draggable {
  overflow-x: auto;
  touch-action: pan-x pan-y;
  border-top: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
}

/* Einzelne Stundenzelle */
.stundenplan .std {
  border-bottom: 1px solid var(--bs-border-color);
  position: absolute;
  width: calc(100% - 1px);
  padding: 2px 4px;
  font-size: var(--plan-font-size);
}

/* Planspalte */
.stundenplan td.planspalte {
  background: repeating-linear-gradient(-45deg,
      var(--bs-tertiary-bg),
      var(--bs-tertiary-bg) 10px,
      var(--bs-border-color) 10px,
      var(--bs-border-color) 12px);
  padding: 0;
  height: 100%;
  vertical-align: top;
}

/* Verfügbarkeit */
.stundenplan .vfg {
  background-color: var(--bs-body-bg);
  position: absolute;
  width: 100%;
}

/* Kurskarte (bekommt auch Klassen .card und .border-2) */
.stundenplan .plankurs,
.stundenplan .plankursleer {
  position: absolute;
  width: 100%;
  padding: 0;
  margin: 0;
  box-shadow: none;
  font-size: var(--plan-font-size);
  line-height: var(--plan-line-height);
}

.plankurs a {
  color: var(--bs-body-color);
  text-decoration: none;
}

.plankurs a:hover {
  color: var(--bs-emphasis-color);
  text-decoration: underline;
  cursor: pointer;
}

.plankurs>div,
.plankursleer>div {
  color: var(--bs-body-color);
  padding: var(--plan-cell-padding);
}

/* Fallback-Farben für Termine ohne individuelle Farbzuweisung.
   Individuelle Farben via .plan-farbe-* überschreiben diese Fallbacks. */
.plankurs,
.plankursleer {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.plankurs .zeile1,
.plankursleer .zeile1 {
  background-color: var(--bs-dark-bg-subtle);
  color: var(--bs-body-color);
  border-top-left-radius: 3.7px;
  border-top-right-radius: 3.7px;
}

.plankurs .zeile1 a,
.plankursleer .zeile1 a {
  color: var(--bs-body-color);
}

.plankurs .zeile2,
.plankursleer .zeile2 {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

.plankurs .zeile2 a,
.plankursleer .zeile2 a {
  color: var(--bs-body-color);
}

.plankurs .zeile3,
.plankursleer .zeile3 {
  background-color: var(--bs-tertiary-bg);
}

.zeile3 .status_2,
.zeile3 .status_4,
.zeile3 .status_6 {
  position: relative;
}

.zeile3 .status_2:after,
.zeile3 .status_4:after,
.zeile3 .status_6:after {
  content: "";
  height: .75rem;
  width: .75rem;
  position: absolute;
  z-index: 1;
  right: 0px;
  border-radius: .375rem;
}

/* Status-Farben in msvplus-brand.css */

.plankurs .pause {
  font-weight: bold;
  border-radius: var(--bs-border-radius-sm);
  padding: 6px 5px 5px 5px;
}

/* "leerer Kurs" / "Karte ohne Teilnehmer" — deckend, gut lesbar */
.plankurs .leerkurs {
  color: var(--bs-danger);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-danger);
  border-radius: var(--bs-border-radius-sm);
  font-weight: bold;
  padding: 1px 4px;
}

.plankurs .neuinkurs,
.plankurs .kuendigung,
.plankurs .wechsel {
  font-size: calc(var(--plan-font-size) - 0.1rem);
  font-weight: bold;
  padding: 1px 3px;
  border-radius: var(--bs-border-radius-sm);
  white-space: nowrap;
}

/* Verlegte Termine am Ursprungsplatz (Spec terminverlegung-stundenplan §6.2).
   Der Block bleibt in seiner Farbe, nur die Deckkraft sinkt; .plankurs:hover
   setzt sie ohnehin wieder auf 1. */
.plankurs-blass {
  opacity: .45;
}

/* Hinweis und Stift-Symbol übernehmen die Schriftfarbe der Kopfzeile —
   bei konfigurierten Lehrer-/Unterrichtsartfarben setzt sie
   .plan-farbe-X .zeile1 (generiert in htmlstundenplan.class.php). */
.plankurs .verlegt,
.plankurs .termin-aktion {
  color: inherit;
}

.plankurs .verlegt {
  font-size: calc(var(--plan-font-size) - 0.1rem);
  font-weight: bold;
  padding: 1px 3px;
  white-space: nowrap;
}

/* Zeile 1 mit Stift-Symbol als Flex-Zeile: Der Titel bekommt die Ellipse,
   das Symbol steht dahinter am rechten Rand. Beim Hover dehnt sich der Titel
   auf seine volle Länge und das Symbol wandert mit ans Textende — als Float
   an der Blockkante würde es vom ausgedehnten Titel-Hintergrund übermalt. */
.plankurs .zeile1:has(.termin-aktion) {
  display: flex;
  align-items: flex-start;
}

.plankurs .zeile1:has(.termin-aktion) > .psi {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plankurs .zeile1:has(.termin-aktion) > .termin-aktion {
  order: 2;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Voller Titel als Overlay (Muster Hover-Card): Die Zeile behält im Fluss
   ihre einzeilige Höhe; beim Hover auf der Zeile legt sich der umgebrochene
   Text nach kurzer Verzögerung darüber und überdeckt die folgenden Zeilen,
   statt sie zu verschieben. Wer nur auf dem Weg zu einem Namen über die
   Titelzeile fährt, löst nichts aus. Ohne transition-behavior: allow-discrete
   erscheint das Overlay sofort — funktional gleich. Die Klasse .plan-gekuerzt
   setzt msvplus.js beim Betreten der Zeile, wenn wirklich etwas verborgen
   ist; einzeilig passende Titel bekommen kein Overlay und keinen Schatten. */
.plankurs .zeile1,
.plankurs .zeile2 {
  position: relative;
  min-height: calc(var(--plan-font-size) * var(--plan-line-height) + 4px);
}

.plankurs .zeile1.plan-gekuerzt:hover,
.plankurs .zeile2.plan-gekuerzt:hover {
  overflow: visible;
  /* gleichzeitig mit dem Overlay umschalten, sonst läuft der Titel in der
     Verzögerung kurz nach rechts aus der Zeile */
  transition: overflow 0s linear .3s;
  transition-behavior: allow-discrete;
}

.plankurs .zeile1.plan-gekuerzt:hover > .psi,
.plankurs .zeile2.plan-gekuerzt:hover > .psi {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 2px 4px;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  z-index: 5;
  background-color: inherit;
  border-radius: inherit;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  transition: all 0s linear .3s;
  transition-behavior: allow-discrete;
}

/* neben dem Stift bleibt der Platz frei */
.plankurs .zeile1.plan-gekuerzt:has(.termin-aktion):hover > .psi {
  right: 30px;
}

/* Dauerhaft sichtbar (Touch kennt kein Hover), aber gedämpft; die
   Trefferfläche ist mindestens 32 x 32 px, ohne Zeile 1 höher zu machen. */
.plankurs .termin-aktion {
  float: right;
  border: 0;
  background: none;
  padding: 9px;
  margin: -9px -6px -9px 0;
  line-height: 14px;
  font-size: 14px;
  min-width: 32px;
  min-height: 32px;
  opacity: .55;
}

.plankurs .termin-aktion:hover,
.plankurs .termin-aktion:focus-visible,
.plankurs-blass .termin-aktion {
  /* im abgeschwächten Block dämpft bereits der Block; keine doppelte Deckkraft */
  opacity: 1;
}

.plankurs .planschueler,
.zeile1,
.zeile2,
.zeile3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* planschueler: Ellipsis im Normalzustand, overflow:visible beim Hover (s.u.) */

.plankurs {
  z-index: revert;
  height: initial;
  min-height: initial;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.plankurs>.zeile1 {
  flex-shrink: 0;
}

.plankurs>.zeile2,
.plankurs>.zeile3 {
  flex-shrink: 1;
  min-height: 0;
}

/* Transition für Breitenänderung: wirkt nur sichtbar bei Kursen,
   die schmaler als die Spalte sind (Überlappungen, 14-tägliche).
   Normale Kurse (schon 100% breit) zeigen keine sichtbare Animation. */
.plankurs {
  transition: width .2s ease, opacity .2s ease;
}

.plankurs:hover {
  width: 100% !important;
  min-height: max-content !important;
  opacity: 1 !important;
  z-index: 3000 !important;
  overflow: visible !important;
}

/* Zeile 1 und 2 bleiben beim Block-Hover mit Ellipse (Overlay siehe oben);
   nur Zeile 3 und die Teilnehmer:innen dehnen sich wie bisher aus. */
.plankurs:hover .zeile3,
.plankurs:hover .planschueler {
  overflow: visible;
}

/* Namen von Schüler:innen, Zahl gefolgt von <a> */
.planschueler {
  color: currentColor;
  background-color: var(--bs-tertiary-bg);
}

/* Inner-Wrapper (.psi): trägt die Hintergrundfarbe beim Overflow mit.
   Inline-Element, dessen Hintergrund sich mit dem Text ausdehnt,
   auch wenn der Parent (zeile/planschueler) fix breit bleibt. */
.psi {
  background-color: inherit;
  color: inherit;
}
.psi a {
  color: inherit;
}

/* Pausen-Hinweise (Block-Elemente, außerhalb von .psi):
   width:max-content dehnt den Hintergrund mit dem Text aus,
   min-width:100% verhindert Schrumpfen unter Spaltenbreite. */
.planschueler .pause {
  width: max-content;
  min-width: 100%;
  background-color: inherit;
}
.planhidden {
  display: none;
}

/**************************************************
 *
 * Dokumentenvorlagen: Offcanvas
 *
 **************************************************/

.dokvor-container {
  min-width: 680px;
  width: 35% !important;
}

/* zusätzlicher Abstand links bei Checkboxen, um den Fokusrahmen komplett darzustellen */
.offcanvas-body .form-check {
  margin-left: 0.5rem;
}

/**************************************************
 *
 * DataTable-spezifische Einstellungen
 *
 **************************************************/

/* DataTables Processing-Indikator: position:fixed damit er immer im
   sichtbaren Bereich erscheint, unabhängig von der Tabellenhöhe.
   datatables.css positioniert den Spinner mit position:absolute top:50%
   relativ zum dt-container – bei langen Tabellen liegt er weit außerhalb
   des Viewports. */
div.dt-processing {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1050;
}

/* verberge die Angaben "x Spalten|Zellen ausgewählt" */
.select-info .select-item:nth-child(2),
.select-info .select-item:nth-child(3) {
  display: none;
}

/* Bootstraps .table-*-Varianten tragen feste Farbwerte und wechseln nicht mit
   dem Theme: Die Zeile bleibt im Dark Mode hellgrau mit schwarzem Text und
   sticht als heller Fremdkörper zwischen den dunklen Zeilen heraus. Die
   neutrale Variante — im Projekt die Gruppen- und Markierungszeile — bekommt
   deshalb die Theme-Variablen. Gesetzt wird auf den Zellen, weil Bootstrap die
   Farbe dort aus --bs-table-bg auflöst. */
.table > :not(caption) > tr.table-secondary > * {
  --bs-table-bg: var(--bs-secondary-bg);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
}

/* Spalten, die nach einer Zahl sortieren, aber Text zeigen.
   DataTables leitet die Ausrichtung vom Sortierschlüssel ab: `data-order` mit
   einer Zahl setzt `dt-type-numeric` und dreht den Kopf auf `row-reverse`, der
   Sortierpfeil steht dann links. `text-start` regelt nur `text-align` und
   erreicht das nicht — der Pfeil bliebe als einziger in der Tabelle links.
   Wer die Spalte ausdrücklich linksbündig stellt, meint auch den Pfeil. */
table.dataTable th.dt-type-numeric.text-start div.dt-column-header {
  flex-direction: row;
}

/* DataTable Selektion - Farben in msvplus-brand.css */

table.dataTable.dtr-inline.collapsed>tbody>tr.selected>td.dtr-control::before {
  border-left: 10px solid rgba(255, 255, 255, 0.75);
}

.dtsb-searchBuilder {
  padding: 1rem;
  background-color: var(--bs-tertiary-bg);
  border-radius: var(--bs-border-radius-sm);
}

.dtsb-searchBuilder:has(+ .sb-presets-container) {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  border-radius: var(--bs-border-radius-sm) 0 0 var(--bs-border-radius-sm) !important;
  width: max-content !important;
}

.dtsb-data select,
.dtsb-condition select {
  height: min-content;
}

.sb-presets-container {
  background-color: var(--bs-tertiary-bg);
  border-radius:  0 var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0;
  border-left: 1px solid var(--bs-border-color);
  height: 100%;
  width: max-content;
  max-width: 100%;
  padding: 1rem;
}

.table-transparent {
  --bs-table-bg: transparent !important;
}

/* Person-Zeilenbreite einhalten */
#personform .form-control {
  width: 100% !important;
}

/**************************************************
 *
 * Animationen
 *
 **************************************************/

.size-animated {
  padding: 0.5rem;
  animation-name: size;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes size {
  0% {
    padding: 0.5rem;
  }

  50% {
    padding: 0.75rem;
  }

  100% {
    padding: 0.5rem;
  }
}

.spin-animated {
  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

#offene_posten-table tr.updated td {
  animation-name: updated;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

@keyframes updated {
  0% {
    background-color: var(--bs-yellow);
  }

  50% {
    background-color: var(--bs-yellow);
  }

  100% {
    background-color: var(--bs-table-bg);
  }
}

/* Für selektierte Zeilen */
table.table.dataTable>tbody>tr.selected.update-feedback>* {
  animation-name: flash-to-selection;
  animation-duration: 3s;
}

@keyframes flash-to-selection {
  0% {
    filter: hue-rotate(130deg) brightness(1.5);
  }

  50% {
    filter: hue-rotate(130deg) brightness(1.5);
  }

  100% {
    filter: hue-rotate(00deg) brightness(1);
  }
}

/**************************************************
 *
 * Search-Seite
 *
 **************************************************/

/* Treffer-Zeilen: Präzises Styling ohne Padding-Kaskade */
.trefferliste > .row.treffer {
  padding: 0.35rem 0.5rem;
  min-height: 2.5rem;
  transition: background-color 0.15s ease;
}

/* Hauptspalten ohne zusätzliches Padding */
.trefferliste > .row.treffer > .col,
.trefferliste > .row.treffer > .col-1,
.trefferliste > .row.treffer > .col-10 {
  padding-top: 0;
  padding-bottom: 0;
  margin: auto 0;
}

/* Innere Row: Kompakte Abstände */
.trefferliste > .row.treffer .row.row-cols-auto {
  --bs-gutter-y: 0.15rem;
  --bs-gutter-x: 0.5rem;

  margin: 0;
}

/* Innere Spalten: Minimales vertikales Padding */
.trefferliste > .row.treffer .row.row-cols-auto > div {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

/* .row-bg-hover - Farben in msvplus-brand.css */

.edit-container {
  position: relative;
}

.tag {
  position: absolute;
  bottom: 7px;
  right: 7px;
  border-radius: 0.25rem;
  padding: 0px 4px;
  font-size: 10pt;
  pointer-events: none;
  font-weight: bold;
  z-index: 10;
}

textarea.autogrow {
  overflow: hidden;
  resize: vertical;
  min-height: 3lh;
}

.code {
  height: 10em;
  font-family: monospace;
  font-size: 80%;
}

/**************************************************
 *
 * Media-Queries
 *
 **************************************************/

@media (min-width: 576px) {
  .ps-sm-sb-1 {
    padding-left: calc(80px + 0.25rem) !important;
  }
}

@media (max-width: 575px) {
  .aktion-sidebutton {
    border: none;
    border-radius: 0;
    position: fixed;
    left: 66%;
    right: 0;
    top: 0;
    z-index: 100;
    transition: none;
    text-align: right;
    background-color: transparent !important;
    height: 40px;
    margin: 0.5rem 0;
    font-size: 0;
    /* Hide the text */
  }

  .aktion-sidebutton i {
    font-size: initial;
  }

  .aktion-sidebutton::before {
    content: none;
  }

  .sidebar {
    padding-top: 1rem;
    /* Sidebar-Höhe anpassen wegen mobilem Menü-Button oben (pt-5 = 3rem) */
    top: 3rem;
    height: calc(100% - 3rem);
  }

  .floating-footer {
    padding: 0.5rem;
  }
}

@media (max-width: 992px) {
  .karte {
    margin-bottom: 1rem;
  }
}

@media (min-width: 992px) {
  .ps-lg-sb-3 {
    padding-left: calc(80px + 1rem) !important;
  }
}

/* Wechsel von Tab-Ansicht zu Accordion in config (mobil): Alle Tabs sichtbar */
@media (max-width: 767px) {
  .karte .tab-pane {
    display: block !important;
    opacity: 1;
  }
}

/* Dark-Mode Farben - in msvplus-brand.css */

.zammad-chat-message--agent {
  color: black !important;
}

/**************************************************
 *
 * month-year-spezifische Settings
 *
 **************************************************/

.month-year-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  max-width: 200px;
}

.month-year-wrapper:focus-within {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Validation-Farben in msvplus-brand.css */

/* Input fields */
.month-input,
.year-input {
  border: none;
  outline: none;
  padding: 0;
  font-size: 1rem;
  background: transparent;
  text-align: center;
  min-width: 0;
  color: inherit;
}

.month-input {
  width: 1.5rem;
}

.year-input {
  width: 2rem;
}

/* Separator */
.separator {
  color: #6c757d;
  font-size: 1rem;
  font-weight: 500;
  user-select: none;
}

/* Hidden original input */
.hidden-input {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Bootstrap form styling compatibility */
.form-control.monatjahr {
  display: none;
  /* Hide the original input completely */
}

/* Placeholder styling */
.month-input::placeholder,
.year-input::placeholder {
  color: #6c757d;
  opacity: 1;
}

/* Remove spinner buttons from number inputs */
.month-input::-webkit-outer-spin-button,
.month-input::-webkit-inner-spin-button,
.year-input::-webkit-outer-spin-button,
.year-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.month-input[type="number"],
.year-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Error message styling */
.error-message {
  display: none;
  font-size: 0.875rem;
  margin: 0.5rem !important;
  /* Innerhalb von input-group wird margin-left überschrieben */
}

/* Dark mode - Farben in msvplus-brand.css */

/* Responsive adjustments */
@media (max-width: 768px) {
  .month-year-wrapper {
    max-width: 180px;
  }

  .month-input {
    width: 35px;
  }

  .year-input {
    width: 60px;
  }
}

/* Bootstrap input-group compatibility */

/* Default: no border-radius for input-group elements */
.input-group .month-year-wrapper {
  border-radius: 0 !important;
}

/* After input-group-text: right corners rounded (like your "von" example) */
.input-group .input-group-text~.month-year-wrapper {
  border-radius: 0 0.375rem 0.375rem 0 !important;
}

/* First element: left corners rounded */
.input-group .month-year-wrapper:first-child {
  border-radius: 0.375rem 0 0 0.375rem !important;
}

/* Last element: right corners rounded */
.input-group .month-year-wrapper:last-child {
  border-radius: 0 0.375rem 0.375rem 0 !important;
}

/* Focus state maintains z-index */
.input-group .month-year-wrapper:focus-within {
  z-index: 3;
}

/**************************************************
 * Belegungskarten - Modernisierte Ansicht
 * HINWEIS: Liegen innerhalb .karte, daher eigener Look
 **************************************************/

/* Belegungskarte: Eigener Container (NICHT .karte verwenden!) */
.belegung-card {
  border-left-width: 0.5rem;
  /* Breiter linker Rahmen für Status-Codierung */
  border-radius: 0.3rem 0.5rem 0.5rem 0.3rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.belegung-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Status-Farben in msvplus-brand.css */

.belegung-card:last-child {
  margin-bottom: 0;
}

/* Status via Bootstrap border-Klassen im HTML, aber eigene Klasse für "ehemalig" */
.belegung-card.is-former {
  opacity: 0.8;
}

/* Kompakt-Header: 5-Spalten Grid (Desktop) */
.belegung-compact {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 1.25rem;
}

/* Titel und Untertitel */
.belegung-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.belegung-subtitle {
  font-size: 0.85rem;
}

/* Icon-Badge (Belegungstyp-Farbe) */
.belegung-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Icons in Belegungskarten müssen weiß sein - !important wegen inline-styles */
.belegung-icon i {
  color: white !important;
}

/* Belegungstyp-Farben und Gradienten in msvplus-brand.css */

/* Zeit/Ort und Preis Spalten */
.belegung-schedule,
.belegung-price {
  text-align: center;
  padding: 0;
  border-left: 1px solid var(--bs-border-color);
  padding-left: 1.25rem;
  min-width: 100px;
}

.belegung-schedule .value {
  font-weight: 600;
  font-size: 1rem;
}

.belegung-schedule .label {
  font-size: 0.8rem;
  color: var(--bs-secondary);
}


.belegung-price .amount,
.belegung-schedule .prepaid-counter {
  font-weight: 700;
  font-size: 1.25rem;
}

.belegung-price .period,
.belegung-schedule .prepaid-label {
  font-size: 0.8rem;
  color: var(--bs-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.belegung-price .strikethrough {
  position: relative;
  color: var(--bs-secondary);
  margin-right: 0.25rem;
}

.belegung-price .strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: .2rem solid var(--bs-danger);

  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg);
}


/* Toggle-Icon */
.belegung-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  transition: all 0.2s;
  flex-shrink: 0;
}

.belegung-toggle i {
  transition: transform 0.2s;
}

.belegung-card.expanded .belegung-toggle {
  background: #e9ecef;
}

.belegung-card.expanded .belegung-toggle i {
  transform: rotate(180deg);
}

/* Details: versteckt bis expanded */
.belegung-details {
  display: none;
  border-top: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

.belegung-card.expanded .belegung-details {
  display: block;
}

/* Details: 3-Spalten Grid */
.belegung-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.belegung-details-grid.cols-2 {
  grid-template-columns: 2fr 1fr;
}

.belegung-details-section {
  padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--bs-border-color);
}

.belegung-details-section:last-child {
  border-right: none;
}

.section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--bs-secondary);
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Info-Zeilen im Detail-Bereich */
.info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.info-content {
  flex: 1;
  min-width: 0;
}

.info-label {
  font-size: 0.75rem;
  margin-bottom: 0.1rem;
}

.info-value {
  flex: 1;
  min-width: 0;
}

.info-meta {
  font-size: 0.75rem;
}

/* Schnellzugriff-Footer */
.belegung-quick-access {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  background: var(--bs-secondary-bg);
  border-top: 1px solid var(--bs-border-color);
}

.belegung-quick-access-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bs-secondary);
}

.belegung-quick-access-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Dokumentenvorlagen-Link im Schnellzugriff als Button stylen */
.belegung-quick-access-buttons .msvplus-dokvor a {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1.5;
  border-radius: 0.25rem;
  border: 1px solid #6c757d;
  color: #6c757d !important;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.belegung-quick-access-buttons .msvplus-dokvor a:hover {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

/* Dark Mode Support */
html[data-bs-theme="dark"] .belegung-quick-access-buttons .msvplus-dokvor a {
  border-color: #adb5bd;
  color: #adb5bd;
}

html[data-bs-theme="dark"] .belegung-quick-access-buttons .msvplus-dokvor a:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

/* Dokumentenvorlagen-Toggle in nav-pills-Toolbars (Kurs, Prepaidkarte,
   Probestunde) wie ein regulärer .nav-link darstellen. Der per Ajax
   injizierte Toggle-Link bringt keine .nav-link-Klasse mit, sondern
   .link-body-emphasis (setzt color per !important) – daher hier ebenfalls
   !important. Werte über die --bs-nav-link-*-Variablen, damit Light/Dark
   automatisch passen. */
.nav-pills .msvplus-dokvor a {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--bs-nav-link-color) !important;
  text-decoration: none;
  transition: var(--bs-nav-link-transition);
}

.nav-pills .msvplus-dokvor a:hover,
.nav-pills .msvplus-dokvor a:focus {
  color: var(--bs-nav-link-hover-color) !important;
}

/* Senkrechte Reiterleisten (Konfigurationsseiten, Zuordnungen, Verfügbarkeiten):
   Reiter dürfen ihre Spalte nicht verlassen.

   Ohne diese Regeln bestimmt die kleinstmögliche Breite der längsten
   Beschriftung die Breite der Leiste. Ist die Spalte schmaler – auf mittleren
   Fensterbreiten ist sie nur wenige Zentimeter breit –, ragen die Reiter nach
   rechts heraus und verschwinden unter dem Inhaltsbereich, der als eigene
   Fläche darüber liegt: Beschriftungen wirken abgeschnitten, beim aktiven
   Reiter fehlt die rechte Hälfte der Einfärbung.

   flex-wrap verhindert zusätzlich, dass die Leiste bei vielen Reitern eine
   zweite Spalte aufmacht; hyphens/overflow-wrap erlauben den Umbruch innerhalb
   langer Komposita – bevorzugt an Silbengrenzen, notfalls hart. */
.nav.flex-column {
  flex-wrap: nowrap;
}

.nav.flex-column .nav-link {
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Responsive: Mobile */
@media (max-width: 992px) {
  .belegung-compact {
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
  }

  .belegung-schedule,
  .belegung-price {
    display: none;
  }

  .belegung-details-grid,
  .belegung-details-grid.cols-2 {
    grid-template-columns: 1fr;
  }

  .belegung-details-section {
    border-right: none;
    border-bottom: 1px solid var(--bs-border-color);
  }

  .belegung-details-section:last-child {
    border-bottom: none;
  }
}

/* Dark Mode - Farben in msvplus-brand.css */

/* Status-Legende für Kursbelegungen */
.belegungen-status-legend {
  display: flex;
  gap: 1.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.belegungen-status-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.belegungen-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Status-Dot-Farben in msvplus-brand.css */

/**************************************************
 * Termin-Cards - Kompakte Nachrichtenansicht
 * Inspiriert von .belegung-card, angepasst für
 * vertikales Layout in schmalen Spalten
 **************************************************/

/* Container: Ersetzt .card + .card-header + .card-body */
.termin-card {
  border: 1px solid #dee2e6;
  border-left-width: 0.35rem;
  border-radius: 0.3rem 0.5rem 0.5rem 0.3rem;
  margin-bottom: 0.5rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  transition: box-shadow 0.2s;
  position: relative;
}

.termin-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.termin-card:last-child {
  margin-bottom: 0;
}

/* Kopfzeile: Datum links, Actions rechts */
.termin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.termin-datum {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

/* Kompakte Action-Buttons */
.termin-actions {
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.termin-actions .btn {
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
  line-height: 1;
}

/* Kontext-Links: Inline-Flow statt vertikale Liste */
.termin-kontext {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.5rem;
  margin-bottom: 0.2rem;
  font-size: 0.85rem;
}

.termin-kontext a {
  white-space: nowrap;
}

.termin-kontext i {
  font-size: 0.8rem;
}

/* Termin-Text */
.termin-text {
  margin-bottom: 0.2rem;
  line-height: 1.4;
}

/* Truncation auf 2 Zeilen (nur bei langen Texten) */
.termin-text.termin-text-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Truncation aufheben wenn expandiert */
.termin-card.expanded .termin-text.termin-text-clamped {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Expand-Toggle */
.termin-expand-toggle {
  font-size: 0.75rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 0.15rem;
}

.termin-expand-toggle:hover {
  text-decoration: underline;
}

.termin-expand-toggle i {
  transition: transform 0.2s;
  font-size: 0.6rem;
}

.termin-card.expanded .termin-expand-toggle i {
  transform: rotate(180deg);
}

/* Label-Wechsel beim Expand */
.termin-card.expanded .termin-expand-label {
  display: none;
}

.termin-expand-hide-label {
  display: none;
}

.termin-card.expanded .termin-expand-hide-label {
  display: inline;
}

/* Metadaten-Zeile: User + Timestamp kompakt */
.termin-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.2rem;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  padding-top: 0.3rem;
  border-top: 1px solid var(--bs-border-color);
  margin-top: 0.3rem;
}

/* Expandierbarer Detail-Bereich */
.termin-details {
  display: none;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--bs-border-color);
}

.termin-card.expanded .termin-details {
  display: block;
}

/* Anmerkungen im Detail-Bereich */
.termin-details .list-group {
  font-size: 0.8rem;
}

.termin-details .list-group-item {
  padding: 0.4rem 0.6rem;
}

/* Terminindex: Mehr Platz bei kompakteren Cards */
.terminindex {
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;

  /* Scrollbar immer leicht sichtbar (override overflow-75 Sidebar-Farben).
     Nutzt Bootstrap --bs-body-color-rgb, das automatisch Light/Dark wechselt. */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--bs-body-color-rgb), 0.15) transparent;
}

.terminindex:hover {
  scrollbar-color: rgba(var(--bs-body-color-rgb), 0.3) rgba(var(--bs-body-color-rgb), 0.05);
}

/* Webkit: Scrollbar immer sichtbar statt nur bei Hover */
.terminindex::-webkit-scrollbar {
  width: 5px;
}

.terminindex::-webkit-scrollbar-thumb {
  background: rgba(var(--bs-body-color-rgb), 0.15);
  border-radius: 3px;
}

.terminindex:hover::-webkit-scrollbar-thumb {
  background: rgba(var(--bs-body-color-rgb), 0.3);
}

.terminindex::-webkit-scrollbar-track {
  background: transparent;
}


/**************************************************
 * Protokoll-Cards - Kompakte Darstellung
 * Konsistent mit .termin-card, angepasst für
 * Protokolleinträge mit Betreff + Kategorie-Farbe
 **************************************************/

/* Container */
.protokoll-card {
  border: 1px solid #dee2e6;
  border-left-width: 0.35rem;
  border-radius: 0.3rem 0.5rem 0.5rem 0.3rem;
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  position: relative;
}

.protokoll-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.protokoll-card:last-child {
  margin-bottom: 0;
}

/* Kategorie-Farben über linken Rand */
.protokoll-card.prot-success {
  border-left-color: var(--bs-success);
}

.protokoll-card.prot-info {
  border-left-color: var(--bs-info);
}

.protokoll-card.prot-danger {
  border-left-color: var(--bs-danger);
}

/* Kopfzeile: Betreff links, Actions rechts */
.protokoll-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 0.5rem;
}

.protokoll-betreff {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.85rem;
  overflow: hidden;
}

.protokoll-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.protokoll-actions .btn {
  padding: 0.15rem 0.35rem;
  font-size: 0.8rem;
}

/* Datum-Zeile */
.protokoll-datum {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  margin-top: 0.1rem;
}

/* Detail-Bereich (hidden by default via JS) */
.protokoll-details {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: 0.85rem;
}

/* Metadaten im Detail: Inline statt dl/dt/dd */
.protokoll-meta-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

/* Edit-Formular und Historie innerhalb der Card */
.protokoll-card .inline-form {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bs-border-color);
}

/* Raumliste */
.list-group-item.inaktiv {
  opacity: 0.6;
  background-color: var(--bs-secondary-bg);
}

.list-group-item.inaktiv a {
  color: var(--bs-secondary-color);
  text-decoration: line-through;
}

.raum-stats {
  font-size: 0.85rem;
  white-space: nowrap;
}

.raum-stats a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.raum-stats a:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

.raum-stats-sep {
  color: var(--bs-tertiary-color);
  margin: 0 0.15rem;
}

/* Textumbruch auf kleinen Screens erlauben */
@media (max-width: 575px) {
  .raum-stats {
    white-space: normal;
  }
}

/**************************************************
 * Druckansicht
 **************************************************/
@media print {

  .nichtdrucken,
  .nichtdrucken *,
  #sidebar,
  .floating-footer {
    display: none !important;
  }

  .container,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ps-sm-sb-1,
  .ps-lg-sb-3,
  body.sidebar-pinned .ps-sm-sb-1,
  body.sidebar-pinned .ps-lg-sb-3 {
    padding-left: 0 !important;
  }

  .karte {
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Verfügbarkeiten-Zeitfelder: Platz für Validierungs-Icon reservieren,
   damit disabled Inputs gleich breit wie validierte Inputs sind */
input[id^="verf_"]:disabled {
  padding-right: calc(1.5em + 0.75rem);
}

/* Optionsspezifische Regeln stehen als eingerückte Zeile unter ihrer Option
   und heben sich dafür leicht vom übrigen Tabellenkörper ab */
.option-regel-row > td {
  --bs-table-bg: var(--bs-tertiary-bg);
}

/**************************************************
 *
 * air-datepicker Anpassungen
 *
 **************************************************/

/* Brand-Farbe als Akzentfarbe */
.air-datepicker {
    --adp-accent-color: var(--brand, #4eb5e6);
    --adp-cell-background-color-selected: var(--brand, #4eb5e6);
    --adp-cell-background-color-selected-hover: color-mix(in srgb, var(--brand, #4eb5e6), #000 15%);
    --adp-background-color-selected-other-month: color-mix(in srgb, var(--brand, #4eb5e6), transparent 30%);
    --adp-background-color-selected-other-month-focused: color-mix(in srgb, var(--brand, #4eb5e6), transparent 15%);
    --adp-cell-border-color-in-range: var(--brand, #4eb5e6);
    --adp-btn-color: var(--brand, #4eb5e6);
    --adp-font-family: var(--bs-body-font-family);
    --adp-border-radius: var(--bs-border-radius);
    --adp-cell-border-radius: var(--bs-border-radius-sm);
    --adp-z-index: 1060;
}

/* Wochentagsnamen: neutralere Farbe statt Orange */
.air-datepicker {
    --adp-day-name-color: var(--bs-secondary-color);
    --adp-day-name-color-hover: var(--brand, #4eb5e6);
}

/* Datepicker-Inputs: Kalender-Icon anzeigen */
input[data-datepicker-visible] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .air-datepicker {
    --adp-background-color: var(--bs-body-bg);
    --adp-color: var(--bs-body-color);
    --adp-color-secondary: var(--bs-secondary-color);
    --adp-background-color-hover: var(--bs-tertiary-bg);
    --adp-background-color-active: var(--bs-secondary-bg);
    --adp-border-color: var(--bs-border-color);
    --adp-border-color-inner: var(--bs-border-color);
    --adp-border-color-inline: var(--bs-border-color);
    --adp-color-other-month: var(--bs-tertiary-color);
    --adp-color-other-month-hover: var(--bs-secondary-color);
    --adp-color-disabled: var(--bs-tertiary-color);
    --adp-nav-arrow-color: var(--bs-secondary-color);
    --adp-nav-color-secondary: var(--bs-secondary-color);
    --adp-day-name-color: var(--bs-secondary-color);
    --adp-time-track-color: var(--bs-border-color);
    --adp-background-color-in-range: color-mix(in srgb, var(--brand, #4eb5e6), transparent 85%);
    --adp-background-color-in-range-focused: color-mix(in srgb, var(--brand, #4eb5e6), transparent 75%);
}

/* Dark Mode: Pointer-Pfeil-Hintergrund */
[data-bs-theme="dark"] .air-datepicker--pointer:after {
    background: var(--bs-body-bg);
    border-top-color: var(--bs-border-color);
    border-right-color: var(--bs-border-color);
}

/* Dark Mode: Kalender-Icon heller */
[data-bs-theme="dark"] input[data-datepicker-visible] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23adb5bd'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E");
}

/* Mobile Overlay etwas dunkler im Dark Mode */
[data-bs-theme="dark"] .air-datepicker-overlay {
    --adp-overlay-background-color: rgba(0, 0, 0, .5);
}

/* ==========================================================================
   Ersteinrichtungs-Karte (Erste-Schritte-Assistent)
   ==========================================================================
   Dashboard-Karte, die neue Musikschulen durch die sieben Einrichtungsschritte
   führt (templates/index.tpl, Blöcke ERSTEINRICHTUNG_KARTE und
   ERSTEINRICHTUNG_ZEILE; Fachlogik in classes/ersteinrichtung.class.php).

   Gestaltungsidee („Editorial ruhig"): Die Schritte hängen an einer
   durchgehenden Satzlinie. Oberhalb des aktuellen Schritts ist sie
   durchgezogen und grün (erledigt), darunter fein gepunktet (offen) — der
   Fortschritt ist der Linienverlauf selbst, ohne zusätzlichen Balken.

   Farben ausschließlich über --dash-* und --bs-*; der einzige eigene Ton ist
   der Akzent unten, und der leitet sich per Fallback-Kette aus den
   Brand-Variablen ab. Dark Mode ergibt sich damit automatisch.
   ========================================================================== */

:root {
  /* Akzentfarbe des aktuellen Schritts. --brand-text ist der im Dark Mode
     aufgehellte, lesbare Brand-Ton (msvplus-brand.css). Fällt auf
     --bs-primary zurück, weil brand.css im barrierefreien Farbschema nicht
     geladen wird - dort bleibt es dann bei den Bootstrap-Standardfarben. */
  --eek-akzent: var(--brand-text, var(--bs-primary));
}

/* --------------------------------------------------------------------------
   Karte: Kopf
   -------------------------------------------------------------------------- */
.eek-kopf {
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--dash-border-soft);
}

.eek-kopf-zeile {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.eek-eyebrow {
  flex: 1;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
}

.eek-fortschritt {
  font-family: "Source Serif", "Merriweather", Georgia, serif;
  font-size: 0.95rem;
  color: var(--dash-text-muted-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.eek-fortschritt b {
  color: var(--dash-title);
  font-weight: 600;
}

.eek-karte .eek-titel {
  margin: 0.35rem 0 0;
  font-size: 1.62rem;
  line-height: 1.2;
}

.eek-sub {
  margin: 0.28rem 0 0;
  max-width: 62ch;
  font-size: 0.96rem;
  color: var(--dash-text-body);
}

/* Erfolgs-Variante: alle sieben Schritte erledigt */
.eek-fertig-kopf {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-top: 0.4rem;
}

.eek-fertig-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  font-size: 1.05rem;
  background-color: var(--dash-ok);
  color: var(--dash-surface);
}

.eek-fertig-kopf .eek-titel {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Karte: Checkliste an der Satzlinie
   -------------------------------------------------------------------------- */
.eek-liste {
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
}

.eek-item {
  position: relative;
  display: grid;
  grid-template-columns: 1.7rem 1.4rem 1fr auto;
  align-items: start;
  column-gap: 0.55rem;
  padding: 0.5rem 0;
}

/* die Satzlinie */
.eek-item::before {
  content: "";
  position: absolute;
  left: calc(1.7rem + 0.55rem + 0.7rem);
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1.5px dotted var(--dash-border-strong);
}

.eek-item.eek-erledigt::before {
  border-left-style: solid;
  border-left-color: var(--dash-ok);
  opacity: 0.7;
}

/* oberhalb des ersten und unterhalb des letzten Punktes endet die Linie
   auf Höhe der Markierung, statt frei auszulaufen */
.eek-item:first-child::before {
  top: 1.05rem;
}

.eek-item:last-child::before {
  bottom: calc(100% - 1.05rem);
}

.eek-num {
  text-align: right;
  line-height: 1.55;
  font-family: "Source Serif", "Merriweather", Georgia, serif;
  font-size: 0.95rem;
  color: var(--dash-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Die Markierung deckt die Satzlinie ab - deshalb eine gefüllte Fläche in
   Kartenfarbe, nicht nur ein Symbol. */
.eek-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background-color: var(--dash-surface);
  font-size: 0.82rem;
}

.eek-punkt-offen {
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid var(--dash-border-strong);
  border-radius: 50%;
}

.eek-erledigt .eek-mark {
  color: var(--dash-ok);
}

.eek-aktuell .eek-punkt-offen {
  width: 11px;
  height: 11px;
  border: 2px solid var(--eek-akzent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eek-akzent) 18%, transparent);
}

.eek-item .eek-punkt-titel {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--dash-title);
}

.eek-item.eek-erledigt .eek-punkt-titel {
  color: var(--dash-text-muted-2);
}

.eek-item.eek-aktuell .eek-punkt-titel {
  font-size: 1.16rem;
  color: var(--bs-heading-color);
}

.eek-punkt-text p {
  margin: 0.1rem 0 0;
  max-width: 58ch;
  font-size: 0.89rem;
  color: var(--dash-text-body);
}

.eek-item.eek-aktuell .eek-punkt-text p {
  margin-top: 0.22rem;
  font-size: 0.95rem;
}

.eek-status {
  padding-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--dash-text-muted);
  white-space: nowrap;
}

/* optionaler Punkt (geführte Tour): zählt nicht in den Fortschritt */
.eek-item.eek-optional .eek-num {
  visibility: hidden;
}

.eek-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--dash-border-soft);
  border-radius: 999px;
  font-size: 0.76rem;
  color: var(--dash-text-muted);
}

/* Aufgeklappter Bereich des aktuellen Schritts (Hinweis + Schaltfläche) */
.eek-extra {
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  margin-top: 0.5rem;
  animation: ee-aufklappen 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes ee-aufklappen {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.eek-hinweis {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--dash-info-border);
  border-radius: var(--bs-border-radius-sm);
  background-color: var(--dash-info-bg);
  font-size: 0.88rem;
  color: var(--dash-text-body);
}

.eek-hinweis > i {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--dash-info-icon);
}

/* --------------------------------------------------------------------------
   Karte: Fußzeile
   -------------------------------------------------------------------------- */
.eek-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.05rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--dash-border-softer);
}

.eek-foot-rechts {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.eek-dauer {
  font-size: 0.84rem;
  color: var(--dash-text-muted);
}

/* Die beiden Wegklick-Aktionen sollen sich zurücknehmen - Bootstrap-Knopf,
   aber in gedämpfter Textfarbe. */
.eek-aktion {
  --bs-btn-color: var(--dash-text-muted-2);
  --bs-btn-hover-color: var(--dash-text);
  --bs-btn-active-color: var(--dash-text);

  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Zurückgestellter Zustand: einzeilige Leiste
   -------------------------------------------------------------------------- */
.karte.eek-leiste {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem 0.5rem 0.9rem;
}

.eek-leiste-text {
  font-size: 0.95rem;
  color: var(--dash-text-body);
}

.eek-leiste-text b {
  color: var(--dash-title);
  font-weight: 600;
}

.eek-leiste-rest {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.eek-zaehler {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Schmale Fenster
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
  .eek-karte .eek-titel {
    font-size: 1.35rem;
  }

  .eek-item {
    grid-template-columns: 1.3rem 1.2rem 1fr;
  }

  .eek-item::before {
    left: calc(1.3rem + 0.55rem + 0.6rem);
  }

  .eek-status {
    grid-column: 3;
    padding-top: 0.25rem;
  }

  /* Haken und grüne Linie sagen bereits alles */
  .eek-item.eek-erledigt .eek-status {
    display: none;
  }

  .eek-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .eek-foot-rechts {
    margin-left: 0;
    justify-content: space-between;
  }
}