/* =========================================
   ALLGEMEINE STYLES
   ========================================= */

/* Basis Schriftgröße für die gesamte App */
html {
  font-size: 16px; /* Basis-Schriftgröße - entspricht 100% */
}

/* Basis-Schriftart für die gesamte App */
body {
  font-family: "Futur", sans-serif;
  font-size: 16px; /* Explizit 16px statt Browser-Default */
  line-height: 1.5; /* Verbesserte Lesbarkeit */
}

@font-face {
  font-family: "Futur";
  src: url("futur.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

p {
  font-size: 16px; /* Explizit statt "medium" */
  margin-bottom: 1em;
}

/* Überschriften mit klaren Größen */
h1 { font-size: 2.5rem; }   /* 40px bei 16px Basis */
h2 { font-size: 2rem; }     /* 32px */
h3 { font-size: 1.75rem; }  /* 28px */
h4 { font-size: 1.5rem; }   /* 24px */
h5 { font-size: 1.25rem; }  /* 20px */
h6 { font-size: 1rem; }     /* 16px */

/* =========================================
   HEADER UND NAVIGATION
   ========================================= */

/* Logo und Navbar */
.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover {
  background-color: #ffffff;
}

.skin-blue .main-header .navbar {
  background-color: #ffffff;
  border-bottom-style: none;
}

.navbar.navbar-default .container-fluid { 
  max-width: 1140px;
  padding-left: 15px !important;
  margin-left: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.navbar > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.navbar.navbar-default.navbar-static-top {
  border-color: #f2f2f2;
  background-color: #f2f2f2;
  color: #262626;
}

.navbar-brand {
  width: auto !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 100px !important;
}

.navbar-header {
  width: auto !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.navbar-default > li > a, .navbar-brand {
  padding-top: 4px !important; 
  padding-bottom: 0 !important;
  padding-left: 0 !important;   
  min-height: 100px !important;
  background-color: #f2f2f2;
  color: #262626;
  font-weight: 600;
}


/* Anleitung-Button vertikal zentrieren */
.anleitung-button {
  display: flex !important;
  align-items: center !important;
    margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}


.anleitung-button > div,
.anleitung-button .btn {
  margin-top: 0 !important;
  vertical-align: middle !important;
}

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
  text-decoration: underline;
  background-color: #f2f2f2;
  color: #262626;
  font-weight: 600;
}

.nav > li > a:hover {
  text-decoration: underline;
  background-color: #f2f2f2;
  color: #262626;
  font-weight: 600;
}

.navbar {
  min-height: 100px !important;
}

.navbar .navbar-nav {
  float: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.btn.dropdown-toggle.btn-default, 
.btn.dropdown-toggle.btn-default:hover {
  background-color: #ffffff;
}

/* =========================================
   COLLAPSIBLE BOXES
   ========================================= */

/* Buttons und Icons */
.btn.btn-box-tool, 
.btn.btn-box-tool:after, 
.btn.btn-box-tool:before {
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  border-style: groove;
  -webkit-box-shadow: none; 
  -moz-box-shadow: none; 
} 

.btn.btn-box-tool:hover, 
#strat1.btn.btn-box-tool:hover {
  background-color: #dcdcdc;
}

.btn.btn-box-tool:focus, 
#strat1.btn.btn-box-tool:focus {
  border: 1px;
  border-color: #000000;
  border-style: solid;
} 

.fas.fa-plus, 
.fas.fa-plus::before, 
.fas.fa-plus::after, 
.fas.fa-minus {
  font-size: 26px;
  color: #ec6600;
  text-align: center;
}

.fas.fa-plus:focus, 
.fas.fa-minus:focus {
  border: 1px;
  border-color: black;
  border-style: solid;
}

/* Box Styles */
.box, 
.box.collapsed-box {
  -webkit-box-shadow: none; 
  -moz-box-shadow: none;
  box-shadow: none;
  border: 0;
  margin-bottom: 30px;
}

.box-header {
  color: #262626;
    background: #f2f2f2;
    border: 0.2px solid #bfbfbf;
  -webkit-box-shadow: none; 
  -moz-box-shadow: none;
  box-shadow: none;
  padding: 0 10px 20px 0;
  position: relative;
}

.box-header .box-title {
  font-weight: 600;
  font-size: 20px;
  color: #262626;
}

.box-header h3 {
  width: 100%;
  padding: 10px;
}

.box-body {
  color: #000000;
  padding: 21px;
  background: #f2f2f2;
  border-top-style: none;
  border: 0.2px solid #bfbfbf;
  border-top: none;
  -webkit-box-shadow: none; 
  -moz-box-shadow: none;
  box-shadow: none;
}

/* Styling der Foldouts */
.box-tools.pull-right {
  margin-top: 10px;
}

.box-title img {
  margin-top: 5px;
  display: inline-block;
}

.box-title.zert_header {
  margin-top: -27px;
  display: inline-block;
}

p img {
  margin-bottom: 12px;
}

/* =========================================
   PRODUKTVERGLEICHS-BUTTONS STYLING
   ========================================= */

/* Alle Entfernen Button */
#strat1-remove_all {
  background-color: #6c757d !important;
  border: none !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 8px 25px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  width: 150px !important;
  height: 35px !important;
  display: inline-block !important;
  text-align: center !important;
  line-height: 1.2 !important;
  margin-bottom: 15px !important;
  margin-top: 15px !important;
  font-size: 16px !important;
  vertical-align: middle !important;
  box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2) !important;
}

#strat1-remove_all:hover {
  background-color: #5a6268 !important;
  border-color: #545b62 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3) !important;
  text-decoration: none !important;
}

#strat1-remove_all:focus {
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.3) !important;
  outline: none !important;
  text-decoration: none !important;
}

/* Vergleich starten Button */
#strat1-start_comparison {
  background: linear-gradient(135deg, #ec6600 0%, #f39200 100%) !important;
  border: none !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 8px 25px !important;
  font-weight: 500 !important;
  box-shadow: 0 3px 6px rgba(236, 102, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  width: 330px !important;
  height: 35px !important;
  display: inline-block !important;
  text-align: center !important;
  line-height: 1.2 !important;
  margin-bottom: 15px !important;
  margin-top: 15px !important;
  font-size: 16px !important;
  vertical-align: middle !important;
}

#strat1-start_comparison:hover {
  background: linear-gradient(135deg, #f39200 0%, #ec6600 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 10px rgba(236, 102, 0, 0.4) !important;
  text-decoration: none !important;
}

#strat1-start_comparison:focus {
  box-shadow: 0 0 0 3px rgba(236, 102, 0, 0.3) !important;
  outline: none !important;
  background: linear-gradient(135deg, #ec6600 0%, #f39200 100%) !important;
  text-decoration: none !important;
}

/* Einzelne "Entfernen" Buttons für jedes Produkt */
[id^="strat1-remove_"] {
  background-color: #6c757d !important;
  border: none !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 5px 15px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  width: 150px !important;
  height: 35px !important;
  display: inline-block !important;
  text-align: center !important;
  line-height: 1.2 !important;
  margin-bottom: 15px !important;
  margin-top: 15px !important;
  font-size: 16px !important;
  vertical-align: middle !important;
  margin-left: 10px !important;
  box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2) !important;
}

[id^="strat1-remove_"]:hover {
  background-color: #5a6268 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3) !important;
  text-decoration: none !important;
}

[id^="strat1-remove_"]:focus {
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.3) !important;
  outline: none !important;
  text-decoration: none !important;
}

/* Fallback für alle Buttons mit der btn-danger Klasse im Produktbereich */
.btn-danger#strat1-remove_all,
.btn-danger[id^="strat1-remove_"] {
  background-color: #6c757d !important;
  border-color: transparent !important;
  color: white !important;
  border-radius: 20px !important;
}

.btn-danger#strat1-remove_all:hover,
.btn-danger[id^="strat1-remove_"]:hover {
  background-color: #5a6268 !important;
  border-color: transparent !important;
}

/* Spezielle Behandlung für btn-primary Klasse des Vergleich-Buttons */
.btn-primary#strat1-start_comparison {
  background: linear-gradient(135deg, #ec6600 0%, #f39200 100%) !important;
  border-color: transparent !important;
  color: white !important;
  border-radius: 20px !important;
}

.btn-primary#strat1-start_comparison:hover {
  background: linear-gradient(135deg, #f39200 0%, #ec6600 100%) !important;
  border-color: transparent !important;
}

/* Überschreibung für Bootstrap/Shiny Standard-Klassen */
.btn-sm#strat1-remove_all,
.btn-sm[id^="strat1-remove_"] {
  padding: 5px 15px !important;
  font-size: 16px !important;
  border-radius: 20px !important;
  height: 35px !important;
  width: 150px !important;
  line-height: 1.2 !important;
}

/* Entfernt alle vorherigen Border-Styles */
#strat1-remove_all,
#strat1-start_comparison,
[id^="strat1-remove_"] {
  border: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

#strat1-remove_all:hover,
#strat1-start_comparison:hover,
[id^="strat1-remove_"]:hover {
  border: none !important;
}



/* =========================================
   PRODUCT LIMITATION STYLES (6-PRODUKTE-BEGRENZUNG)
   ========================================= */

/* Deaktivierte ISIN-Suche */
.selectize-input.disabled,
.selectize-input.disabled > input,
.selectize-control.single.disabled .selectize-input {
  background-color: #f5f5f5 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Hinweistext für Produktanzahl */
.product-count-info {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 5px 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

/* Warnung bei maximaler Anzahl */
.product-count-warning {
  color: #ec6600;
  font-weight: bold;
  background-color: #fff3e0;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ffb900;
  margin-bottom: 15px;
}

/* Deaktivierter Upload-Bereich */
.file-upload-disabled {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.file-upload-disabled::after {
  content: "Maximale Anzahl an Produkten erreicht";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  color: #ec6600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* =========================================
   VERGLEICHSDIALOG STYLES
   ========================================= */

/* Modal Dialog Basis */
#shiny-modal-wrapper .modal.fade.in {
  padding-right: 0 !important;
}

#shiny-modal-wrapper .modal-dialog.modal-lg {
  width: 95vw !important;
  margin: 20px auto !important;
  max-width: none !important;
}

#shiny-modal-wrapper .modal-content {
  min-height: 90vh !important;
}

/* Z-Index Steuerung für verschachtelte Modals */
.pdf-viewer-modal .modal-dialog {
  z-index: 1060 !important;
}

.custom-comparison-modal .modal-dialog {
  z-index: 1050 !important;
  max-width: 90vw;
  margin: 20px auto;
}

.custom-comparison-modal .modal-content {
  min-height: 80vh;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Content Bereich mit Grid Layout */
#shiny-modal-wrapper .modal-body.custom-comparison-modal {
  padding: 0 !important;
  margin: 0 !important;
}

#shiny-modal-wrapper .custom-comparison-toolbar {
  width: 100% !important;
  padding: 15px !important;
  border-bottom: 2px solid #ec6600 !important;
}

#shiny-modal-wrapper .custom-comparison-content {
  width: 100% !important;
  height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
  padding: 15px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}

/* Produkt Karten im Modal */
#shiny-modal-wrapper .custom-comparison-content > div {
  flex: 0 1 450px !important;
  margin: 10px !important;
  border: 2px solid #ec6600 !important;
  border-radius: 10px !important;
  padding: 15px !important;
  background-color: #f9f9f9 !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.05) !important;
  transition: box-shadow 0.3s ease !important;
}

