/* ==========================================================================
	GBL Verpackung – Custom CSS (formatted; values unchanged)
========================================================================== */

/* 1) Variablen (Theme) */
:root {
	/* Feste Desktop-Höhe minus Topbar. Wird per JS beim Start aktualisiert */
	--topbar-h: 68px;
	
	/* Farben */
	--km-blue: #006AB3;
	--km-gold: #ffcc19;
	--km-gold-light: rgba(254, 205, 25, 0.3);
	--km-gray: #E4E6E8;
	--km-dark: #333333;
	--km-gray-2: #E5E5E5;
	--km-gray-3: #CCCCCC;
	--km-white: #FFFFFF;
	--km-petrol: #4d6766;
	--km-shadow: rgba(0,0,0,.04);
	/* Weitere Variablen */
	
	--km-regular: 15px;
}


/* 2) Scrollbar (WebKit/Blink) */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--km-white); }
::-webkit-scrollbar-thumb { background: var(--km-gray-2); }
::-webkit-scrollbar-thumb:hover { background: var(--km-gray-3); }


/* 3) Base */
body { 
	background: var(--km-gray); 
	font-size: var(--km-regular);
	font-family: 'Corporate S OT', sans-serif !important;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, span, small, strong, em,
label, a, li, ul, ol, div,
table, thead, tbody, tfoot, tr, th, td,
input, textarea, select, option, button,
.btn, .form-control, .form-select,
.card, .modal, .nav, .accordion,
.select2-container, .select2-selection, .select2-results__option {
  font-family: 'Corporate S OT', sans-serif !important;
}

.button,
.buttonArrow,
.buttonBlue,
.add-to-list,
.btn {
  border-radius: 25px !important;
  padding: 9px 30px;
  font-weight: 500;
  transition: all .2s ease;
  border: 1px solid transparent;
}

.buttonArrow,
.btn-sm {
  padding: 7px 16px;
}

.button.gold,
.btn-primary,
.btn-warning {
  background-color: #FFCC1A !important;
  border-color: #FFCC1A !important;
  color: #1f2937 !important;
  box-shadow: none !important;
}

.buttonBlue,
.add-to-list,
.btn-secondary,
.btn-outline-secondary {
  background-color: #FFFFFF !important;
  border-color: #006AB3 !important;
  color: #006AB3 !important;
  box-shadow: none !important;
}

.button.gold:hover,
.buttonBlue:hover,
.add-to-list:hover,
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-warning:hover,
.btn-warning:focus-visible,
.btn-warning:active,
.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-secondary:active,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active {
  background-color: #006AB3 !important;
  border-color: #006AB3 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.button:hover,
.button.active:hover,
.buttonArrow:hover,
.buttonArrow.gold {
  background-color: #006AB3 !important;
  border-color: #006AB3 !important;
  color: #FFFFFF !important;
}

/* Radio button labels (btn-check + .btn) in project blue */
.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary,
.btn-check:focus + .btn-outline-secondary {
  background-color: #006AB3 !important;
  border-color: #006AB3 !important;
  color: #FFFFFF !important;
}

.inline-edit-btn .bi,
.btn .bi-pencil,
.btn .bi-pencil-square,
.btn .bi-info-circle,
.btn .bi-info-circle-fill {
  color: #006AB3 !important;
}

hr {
	border-top: 1px solid #26332E;
}

.summary-actions hr {
  border-top-color: #26332E !important;
}

.configurator-actions {
  flex: 0 0 auto;
  padding-top: .45rem;
}

.configurator-actions hr {
  border-top-color: #CED9D9 !important;
  opacity: 1;
}

.config-icon-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.configurator-action-buttons {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
}

.configurator-action-buttons #btn-prev-tab {
  justify-self: start;
}

.configurator-action-buttons #btn-step-notes {
  justify-self: center;
}

.configurator-action-buttons #btn-next-tab {
  justify-self: end;
}

/* 4) Wizard / Tabs / Topbar */
.wizard-tabs {
	position: sticky;
	top: 0;
	z-index: 1030; /* über Content */
	border-bottom: 0px solid var(--km-gray-2);
}

#topbar { background-color: var(--km-gray); }

