/* geändert 13:38 Uhr */   
                       
:root {
  /* Farben */
  --brand-color: #013A64;  
                     
  --brand-color-dark: #990F41;      /* dunkler für Hover oder Panels */
  --brand-color-light: #CCE3EF;     /* sehr hell für Hintergrund der Eingabe-Panels */       
  
  --accent-color: #31A8B3;          /* sanftes Türkis für "Success" oder Buttons */
  --warning-color: #f4c542;         /* warmes Gold-Gelb */
  --error-color: #d9384e;           /* klares Warnrot */

  --neutral-light: #31A8B3;         /* Hintergrund / Card-Flächen */
  --neutral-mid: #dcdfe6;           /* z. B. für Input-Ränder */                                                               

                              
  --info-color: #3a87ad;            /* z. B. für Hinweise oder modale Infos */
  
  --bg-light: #dee2e6;                           
  --secondary-color: #1F2C49;           
  --brand-text-color: #ffffff;                                                                                    
  --secondary-text-color: #1F2C49;                                                                       
  --success-text-color: rgb(25.8565737052,174.1434262948,110.5919180421);                                                                
  --warning-text-color: rgb(255,55.0427807487,9);           
  --error-text-color: rgb(248,0,49.3403141361);   
                  
  /* Schrift */                                                                  
  --font-family-base: "Roboto", Arial, sans-serif !important;                                                          
                                              
  --font-size-large: 18px;      
  --font-size-small: 12px;                      
  --modal-title-size: 26px;          
  --font-size-label: 15px;
                                                                                         
  /* Abstände */                                       
  --panel-heading-padding: 10px 15px;                     
  --panel-heading-spacing: 0.7px;
  --panel-heading-line-height: 1.4;
  --input-border-radius: 6px;                               
  --input-padding: 10px;
  --form-group-spacing: 12px;                                     
                                                                                                                    
  /* Effekte */                                                                 
  --box-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.3);                          
  --transition-base: 0.2s ease-in-out;       
  --border-radius: 1rem;
  --brand-gradient: linear-gradient(to bottom, var(--brand-color), var(--brand-color));
}
    
 
 
/* Abgerundete Ecken */                               
 

.drop-shadow {                   
  border-radius: var(--border-radius); 
  margin-bottom: 2rem;     
}                     

.cvs-footer {
 border-bottom-left-radius: var(--border-radius);
 border-bottom-right-radius: var(--border-radius);
}

                                                                                                                                                                                                
/* Allgemeine Farbklassen */     
.brandcolor {                         
  background-color: var(--brand-color);
  background-image: none;                                    
  color: var(--brand-text-color);
  text-shadow: none;     
}       
                                                                                                                                
.brandcolor .navbar-brand,
.navbar-nav > li > a {
  color: var(--brand-text-color) !important;                
  text-shadow: none;         
}                                                 

#cvsform .has-success .control-label, #cvsform .has-success .help-block, #cvsform .has-success .form-control-feedback {
    color: var(--success-text-color);
}     

#cvsform .has-error .control-label, #cvsform .has-error .help-block, #cvsform .has-error .form-control-feedback {
    color: var(--warning-text-color);
}                                                                                                                                                                                                 
                                                                                                                                                                                                               
.control-label {                                                                                                                                                                                   
    font-size: var(--font-size-label);
    color: #036;
} 

 .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: left;
  }
    

/* Panels */
.panel-primary,
.panel-info {
  border-color: var(--bg-light);   
  background-color: var(--bg-light);
}                                       


.panel-heading {
  font-size: var(--font-size-large);
  padding: var(--panel-heading-padding);
  letter-spacing: var(--panel-heading-spacing);
  line-height: var(--panel-heading-line-height);
}

.panel-primary > .panel-heading,
.panel-info > .panel-heading {
  background: var(--bg-light);
  color: #036;   
  border-color: var(--bg-light);
  padding-top: 4rem;
  padding-left: 4rem;  
  font-weight: 600;
} 

.panel-default > .panel-heading {
  letter-spacing: 0.7px;                 
  color: #036;
  font-size: 18px;
  background: var(--bg-light);
  font-weight: 600;
  border-color: var(--bg-light);  
  padding-top: 4rem;
  padding-left: 4rem;  
}

.panel-default {
  border-color: var(--bg-light);
}