/* Card Styling für Produkte */
.custom-comparison-modal .card {
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.custom-comparison-modal .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15) !important;
}

.custom-comparison-modal .card-body {
  padding: 15px;
  padding-bottom: 40px; /* Mehr Abstand am Ende der Card */
  overflow: visible !important; /* Verhindert das Abschneiden der Chart-Labels */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.custom-comparison-modal .mb-3:last-of-type {
  flex-grow: 1;
  margin-bottom: 0 !important;
}

/* Verbesserter Stil für den mittleren Szenario-Wert */
.median-value-display {
  padding: 8px 12px;
  border-radius: 4px;
  display: inline-block;
  font-weight: bold;
  margin-top: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.median-value-display:hover {
  transform: scale(1.05);
}

/* Performance-Chart-Container im Vergleichsdialog */
.chart-container {
  position: relative;
  width: 100%;
  height: 280px !important; 
  margin: 10px 0 40px 0 !important; 
  padding: 5px 5px 35px 5px !important; 
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  overflow: visible !important;
}

/* Spezielle Styles für Performance-Charts in Karten-Ansicht */
.custom-comparison-modal .card-body .chart-container {
  height: 260px !important;
  margin-bottom: 30px !important;
  padding-bottom: 30px !important;
}

/* Highcharts Container Optimierungen für Performance-Charts */
.performance-chart .highcharts-container {
  overflow: visible !important;
  width: 100% !important;
  height: 100% !important;
}

.performance-chart .highcharts-root {
  overflow: visible !important;
}

/* Y-Achse sichtbar machen für negative Werte */
.performance-chart .highcharts-yaxis-grid .highcharts-grid-line {
  stroke: #e0e0e0;
  stroke-width: 0.5px;
}

.performance-chart .highcharts-axis-line {
  stroke: #999;
  stroke-width: 1px;
}

/* Nulllinie hervorheben */
.performance-chart .highcharts-plot-line {
  stroke: #ec6600 !important;
  stroke-width: 2px !important;
}

/* Balken-Styling verbessern */
.performance-chart .highcharts-column-series .highcharts-point {
  stroke-width: 1px;
  stroke: rgba(255,255,255,0.3);
}

/* Labels für negative Werte sichtbar machen */
.performance-chart .highcharts-data-label {
  color: #333 !important;
  font-size: 11px !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8) !important;
}

/* Container für die einzelnen Performance-Charts in der Card-Ansicht */
.custom-comparison-modal .mb-3 {
  margin-bottom: 25px !important;
}

/* Spezifischer Container für Performance-Chart Bereiche */
.custom-comparison-modal .performance-chart-section {
  margin-bottom: 40px !important;
  min-height: 300px !important;
}

/* =========================================
   HIGHCHARTS ANPASSUNGEN
   ========================================= */

/* Grundlegende Highcharts-Container Styles */
.highcharts-container {
  font-family: "Futur", Arial, sans-serif !important;
  overflow: visible !important; /* Kritisch: Erlaubt das Anzeigen von Elementen außerhalb des Containers */
  width: 100% !important;
}

.highcharts-tooltip text {
  font-size: 5px;
}

/* Achsen und Labels */
.highcharts-axis-labels {
  font-family: "Futur", Arial, sans-serif !important;
  overflow: visible !important;
}

.highcharts-axis-labels text {
  font-size: 12px !important;
  font-weight: normal !important;
}

/* Optimierte X-Achsenbeschriftungen */
.highcharts-xaxis-labels text {
  font-size: 10px !important;
  font-weight: normal !important;
  overflow: visible !important;
  font-family: "Futur", Arial, sans-serif !important;
}

/* Optimierte Y-Achsenbeschriftungen */
.highcharts-yaxis-labels text {
  font-size: 10px !important;
  font-weight: normal !important;
  overflow: visible !important;
  font-family: "Futur", Arial, sans-serif !important;
}

/* Bessere Darstellung der Balken */
.highcharts-column-series .highcharts-point {
  stroke-width: 0;
  transition: opacity 0.2s;
}

.highcharts-column-series .highcharts-point:hover {
  opacity: 0.8;
}

/* Achsenlinien besser sichtbar machen */
.highcharts-yaxis-grid .highcharts-grid-line {
  stroke: #e0e0e0;
  stroke-width: 0.5px;
}

.highcharts-axis-line {
  stroke: #999;
  stroke-width: 1px;
}

/* Data Table Styling */
.highcharts-data-table table {
  border-collapse: collapse;
  border-spacing: 0;
  background: white;
  min-width: 100%;
  margin-top: 10px;
}

.highcharts-data-table td,
.highcharts-data-table th {
  text-align: center;
  font-family: "Futur", sans-serif;
  font-size: 10pt;
  border: 1px solid silver;
  padding: 0.5em;
}

/* Container für die Slider */
.slider-container {
  margin: 20px 40px !important;
  width: calc(100% - 80px) !important;
}

/* Einzelne Slider-Gruppen */
.slider-group {
  margin-bottom: 25px !important;
  padding: 0 15px !important; /* Geändert von 20px */
}

/* Label Styling */
.control-label {
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 15px !important;
  color: #262626;
  min-height: 40px !important;
  display: flex !important;
  align-items: flex-start !important;
  line-height: 1.2 !important;
}


/* Entferne die automatischen Icons vor Textausgaben */
#strat1-obs_count::before,
#strat1-obs_subcat::before {
  display: none !important; /* Icons via CSS ausblenden */
}

/* Überschreibe alle bestehenden grünen Submit-Button Regeln */
#strat1-submit_data,
#strat1-submit_data:after,
#strat1-submit_data:before {
  background: linear-gradient(135deg, #ec6600 0%, #f39200 100%) !important;
  border: none !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 8px 15px !important;
  font-weight: 500 !important;
  box-shadow: 0 3px 6px rgba(236, 102, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  width: 160px !important;
  height: 40px !important;
  display: flex !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  margin-bottom: 15px !important;
  margin-top: 15px !important;
  font-size: 16px !important;
  vertical-align: middle !important;
}

/* Falls der Button Text und Icon enthält */
#strat1-submit_data .fa,
#strat1-submit_data i {
  margin-right: 6px !important;
  margin-left: 0 !important;
}

/* Zusätzliche Absicherung für verschiedene Button-Zustände */
#strat1-submit_data:hover,
#strat1-submit_data:focus,
#strat1-submit_data:active {
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#strat1-submit_data:hover {
  background: linear-gradient(135deg, #f39200 0%, #ec6600 100%) !important; /* Umgekehrter Gradient */
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 10px rgba(236, 102, 0, 0.4) !important;
}

#strat1-submit_data:focus {
  box-shadow: 0 0 0 3px rgba(236, 102, 0, 0.3) !important;
  outline: none !important;
  background: linear-gradient(135deg, #ec6600 0%, #f39200 100%) !important; /* Orange auch bei Focus */
}

#strat1-reset_filter {
  margin-right: 15px !important; /* Mehr Abstand zwischen den Buttons */
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 8px 25px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  width: 160px !important;
  height: 40px !important;
  display: inline-block !important;
  text-align: center !important;
  line-height: 1.2 !important;
  margin-bottom: 15px !important;
  margin-top: 15px !important;
  font-size: 16px !important;
  vertical-align: middle !important;
}

#strat1-reset_filter:hover {
  background-color: #5a6268 !important;
  border-color: #545b62 !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

#strat1-reset_filter:focus {
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.3) !important;
  outline: none !important;
  text-decoration: none !important;
}

#strat1-reset {
  padding: 5px;
  margin-bottom: 15px;
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
  vertical-align: center;
  text-align: center;
  color: #ec6600;
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  text-decoration: underline;
  height: 35px;
  width: 180px;
}

/* Reset-Button in der Produktsektion */
.priips-reset-button {
  padding: 5px;
  margin-bottom: 15px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  vertical-align: middle;
  text-align: center;
  color: #000000;
  background-color: #ffffff;
  border: 3px solid #ec6600;
  height: 35px;
  width: auto;
  transition: all 0.2s ease;
}

.priips-reset-button:hover {
  background-color: #fff3e0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.priips-reset-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(236, 102, 0, 0.4);
}

/* Warnung über den Reset-Button */
.priips-warning {
  color: #ec6600;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 4px;
}


.slider-group .form-group {
  margin-bottom: 0 !important;
}

/* Einheitliche Label-Höhen für Slider - NEUE REGEL */
.slider-group label,
.slider-group .control-label {
  min-height: 40px !important;
  display: flex !important;
  align-items: flex-start !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
}

/* 2. ERWEITERTE FILTER TOGGLE BUTTON - NEUE STYLES */
#strat1-toggle_advanced {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: 2px solid #ec6600 !important; /* Orange Border */
  border-radius: 25px !important;
  padding: 10px 30px !important;
  font-weight: 500 !important;
  color: #495057 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 4px rgba(236, 102, 0, 0.1) !important; /* Orange Shadow */
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  display: block !important;
}

#strat1-toggle_advanced:hover {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important; /* Orange Hover */
  border-color: #f39200 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(236, 102, 0, 0.2) !important;
}

#strat1-toggle_advanced:focus {
  box-shadow: 0 0 0 3px rgba(236, 102, 0, 0.3) !important;
  outline: none !important;
}

#strat1-submit_data:not(.disabled) {
  background: linear-gradient(135deg, #ec6600 0%, #f39200 100%) !important;
  border: none !important;
  color: white !important;
}

/* Icon Rotation für Toggle Button - NEUE REGEL */
#strat1-toggle_advanced .fa-chevron-down,
#strat1-toggle_advanced .fa-chevron-up {
  transition: transform 0.3s ease !important;
}

/* 3. ERWEITERTE FILTER CONTAINER - NEUE STYLES */
/* Erweiterte Filter Container zurücksetzen */
#strat1-advanced_filters {
  background-color: #f8f9fa !important;
  border-radius: 10px !important;
  padding: 25px !important;
  margin-top: 15px !important;
  border: 1px solid #dee2e6 !important;
}

/* Mehr Abstand zwischen den Cards */
#strat1-advanced_filters .row:nth-child(2) .col-md-4,
#strat1-advanced_filters .row:nth-child(3) .col-md-4 {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  padding-left: 20px !important;  /* Erhöht von 15px */
  padding-right: 20px !important; /* Erhöht von 15px */
  margin-bottom: 0 !important;
}

#strat1-advanced_filters .checkbox-cards-container .row .col-md-4 {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  padding-left: 25px !important;  /* Mehr Abstand als vorher */
  padding-right: 25px !important; /* Mehr Abstand als vorher */
  margin-bottom: 0 !important;
}

/* Row-Margins für Checkbox-Cards anpassen */
#strat1-advanced_filters .checkbox-cards-container .row {
  margin-left: -25px !important;
  margin-right: -25px !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

/* 2. DROPDOWN-BEREICH: Wieder nebeneinander anordnen */
#strat1-advanced_filters .row:last-child {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -25px !important;  /* Gleicher Abstand wie Checkbox-Cards */
  margin-right: -25px !important;
}

#strat1-advanced_filters .row:last-child .col-md-4 {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  padding-left: 25px !important;  /* Gleicher Abstand wie Checkbox-Cards */
  padding-right: 25px !important;
  margin-bottom: 20px !important;
}