#topbar h4 {
	margin-top: 0px;
	padding: 15px;
	display: block;
	text-align: center;
	color: var(--km-white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: min(74vw, 1200px);
	min-width: 0;
}

#topbar .container-xxl > .d-flex:first-child {
  min-width: 0;
}

#projectTitle {
  display: inline-block;
  max-width: min(56vw, 960px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

#main_image {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#main_image.is-fading {
  opacity: 0;
  transform: scale(0.98);
}




/* 5) Spalten & Boxen */
.column-scroll {
	height: calc(100vh - var(--topbar-h) - 64px);
	padding-bottom: 1rem; /* etwas Luft für Shadow an Unterkante */
}

.column-scroll .card-body { overflow: auto; }

.summary-box,
.form-box,
.stage-box {
	background: var(--km-white);
	border: 1px solid #E9C230;
	border-radius: .75rem;
	box-shadow: 0 1px 2px var(--km-shadow);
}

.colhead { border-bottom: 1px solid #E9C230; }

.summary-accordion .accordion-item {
	border: 1px solid #CED9D9;
	border-radius: .75rem;
	overflow: hidden;
	margin-bottom: .75rem;
}

.summary-accordion .accordion-button {
	background: var(--km-white);
	color: var(--km-blue);
	font-weight: 400;
	font-size: .92rem;
	line-height: 1.2;
	padding: .55rem .8rem;
	box-shadow: none;
}

.summary-accordion .accordion-button:not(.collapsed) {
	background: rgba(4, 91, 170, .06);
	color: var(--km-blue);
	font-weight: 600;
}

.summary-accordion .accordion-button:focus {
	box-shadow: none;
}

.summary-accordion .accordion-body {
	padding: 1rem;
}

.summary-upload-list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .25rem;
}

.summary-upload-file {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: .35rem;
	max-width: 100%;
}

.summary-upload-file a {
	min-width: 0;
	overflow-wrap: anywhere;
}

.summary-upload-delete-btn {
	border: 0;
	background: transparent;
	color: #8A1F2D;
	padding: .05rem .15rem;
	line-height: 1;
	flex: 0 0 auto;
}

.summary-upload-delete-btn:hover,
.summary-upload-delete-btn:focus {
	color: #B42335;
}

.procedure-packs-link,
.procedure-packs-link:visited {
	color: #006AB3;
	text-decoration: underline;
}

.procedure-packs-link:hover,
.procedure-packs-link:focus {
	color: #004F86;
}


/* 6) Thumbnails / Slider */
.thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .5rem;
}

.thumbs button {
	padding: 0;
	background: var(--km-white);                 
	border: 1px solid var(--km-gray-2);        
	border-radius: .5rem;
  aspect-ratio: 5 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.thumbs img,
.thumbs video {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: .35rem;
  object-fit: cover;
  object-position: center center;
}

.final-packaging-summary-preview {
	flex: 1 1 auto;
	height: 100%;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #ffffff 0%, #f5f7f8 100%);
	border: 1px solid #CED9D9;
	border-radius: 1rem;
	padding: 1.1rem 1.1rem 1rem;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.final-packaging-summary-preview__header {
	padding-bottom: .85rem;
	margin-bottom: .95rem;
	border-bottom: 1px solid #CED9D9;
}

.final-packaging-summary-preview__header h5 {
	color: #26332E;
	font-weight: 600;
}

.final-packaging-summary-preview__content {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding-right: .2rem;
}

.final-packaging-summary-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9rem;
}

.final-packaging-summary-card {
	background: #FFFFFF;
	border: 1px solid #CED9D9;
	border-radius: 1rem;
	padding: .9rem 1rem;
}

.final-packaging-summary-card__title {
	font-size: .95rem;
	font-weight: 600;
	color: #26332E;
	margin-bottom: .65rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid #E4E6E8;
}

.final-packaging-summary-card__row + .final-packaging-summary-card__row {
	margin-top: .45rem;
}

.final-packaging-summary-card__row--split {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: .75rem;
}

.final-packaging-summary-card__label {
	color: #6b7280;
	font-size: .82rem;
}

.final-packaging-summary-card__value {
	font-size: .84rem;
	font-weight: 600;
	color: #26332E;
	text-align: right;
}

.final-packaging-summary-card__value--multiline {
	white-space: pre-wrap;
}

.final-packaging-summary-card__value--block {
	text-align: left;
	font-weight: 400;
}

.final-packaging-summary-card__value a {
	color: #006AB3;
	text-decoration: none;
}

.final-packaging-summary-card__value a:hover {
	text-decoration: underline;
}

@media (max-width: 1199.98px) {
	.final-packaging-summary-grid {
		grid-template-columns: 1fr;
	}
}


/* 7) Header / Navbar */
.navbar {
	padding: 0 10px 0 6px;
	border-bottom: 1px solid var(--km-gray-2);
}
.dark {
	background-color: var(--km-dark);
	color: var(--km-white);
	border-bottom: 0;
}

.card .card-header {
    color: #3b3f5c;
    border-bottom: 1px solid #e0e6ed;
    padding: 0rem;
}
/* .nav { margin } */


/* 8) Cards & Buttons */
.card-header { 
	background-color: var(--km-dark); 
} 

.card-header h5 { 
	color: #FFFFFF; 
	font-size: var(--km-regular)
}

.btn-warning { background-color: var(--km-gold); }


/* 9) Nav-Tabs (active) */
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	color: var(--km-white);
	background-color: var(--km-blue);
	border-color: var(--km-dark);
}

