:root {
  /* Blautöne */
  --pastel-blue-primary: #00457d;    /* Haupt-Dunkelblau */
  --pastel-blue-bright: #0066a6;     /* Mittelblau */
  --pastel-blue-soft: #5aa6d1;       /* Helles Blau */
  --pastel-blue-light: #8dbddc;      /* Leichtes Blau */
  --pastel-blue-pale: #cde2ee;       /* Blassblau */

  /* Burgundertöne */
  --pastel-burgundy-deep: #6f1d1b;   /* Dunkel-Burgunderrot */
  --pastel-burgundy-light: #a23b3b;  /* Helles Burgunderrot */

  /* Grüntöne */
  --pastel-muted-green: #8eac8d;     /* Sanftes Grün */
  --pastel-deep-green: #617d5e;      /* Dunkles Olivgrün */

  /* Lilatöne */
  --pastel-purple-deep: #5d3a6a;     /* Dunkles Lila */
  --pastel-purple-light: #9d7cae;    /* Helles Lila */

  /* Akzentfarbe */
  --color-accent-warm: #f4a261;      /* Warmes Beige */
}

/* Navbar */
.navbar-default {
  background-color: var(--pastel-blue-primary);
  height: 90px; /* Anpassen Sie die Höhe der Navbar */
}

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-brand {
  color: white;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-nav>.open>a, 
.navbar-default .navbar-nav>.open>a:focus, 
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover {
  color: white;
  background-color: rgba(255,255,255,0.2); /* Add transparency for open and active items */
}

.navbar-brand {
  height: 100%; /* Logo und Titel der Navbar sollen die volle Höhe der Navbar einnehmen */
}

.navbar-brand img {
  height: 70px; /* Höhe des Logos anpassen */
  margin-right: 3px;
}

/* Navbar-Menüpunkte */
.navbar-nav > li > a {
  padding-top: 25px;  /* Passen Sie die obere Polsterung nach Bedarf an */
  padding-bottom: 25px;  /* Passen Sie die untere Polsterung nach Bedarf an */
  line-height: 70px;  /* Passen Sie die Höhe der Navbar nach Bedarf an */
  font-size: 15px; /* Passen Sie die Schriftgröße nach Bedarf an */
}
.navbar-nav > li > a,
.navbar-nav > li > .dropdown-menu > li > a {
  line-height: 50px; 
}

/* Boxen */
.box {
  border: 2px solid var(--pastel-blue-primary);
  border-radius: 5px; 
  margin-bottom: 30px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.box-header {
  cursor: pointer; /* Damit der Header klickbar ist */
  color: white;
  background-color: var(--pastel-blue-primary);
  padding: 10px 15px;
}

.box-body {
  padding: 10px 15px;
}


/* Info Box Styling */
.info_box {
  border-radius: 5px;
  margin-bottom: 20px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
.info_box_header {
  background-color: var(--pastel-burgundy-deep);  /* Blaue Hintergrundfarbe */
  color: white;               /* Weiße Schriftfarbe */
  padding: 5px 10px;          /* Weniger vertikales Padding, um die Höhe zu verringern */
  margin: 10px;               /* Umrandender Abstand (außen) */
  cursor: pointer;            /* Zeiger-Cursor beim Überfahren */
  border-radius: 5px;        /* Gerundete Ecken */
}
.info_box_body {
  padding: 15px;
  display: none; /* Box-Inhalt standardmäßig ausblenden */

}


/* styles.css */
.button-stil {
  margin: 0 auto;
  display: block;
  background-color: var(--pastel-blue-primary);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.button-stil:hover {
  background-color: var(--pastel-purple-deep);
}

/*Abbruch-button  */
.button-cancel {
  margin: 0 auto;
  display: block;
  background-color: var(--pastel-purple-deep);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.button-cancel:hover {
  background-color: var(--color-accent-warm);
}

/*Download-button  */
.button-download {
  margin: 0 auto;
  display: block;
  background-color: var(--pastel-deep-green);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.button-download:hover {
  background-color: var(--pastel-muted-green);
}

/*Modal css*/
.modal-footer {
  display: flex;
  justify-content: flex-end;
}
.modal-footer .btn {
  margin-left: 10px;
}

/*Neu MDi */
.dropdown-menu img {
                width: 20px;
                height: 15px;
                margin-right: 5px;
                vertical-align: middle;
            }

.btn-light img {
                width: 20px;
                height: 15px;
                margin-right: 5px;
                vertical-align: middle;
            }