/* 3. ÜBERSCHREIBE ALLE STÖRENDEN REGELN */
/* Entferne die problematischen Regeln die das Layout zerstören */
#strat1-advanced_filters .row:nth-child(2) .col-md-4,
#strat1-advanced_filters .row:nth-child(3) .col-md-4 {
  /* Diese Regeln löschen/überschreiben */
  padding-left: 25px !important;
  padding-right: 25px !important;
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  margin-bottom: 0 !important;
}

/* 4. SICHERE FLEX-LAYOUT FÜR BEIDE BEREICHE */
#strat1-advanced_filters .row:nth-child(2),
#strat1-advanced_filters .row:nth-child(3) {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -25px !important;
  margin-right: -25px !important;
  width: 100% !important;
}

/* 5. CHECKBOX-CARDS STYLING BEIBEHALTEN */
#strat1-advanced_filters .checkbox-card {
  background-color: #ffffff !important;
  border-radius: 8px !important;
  padding: 15px !important;
  border: 1px solid #e9ecef !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
  margin-bottom: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* 6. DROPDOWN-FELDER RICHTIG AUSRICHTEN */
#strat1-advanced_filters .form-group {
  margin-bottom: 0 !important;
  width: 100% !important;
}

#strat1-advanced_filters .selectize-control {
  width: 100% !important;
}

/* 7. RESPONSIVE ANPASSUNGEN */
@media (max-width: 991px) {
  #strat1-advanced_filters .checkbox-cards-container .row .col-md-4,
  #strat1-advanced_filters .row:last-child .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 15px !important;
  }
  
  #strat1-advanced_filters .checkbox-cards-container .row,
  #strat1-advanced_filters .row:last-child {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
}
/* Angepasste Row-Margins für die größeren Abstände */
#strat1-advanced_filters .row {
  margin-left: -20px !important;  /* Angepasst an das neue Padding */
  margin-right: -20px !important; /* Angepasst an das neue Padding */
}

/* Bessere Ausrichtung - beide Bereiche haben gleiche Container-Breite */
#strat1-advanced_filters .checkbox-cards-container {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Checkbox-Reihe spezifisch korrigieren */
#strat1-advanced_filters .row:nth-child(2) {
  margin-bottom: 25px !important;
}

#strat1-advanced_filters .row:nth-child(2) .col-md-4 {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-bottom: 0 !important;
}

/* Dropdown-Reihe spezifisch korrigieren */
#strat1-advanced_filters .row:nth-child(3) .col-md-4 {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-bottom: 0 !important;
}

/* Checkbox-Cards Styling zurücksetzen */
#strat1-advanced_filters .checkbox-card {
  background-color: #ffffff !important;
  border-radius: 8px !important;
  padding: 15px !important;
  border: 1px solid #e9ecef !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
  margin-bottom: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Alle Float-Eigenschaften entfernen die stören könnten */
#strat1-advanced_filters .col-md-4 {
  float: none !important;
  position: relative !important;
}

/* Bootstrap Grid-Klassen überschreiben falls nötig */
#strat1-advanced_filters .col-md-4:nth-child(1) { order: 1; }
#strat1-advanced_filters .col-md-4:nth-child(2) { order: 2; }
#strat1-advanced_filters .col-md-4:nth-child(3) { order: 3; }

/* Sicherstellen dass keine anderen CSS-Regeln interferieren */
#strat1-advanced_filters * {
  box-sizing: border-box !important;
}

/* Sicherstellen dass beide Bereiche dieselbe Container-Breite haben */
#strat1-advanced_filters .row:nth-child(2),
#strat1-advanced_filters .row:nth-child(3) {
  width: 100% !important;
  margin-left: -20px !important;
  margin-right: -20px !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Extra Abstand zwischen den beiden Bereichen */
#strat1-advanced_filters .checkbox-cards-container {
  margin-bottom: 35px !important; /* Erhöht von 25px */
}

/* Falls die Checkbox-Cards Container einen eigenen Padding haben */
#strat1-advanced_filters .checkbox-cards-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Sicherstellen dass h5 Überschrift richtig zentriert ist */
#strat1-advanced_filters .checkbox-cards-container h5 {
  margin-bottom: 20px !important;
  text-align: center !important;
  width: 100% !important;
}

/* Alternative: Falls das obige nicht funktioniert - gleiche Margin-Struktur */
#strat1-advanced_filters .row:nth-child(2) {
  margin-left: -20px !important;
  margin-right: -20px !important;
}

#strat1-advanced_filters .row:nth-child(3) {
  margin-left: -20px !important;
  margin-right: -20px !important;
}

/* Responsive Anpassungen mit mehr Abstand */
@media (max-width: 991px) {
  #strat1-advanced_filters .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important; /* Mehr Abstand auf mobilen Geräten */
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  #strat1-advanced_filters .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
}

/* Clear Floats falls vorhanden */
#strat1-advanced_filters .row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive Korrekturen */
@media (max-width: 991px) {
  #strat1-advanced_filters .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px !important;
  }
}

/* Header für erweiterte Filter - NEUE REGEL */
#strat1-advanced_filters h4 {
  text-align: center !important;
  margin-bottom: 25px !important;
  color: #495057 !important;
  font-weight: 600 !important;
}

/* Trennlinie nach Header - NEUE REGEL */
#strat1-advanced_filters h4::after {
  content: '' !important;
  display: block !important;
  width: 50% !important;
  height: 2px !important;
  background-color: #dee2e6 !important;
  margin: 15px auto 0 auto !important;
}

/* 4. CHECKBOX CARDS STYLING - NEUE STYLES */
.checkbox-card {
  background-color: #ffffff !important;
  border-radius: 8px !important;
  padding: 15px !important;
  margin-bottom: 10px !important;
  transition: all 0.3s ease !important;
  border: 1px solid #e9ecef !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

.checkbox-card:hover {
  background-color: #f8f9fa !important;
  border-color: #ec6600 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Container für Checkbox-Cards - NEUE REGEL */
.checkbox-cards-container {
  background: white !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  margin-bottom: 25px !important;
}

.checkbox-cards-container h5 {
  margin-bottom: 15px !important;
  color: #495057 !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* 5. BUTTON VERBESSERUNGEN - Ergänzung zu bestehenden Button-Styles */
#strat1-reset_filter {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: white !important;
  margin-right: 10px !important;
  border-radius: 20px !important;
  padding: 8px 20px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important; /* Überschreibt bestehende Regel */
}

#strat1-reset_filter:hover {
  background-color: #5a6268 !important;
  border-color: #545b62 !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}


/* Deaktivierter Submit-Button - NEUE REGEL */
#strat1-submit_data_disabled {
  background: linear-gradient(135deg, #ec6600 0%, #f39200 100%) !important;
  opacity: 0.5 !important;
  border: none !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 8px 25px !important;
  cursor: not-allowed !important;
  width: 160px !important;
  height: 40px !important;
  display: inline-block !important;
  text-align: center !important;
  line-height: 1.2 !important;
  margin-bottom: 15px !important;
  margin-top: 15px !important;
  font-size: 16px !important;
  vertical-align: middle !important;
}

/* 6. STATUS BOXEN VERBESSERUNGEN - NEUE STYLES */
.status-info-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-top: 25px !important;
  border-left: 4px solid #17a2b8 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

.status-info-item {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

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

/* Nur die HTML-Icons anzeigen, CSS-Icons verstecken */
.status-info-item .fa,
.status-info-item .fas {
  color: #ec6600 !important;
  margin-right: 8px !important;
  font-size: 16px !important;
}

/* Alle anderen Icon-Regeln die Konflikte verursachen könnten */
.fa-info-circle,
.fa-tags {
  color: #ec6600 !important;
}


/* Falls die Buttons inline sind statt in Container */
#strat1-reset_filter {
  margin-left: 15px !important; /* Abstand zwischen den Buttons */
}


.status-info-item .fa-info-circle {
  color: #ec6600 !important; /* Orange statt Blau */
}

.status-info-item .fa-tags {
  color: #ec6600 !important; /* Orange statt Grün */
}

/* Alternative Klassen falls die obigen nicht greifen */
.fa-info-circle {
  color: #ec6600 !important;
}

.fa-tags {
  color: #ec6600 !important;
}

/* Icons in Status-Container spezifisch */
.status-info-container .fa,
.status-info-container .fas {
  color: #ec6600 !important;
}

/* Warning Box für leere Resultate - NEUE REGEL */
.filter-warning-box {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important;
  border-left: 4px solid #ff9800 !important;
  border-radius: 4px !important;
  padding: 15px !important;
  margin-top: 15px !important;
  animation: pulse-warning 2s infinite !important;
}

@keyframes pulse-warning {
  0% { box-shadow: 0 2px 4px rgba(255, 152, 0, 0.1); }
  50% { box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2); }
  100% { box-shadow: 0 2px 4px rgba(255, 152, 0, 0.1); }
}

.filter-warning-box .warning-content {
  display: flex !important;
  align-items: center !important;
}

.filter-warning-box .fa-exclamation-triangle {
  margin-right: 8px !important;
  color: #ff9800 !important;
  font-size: 18px !important;
}

.filter-warning-box span {
  color: #e65100 !important;
  font-weight: 500 !important;
}

/* 7. RESPONSIVE VERBESSERUNGEN - NEUE REGELN */
@media (max-width: 768px) {
  .button-container {
    text-align: center !important;
  }
  
  .button-container .button-group {
  display: inline-flex !important;
  gap: 15px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
  
  #strat1-reset_filter,
  #strat1-submit_data_disabled {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }
}
  

  .checkbox-cards-container {
    padding: 15px !important;
  }
  
  .checkbox-card {
    padding: 10px !important;
  }
  
  #strat1-reset_filter
 {
    width: 100% !important;
    margin: 5px 0 !important;
    text-align: center !important;
  }


/* 8. ZUSÄTZLICHE ICON-KORREKTUREN */
/* Falls Icons in anderen Bereichen noch nicht orange sind */
.info-icon,
.tags-icon,
[class*="fa-info"],
[class*="fa-tags"] {
  color: #ec6600 !important;
}

/* Spezifische Textausgabe-Bereiche */
#strat1-obs_count,
#strat1-obs_subcat {
  display: flex !important;
  align-items: center !important;
}

/* Icons vor Textausgaben */
#strat1-obs_count::before {
  content: '\f05a' !important; /* FontAwesome Info-Circle */
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  color: #ec6600 !important;
  margin-right: 8px !important;
}

#strat1-obs_subcat::before {
  content: '\f02c' !important; /* FontAwesome Tags */
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  color: #ec6600 !important;
  margin-right: 8px !important;
}

/* 9. BUTTON FOCUS-STATES verbessern */
.btn:focus,
button:focus,
#strat1-submit_data:focus,
#strat1-reset_filter:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(236, 102, 0, 0.3) !important;
}

/* 10. KONSISTENTE BUTTON-HÖHEN überall */
.btn,
button,
input[type="button"],
input[type="submit"] {
  min-height: 40px !important;
  box-sizing: border-box !important;
}

/* 8. GRID LAYOUT VERBESSERUNGEN - Ergänzung zu bestehenden Regeln */
.filter-grid-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
  margin-bottom: 20px !important;
}

.filter-grid-item {
  flex: 1 1 300px !important;
  min-width: 250px !important;
}