/* Configurator tab header: normal tabs */
.form-box .card-header .nav.nav-pills,
.summary-box .card-header .nav.nav-pills {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  gap: .35rem;
}

.form-box .card-header .nav.nav-pills .nav-link,
.summary-box .card-header .nav.nav-pills .nav-link {
  border: none !important;
  border-radius: 25px !important;
  background: transparent !important;
  color: #E9C230 !important;
  padding: 7px 18px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: all .2s ease;
}

.form-box .card-header .nav.nav-pills .nav-link:hover:not(:disabled),
.form-box .card-header .nav.nav-pills .nav-link.active,
.summary-box .card-header .nav.nav-pills .nav-link.active {
  background: #FFFFFF !important;
  color: #E9C230 !important;
}

/* Summary header title: no hover effect */
.summary-box .card-header .nav.nav-pills .nav-link:hover:not(:disabled) {
  background: transparent !important;
  color: #E9C230 !important;
}

.form-box .card-header .nav.nav-pills .nav-link:disabled,
.summary-box .card-header .nav.nav-pills .nav-link:disabled {
  opacity: .45 !important;
  background: transparent !important;
  color: #E9C230 !important;
}

/* Remove remaining separator line in configurator card header */
.form-box .colhead.card-header,
.form-box .card-header.colhead,
.form-box .card-header {
  border-bottom: 0 !important;
}

/* Ensure pseudo-element arrow is not clipped by header container */
.form-box .card-header {
  overflow: visible !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

/* Remove white line from nested navbar in configurator/dashboard headers */
.form-box .card-header .navbar,
.summary-box .card-header .navbar,
.dashboard-card .card-header .navbar,
.form-box .card-header .simple-pill,
.summary-box .card-header .simple-pill,
.dashboard-card .card-header .simple-pill {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Keep header button row vertically centered */
.form-box .card-header.colhead,
.summary-box .card-header.colhead,
.dashboard-card .card-header.colhead {
  display: flex !important;
  align-items: center !important;
}

.form-box .card-header .nav.nav-pills,
.summary-box .card-header .nav.nav-pills {
  align-items: center !important;
}

/* Summary tab labels */
.summary-box .card-header .nav-link,
.summary-box .card-header .nav-link strong {
  color: #E9C230 !important;
}


/* 10) Formulare */
.form-control { padding: 5px; }

.form-label { font-weight: 600; }

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




/* Modal optisch an normale Cards angleichen */
.modal-content {
  border-radius: var(--bs-border-radius-lg);
  border: 0;
  box-shadow: var(--bs-box-shadow-lg);
}

.modal-header {
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
}

#freshProjectIntroModal .modal-header {
  justify-content: flex-end;
}

#freshProjectIntroModal.show {
  display: block;
  z-index: 1065;
}

.modal-title {
  font-weight: 600;
}

