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

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

@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;
}

.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;
}

.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;
}

.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;
}

.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: 99;

  /* 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:hover::-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;
}

.sidebar:hover,
.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:hover::-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:hover::-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:hover::-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:hover .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:hover .sb-main-menu::-webkit-scrollbar,
.sidebar.static .sb-main-menu::-webkit-scrollbar {
  width: 6px;
}

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

.sidebar:hover .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:hover .sb-main-menu::-webkit-scrollbar-thumb,
.sidebar.static .sb-main-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

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

.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;
}

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

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

.sidebar:hover .sb-text,
.sidebar.static .sb-text,
.sidebar:hover a.nav-link,
.sidebar.static a.nav-link,
.sidebar:hover .sb-heading-hide,
.sidebar.static .sb-heading-hide {
  opacity: 1;
}

.sidebar:hover .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:hover .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:hover,
  .sidebar.static,
  .sidebar .collapse,
  .sidebar .sb-text,
  .sidebar a.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;
  }
}

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:hover,
  .sidebar.static {
    transition: none;
  }
  .sidebar .collapse {
    transition: none;
  }
  .sidebar .sb-text,
  .sidebar a.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.5em 2em;
}

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

#searchresults {
  overflow: auto;
  max-height: 80vh;
  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;
}

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

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

/**************************************************
 *
 * 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;
}

@media print {
  .nichtdrucken,
  .nichtdrucken * {
    display: none;
  }
}

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

/* Stundenplan-Tabelle: Feste Breite beibehalten, nicht auf 100% strecken */
.stundenplan {
  table-layout: fixed;
  width: max-content;
  border-collapse: separate;
  border-spacing: 0;
}

/* Wochenplan (WL/WR): volle Breite, Overflow ab konfigurierter Mindestbreite */
.stundenplan.stundenplan-fullwidth {
  table-layout: auto;
  width: 100%;
}
.stundenplan.stundenplan-fullwidth td.planspalte .std,
.stundenplan.stundenplan-fullwidth td.planspalte .vfg {
  width: 100% !important;
}

/* Sticky Header: bleibt beim Scrollen oben */
.stundenplan-header th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bs-body-bg);
}

/* Sticky Zeitspalte: bleibt beim horizontalen Scrollen links */
.stundenplan-header th.zeit-col {
  left: 0;
  z-index: 12;
}

.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.75rem 1rem;
}

.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-weight: 600;
  color: var(--bs-body-color);
}

.stundenplan-draggable {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  min-height: 800px;
  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;
  padding: .25rem;
}

/* 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;
  line-height: 1rem;
  box-shadow: none;
}

.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: .25rem;
  font-size: 1rem;
}

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

.plankurs .zeile2,
.plankursleer .zeile2 {
  background-color: var(--bs-secondary-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: 1rem;
   width: 1rem;
   position: absolute;
   z-index: 1;
   right: 0px;
   border-radius: .5rem;
}

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

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

.plankurs .neuinkurs {
  font-size: .8rem;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: var(--bs-border-radius-sm);
  white-space: nowrap;
}

.plankurs .kuendigung {
  font-size: .8rem;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: var(--bs-border-radius-sm);
  white-space: nowrap;
}

.plankurs .wechsel {
  font-size: .8rem;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: var(--bs-border-radius-sm);
  white-space: nowrap;
}

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

.plankurs .planschueler {
  overflow: visible;
}

.plankurs {
  transition: width .3s ease, opacity .3s ease, height .3s ease;
  z-index: revert;
  height: initial;
}

.plankurs:hover {
  width: calc(100% - 1px) !important;
  opacity: 1 !important;
  z-index: 3000 !important;
}

.plankurs:hover .zeile1,
.plankurs:hover .zeile2 {
  overflow: visible;
  white-space: normal;
}

.planschueler .kuendigung, .planschueler .wechsel {font-size:.8rem;}

/* Namen von Schüler:innen, Zahl gefolgt von <a> */
.planschueler {
  font-size: .9rem;
  color: currentColor;
}

.planschueler a {
   background-color: transparent !important;
}
.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
 *
 **************************************************/

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

/* 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-data select,
.dtsb-condition select {
  height: min-content;
}

.table-transparent {
  --bs-table-bg: transparent !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
 *
 **************************************************/

.trefferliste div {
  padding: 0.3rem 0.2rem;
}

.trefferliste div .col {
  margin: auto 0;
}

/* .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;
}

.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;
}

/* 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;
}

/* 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 */