/* Spezielle Anpassung für 2x2 Grid */
.filter-grid-2x2 .filter-grid-item {
  flex: 1 1 calc(50% - 10px) !important;
}

/* Spezielle Anpassung für 3er Grid */
.filter-grid-3x1 .filter-grid-item {
  flex: 1 1 calc(33.333% - 10px) !important;
}

@media (max-width: 991px) {
  .filter-grid-2x2 .filter-grid-item,
  .filter-grid-3x1 .filter-grid-item {
    flex: 1 1 100% !important;
  }
}

/* 9. CHECKBOX LABEL VERBESSERUNGEN - Ergänzung */
.enhanced-checkbox-label {
  font-weight: 500 !important;
  color: #495057 !important;
  line-height: 1.4 !important;
}

.enhanced-checkbox-label small {
  display: block !important;
  color: #6c757d !important;
  font-weight: normal !important;
  font-size: 12px !important;
  margin-top: 2px !important;
}

/* 10. ZENTRIERTE CONTAINER - NEUE REGEL */
.centered-filter-section {
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* 11. BUTTON CONTAINER VERBESSERUNGEN - NEUE REGEL */
.button-container {
  text-align: right !important;
  margin-top: 30px !important;
}

.button-container .button-group {
  display: inline-flex !important;
  gap: 15px !important; /* Fester Abstand zwischen Buttons */
  align-items: center !important;
  justify-content: flex-end !important;
}

@media (max-width: 768px) {
  .button-container {
    text-align: center !important;
  }
  
  .button-container .button-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  
  #strat1-reset_filter,
  #strat1-submit_data_disabled {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }
}

/* =========================================
   LINKS UND ICON STYLING
   ========================================= */

/* Links */
.box-body p a {
  color: #000;
  text-decoration: underline;
}

.app_links {
  color: #262626;
  text-decoration: underline;
}

.app_links:hover {
  color: #262626;
  text-decoration: none;
}

.app_links:focus {
  border: 1px;
  border-style: solid;
  border-color: black;
  text-decoration: none;
}

/* Icon Styling */
.fa-upload {
  color: #ec6600;
  padding-right: 10px;
}

.glyphicon-zoom-in {
  color: #ec6600;
  padding-right: 10px;
}

.fa-certificate,
.fa-layer-group,
.fa-euro-sign,
.fa-university,
.fa-building-columns {
  color: #ec6600;
  padding-right: 10px;
  filter: opacity(0.2);
}

.btn #btn_col {
  align-items: center;
}

/* =========================================
   FOOTER
   ========================================= */

.footer {
  position: inherit;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;
  z-Index: 1000;
}

.footer button {
  padding: 10px;
  margin-bottom: 15px;
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
  vertical-align: center;
  text-align: center;
  color: #000000;
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  height: 40px;
  text-decoration: underline;
}

.footer .btn-default:after, 
.footer .btn-default:before, 
.footer .btn-default:active::after, 
.footer .btn-default:focus, 
.footer .btn-default:hover::after {
  background-color: #f2f2f2;
  border-color: #000000;
  text-decoration: none;
  border-width: 1px;
}

.footer .btn-default:hover {
  text-decoration: none;
  background-color: #f2f2f2;
  border-color: #f2f2f2;
}

/* =========================================
   VALUE BOXES
   ========================================= */

.small-box.bg-orange {
  background-color: #f2f2f2 !important;
  color: #262626 !important;
}

/* =========================================
   TOOLTIPS
   ========================================= */

.tooltip > .tooltip-inner {
  width: 400px;
  color: white;
  background-color: #262626;
  text-align: left;
}

/* =========================================
   DATENTABELLEN
   ========================================= */

#datatbl_subcat, 
#datatbl_curr, 
#strat1-datatbl_perf, 
#strat1-datatbl_cost, 
#strat1-datatbl_risk {
  align-self: center;
  justify-self: center;
  font-size: medium;
  font-family: "Futur", sans-serif;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.gmisc_table {
  width: 100%;
}

tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* =========================================
   FILTER UND SUCHE CONTAINER
   ========================================= */

/* Einfache Dropdown-Container */
.dropdown-simple {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Info-Boxen Layout */
.container-fluid > .row:first-of-type {
  display: flex !important;
  gap: 20px !important;
  margin-bottom: 40px !important;
}

.container-fluid > .row:first-of-type .col-md-7,
.container-fluid > .row:first-of-type .col-md-5 {
  padding: 0 !important;
}

.container-fluid > .row:first-of-type .card {
  height: 100% !important;
  box-shadow: 0 4px 8px
}
  /* =========================================
   ALLGEMEINE STYLES
   ========================================= */

/* Basis-Schriftart für die gesamte App */
body {
  font-family: "Futur", sans-serif;
}

p {
  font-size: medium;
}

/* =========================================
   HEADER UND NAVIGATION
   ========================================= */

/* Logo und Navbar */
.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover {
  background-color: #ffffff;
}



.btn.dropdown-toggle.btn-default, 
.btn.dropdown-toggle.btn-default:hover {
  background-color: #ffffff;
}

/* =========================================
   COLLAPSIBLE BOXES
   ========================================= */

/* Buttons und Icons */
.btn.btn-box-tool, 
.btn.btn-box-tool:after, 
.btn.btn-box-tool:before {
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  border-style: groove;
  -webkit-box-shadow: none; 
  -moz-box-shadow: none; 
} 

.btn.btn-box-tool:hover, 
#strat1.btn.btn-box-tool:hover {
  background-color: #dcdcdc;
}

.btn.btn-box-tool:focus, 
#strat1.btn.btn-box-tool:focus {
  border: 1px;
  border-color: #000000;
  border-style: solid;
} 

.fas.fa-plus, 
.fas.fa-plus::before, 
.fas.fa-plus::after, 
.fas.fa-minus {
  font-size: 26px;
  color: #ec6600;
  text-align: center;
}

.fas.fa-plus:focus, 
.fas.fa-minus:focus {
  border: 1px;
  border-color: black;
  border-style: solid;
}

/* Box Styles */
.box, 
.box.collapsed-box {
  -webkit-box-shadow: none; 
  -moz-box-shadow: none;
  box-shadow: none;
  border: 0;
}

.box-header .box-title {
  font-weight: 600;
  font-size: 20px;
  color: #262626;
}

.box-header h3 {
  width: 100%;
  padding: 10px;
}

.box-body {
  color: #000000;
  padding: 21px;
  background: #f2f2f2;
  border-top-style: none;
  border: 0.2px solid #bfbfbf;
  border-top: none;
  -webkit-box-shadow: none; 
  -moz-box-shadow: none;
  box-shadow: none;
}

/* Styling der Foldouts */
.box-tools.pull-right {
  margin-top: 10px;
}

/* Zertifikats-Symbol - absolute Positionierung */
.box-title img {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-block;
}

/* Header-Text - explizite horizontale Positionierung */
.box-title.zert_header {
  margin-left: 55px;  /* Wichtig: Abstand vom linken Rand */
  margin-top: 10px;   /* Abstand von oben anpassen */
  display: inline-block;
}

/* Flex-Eigenschaften entfernen/überschreiben, falls vorhanden */
.box-header .box-title,
.box-header h3,
.box-title > div {
  display: block !important;
  flex-direction: initial !important;
  flex-wrap: initial !important;
  align-items: initial !important;
}


/* =========================================
   PRODUCT LIMITATION STYLES (6-PRODUKTE-BEGRENZUNG)
   ========================================= */

/* Deaktivierte ISIN-Suche */
.selectize-input.disabled,
.selectize-input.disabled > input,
.selectize-control.single.disabled .selectize-input {
  background-color: #f5f5f5 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Hinweistext für Produktanzahl */
.product-count-info {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 5px 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

/* Warnung bei maximaler Anzahl */
.product-count-warning {
  color: #ec6600;
  font-weight: bold;
  background-color: #fff3e0;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ffb900;
  margin-bottom: 15px;
}

/* Deaktivierter Upload-Bereich */
.file-upload-disabled {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.file-upload-disabled::after {
  content: "Maximale Anzahl an Produkten erreicht";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  color: #ec6600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* =========================================
   VERGLEICHSDIALOG STYLES
   ========================================= */

/* Modal Dialog Basis */
#shiny-modal-wrapper .modal.fade.in {
  padding-right: 0 !important;
}

#shiny-modal-wrapper .modal-dialog.modal-lg {
  width: 95vw !important;
  margin: 20px auto !important;
  max-width: none !important;
}

#shiny-modal-wrapper .modal-content {
  min-height: 90vh !important;
}

/* Z-Index Steuerung für verschachtelte Modals */
.pdf-viewer-modal .modal-dialog {
  z-index: 1060 !important;
}

.custom-comparison-modal .modal-dialog {
  z-index: 1050 !important;
  max-width: 90vw;
  margin: 20px auto;
}

.custom-comparison-modal .modal-content {
  min-height: 80vh;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Content Bereich mit Grid Layout */
#shiny-modal-wrapper .modal-body.custom-comparison-modal {
  padding: 0 !important;
  margin: 0 !important;
}

#shiny-modal-wrapper .custom-comparison-toolbar {
  width: 100% !important;
  padding: 15px !important;
  border-bottom: 2px solid #ec6600 !important;
}

#shiny-modal-wrapper .custom-comparison-content {
  width: 100% !important;
  height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
  padding: 15px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}

/* Produkt Karten im Modal */
#shiny-modal-wrapper .custom-comparison-content > div {
  flex: 0 1 450px !important;
  margin: 10px !important;
  border: 2px solid #ec6600 !important;
  border-radius: 10px !important;
  padding: 15px !important;
  background-color: #f9f9f9 !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.05) !important;
  transition: box-shadow 0.3s ease !important;
}

/* Card Styling für Produkte */
.custom-comparison-modal .card {
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.custom-comparison-modal .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15) !important;
}