.modal-body {
  padding: 1.5rem;
  background: var(--bs-body-bg);
}

.modal-footer {
  border-top: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
}

.modal .form-label {
  font-weight: 500;
}

.modal .form-control,
.modal .form-select {
  border-radius: var(--bs-border-radius);
}


.modal-content .modal-footer button.btn {
    font-weight: 300 !important;
    padding: 10px 25px;
    letter-spacing: 1px;
}


/* 11) Media Queries */
@media (max-width: 991.98px) {
	/* Hinweis: Oben ist `height` gesetzt; `max-height: none` hat hier keine Wirkung.
	Wenn gewünscht, auf `height: auto;` ändern (würde den Wert allerdings ändern). */
	.column-scroll { max-height: none; }
}
@media (min-width: 1600px) {
	.container-xxl { max-width: 1560px; }
}

/* Wizard layout: keep nav buttons anchored to bottom */
.form-box.column-scroll .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.wizard-content-row {
  flex: 1 1 auto;
  min-height: 0;
}

.form-box .config-input-column .mb-3 {
  margin-bottom: 1.5rem !important;
}

.packaging-concept-choices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.packaging-concept-choices .packaging-concept-option {
  white-space: normal;
  text-align: left;
}

@media (min-width: 992px) {
  .form-box.column-scroll {
    display: flex;
    flex-direction: column;
  }

  .form-box.column-scroll .card-header {
    flex: 0 0 auto;
  }

  .form-box .wizard-content-row {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .form-box .config-input-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .form-box .config-input-column .tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-anchor: none;
    padding-right: .35rem;
  }

  .form-box .config-media-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .form-box .config-media-column #conceptMediaStage {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
  }

  .form-box .config-media-column #conceptCarousel {
    flex: 0 0 auto;
    min-height: 0;
  }

  .form-box .config-media-column #conceptCarousel .carousel-inner {
    flex: 0 0 auto;
    min-height: 0;
    aspect-ratio: 4.5 / 3;
  }
}

.wizard-nav-row {
  margin-top: auto;
  padding-top: .45rem;
  padding-bottom: 0;
}

.summary-box.column-scroll .card-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.summary-state-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: .25rem;
}

.summary-actions {
  flex: 0 0 auto;
  padding-bottom: 0;
}

/* noUI */
/* Standard: verstecken */
.noUi-handle .noUi-tooltip {
	opacity: 0;
	transition: opacity .15s ease-in-out;
	pointer-events: none; /* Tooltip nicht anklickbar */
}

/* Beim Draggen zeigen (Handle hat .noUi-active) */
.noUi-handle.noUi-active .noUi-tooltip {
	opacity: 1;
}

.noUi-handle:hover .noUi-tooltip { opacity: 1; }

.noUi-connect {background-color: var(--km-blue);}

/* Keep dimension slider handles fully visible at min/max values */
#lenSlider,
#diaInclSlider,
#shaftDiaSlider,
#thicknessSlider,
#widthSlider {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}


/* Transitions */
.transition {
	margin-bottom: 1rem;
	border-radius: var(--bs-border-radius);
	background: url("https://catalog.kometmedical.com/img/mpg/no-image.png") center top no-repeat;
	background-size: contain;
	max-width: 360px;
	height: 0;
	padding-top: 62.5%;

	/* max-width: -webkit-fill-available; */

	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
}

.btn-check:disabled+.btn, .btn-check[disabled]+.btn {
    pointer-events: none;
    filter: none;
    opacity: .3;
}

/* Dashboard */
.dashboard-card {
  border-radius: .85rem;
  border: 1px solid var(--km-gray-2);
  box-shadow: 0 1px 2px var(--km-shadow);
}

.dashboard-card .card-header {
  background: var(--km-dark);
  border-bottom: 1px solid var(--km-gray-2);
  padding: 0rem;
}

/* Match card headers to tab header height */
.colhead.card-header {
  height: 56px;
  min-height: 56px;
}

.recent-project-item {
  border: 0;
  border-bottom: 1px solid var(--km-gray-2);
  padding: .85rem 1rem;
}

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

.dashboard-filters .form-select,
.dashboard-filters .btn {
  height: 40px;
}