.panel-body {
  padding: 2rem 4rem;
  background-color: var(--bg-light);
  border-color: var(--bg-light);
} 

.panel-footer {
  background-color: var(--bg-light);
  border-top: 1px solid var(--bg-light);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding-left: 4rem !important;
}

.list-group {
  background: var(--brand-gradient);
  background-color: var(--brand-color-light);
} 


/* Flat Navigation & Buttons */
.flat span:hover,
.flat span.active,
.flat span:hover:after,
.flat span.active:after,
               
.flat a.active,
.flat a:hover:after,
.flat a.active:after {
  background: #fff;
  color: var(--brand-color);
  font-weight: bold;
}   

.flat a:hover{
color: #000;
}

/* Buttons */
.btn-primary {
  background-color: var(--brand-color);
  background-position: 0 -15px;
  background-image: var(--brand-gradient);
  border-color: var(--brand-color);
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  background-position: 0 -15px;
  background-image: var(--brand-gradient);
  box-shadow: var(--box-shadow-hover);
}

.btn-secondary:hover,
.btn-secondary:focus {
  box-shadow: var(--box-shadow-hover);
}                                                               

/* Modal Header */
.modal-header,
.modal-header h5,
.modal-header .close {
  background-image: none;
  color: var(--brand-text-color) !important;
  text-align: center;
  font-size: var(--modal-title-size);                                                          
}

/* Schriftart */
.dx-widget {
  font-family: var(--font-family-base);
}

/* Dropdown-Menü aktiv */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,     
.dropdown-menu > .active > a:focus {
  background-color: var(--brand-color);
  background-image: var(--brand-gradient);
  background-repeat: repeat-x;
  color: var(--brand-text-color);
}

/* Formularelemente */
.form-group {     
  margin-bottom: var(--form-group-spacing);
}               

.form-control {
  border-radius: var(--input-border-radius);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
                                                                                                                            
.article {
  font-family: var(--font-family-base);
}

.articleshort {
  font-size: var(--font-size-large);
}

.articlelong {
  font-size: var(--font-size-small);
}
                                                                


input.is-valid,
select.is-valid,
textarea.is-valid {
  border-color: var(--success-text-color);
  box-shadow: 0 0 4px rgba(59, 183, 143, 0.5); 
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {                    
  border-color: var(-warning-text-color);
  box-shadow: 0 0 4px rgba(217, 56, 78, 0.4); 
}      
.form-control {
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}





.cvs-box {
  border-radius: var(--border-radius);
  padding: 20px;
  margin-bottom: 20px;
  color: var(--brand-text-color);
  min-height: 100%;
}

/* Farbvarianten */
.cvs-box-primary {
  color: var(--brand-color);
  background-color: var(--brand-color-light);
}

.cvs-box-primary h4 {
  color: var(--brand-color);
}

.cvs-box-accent {
  background-color: #3bb78f4a;
  color: var(--accent-color);
}

.cvs-box-accent h4 {
  color: var(--accent-color);
}  

/* Optional: schöner Schatten */
.cvs-box {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}   

.equal-height {
  display: table;
  width: 100%;
}
.equal-height > div {
  display: table-cell;
  float: none;
  vertical-align: top;
}

.form-control {
  box-shadow: 0 1px 3px rgba(50,50,93,.15),0 1px 0 rgba(0,0,0,.02);
  background-color: #fff;
  border: 0;  
}                                                     

button.btn.dropdown-toggle.btn-default.bs-placeholder {
   background-image: none;
  box-shadow: 0 1px 3px rgba(50,50,93,.15),0 1px 0 rgba(0,0,0,.02);
  background-color: #fff;
  border: 0;  

} 

button.multiselect.dropdown-toggle.btn.btn-default {
   background-image: none;                                                                           
  box-shadow: 0 1px 3px rgba(50,50,93,.15),0 1px 0 rgba(0,0,0,.02);
  background-color: #fff;
  border: 0;  
}

button[data-id="Land"] {  
   background-image: none;
  box-shadow: 0 1px 3px rgba(50,50,93,.15),0 1px 0 rgba(0,0,0,.02);
  background-color: #fff;
  border: 0;  
  color: #999;
}

/* Icon im Panel Header*/ 

.panel.panel-primary i {
  color: #036;
} 

.panel-footer.registration  {
  padding-left: 0.2rem !important;
  padding-right: 0.2rem !important;
  text-align: center;                 
}