.custom-comparison-modal .card-body {
  padding: 15px;
  padding-bottom: 40px; /* Mehr Abstand am Ende der Card */
  overflow: visible !important; /* Verhindert das Abschneiden der Chart-Labels */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.custom-comparison-modal .mb-3:last-of-type {
  flex-grow: 1;
  margin-bottom: 0 !important;
}

/* Verbesserter Stil für den mittleren Szenario-Wert */
.median-value-display {
  padding: 8px 12px;
  border-radius: 4px;
  display: inline-block;
  font-weight: bold;
  margin-top: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.median-value-display:hover {
  transform: scale(1.05);
}

/* Spezielle Styles für Performance-Charts in Karten-Ansicht */
.custom-comparison-modal .card-body .chart-container {
  height: 290px !important;
  margin-bottom: 40px !important;
  padding-bottom: 45px !important;
  padding-top: 15px !important;
}

/* Highcharts Container Optimierungen für Performance-Charts */
.performance-chart .highcharts-container {
  overflow: visible !important;
  width: 100% !important;
  height: 100% !important;
}

.performance-chart .highcharts-root {
  overflow: visible !important;
}

/* Y-Achse sichtbar machen für negative Werte */
.performance-chart .highcharts-yaxis-grid .highcharts-grid-line {
  stroke: #e0e0e0;
  stroke-width: 0.5px;
}

.performance-chart .highcharts-axis-line {
  stroke: #999;
  stroke-width: 1px;
}

/* Nulllinie hervorheben */
.performance-chart .highcharts-plot-line {
  stroke: #ec6600 !important;
  stroke-width: 2px !important;
}

/* Balken-Styling verbessern */
.performance-chart .highcharts-column-series .highcharts-point {
  stroke-width: 1px;
  stroke: rgba(255,255,255,0.3);
}

/* Labels für negative Werte sichtbar machen */
.performance-chart .highcharts-data-label {
  color: #333 !important;
  font-size: 11px !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8) !important;
}

/* Container für die einzelnen Performance-Charts in der Card-Ansicht */
.custom-comparison-modal .mb-3 {
  margin-bottom: 25px !important;
}

/* Spezifischer Container für Performance-Chart Bereiche */
.custom-comparison-modal .performance-chart-section {
  margin-bottom: 40px !important;
  min-height: 300px !important;
}

/* =========================================
   HIGHCHARTS ANPASSUNGEN
   ========================================= */

/* Grundlegende Highcharts-Container Styles */
.highcharts-container {
  font-family: "Futur", Arial, sans-serif !important;
  overflow: visible !important; /* KRITISCH: Erlaubt das Anzeigen von Elementen außerhalb des Containers */
  width: 100% !important;
  height: 100% !important;
}

/* Tooltip Verbesserungen */
.highcharts-tooltip {
  font-size: 13px !important; /* War vorher 5px - das war viel zu klein! */
  z-index: 9999 !important;
}

.highcharts-tooltip text {
  font-size: 13px !important; /* Verbessert von 5px */
}

/* Achsen und Labels */
.highcharts-axis-labels {
  font-family: "Futur", Arial, sans-serif !important;
  overflow: visible !important;
}

.highcharts-axis-labels text {
  font-size: 12px !important;
  font-weight: normal !important;
  overflow: visible !important;
}

/* X-Achsenbeschriftungen */
.highcharts-xaxis-labels text {
  font-size: 11px !important; /* Etwas kleiner für bessere Lesbarkeit */
  font-weight: normal !important;
  overflow: visible !important;
  font-family: "Futur", Arial, sans-serif !important;
}

/* Y-Achsenbeschriftungen */
.highcharts-yaxis-labels text {
  font-size: 11px !important;
  font-weight: normal !important;
  overflow: visible !important;
  font-family: "Futur", Arial, sans-serif !important;
}

/* Spezielle X-Achsen-Labels für Performance-Charts */
.performance-chart .highcharts-xaxis-labels text {
  font-size: 12px !important;
  font-weight: 500 !important;
  fill: #333 !important;
  overflow: visible !important;
}

/* Achsentitel hervorheben */
.performance-chart .highcharts-axis-title {
  font-weight: 600 !important;
  fill: #333 !important;
}

/* Balken-Darstellung für Performance-Charts */
.highcharts-column-series .highcharts-point {
  stroke-width: 1px; /* Verbessert von 0 für bessere Sichtbarkeit */
  stroke: rgba(255,255,255,0.3);
  transition: opacity 0.2s, transform 0.2s;
}

.highcharts-column-series .highcharts-point:hover {
  opacity: 0.8;
  transform: scale(1.02); /* Leichter Hover-Effekt */
}

/* Achsenlinien und Grid */
.highcharts-yaxis-grid .highcharts-grid-line {
  stroke: #e0e0e0;
  stroke-width: 0.5px;
}

.highcharts-xaxis-grid .highcharts-grid-line {
  stroke: #f0f0f0;
  stroke-width: 0.5px;
}

.highcharts-axis-line {
  stroke: #999;
  stroke-width: 1px;
}

/* Spezielle Styles für Performance-Charts */
.performance-chart .highcharts-container {
  overflow: visible !important;
  min-height: 220px !important;
}

.performance-chart .highcharts-plot-line {
  stroke: #ec6600 !important;
  stroke-width: 2px !important;
  z-index: 4 !important;
}

.performance-chart .highcharts-plot-line-label {
  color: #ec6600 !important;
  font-weight: bold !important;
  font-size: 11px !important;
}

/* Data Labels für Performance-Charts */
.performance-chart .highcharts-data-label {
  color: #333 !important;
  font-size: 10px !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8) !important;
  overflow: visible !important;
}

/* Data Table Styling */
.highcharts-data-table table {
  border-collapse: collapse;
  border-spacing: 0;
  background: white;
  min-width: 100%;
  margin-top: 10px;
  font-family: "Futur", sans-serif;
}

.highcharts-data-table td,
.highcharts-data-table th {
  text-align: center;
  font-family: "Futur", sans-serif;
  font-size: 11px; /* Etwas größer als 10pt für bessere Lesbarkeit */
  border: 1px solid silver;
  padding: 0.5em;
}

/* Spezifische Verbesserungen für negative Werte */
.highcharts-negative {
  opacity: 1 !important;
}

/* Legend Styling */
.highcharts-legend {
  font-family: "Futur", sans-serif !important;
}

.highcharts-legend-item text {
  font-size: 12px !important;
  fill: #333 !important;
}

/* Credit/Attribution */
.highcharts-credits {
  font-size: 9px !important;
  font-family: "Futur", sans-serif !important;
}

/* =========================================
   FORM CONTROLS (CHECKBOXEN, SLIDER, BUTTONS)
   ========================================= */

/* Checkbox Styling */
input[type="checkbox"].form-check-input,
.form-check-input,
.checkbox input[type="checkbox"],
.shiny-input-container input[type="checkbox"],
.form-check input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  margin-right: 15px !important;
  position: relative !important;
  top: 0 !important;
}

input[type="checkbox"].form-check-input:checked,
.form-check-input:checked,
.checkbox input[type="checkbox"]:checked,
.shiny-input-container input[type="checkbox"]:checked,
.form-check input[type="checkbox"]:checked {
  accent-color: #ec6600 !important;
  background-color: #ec6600 !important;
  background-image: none !important;
  border-color: #ec6600 !important;
}

.checkbox label,
.form-check-label {
  font-size: 16px !important;
  font-weight: 500 !important;
  padding-left: 35px !important;
  line-height: 20px !important;
  color: #262626;
  display: flex !important;
  align-items: center !important;
  min-height: 20px !important;
}

/* Checkboxes zu Toggle Switches umwandeln */
.form-check input[type="checkbox"]:not(.irs-hidden-input),
.checkbox input[type="checkbox"]:not(.irs-hidden-input),
div:not(.irs) > input[type="checkbox"].form-check-input {
  position: relative !important;
  width: 3.5em !important;
  height: 1.8em !important;
  margin: 0 10px 0 0 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #e8e8e8 !important;
  border: 2px solid #999 !important;
  border-radius: 1em !important;
  transition: all 0.3s ease-in-out !important;
  outline: none !important;
  vertical-align: middle !important;
}

/* Switch Knopf */
.form-check input[type="checkbox"]:not(.irs-hidden-input)::before,
.checkbox input[type="checkbox"]:not(.irs-hidden-input)::before,
div:not(.irs) > input[type="checkbox"].form-check-input::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  width: 1.4em !important;
  height: 1.4em !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  top: 50% !important;
  background-color: #6c757d !important;
  transition: all 0.3s ease-in-out !important;
}

/* Aktiver Zustand */
.form-check input[type="checkbox"]:not(.irs-hidden-input):checked,
.checkbox input[type="checkbox"]:not(.irs-hidden-input):checked,
div:not(.irs) > input[type="checkbox"].form-check-input:checked {
  background-color: #ec6600 !important;
  border-color: #ec6600 !important;
}

.form-check input[type="checkbox"]:not(.irs-hidden-input):checked::before,
.checkbox input[type="checkbox"]:not(.irs-hidden-input):checked::before,
div:not(.irs) > input[type="checkbox"].form-check-input:checked::before {
  left: calc(100% - 1.4em - 2px) !important;
  background-color: white !important;
}

/* Hover & Focus Zustände */
.form-check input[type="checkbox"]:not(.irs-hidden-input):hover,
.checkbox input[type="checkbox"]:not(.irs-hidden-input):hover,
div:not(.irs) > input[type="checkbox"].form-check-input:hover {
  border-color: #ec6600 !important;
}

.form-check input[type="checkbox"]:not(.irs-hidden-input):focus,
.checkbox input[type="checkbox"]:not(.irs-hidden-input):focus,
div:not(.irs) > input[type="checkbox"].form-check-input:focus,
.form-check-input:focus,
input[type="checkbox"]:focus {
  box-shadow: 0 0 0 0.2rem rgba(236, 102, 0, 0.25) !important;
  border-color: #ec6600 !important;
}

/* Checkbox Container */
.form-check:not(.irs),
.checkbox:not(.irs) {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 0 !important;
  margin-bottom: 15px !important;
  min-height: auto !important;
}

/* Slider Styling */
.irs {
  height: 60px !important;
}

.irs-line {
  height: 12px !important;
  background-color: #f0f0f0 !important;
  border-radius: 6px !important;
  top: 30px !important;
}

.irs-bar {
  height: 12px !important;
  background-color: #ec6600 !important;
  border: none !important;
  top: 30px !important;
}

.irs-handle {
  width: 20px !important;
  height: 20px !important;
  border: 3px solid #ec6600 !important;
  background-color: white !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  cursor: pointer !important;
  top: 22px !important;
}

.irs-handle:hover {
  background-color: #fff3e0 !important;
}

.irs-from, .irs-to, .irs-single {
  background-color: #ec6600 !important;
  padding: 3px 8px !important;
  font-size: 14px !important;
  color: white !important;
  top: 0 !important;
}

.irs-min, .irs-max {
  color: #666666 !important;
  font-size: 14px !important;
  top: 0 !important;
}

/* Grid ausblenden */
.irs-grid {
  display: none !important;
}

/* Container für die Slider */
.slider-container {
  margin: 20px 40px !important;
  width: calc(100% - 80px) !important;
}

/* Label Styling */
.control-label {
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 15px !important;
  color: #262626;
}


/* Deaktivierter Button-Stil */
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tooltip für deaktivierte Buttons */
.btn[disabled]::before {
  content: attr(title);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  background-color: #333;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 1000;
}

.btn[disabled]:hover::before {
  opacity: 1;
}



/* Hover bleibt wie vorher, aber mit angepasster Transition */
#strat1-submit_data:hover:not(:active) {
  background: linear-gradient(135deg, #f39200 0%, #ec6600 100%) !important;
  background-color: transparent !important;
  border: none !important;
  color: white !important;
  transition: background 0.2s ease !important;
}

/* Focus-Zustand bleibt für Accessibility */
#strat1-submit_data:focus {
  box-shadow: 0 0 0 3px rgba(236, 102, 0, 0.3) !important;
  outline: none !important;
  background: linear-gradient(135deg, #ec6600 0%, #f39200 100%) !important;
}

/* Kombinierter Focus + Active Zustand */
#strat1-submit_data:focus:active {
  background: linear-gradient(135deg, #d45500 0%, #e55a00 100%) !important;
  transform: translateY(2px) scale(0.98) !important;
  box-shadow: 0 0 0 3px rgba(236, 102, 0, 0.3), 
              0 1px 2px rgba(236, 102, 0, 0.6) inset !important;
}