.dashboard-filters .form-select {
  padding-top: .35rem;
  padding-bottom: .35rem;
}

/* Match configurator selects to dashboard/button height */
.form-select {
  height: 40px;
  padding-top: .35rem;
  padding-bottom: .35rem;
}

.select2-container .select2-selection--single {
  height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
}

/* Select2 clear ("remove all items") styled to match dropdown caret */
.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container--default .select2-selection--multiple .select2-selection__clear {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 16px;
  font-weight: 600;
  width: 16px;
  height: 16px;
  color: #6c757d;
  opacity: .85;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select2-container--default .select2-selection--single .select2-selection__clear::before,
.select2-container--default .select2-selection--multiple .select2-selection__clear::before {
  content: none;
  display: none;
}

.select2-container--default .select2-selection__clear {
  display: none !important;
}

.dashboard-table {
  margin-top: .25rem;
}

.dashboard-card .card-body {
  padding: 1.25rem;
}

.pdf-snapshot-list {
  border-top: 1px solid var(--km-gray-2);
}

.pdf-snapshot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
  padding: .7rem 0;
  border-bottom: 1px solid var(--km-gray-2);
}

.pdf-snapshot-row__meta {
  min-width: 0;
}

.pdf-snapshot-row__meta .small {
  overflow-wrap: anywhere;
}

.pdf-snapshot-row__actions {
  display: flex;
  flex: 0 0 auto;
  gap: .4rem;
}

.pdf-snapshot-row__actions .btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 575.98px) {
  .pdf-snapshot-row {
    align-items: flex-start;
  }
}

.dataTables_wrapper .dataTables_filter {
  margin-bottom: .75rem;
}

.dataTables_wrapper .dataTables_filter input {
  height: 38px;
  padding: .35rem .5rem;
  border-radius: .5rem;
  border: 1px solid var(--km-gray-2);
}

.dataTables_wrapper .dataTables_length select {
  height: 38px;
  padding: .35rem .5rem;
  border-radius: .5rem;
  border: 1px solid var(--km-gray-2);
  min-width: 80px;
}

table.dataTable tbody td {
  padding: .7rem .75rem;
}

table.dataTable thead th {
  padding: .85rem .75rem;
}
/* Match datatable header to dashboard card header */
.dashboard-table thead th {
  background: var(--km-gray-2);
  border-bottom: 1px solid var(--km-gray-2);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  /* padding: .2rem .6rem; */
  /* margin: 0 .15rem; */
  border-radius: .5rem;
}

/* Concept info overlay */
.concept-media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

#conceptMediaStage {
  flex: 1 1 auto;
  min-height: 0;
}

#conceptCarousel .carousel-inner {
  aspect-ratio: 4.5 / 3;
}

#conceptCarousel .carousel-item,
#conceptCarousel .carousel-item img,
#conceptCarousel .carousel-item video {
  height: 100%;
}

#conceptCarousel .carousel-item img,
#conceptCarousel .carousel-item video,
#main_image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

#conceptCarousel .carousel-item img,
#conceptCarousel .carousel-item video {
  cursor: zoom-in;
}

#conceptCarousel .carousel-inner {
  background: #ffffff;
}

.main-image-caption {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: right;
}

#conceptCarousel .carousel-control-prev,
#conceptCarousel .carousel-control-next {
  width: 56px;
  opacity: 1;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#conceptCarousel .carousel-control-prev-icon,
#conceptCarousel .carousel-control-next-icon {
  background-color: #006AB3;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  background-size: 55% 55%;
}

#imageLightboxModal .modal-dialog {
  max-width: min(1200px, 96vw);
  margin: 2vh auto;
}

#imageLightboxModal .modal-content {
  background: #ffffff;
  height: auto;
  max-height: 96vh;
  overflow: hidden;
}

#imageLightboxModal .modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.12);
  flex: 0 0 auto;
}

#imageLightboxModal .modal-title {
  color: #1f2937;
}

#imageLightboxModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: .75rem;
  padding-bottom: .75rem;
}

#lightboxCarousel .carousel-inner {
  flex: 0 1 auto;
  width: 100%;
  aspect-ratio: 6 / 3;
  max-height: calc(96vh - 260px);
  min-height: 0;
  background: #ffffff;
  overflow: hidden;
}

