:root {
    --font-family-list: 
        "Merriweather Sans", 
        "Merriweather Sans ExtraBold", 
        "Merriweather Sans Light", 
        "Merriweather Sans Medium", 
        "Merriweather Sans SemiBold", 
        "Merriweather";
}





/* General body styles */
body {
  background-color: #FFFFFF;  /* Background color */
  color: #000000;             /* Default text color */
  font-family: var(--font-family-list);
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-list); /* Heading font */
  hyphens: auto;
}

/* Code and preformatted text styles */
code, pre {
  font-family: 'Courier Prime', monospace;  /* Code font */
}

/* Link colors and other interactive elements */
a {
  color: #000000;  /* Primary color for links */
}

a:hover, a:focus {
  color: #949494;  /* Secondary color on hover/focus */
}

/* Button and interactive element styles */
.btn-primary {
  background-color: #000000;  /* Primary button color */
  border-color: #000000;
}

.btn-primary:hover {
  background-color: #949494;  /* Secondary color for hover */
  border-color: #949494;
}

.btn-secondary {
  background-color: #949494;  /* Secondary button color */
  border-color: #949494;
}

.btn-secondary:hover {
  background-color: #000000;  /* Primary color for hover */
  border-color: #000000;
}

/* Info color (e.g., for alert boxes, informational elements) */
.alert-info {
  background-color: #f5f4f1;  /* Info color */
  border-color: #f5f4f1;
  color: #000000;  /* Text color for info elements */
}

/* Customize other form elements, input boxes, etc., based on your design */
input, select, textarea {
  background-color: #FFFFFF;
  border: 1px solid #949494;  /* Secondary color for borders */
  color: #000000;  /* Text color */
  font-family: var(--font-family-list);
}

input:focus, select:focus, textarea:focus {
  border-color: #000000;  /* Primary color for focus */
  outline: none;
}

/* Container and layout styles */
.container-fluid {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.row {
  margin-right: 0;
  margin-left: 0;
}

/* Font styles for leaflets, tooltips, and modals */
.leaflet .legend { 
  line-height: 11px;
  font-size: 10px;
  font-family: var(--font-family-list);
}

.info { 
  font-size: 10px;
  font-family: var(--font-family-list);
}

.leaflet-container {
  font-family: var(--font-family-list);
}

.hovertext text {
  font-family: var(--font-family-list) !important;
  font-size: 12px !important;
}

.modeBarStyle {
  font-family: var(--font-family-list); !important;
  font-size: 10px !important;
}



/* Modal styles */
.modal-dialog {
  max-width: 95%; 
  height: 95%;
}

.modal-button {
  color: #FFB300;
}

.modal-content {
  height: 95%;
}

/* Specific styling for 'vorname' */
#vorname {
  opacity: 1 !important;
  z-index: 1000 !important;
}

/* Accordion and navbar styling */
.accordion .panel {
  background-color: black; 
  color: white;
}

.navbar .navbar-default {
  background-color: black !important;
  color: #FFFFFF !important;
}

.navbar .nav-item .nav-link.active {
  color: black !important;
  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

.navbar.navbar-default {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

#nav_menu .nav-link:hover {
  font-weight: inherit;
}

.navbar .nav-underline .nav-link, .navbar .nav-underline :where(ul.nav.navbar-nav > li) > a {
  padding-bottom: 8px;
}

.navbar .nav-underline :where(ul.nav.navbar-nav > li) > a.active {
  border-color: #FFB300;
}

.nav-link {
  font-size: 20px
}

/* Button styles for 'bttn-unite' */


.bttn-unite {
  border-radius: inherit;
  color: #26262c;
  border-width: 2px;
}

.bttn-unite.bttn-success {
  color: #26262c;
  border-color: #26262c;
}

.bttn-unite::after, .bttn-unite::before {
  display: none;
}

.bttn-unite.bttn-success:focus, .bttn-unite.bttn-success:hover {
  background: transparent;
  border-color: #FFB300;
  color: #26262c;
}

.js-plotly-plot .plotly {
  font-family: var(--font-family-list);
}

/* Responsive styles */
.plot3-container {
  width: 100%;
}

@media (max-width: 767px) {
  .plot3-container {
    height: 43vh !important;  /* Set height for small screens */
    margin-top: 20px;
  }
  
  .iframe {
    width: 100%;
    height: 87vh !important;
    border: none;
  }
}

@media (min-width: 768px) {
  .plot3-container {
    height: 86vh !important;  /* Set height for medium and larger screens */
    min-height: 660px;
  }
  
  .iframe {
    width: 100%;
    height: 700px !important;
    border: none;
  }
}

/* Icon color (if using Font Awesome or similar icons) */
i, .fa, .icon {
  color: #000000;  /* Primary color for icons */
}

/* Specific styles for the leaflet controls */
.leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale {
  font-size: 9px;
}

.livestr-button {
  color: #000000;
}

/* ===================== */
/* KPI Bar Styles */
/* ===================== */
#kpi_box {
  position: static;          /* stays in normal flow */
  top: 0;                    /* top alignment if needed */
  width: 100%;
  z-index: 1050;             /* above content if needed */
  background-color: #f5f4f1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 10px 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  
}