/* Überschreibe Bootstrap Active-Zustände mit höchster Spezifität */
html body #strat1-submit_data:hover,
html body #strat1-submit_data:active,
#strat1-submit_data.btn:hover,
#strat1-submit_data.btn:active,
#strat1-submit_data.btn-success:hover,
#strat1-submit_data.btn-success:active {
  transform: none !important; /* Entfernt alle Bewegungen */
  box-shadow: 0 3px 6px rgba(236, 102, 0, 0.3) !important; /* Konstanter Schatten */
}

#strat1-submit_data::before,
#strat1-submit_data::after {
  display: none !important;
}

/* Alle Hover-Zustände explizit überschreiben */
#strat1-submit_data:hover,
#strat1-submit_data:hover:not(:disabled),
#strat1-submit_data.hover,
#strat1-submit_data:focus:hover {
  background: linear-gradient(135deg, #f39200 0%, #ec6600 100%) !important;
  background-color: transparent !important;
  border: none !important;
  color: white !important;
  transition: background 0.2s ease !important; /* Nur noch Farbübergang */
}


/* Auch für Focus-Zustand */
#strat1-submit_data:focus,
#strat1-submit_data:focus:not(:disabled) {
  background: linear-gradient(135deg, #ec6600 0%, #f39200 100%) !important;
  background-color: transparent !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 0 0 3px rgba(236, 102, 0, 0.3) !important;
  outline: none !important;
}


/* Active-Zustand (beim Klicken) - DEUTLICH SICHTBAR */
#strat1-submit_data:active:not(:disabled),
#strat1-submit_data.active {
  /* Dunkler orange Hintergrund */
  background: linear-gradient(135deg, #d45500 0%, #e55a00 100%) !important;
  background-color: transparent !important;
  border: none !important;
  color: white !important;
}

/* Zusätzlicher "Pressed" Effekt mit Pseudo-Element */
#strat1-submit_data:active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  pointer-events: none;
}


/* Überschreibe alle Bootstrap/Shiny Button-Klassen */
#strat1-submit_data.btn:hover,
#strat1-submit_data.btn:focus,
#strat1-submit_data.btn:active,
#strat1-submit_data.btn-primary:hover,
#strat1-submit_data.btn-primary:focus,
#strat1-submit_data.btn-primary:active,
#strat1-submit_data.btn-success:hover,
#strat1-submit_data.btn-success:focus,
#strat1-submit_data.btn-success:active {
  background: linear-gradient(135deg, #f39200 0%, #ec6600 100%) !important;
  background-color: transparent !important;
  border: none !important;
  color: white !important;
}

/* Spezifische Überschreibung für btn-success Klasse */
.btn-success#strat1-submit_data:hover,
.btn-success#strat1-submit_data:focus,
.btn-success#strat1-submit_data:active {
  background: linear-gradient(135deg, #f39200 0%, #ec6600 100%) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: white !important;
}

/* Generelle Button-Klassen überschreiben */
button#strat1-submit_data:hover,
input[type="button"]#strat1-submit_data:hover {
  background: linear-gradient(135deg, #f39200 0%, #ec6600 100%) !important;
  background-color: transparent !important;
  border: none !important;
  color: white !important;
}

/* Shiny-spezifische Klassen */
.shiny-bound-input#strat1-submit_data:hover {
  background: linear-gradient(135deg, #f39200 0%, #ec6600 100%) !important;
  background-color: transparent !important;
  border: none !important;
  color: white !important;
}

/* CSS-Spezifität erhöhen durch Wiederholung */
#strat1-submit_data#strat1-submit_data:hover {
  background: linear-gradient(135deg, #f39200 0%, #ec6600 100%) !important;
  background-color: transparent !important;
}

/* Fallback mit höchster Spezifität */
html body #strat1-submit_data:hover {
  background: linear-gradient(135deg, #f39200 0%, #ec6600 100%) !important;
  background-color: transparent !important;
  border: none !important;
  color: white !important;
}

#strat1-reset_filter:hover, 
#strat1-reset:hover {
  text-decoration: none;
}

#strat1-reset_filter:focus, 
#strat1-reset:focus {
  text-decoration: none;
  border: 1px;
  border-color: black;
  border-style: solid;
}

#strat1-reset_filter, 
#strat1-reset_filter:after, 
#strat1-reset_filter:before {
  padding: 5px;
  margin-bottom: 15px;
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
  vertical-align: center;
  text-align: center;
  color: #000000;
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  text-decoration: underline;
  height: 35px;
  width: 180px;
}

#strat1-reset {
  padding: 5px;
  margin-bottom: 15px;
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
  vertical-align: center;
  text-align: center;
  color: #ec6600;
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  text-decoration: underline;
  height: 35px;
  width: 180px;
}

/* Reset-Button in der Produktsektion */
.priips-reset-button {
  padding: 5px;
  margin-bottom: 15px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  vertical-align: middle;
  text-align: center;
  color: #000000;
  background-color: #ffffff;
  border: 3px solid #ec6600;
  height: 35px;
  width: auto;
  transition: all 0.2s ease;
}

.priips-reset-button:hover {
  background-color: #fff3e0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.priips-reset-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(236, 102, 0, 0.4);
}

/* Warnung über den Reset-Button */
.priips-warning {
  color: #ec6600;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 4px;
}

/* =========================================
   LINKS UND ICON STYLING
   ========================================= */

/* Links */
.box-body p a {
  color: #000;
  text-decoration: underline;
}

.app_links {
  color: #262626;
  text-decoration: underline;
}

.app_links:hover {
  color: #262626;
  text-decoration: none;
}

.app_links:focus {
  border: 1px;
  border-style: solid;
  border-color: black;
  text-decoration: none;
}

/* Icon Styling */
.fa-upload {
  color: #ec6600;
  padding-right: 10px;
}

.glyphicon-zoom-in {
  color: #ec6600;
  padding-right: 10px;
}

.fa-certificate,
.fa-layer-group,
.fa-euro-sign,
.fa-university,
.fa-building-columns {
  color: #ec6600;
  padding-right: 10px;
  filter: opacity(0.2);
}

.btn #btn_col {
  align-items: center;
}

/* =========================================
   FOOTER
   ========================================= */

.footer {
  position: inherit;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;
  z-Index: 1000;
}

.footer button {
  padding: 10px;
  margin-bottom: 15px;
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
  vertical-align: center;
  text-align: center;
  color: #000000;
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  height: 40px;
  text-decoration: underline;
}

.footer .btn-default:after, 
.footer .btn-default:before, 
.footer .btn-default:active::after, 
.footer .btn-default:focus, 
.footer .btn-default:hover::after {
  background-color: #f2f2f2;
  border-color: #000000;
  text-decoration: none;
  border-width: 1px;
}

.footer .btn-default:hover {
  text-decoration: none;
  background-color: #f2f2f2;
  border-color: #f2f2f2;
}

/* =========================================
   VALUE BOXES
   ========================================= */

.small-box.bg-orange {
  background-color: #f2f2f2 !important;
  color: #262626 !important;
}

/* =========================================
   TOOLTIPS
   ========================================= */

.tooltip > .tooltip-inner {
  width: 400px;
  color: white;
  background-color: #262626;
  text-align: left;
}

/* =========================================
   DATENTABELLEN
   ========================================= */

#datatbl_subcat, 
#datatbl_curr, 
#strat1-datatbl_perf, 
#strat1-datatbl_cost, 
#strat1-datatbl_risk {
  align-self: center;
  justify-self: center;
  font-size: medium;
  font-family: "Futur", sans-serif;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.gmisc_table {
  width: 100%;
}

tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* =========================================
   FILTER UND SUCHE CONTAINER
   ========================================= */

/* Einfache Dropdown-Container */
.dropdown-simple {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Info-Boxen Layout */
.container-fluid > .row:first-of-type {
  display: flex !important;
  gap: 20px !important;
  margin-bottom: 40px !important;
}

.container-fluid > .row:first-of-type .col-md-7,
.container-fluid > .row:first-of-type .col-md-5 {
  padding: 0 !important;
}

.container-fluid > .row:first-of-type .card {
  height: 100% !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.05) !important;
  transition: box-shadow 0.3s ease !important;
}

.container-fluid > .row:first-of-type .card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 0 10px 24px rgba(0, 0, 0, 0.1) !important;
}

/* Funktionsboxen (ISIN-Suche und Filter) */
.col-md-8 .slider-container,
.col-md-4 {
  background-color: white !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.05) !important;
  transition: box-shadow 0.3s ease !important;
}

/* Dropdown-Menüs Box Korrektur */
.col-md-4:not(:first-child) {
  width: fit-content !important;
  min-width: 250px !important;
  max-width: 100% !important;
  align-self: flex-start !important;
}

.col-md-8 .slider-container:hover,
.col-md-4:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 0 10px 24px rgba(0, 0, 0, 0.1) !important;
}

/* ISIN-Suche */
#strat1-isin_search {
  border-radius: 8px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  transition: box-shadow 0.3s ease !important;
}

#strat1-isin_search:hover,
#strat1-isin_search:focus {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Spaltenbreiten-Anpassungen */
.col-md-1 {
  display: none !important; /* Entfernen des orangen Trennstrichs */
}

.col-md-4:first-child {
  width: 30% !important;
}

.col-md-7 {
  width: 70% !important;
}

/* =========================================
   UPLOAD BEREICH
   ========================================= */

/* Container für den Upload-Bereich */
.file-upload-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* fileInput-Button */
#strat1-priips_kid {
  width: 100% !important;
  max-width: 100% !important;
}

/* Label und Kontrollelemente im fileInput */
.file-upload-container .control-label {
  font-size: 14px !important;
  margin-bottom: 10px !important;
  word-wrap: break-word !important;
}

.file-upload-container .form-control {
  font-size: 14px !important;
  height: auto !important;
  padding: 5px 8px !important;
}

.file-upload-container .btn {
  font-size: 14px !important;
  padding: 4px 10px !important;
}

/* Upload-Row Anpassungen */
#upload_row {
  margin: 0 !important;
  padding: 0 !important;
}

/* ISIN-Suche Container */
#strat1-isin_search-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Rechter Container */
.col-md-4 .card {
  overflow: hidden !important; /* Verhindert Überlauf */
  width: 100% !important;
}

/* Textverarbeitung für lange Texte */
.col-md-4 .card p {
  font-size: 14px !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
}

/* Rechte Box Anpassungen */
.col-md-4 .card .shiny-input-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Selectize Dropdown */
.selectize-control {
  width: 100% !important;
}

.selectize-input {
  font-size: 14px !important;
  padding: 6px 8px !important;
}

/* Überschriften im rechten Container */
.col-md-4 .card h4 {
  font-size: 16px !important;
  word-wrap: break-word !important;
}

/* Produktliste */
.product-entry {
  padding: 8px 0 !important;
  border-bottom: 1px solid #ddd !important;
  font-size: 14px !important;
}

/* =========================================
   RESPONSIVE ANPASSUNGEN
   ========================================= */

@media (max-width: 1400px) {
  .products-grid {
    grid-template-columns: 50% 50%; /* Zwei Spalten für mittlere Bildschirme */
  }
}