#lightboxCarousel .carousel-item,
#lightboxCarousel .carousel-item img,
#lightboxCarousel .carousel-item video {
  height: 100%;
}

#lightboxCarousel .carousel-item img,
#lightboxCarousel .carousel-item video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

#lightboxCarousel .carousel-item img {
  cursor: zoom-in;
  transition: transform .2s ease;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

#lightboxCarousel .carousel-item img.is-zoomed {
  transform: translate(var(--zoom-x, 0px), var(--zoom-y, 0px)) scale(var(--zoom-scale, 1.8));
  cursor: grab;
}

#lightboxCarousel .carousel-item img.is-zoomed.is-panning {
  cursor: grabbing;
  transition: none;
}

#imageLightboxModal .carousel-control-prev,
#imageLightboxModal .carousel-control-next {
  width: 56px;
  opacity: 1;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#imageLightboxModal .carousel-control-prev-icon,
#imageLightboxModal .carousel-control-next-icon {
  background-color: #006AB3;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  background-size: 55% 55%;
  box-shadow: none !important;
}

#imageLightboxModal #lightboxThumbIndicators {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  flex: 0 0 auto;
  max-height: 22vh;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: .15rem;
}

#imageLightboxModal #lightboxThumbIndicators {
  scrollbar-width: thin;
}

#imageLightboxModal #lightboxThumbIndicators button {
  flex: 0 0 auto;
  width: clamp(120px, 16vw, 210px);
  border-color: #CED9D9;
}

.modal .btn-close {
  --bs-btn-close-opacity: 1;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-focus-shadow: none;
  --bs-btn-close-bg: none;
  opacity: 1 !important;
  filter: none !important;
  background-color: #CED9D9 !important;
  background-image: none !important;
  border-radius: 999px;
  border: 1px solid #CED9D9;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal .btn-close::before {
  content: "\f62a"; /* bootstrap-icons: x-lg */
  font-family: "bootstrap-icons", sans-serif;
  font-size: 1rem;
  line-height: 1;
  color: #006AB3;
}

.modal .btn-close:hover,
.modal .btn-close:focus,
.modal .btn-close:active {
  background-color: #CED9D9 !important;
  opacity: 1 !important;
}

/* Disable hover jump/transform animation on all buttons */
button,
.btn,
.button,
.buttonArrow,
.buttonBlue,
.add-to-list,
.inline-edit-btn {
  transform: none !important;
  translate: none !important;
}

button:hover,
button:focus,
button:active,
.btn:hover,
.btn:focus,
.btn:active,
.button:hover,
.button:focus,
.button:active,
.buttonArrow:hover,
.buttonArrow:focus,
.buttonArrow:active,
.buttonBlue:hover,
.buttonBlue:focus,
.buttonBlue:active,
.add-to-list:hover,
.add-to-list:focus,
.add-to-list:active,
.inline-edit-btn:hover,
.inline-edit-btn:focus,
.inline-edit-btn:active {
  transform: none !important;
  translate: none !important;
}

.concept-info {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  color: #2b2f44;
  border: 1px solid #E9C230;
  border-radius: .5rem;
  padding: .6rem .75rem;
  font-size: .8rem;
  line-height: 1.35;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  max-width: 55%;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}

.concept-info__text {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}

.concept-info__toggle {
  flex: 0 0 auto;
  width: 1rem;
  text-align: center;
  color: #006AB3;
  font-weight: 700;
  line-height: 1.35;
}

.concept-info--collapsed .concept-info__toggle::before {
  content: "\F282";
  font-family: "bootstrap-icons";
}

.concept-info--expanded .concept-info__toggle::before {
  content: "\F286";
  font-family: "bootstrap-icons";
}

.concept-info--collapsed {
  overflow: hidden;
  white-space: nowrap;
}

.concept-info--collapsed .concept-info__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.concept-info--collapsed br {
  display: none;
}

.concept-info--expanded {
  max-width: min(72%, 620px);
  max-height: 70%;
  overflow: auto;
  white-space: normal;
}

.concept-info:focus-visible {
  outline: 2px solid #006AB3;
  outline-offset: 2px;
}

