/* WICHTIG
Wenn Standard CSS Werte bspw. aus Bootstrap überschrieben werden sollen
muss das in :root geschehen) */

:root {
  --bslib-spacer: 0rem;
  --primary-color: #bd9ff5;
  --bs-body-font-size:0.8em;
  --bs-body-font-family: Helvetica, sans-serif;
  --grey: #6e6e6e;
  --base-size:0.9em;
}

body {
  font-family: "Helvetica", "sans-serif";
}
/* bootstrap.min.css | http://127.0.0.1:4546/bootstrap-5.3.1/bootstrap.min.css */

.table-success {
  /* --bs-table-bg: #cce7d1; */
  --bs-table-bg: #FFBA35B3;

}

.table-danger {
  /* --bs-table-bg: #cce7d1; */
  --bs-table-bg: #4768DFB3;

}

.leaflet-container {
  background: transparent !important;
}
.tab-content {
  padding: 0 !important;
  margin: 0 !important;
}
.tab-pane {
  padding: 0 !important;
  margin: 0 !important;
}
.navbar {
  padding: 0 !important;
  margin-left:50px;
}
.nav-underline .nav-link.active {
  border-bottom-color: purple !important;
  padding-bottom: 0.2rem !important;
}
.nav-underline .nav-link:hover {
  border-bottom-color: #bd9ff5 !important;
  padding-bottom: 0.2rem !important;
}

.bslib-page-fill {
  padding: 0 !important;
}
.bslib-table-success-bg{


}

.container-fluid {
  margin: 0 auto;
  width:94%;
}

/* Category Icons Styling */
.category-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 10px 0;
}

.category-icon-wrapper {
  display: flex;
  align-items: center;  /* Vertikale Zentrierung */
  padding: 8px 15px;   /* Reduziertes Padding */
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: 1px solid #dee2e6;
  background-color: white;
  min-width: auto;     /* Entfernt die feste Mindestbreite */
}

.category-icon-wrapper:hover {
  background-color: #d8deff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.category-icon-wrapper.selected {
  background-color: var(--highlight_blue);
  border-color: var(--highlight_blue);
}

.category-icon-wrapper .material-icons {
  font-size: 20px;     /* Etwas kleinere Icons */
  margin-right: 8px;   /* Abstand zwischen Icon und Text */
  color: var(--icon_color);
}

.category-icon-wrapper span {

  color: var(--icon_color);
  white-space: nowrap; /* Verhindert Textumbruch */
}


/* Statistik Karten */

.variable-stats {
  padding: 1rem;
}

.stat-averages {
  margin-bottom: 1rem;
}


.stat-top3, .stat-bottom3 {
  padding: 0.5rem;
  margin-right: 2em;
}
.stat-top3 {
  float:left;
}
.stat-item {
  padding: 0.25rem 0;
}
.card{
  border-color: white;

}
.card-body {
padding: 0;
}

.var_annotation {
  padding:1em;
}

.header_text{
  color:white;
  top:4%;
  position: absolute;
  padding: 0.5em;
  opacity: 0.7;

  left: 15%;
}

.source_url{
  color:cadetblue;
  text-decoration: none;
}


.auswahl_bundesland{
  margin-left:0.4em;
  margin-top:0;
  max-width: 200px;
}

#state-state_icon img {
    width: 40px;
    height: 40px;
    margin: 1.8em 0 0 0.4em;
}

/* Stats Summary Styles */
.stats-summary {
  padding-top: 1em;
  border-radius: 4px;
}

.stats-summary table{
  width: 80%;
}


.stat-national,
.stat-state {
  margin-bottom: 10px;
  color: #495057;
}
.stat-national{
  float:left;
  margin-left:1em;
  margin-right: 1em;
}
.stat-item {
  padding: 2px;
  background-color: white;
  border-radius: 3px;
}

.variable-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 1em;
  max-width: 80%;
}
.variable-nav-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background-color: #f0f0f0;
  border-radius: 4px;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.variable-nav-item:hover {
  background-color: #e0e0e0;
  border-left: 4px solid #4768DF;
  padding-left: 20px;
}

.variable-nav-item.active {
  background-color: #CCDCFF;
  border-left: 4px solid #4768DF;
}

.variable-nav-item.active:hover {
  background-color: #BBCEFF;
}


#description_icon {
  float: left;
  margin-right: 8px;
  color: #454546;;
  size: 2em;
  font-size: 3em;
}


.leaflet-control-container .info {
  max-width: 200px;
  font-size: 1em;
}

.container-fluid{
  width:100%;
  padding:0;
}
.var_description{
  padding:3px;
  max-width: 90%;
  margin-top:1em;
  background-color:#e1e1e1;


}



#show_hinweise {
      color: inherit;
      text-decoration: none;
      padding-left: 5px;
    }
.modal-body h1 { font-size: 1.2rem !important; font-weight: bold !important; }
.modal-body h2 { font-size: 1.2em !important;
font-weight: bold !important;
}
.modal-body h3 { font-size: 1.1em !important;
  font-weight: bold !important;
}
#display-download_button .btn{
  margin:0;
   background-color: #BBA1E8;
    color: white;
  font-size:0.8em;
   border-radius: 4px;
   border:none;
  transition: all 0.3s ease;
}

#display-download_button .btn:hover{
  margin:0;
  background-color: #E0D3F8;
   color: #441993;
}

.btn-info, #display-show_full_table, #display-download_table{
  text-decoration: none;
   background-color: #BBA1E8;
    width:70%;
    padding: 6px 12px;
    border-radius: 4px;
    border:none;
    font-size: var(--base-size);
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    &:hover {
      background-color: #E0D3F8;
      color: #441993;
      text-decoration: none;
}