@media (max-width: 768px) {
  .custom-comparison-modal .modal-dialog {
    max-width: 95vw;
    margin: 10px auto;
  }
  
  .charts-grid {
    grid-template-columns: 100%; /* Eine Spalte für kleine Bildschirme */
  }
  
  .products-grid {
    grid-template-columns: 100%; /* Eine Spalte für kleine Bildschirme */
  }
  
  .file-upload-container .control-label,
  .file-upload-container .form-control,
  .file-upload-container .btn,
  .col-md-4 .card p {
    font-size: 12px !important;
  }
  
  /* Upload-Button für mobile Ansicht */
  .file-upload-container .btn {
    padding: 3px 6px !important;
  }
  
  .median-value-display {
    padding: 6px 10px;
    font-size: 14px;
  }
}


/* =========================================
   PRINT STYLES
   ========================================= */

/* Print-spezifische Styles */
@media print {
  /* Ausblenden von Elementen, die nicht gedruckt werden sollen */
  .navbar, .shiny-notification, .footer, .btn:not(.print-this) {
    display: none !important;
  }
  
  /* Sichtbarkeit der Vergleichsboxen verbessern */
  .custom-comparison-modal {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Zusätzliche Print-Optimierungen */
  body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11pt !important;
  }
  
  /* Vermeiden von Seitenumbrüchen innerhalb von Produktkarten */
  .product-card, .card {
    page-break-inside: avoid !important;
  }
}



/* =========================================
   PRODUKTVERGLEICH GRID LAYOUT
   ========================================= */

/* Container für alle Produktkarten */
.card-container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* Zeile mit Produktkarten */
.product-row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -10px !important;
  width: 100% !important;
}

/* Einzelne Kartencontainer - wichtig für 3 Karten pro Zeile */
.product-card-wrapper {
  padding: 10px !important;
  box-sizing: border-box !important;
  flex: 0 0 33.333% !important;
  max-width: 33.333% !important;
}

/* Individuelle Produktkarten */
.product-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border: 2px solid #ec6600 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.product-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15) !important;
}

/* Card Body mit Flex Layout */
.product-card .card-body {
  flex: 1 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 15px !important;
}

/* Verbesserte Abschnitte innerhalb der Karten */
.product-card .mb-3 {
  margin-bottom: 15px !important;
}

.product-card .mb-3:last-of-type {
  margin-bottom: 0 !important;
  flex-grow: 1 !important;
}

/* Responsive Breakpoints - angepasst für 3 Karten */
@media (max-width: 1199px) {
  .product-card-wrapper {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}

/* Tablet - 2 Karten pro Zeile */
@media (max-width: 991px) {
  .product-card-wrapper {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Mobile - 1 Karte pro Zeile */
@media (max-width: 767px) {
  .product-card-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Maximale Breite für den Modal Dialog */
.custom-comparison-modal .modal-dialog {
  max-width: calc(100% - 40px) !important;
  margin: 20px auto !important;
  width: auto !important;
}

.custom-comparison-modal .modal-content {
  width: 100% !important;
}

/* =========================================
   NEUE TAB-CARDS FÜR VERGLEICHSMODAL
   ========================================= */

/* KRITISCH: Überschreibt die problematische 450px Regel */
#shiny-modal-wrapper .custom-comparison-content > .row > .product-card-wrapper {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  width: 33.333333% !important;
  margin: 10px 0 !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

/* Überschreibt auch diese alte Regel */
#shiny-modal-wrapper .custom-comparison-content > div {
  flex: initial !important; /* Überschreibt "flex: 0 1 450px" */
}

/* Modal-Größe beibehalten */
#shiny-modal-wrapper .custom-comparison-modal .modal-dialog {
  width: 95vw !important;
  max-width: 95vw !important;
}

/* Content-Bereich */
#shiny-modal-wrapper .custom-comparison-content {
  width: 100% !important;
  padding: 20px !important;
  height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
}

/* Product Row */
#shiny-modal-wrapper .custom-comparison-content .product-row {
  margin: 0 -10px !important;
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Responsive */
@media (max-width: 991px) {
  #shiny-modal-wrapper .custom-comparison-content > .row > .product-card-wrapper {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 767px) {
  #shiny-modal-wrapper .custom-comparison-content > .row > .product-card-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Card Styling */
.product-card {
  border: 2px solid #ec6600 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.product-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

/* Cards nehmen volle verfügbare Breite */
#shiny-modal-wrapper .product-card {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #ec6600 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Card Body soll auch volle Breite nutzen */
#shiny-modal-wrapper .product-card .card-body {
  padding: 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Card Header volle Breite */
#shiny-modal-wrapper .product-card .card-header {
  width: 100% !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

/* Reduziere das Padding zwischen den Cards */
#shiny-modal-wrapper .custom-comparison-content > .row > .product-card-wrapper {
  padding: 5px !important; /* Reduziert von 10px */
}

/* Tab Content volle Breite */
#shiny-modal-wrapper .product-card .tab-content {
  width: 100% !important;
}

/* Tab Panes volle Breite */
#shiny-modal-wrapper .product-card .tab-pane {
  width: 100% !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}



/* DEBUG: Rote Borders um alles zu sehen */
#shiny-modal-wrapper .product-card-wrapper {
  border: 3px solid red !important;
  background-color: yellow !important;
}

#shiny-modal-wrapper .product-card {
  border: 3px solid blue !important;
  background-color: pink !important;
}

/* Entferne das Debug-CSS und füge das hier hinzu: */
#shiny-modal-wrapper .product-card-wrapper {
  padding: 5px !important;
  /* Debug-Styles entfernen */
  border: none !important;
  background-color: transparent !important;
}

#shiny-modal-wrapper .product-card {
  /* Das ist der Schlüssel: */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  
  /* Entferne Debug-Styles */
  background-color: transparent !important;
  
  /* Normale Card-Styles */
  border: 2px solid #ec6600 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Card Header auch volle Breite */
#shiny-modal-wrapper .product-card .card-header {
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

/* Card Body auch volle Breite */
#shiny-modal-wrapper .product-card .card-body {
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

/* Falls Bootstrap Container die Breite begrenzt */
#shiny-modal-wrapper .card {
  width: 100% !important;
  max-width: 100% !important;
}

/* =============================================
   EINFACHES TAB-CARDS LAYOUT IM VERGLEICHSMODAL
   ============================================= */

/* Container - mehr Platz nutzen und bessere Abstände */
.custom-comparison-content {
  width: 100% !important;
  padding: 20px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 15px !important; /* Erhöht für bessere Abstände */
  box-sizing: border-box !important;
  justify-content: center !important; /* Zentrierte Ausrichtung */
}

/* Cards breiter machen und bessere Proportionen */
.product-card-simple {
  flex: 1 1 calc(33.333% - 15px) !important; /* Angepasst an neuen gap */
  min-width: 350px !important; /* Erhöht von 280px für breitere Cards */
  max-width: calc(33.333% - 15px) !important;
  box-sizing: border-box !important;
}

/* Modal Dialog noch breiter für mehr Platz */
.custom-comparison-modal .modal-dialog {
  width: 98vw !important;
  max-width: 98vw !important;
  margin: 10px auto !important;
}

/* HAUPTCARD - Entferne alle störenden Rahmen und vereinheitliche */
.product-card-simple .card,
.product-card-simple > div,
.fund-card {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  
  /* NUR EINEN einzigen, schönen Rahmen */
  border: 2px solid transparent !important; /* Standardmäßig transparent */
  border-radius: 12px !important; /* Abgerundete Ecken */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important; /* Für saubere abgerundete Ecken */
}

/* Card-spezifische Rahmenfarben basierend auf Risikoindikator */
.fund-card {
  border-color: #ec6600 !important; /* Standard Orange */
}