.concept-info--notice {
  cursor: default;
  user-select: text;
  display: block;
  max-width: min(55%, 520px);
}

.select2-container--default .select2-results__option--disabled {
    color: #e3e3e3 !important;
}

.login {
    top: 4rem;
    position: relative;
}

/* Info blocks in center area */
.form-box .alert {
  border-color: #E9C230 !important;
}

@media (min-width: 992px) {
  .wizard-content-row > .col-lg-8 {
    position: relative;
    padding-left: 1.4rem;
  }

  .wizard-content-row > .col-lg-8::before {
    content: "";
    position: absolute;
    left: .35rem;
    top: 0;
    bottom: .8rem;
    width: 1px;
    background: #CED9D9;
  }
}

.login-logo {
  display: block;
  width: min(100%, 320px);
  max-width: calc(100% - 2rem);
  height: auto;
  margin: 1.75rem auto 1.25rem auto;
  border-radius: 0;
}

/* Final enforced dashboard/configurator colors */
.card-header,
.colhead.card-header {
  background-color: var(--km-dark) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

.dashboard-card .card-header {
  background-color: var(--km-dark) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* Dashboard header: remove residual separator lines from nested nav */
.dashboard-card .card-header .navbar,
.dashboard-card .card-header .nav,
.dashboard-card .card-header .nav-link,
.dashboard-card .card-header .nav-item {
  border: 0 !important;
  box-shadow: none !important;
}

.dashboard-card .card-header .navbar::before,
.dashboard-card .card-header .navbar::after,
.dashboard-card .card-header .nav::before,
.dashboard-card .card-header .nav::after,
.dashboard-card .card-header .nav-link::before,
.dashboard-card .card-header .nav-link::after {
  content: none !important;
  display: none !important;
}

/* Dashboard card-header headline in white */
.dashboard-card .card-header .nav-link,
.dashboard-card .card-header .nav-link strong,
.dashboard-card .card-header h5 {
  color: #E9C230 !important;
}

table.dataTable thead th,
table.dataTable thead td,
.dashboard-table thead th {
  background: #7D8582 !important;
  color: #FFFFFF !important;
}

table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > *,
.dashboard-table.table-striped > tbody > tr:nth-of-type(odd) > *,
table.dataTable.stripe > tbody > tr.odd > *,
table.dataTable.display > tbody > tr.odd > * {
  background-color: #E4E6E8 !important;
}

table.dataTable.table-hover > tbody > tr:hover > *,
.dashboard-table.table-hover > tbody > tr:hover > * {
  background-color: inherit !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #B3B8B6 !important;
  border-color: #B3B8B6 !important;
  color: #1f2937 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.page-item.active .page-link {
  background: #006AB3 !important;
  border-color: #006AB3 !important;
  color: #FFFFFF !important;
}

@media (max-width: 575.98px) {
  .login-logo {
    width: min(100%, 260px);
    margin-top: 1.25rem;
  }
}

/* Vollbild-Overlay */
.app-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;               /* über deinen Cards/Carousels */
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* sichtbarer Zustand via [data-on] Attribut */
.app-loader[data-on="1"]{
  opacity: 1;
  pointer-events: auto;
}

.app-loader__box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}

.app-loader__text{
  font-size: .95rem;
  color: #444;
}

/* Form und Inhalt beim Start ausblenden */
body[data-restoring="1"] .column-scroll,
body[data-restoring="1"] .stage-box,
body[data-restoring="1"] .summary-box {
  visibility: hidden;
}

body:not([data-restoring="1"]) .column-scroll,
body:not([data-restoring="1"]) .stage-box,
body:not([data-restoring="1"]) .summary-box {
  animation: fadeIn .25s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* sanfter, zu deinem Look passend */
.noUi-target{ border:none; background:var(--bs-light); box-shadow: inset 0 1px 3px rgba(0,0,0,.08); height:.5rem; border-radius:1rem; }
.noUi-connect{ background:var(--bs-warning); }
.noUi-handle{ border:2px solid var(--bs-warning); background:#fff; border-radius:50%; width:1rem; height:1rem; top:-4px; box-shadow:0 1px 3px rgba(0,0,0,.2); }