/* Individual KPI boxes */

/*  font-size: clamp(14px, 2vw, 22px);*/

#kpi_box .kennzahl {
  background-color: #f5f4f1;     /* slightly darker */
  border-radius: 5px;
  padding: 5px 20px;             /* small padding around text */
  text-align: center;
  font-weight: bold;
  font-size: clamp(10px, 1vw, 18px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  margin: 1px;

  flex: 0 1 auto;                /* shrink/grow according to content */
  display: inline-block;          /* shrink-wrap content */
  min-width: 0;                   /* prevents forced minimum width */
}

/* Tablet breakpoint */
@media (max-width: 768px) {
  #kpi_box .kennzahl {
    flex: 1 1 45%;                /* 2 per row */
    font-size: clamp(12px, 3vw, 18px);
  }
  .row > .col-12 { 
    height: auto !important;   /* remove forced height */
  }

  .card {
    min-height: auto !important;  /* allow shrinking */
  }

  .card-body {
    height: auto !important;      /* shrink to content */
    flex: 0 1 auto;
  }
}

/* Mobile breakpoint */
@media (max-width: 480px) {
  #kpi_box .kennzahl {
    flex: 1 1 100%;               /* stack vertically */
    font-size: clamp(12px, 4vw, 16px);
  }
}

/* ===================== */
/* Card Styles */
/* ===================== */
.card {
  margin: 1px 0 !important;
  min-height: 320px;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;

  /* Bootstrap variable overrides */
  --bs-card-spacer-x: 10px;
  --bs-card-spacer-y: 0px;
  --bs-card-title-spacer-y: 0rem;
  --bs-card-border-radius: 5px;
  --bs-card-cap-padding-x: 2rem;
  --bs-card-cap-padding-y: 0rem;
  --bs-card-cap-bg: #f5f4f1;   /* header background */
  --bs-card-bg: #fff;
}

/* Card body */
.card-body {
  flex: 1 1 auto;             /* fill available space */
  width: 100%;
  height: 100%;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

/* bslib card tweaks */
.bslib-card .card-body {
  max-height: 95% !important;
}

/* Card header with responsive font */
.card > .card-header {
  /*background-color: lightyellow;*/
  background-color: var(--bs-card-cap-bg);
  font-weight: bold;
  text-align: center;
  font-size: clamp(14px, 1.5vw, 18px);   /* dynamic font size */
  line-height: 1.3;
  gap: 1rem;
}

/* Optional: smaller headers on tablets/mobile */
@media (max-width: 768px) {
  .card > .card-header {
    /*font-size: clamp(14px, 1.5vw, 14px);*/
    padding-top: 1.5rem;    /* space above text */
    padding-bottom: 1.5rem; /* space below text */
    }
}

@media (max-width: 480px) {
  .card > .card-header {
    /*font-size: clamp(12px, 1.5vw, 12px);*/
    padding-top: 1.5rem;    /* space above text */
    padding-bottom: 1.5rem; /* space below text */
  }
}

/* ===================== */
/* Main content spacing */
/* ===================== */
.main-content {
  padding-top: 3px;   /* small gap below KPI bar */
}



/* sidebar title: */

.customSidebarTitle {
  font-size: clamp(12px, 1.5vw, 14px);
  hyphens: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.navbar-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.navbar-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 50%;
}

/* Style main title */
.navbar-title .main-title {
  font-weight: bold;
  line-height: 1.2;
}

/* Style subtitle */
.navbar-title .subtitle {
  font-size: 0.7em;
  color: grey;
  line-height: 1;
}


.navbar-nav .nav-link {
  font-size: clamp(10px, 1vw, 18px);
}


.fullscreen_text {
  font-size: clamp(8px, 1.2vw, 12px);
  hyphens: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}