/* Dynamische Rahmenfarben für verschiedene Risikoindikatoren */
.fund-card[data-risk="1"] { border-color: #007631 !important; }
.fund-card[data-risk="2"] { border-color: #3ea834 !important; }
.fund-card[data-risk="3"] { border-color: #95c200 !important; }
.fund-card[data-risk="4"] { border-color: #ffb900 !important; }
.fund-card[data-risk="5"] { border-color: #f39200 !important; }
.fund-card[data-risk="6"] { border-color: #ec6600 !important; }
.fund-card[data-risk="7"] { border-color: #c00808 !important; }

/* Hochgeladene Fonds - Orange Rahmen */
.uploaded-fund {
  border-color: #ec6600 !important;
  border-width: 3px !important; /* Etwas dicker für Upload-Kennzeichnung */
}

/* Hover-Effekt - subtiler */
.fund-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
  border-width: 3px !important; /* Rahmen wird beim Hover dicker */
}

/* Card Header - Rahmen entfernen, nur Hintergrund */
.fund-card .card-header {
  border: none !important;
  border-radius: 12px 12px 0 0 !important; /* Nur oben abgerundet */
  margin: 0 !important;
  padding: 16px !important;
}

/* Card Body - alle Rahmen entfernen */
.fund-card .card-body {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: white !important;
  border-radius: 0 0 12px 12px !important; /* Nur unten abgerundet */
}

/* Tab Navigation - Rahmen entfernen */
.fund-card .nav-tabs {
  border: none !important;
  margin: 0 !important;
  background: #f8f9fa !important;
}

.fund-card .nav-tabs .nav-item {
  border: none !important;
}

.fund-card .nav-tabs .nav-link {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #666 !important;
  border-bottom: 3px solid transparent !important;
}

.fund-card .nav-tabs .nav-link.active {
  background: white !important;
  color: #ec6600 !important;
  border-bottom-color: #ec6600 !important;
}

.fund-card .nav-tabs .nav-link:hover {
  background: rgba(236, 102, 0, 0.1) !important;
  color: #ec6600 !important;
}

/* Tab Content - Rahmen entfernen */
.fund-card .tab-content {
  border: none !important;
  background: white !important;
}

.fund-card .tab-pane {
  border: none !important;
  background: white !important;
}

/* Alle inneren Container - Rahmen entfernen */
.fund-card .row,
.fund-card .col-6,
.fund-card .info-value,
.fund-card .info-label,
.fund-card .badges,
.fund-card .badge,
.fund-card .details-grid,
.fund-card .d-flex {
  border: none !important;
}

/* Performance Chart Container */
.fund-card .chart-container,
.fund-card .performance-chart-section {
  border: none !important;
  background: white !important;
  border-radius: 8px !important;
  margin: 10px 0 !important;
  padding: 10px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* Responsive Anpassungen */
@media (max-width: 1400px) {
  .product-card-simple {
    flex: 1 1 calc(50% - 15px) !important;
    max-width: calc(50% - 15px) !important;
    min-width: 400px !important; /* Noch breiter bei 2 Spalten */
  }
}

@media (max-width: 900px) {
  .product-card-simple {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
  
  .custom-comparison-content {
    padding: 15px !important;
    gap: 10px !important;
  }
}

/* Upload Badge - besser sichtbar machen */
.fund-card .upload-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: rgba(236, 102, 0, 0.9) !important;
  color: white !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Entfernung aller störenden Override-Regeln aus dem Original CSS */
#shiny-modal-wrapper .custom-comparison-content > div {
  flex: initial !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Footer Buttons - bessere Positionierung */
.custom-comparison-modal .modal-footer {
  border-top: 2px solid #ec6600 !important;
  padding: 20px !important;
}

.custom-comparison-modal .modal-footer .btn {
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
}

/* Titel des Modals */
.custom-comparison-modal .modal-title {
  color: #333 !important;
  font-weight: 600 !important;
}

/* Optimierung der Card-Inhalte für mehr Platz */
.fund-card .isin-info,
.fund-card .fund-name {
  padding: 0 8px !important; /* Weniger Padding für mehr Platz */
}

.fund-card .fund-name {
  font-size: 15px !important; /* Etwas größer da mehr Platz */
  line-height: 1.3 !important;
}

.fund-card .risk-indicator {
  width: 36px !important; /* Etwas größer */
  height: 36px !important;
  font-size: 18px !important;
}


/* Standardmäßig HTML-Button anzeigen (in Karten-Ansicht) */
.export-btn.html-export { display: inline-block !important; }
.export-btn.csv-export { display: none !important; }

/* Bei Tabellen-Ansicht umschalten */
.table-view-active .export-btn.html-export { display: none !important; }
.table-view-active .export-btn.csv-export { display: inline-block !important; }

/* =========================================
   ACTION BUTTONS - EINHEITLICHER STYLE
   ========================================= */

.btn-action {
  background: linear-gradient(135deg, #ec6600 0%, #f39200 100%) !important;
  border: none !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 8px 20px !important;
  font-weight: 500 !important;
  box-shadow: 0 3px 6px rgba(236, 102, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  font-size: 16px !important;
  height: 40px !important;
  display: inline-block !important;
  text-align: center !important;
  line-height: 1.2 !important;
  margin: 5px 4px !important;  /* Reduziert von 8px auf 5px für kompakteres Layout */
  vertical-align: middle !important;
  cursor: pointer !important;
}

.btn-action:hover {
  background: linear-gradient(135deg, #f39200 0%, #ec6600 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 10px rgba(236, 102, 0, 0.4) !important;
  text-decoration: none !important;
  color: white !important;
}

.btn-action:focus {
  box-shadow: 0 0 0 3px rgba(236, 102, 0, 0.3) !important;
  outline: none !important;
  background: linear-gradient(135deg, #ec6600 0%, #f39200 100%) !important;
  text-decoration: none !important;
  color: white !important;
}

.btn-action:active {
  background: linear-gradient(135deg, #d45500 0%, #e55a00 100%) !important;
  transform: translateY(1px) !important;
  box-shadow: 0 2px 4px rgba(236, 102, 0, 0.6) !important;
}

#zert_explore {
  color: white !important;
}
#zert_explore .glyphicon {
  color: white !important;
}
/* =========================================
   FIX: ABSTAND ZWISCHEN BUTTONS UND GRAFIKEN
   ========================================= */

/* Reduziere Abstand für die versteckten Datentabellen selbst */
#strat1-datatbl_risk,
#strat1-datatbl_cost,
#strat1-datatbl_perf {
  margin-bottom: 10px !important;
  margin-top: 5px !important;
}

/* Reduziere margin-bottom für Chart-Container divs */
div[role="figure"] {
  margin-bottom: 5px !important;
}

/* Reduziere den Abstand zwischen fluidRows mit Grafiken */
.container-fluid > .row:has([id*="plot"]) {
  margin-bottom: 20px !important;
}

/* Spezifische Anpassung für columns mit Charts - reduziere padding */
.col-sm-5:has(div[role="figure"]),
.col-sm-10:has(div[role="figure"]) {
  padding-bottom: 10px !important;
}

/* Versteckte Elemente sollen keinen Platz einnehmen */
.shinyjs-hide {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* app_graph Klasse für Chart-Container */
.app_graph {
  margin-bottom: 8px !important;
  padding-bottom: 0 !important;
}
/* ================================================
   AGGRESSIVE LÖSUNG - ÜBERSCHREIBT ALLES
   ================================================ */

/* ALLE Grafik-Container - maximale Spezifität */
div[role="figure"],
div.app_graph,
.app_graph[role="figure"],
div[role="figure"].app_graph {
  margin-bottom: 8px !important;
  padding-bottom: 0px !important;
  margin-top: 0px !important;
  padding-top: 0px !important;
}

/* Highcharts selbst */
.highcharts-container,
div .highcharts-container,
.app_graph .highcharts-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* Shiny Output Containers */
.shiny-html-output,
.shiny-bound-output,
div.shiny-html-output.highchart,
div.shiny-bound-output.highchart {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Spezifische Chart IDs */
#strat1-plot1,
#strat1-plot2,
#strat1-plot4,
#subcat_plot,
#cur_plot {
  margin: 0 !important;
  padding: 0 !important;
}

/* ALLE Buttons mit btn-action */
.btn-action,
button.btn-action,
.btn.btn-action {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* Spezifische Button IDs */
#strat1-datatbl_risk_btn,
#strat1-datatbl_cost_btn,
#strat1-datatbl_perf_btn,
#datatbl_subcat_btn,
#datatbl_curr_btn {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* Columns - reduziere Abstände */
.col-sm-5,
.col-sm-6,
.col-sm-10,
.col-md-5,
.col-md-6,
.col-md-10 {
  padding-bottom: 10px !important;
}

/* FluidRows */
.container-fluid > .row {
  margin-bottom: 20px !important;
}

/* Versteckte Elemente */
.shinyjs-hide,
.hidden,
[style*="display: none"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* KRITISCH: Reduziere Abstand zwischen den zwei fluidRows mit Charts */
/* Erste Row (Risiko + Kosten) hat zu viel margin-bottom */
.container-fluid > .row {
  margin-bottom: 10px !important;  /* Reduziert von Standard ~20-30px */
}

/* Zweite Row (Performance) hat zu viel margin-top */
.container-fluid > .row + .row {
  margin-top: 0 !important;
}

/* Columns in der ersten Row - reduziere padding-bottom */
.row .col-sm-5 {
  padding-bottom: 10px !important;
}

/* Column in der zweiten Row */
.row .col-sm-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}


/* KRITISCH: Highcharts soll den vollen Container ausfüllen */
.app_graph {
  display: flex !important;
  flex-direction: column !important;
}

.app_graph > .shiny-bound-output {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.app_graph .highcharts-container {
  flex: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
}

.app_graph svg {
  height: 100% !important;
}
/* KRITISCH: Abstand NACH dem SVG, nicht am div selbst! */
.app_graph {
  padding-bottom: 16px !important;  /* Abstand INNERHALB des divs nach dem Chart */
  margin-bottom: 0 !important;      /* Kein extra margin am div */
}

/* Alternative: Abstand direkt am SVG */
.app_graph svg {
  margin-bottom: 16px !important;
  display: block !important;
}

/* =========================================
   RISK INFO BUTTON
   ========================================= */

/* Info-Button beim Risikoindikator */
#strat1-risk_info_btn {
  border: none !important;
  background: none !important;
  color: #ec6600 !important;
  padding: 0 !important;
  margin-left: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#strat1-risk_info_btn:hover {
  color: #f39200 !important;
  transform: scale(1.1) !important;
  background: none !important;
}

#strat1-risk_info_btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(236, 102, 0, 0.3) !important;
  background: none !important;
}

#strat1-risk_info_btn .fa-info-circle {
  font-size: 18px !important;
}

/* Slider Group für relative Positionierung */
.slider-group {
  position: relative !important;
}

/* =========================================
   DATENTABELLEN MIT WEISSEM HINTERGRUND
   ========================================= */

/* Container für die Datentabellen - OHNE display: block! */
#datatbl_subcat, 
#datatbl_curr, 
#strat1-datatbl_perf, 
#strat1-datatbl_cost, 
#strat1-datatbl_risk {
  background-color: white !important;
  padding: 20px !important;
  border: 2px solid #ec6600 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  z-index: 100 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* Wichtig: Diese Zeilen für automatische Größenanpassung */
  height: auto !important;
  min-height: fit-content !important;
  overflow: visible !important;
}

/* Sicherstellen dass versteckte Tabellen versteckt bleiben */
#datatbl_subcat.shinyjs-hide, 
#datatbl_curr.shinyjs-hide, 
#strat1-datatbl_perf.shinyjs-hide, 
#strat1-datatbl_cost.shinyjs-hide, 
#strat1-datatbl_risk.shinyjs-hide {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* Die htmlTable innerhalb der Container */
#datatbl_subcat .gmisc_table,
#datatbl_curr .gmisc_table,
#strat1-datatbl_perf .gmisc_table,
#strat1-datatbl_cost .gmisc_table,
#strat1-datatbl_risk .gmisc_table {
  background-color: white !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: table !important;
}

/* Alle Tabellen-Elemente innerhalb */
#datatbl_subcat table,
#datatbl_curr table,
#strat1-datatbl_perf table,
#strat1-datatbl_cost table,
#strat1-datatbl_risk table {
  background-color: white !important;
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

/* Tabellenzellen mit weißem Hintergrund */
#datatbl_subcat table td,
#datatbl_subcat table th,
#datatbl_curr table td,
#datatbl_curr table th,
#strat1-datatbl_perf table td,
#strat1-datatbl_perf table th,
#strat1-datatbl_cost table td,
#strat1-datatbl_cost table th,
#strat1-datatbl_risk table td,
#strat1-datatbl_risk table th {
  background-color: white !important;
  padding: 8px !important;
  border: 1px solid #ddd !important;
}

/* Zebra-Striping für bessere Lesbarkeit */
#datatbl_subcat table tr:nth-child(odd) td,
#datatbl_curr table tr:nth-child(odd) td,
#strat1-datatbl_perf table tr:nth-child(odd) td,
#strat1-datatbl_cost table tr:nth-child(odd) td,
#strat1-datatbl_risk table tr:nth-child(odd) td {
  background-color: #f8f9fa !important;
}

/* Header-Zeilen */
#datatbl_subcat table thead tr,
#datatbl_curr table thead tr,
#strat1-datatbl_perf table thead tr,
#strat1-datatbl_cost table thead tr,
#strat1-datatbl_risk table thead tr {
  background-color: #f8f9fa !important;
}

/* Caption (Überschrift der Tabelle) */
#datatbl_subcat table caption,
#datatbl_curr table caption,
#strat1-datatbl_perf table caption,
#strat1-datatbl_cost table caption,
#strat1-datatbl_risk table caption {
  background-color: white !important;
  color: #262626 !important;
  font-weight: 600 !important;
  padding: 10px !important;
  font-size: 16px !important;
  caption-side: top !important;
}

/* Fix: Bootstrap form-control überschreibt selectize-dropdown Höhe */
.selectize-dropdown.form-control {
    height: auto !important;
    padding: 0 !important;
}

/* Fix: overflow visible für selectize-dropdown */
.selectize-dropdown {
    overflow: visible !important;
}

/* Length of dropdown menu for ISIN search */
.isin-dropdown.selectize-dropdown {
    max-height: 420px !important;
}


.isin-dropdown .selectize-dropdown-content .option {
    padding: 6px 10px !important;
    line-height: 1.4 !important;
}


.isin-dropdown .selectize-dropdown-content {
    height: auto !important;
    max-height: 400px !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

#show_guide,
#show_guide:visited {
  background-color: #ec6600 !important;
  color: white !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

#show_guide:hover {
  background-color: #f39200 !important;
  color: white !important;
}

#show_guide:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(236, 102, 0, 0.3) !important;
}

.navbar-default .navbar-nav > li > a {
  font-size: 28px !important;
}

.navbar .container-fluid {
  display: flex !important;
  align-items: center !important;
}

        .market-info-bar {
            background-color: #e8e8e8;
            padding: 8px 16px;
            margin-bottom: 16px;
            border-radius: 4px;
            font-size: 13px;
            color: #333;
        }