/**************************************************************************************************************/
/*                                                    
/*    Firma:              UVEK/BFE/AMP/PU               
/*    Umsetzung:          Tanja Pulver                         
/*    Zweck:              SPA BFE                         
/*    Letzte Änderung:   Bern, 03.02.2026
/*    Version:            1.1
/*                                                                                                                                                      
/*    Diese Datei und sämtliche damit verbundenen Funktionen und Komponenten sind Eigentum des BFE                                             
/*    und unterliegen den gesetzlichen Bestimmungen betreffend geistigen                        
/*    Eigentums und den damit verbundenen Nutzungsrechten. Dabei hat der                    
/*    Kunde die Geheimhaltungspflicht, sowie allfällige Eigentumsvorbehalte                     
/*    einzuhalten. Änderungen an den Files oder die Herausgabe von Source                   
/*    Code und / oder Files ohne schriftliche Zustimmung vom BFE                        
/*    ist untersagt und hat strafrechtliche Konsequenzen.     

/*	  BFE / CD Bund - Design Tokens (Global Scope, :root)
/*    Zweck: Zentrale Steuerung von Farben, Typografie, Abständen
/*    Accessibility: Alle Textfarben >= 4.5:1 auf hellem Grund
/*    Keine exterenen Icon-Fonts; Unicode/Inline-SVG bevorzugen                             
/*                                                                                                                                                      
/**************************************************************************************************************/
/*    DEFAULT SETTINGS
/**************************************************************************************************************/
:root {

 
 /* ================================
     SCSS-Fallbacks (Build-Time)
     ================================ */
  --color-white: #ffffff;
  --color-black: #000000;

 /* ================================
     COLOR TOKENS (semantic + base)
     ================================ */

  /* Base Text Grey/Blue Colors */
  --color-grey-50: #f9fafb;
  --color-grey-100: #f3f4f6;
  --color-grey-200: #e5e7eb;
  --color-grey-300: #d1d5db;
  --color-grey-400: #9ca3af;   /*#9ca3af;*/
  --color-grey-500: #6b7280;
  --color-grey-600: #4b5563;
  --color-grey-700: #374151;
  --color-grey-800: #1f2937;   /*#1f2937;*/        /*Text-Default*/
  --color-grey-900: #111827;
  
  /* Base Text Red Colors */
  --color-primary-50: #ffedee;
  --color-primary-100: #fae1e2;
  --color-primary-200: #006699;
  --color-primary-300: #fa9da1;
  --color-primary-400: #fc656b; 
  --color-primary-500: #e53940;
  --color-primary-600: #d8232a;     /*Accent-Default-Red*/
  --color-primary-700: #bf1f25;
  --color-primary-800: #99191e;
  --color-primary-900: #801519;			/*#801519*/
  
  /*Container Grey-Background*/
  --color-secondary-50: #f0f4f7;    /*Container-Default-Background*/
  --color-secondary-100: #dfe4e9;
  --color-secondary-200: #acb4bd;
  --color-secondary-300: #828e9a;
  --color-secondary-400: #596978;
  --color-secondary-500: #46596b;
  --color-secondary-600: #2f4356;   /*Header-Footer-Background*/
  --color-secondary-700: #263645;
  --color-secondary-800: #1c2834;
  --color-secondary-900: #131b22;

  /* Brand Colors (CD/CI Bund oder Projektfarben) */
  --color-default: var(--color-grey-800);       /*Text-Default)*/
  --color-primary: var(--color-secondary-50);  /*Default-Grey*/
  --color-accent:  var(--color-primary-600);
  --color-link: #006699;  /*Default-Red*/
  --color-link-hover:#374151;
  
  /* Semantic Colors */
  --color-success: #2e7d32;
  --color-warning: #ed6c02;
  --color-error: #d32f2f;
  --color-info: #0288d1;

  /* Background / Text / Border (Contextual use) */
  --bg-default: var(--color-white);
  --bg-primary: var(--color-primary-light);
  --bg-inverse: var(--color-grey-900);
  --text-default: var(--color-grey-800);
  --text-muted: var(--color-grey-600);
  --text-inverse: var(--color-white);
  --border-default: var(--color-grey-200);
  --border-strong: var(--color-grey-500);

  /* ================================
     TYPOGRAPHY
     ================================ */
  --font-family-base: "Frutiger Neue LT Pro", Arial, sans-serif;
  --font-family-serif: "Georgia", serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.25rem;
  --line-height-base: 1.5;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-color-default: #1f2937;

  /* ================================
     BUTTONS 
     ================================ */
  --button-background-color: #46596b;
  --button-background-color-hover: #46596b;
  --button-pills-background-color: #1f2937;
  --button-pills-background-color-hover: #111827;
  --button-back-pills-background-color: #e5e7eb;
  --button-back-pills-background-color-hover: #d1d5db;
  --button-border-color: #46596b;
  --button-font-color: #fff;
  --button-font-color-hover: #e5e7eb;
  --button-font-size: 0rem;

  /* ================================
     SPACING (scale)
     ================================ */
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* ================================
     BORDERS / RADII / SHADOWS
     ================================ */
  --border-radius-sm: .125rem;
  --border-radius-md: 10px;
  --border-radius-lg: 999999px;
  --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --box-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);

  /* ================================
     TRANSITIONS / ANIMATION
     ================================ */
  --transition-fast: 150ms ease-in-out;
  --transition-medium: 300ms ease-in-out;
  --transition-slow: 600ms ease-in-out;

  /* ================================
     Z-INDEX SCALE
     ================================ */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-modal: 1050;
  --z-tooltip: 1100;

}

/**************************************************************************************************************/
/* ================================
     Fonts
     ================================ */

@font-face {
    font-display: swap;
    font-family: Frutiger Neue LT Pro;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/FrutigerNeueW02-Regular.eot);
    src: url(/fonts/FrutigerNeueW02-Regular.eot?#iefix) format("embedded-opentype"),url(/fonts/FrutigerNeueW02-Regular.woff2) format("woff2"),url(/fonts/FrutigerNeueW02-Regular.woff) format("woff"),url(/fonts/FrutigerNeueW02-Regular.ttf) format("truetype"),url(/fonts/FrutigerNeueW02-Regular.svg#FrutigerNeueW02-Regular) format("svg")
 		 				
}

@font-face {
    font-display: swap;
    font-family: Frutiger Neue LT Pro;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/FrutigerNeueW02-Bold.eot);
    src: url(/fonts/FrutigerNeueW02-Bold.eot?#iefix) format("embedded-opentype"),url(/fonts/FrutigerNeueW02-Bold.woff2) format("woff2"),url(/fonts/FrutigerNeueW02-Bold.woff) format("woff"),url(/fonts/FrutigerNeueW02-Bold.ttf) format("truetype"),url(/fonts/FrutigerNeueW02-Bold.svg#FrutigerNeueW02-Bold) format("svg")
}

@font-face {
    font-display: swap;
    font-family: Frutiger Neue LT Pro;
    font-style: italic;
    font-weight: 400;
    src: url(/fonts/FrutigerNeueW02-Italic.eot);
    src: url(/fonts/FrutigerNeueW02-Italic.eot?#iefix) format("embedded-opentype"),url(/fonts/FrutigerNeueW02-Italic.woff2) format("woff2"),url(/fonts/FrutigerNeueW02-Italic.woff) format("woff"),url(/fonts/FrutigerNeueW02-Italic.ttf) format("truetype"),url(/fonts/FrutigerNeueW02-Italic.svg#FrutigerNeueW02-Italic) format("svg")
}

/**************************************************************************************************************/
	

html,
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: 1;
  color: var(--font-color-default);
  height: auto;
  background: var(--color-white);
  text-align: left;
  margin: 0;
  line-height:1.6rem;
  width:100%;
  overflow-x:hidden;
}

form#filterfunktionen{
background: var(--color-secondary-100);
  overflow-x:hidden;
}

.h2 {
  margin-top: 0px;
}
ul {
    margin: 0px;
    padding: 0px 10px 0px 17px;
    line-height: 1.2rem;
}
.printBtn {
  border-radius: 5px;
  padding: 10px;
  border: 1px solid var(--button-border-color);
  text-decoration: none;
  background: var(--button-background-color);
  color: var(--color-white);
}
.printBtn:hover {
  border: 1px solid var(--button-background-color-hover);
  background: var(--button-background-color-hover);
}
.divClose {
  text-align: right;
  margin-top: 20px; 
  color: var(--color-link);
  font-size: 0.8rem
}
.divClose a {
  color: var(--color-link);
}
.divClose a:hover {
  font-size: 80%;
  color: var(--color-link-hover);
}
.titel {
  font-size: 125%;
  padding: 20px 0 0 20px;
}
img#icoFilter{
  margin: 0px 15px -10px 0px;
  background-color: var(--color-white);
  border-radius: 100%;
  border: 2px solid var(--color-white);

}
img#icoFilterA, img#icoFilterB, img#icoFilterC, img#icoFilterD {
  width:30px !important;
  height:30px !important;
}
span.ico img {
  width:30px !important;
  height:30px !important;
  margin:-10px 10px -10px -5px !important;
}

img.icoClear {
  width:30px !important;
  height:30px !important;
  margin:-10px 0px -8px 5px !important;
}


.InfoBox {
  margin: 0.5%;
  font-size: 110%;
  padding: 1%;
  border: 1px solid #888;
}
.sortBox {
  text-align: right;
  padding-top: 10px;
 
}
.boxLine{width:100%;border-bottom:solid 1px var(--color-grey-400);margin:0px 0 15px 0;}
.boxSetfilter{height:auto;background:var(--color-grey-800);border-radius:15px;padding:5px 5px 5px 10px;margin:0px 5px 5px 0px;cursor:pointer;color:var(--color-white);font-size:var(--font-size-sm);}
.boxMainFilter{width:100%;max-height:80px;}
.boxContL{ width: 60%;position: relative;top: 5px;text-align:left;left:10px;font-size:var(--font-size-sm);}
.boxContR{ text-align: left; float: right; margin:-82px 5px -5px -5px;font-size:var(--font-size-sm);}
.boxFilters{ display:inline-flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;width:100%; padding-left:10px;}
.detailElement{ display:flex;z-index:+10;width:100%;height:100%;background:var(--color-white);display:none; }
.zurBtn{ display:inline-flex;justify-content:left;position:relative;background:var(--color-secondary-200);border-radius:15px;margin:0px 5px 5px 15px;color:var(--color-white);cursor:pointer;padding:5px}
.btnTxt{margin:0px 10px;white-space: nowrap;vertical-align:middle;}
.icoReset{margin:-3px 10px -8px -10px;width:30px;height:30px;}
.icoDetails{height:17px;vertical-align:middle;}
.icoClear{margin:2px 0 -3px 3px;}
.spacerDiv{width:100%;height:20px;}

.box {
  display: grid;
  flex-direction: row;
  border-bottom: 1px solid var(--color-grey-400);
  grid-template-columns: 25% 35% 20% 20%;
  text-align: left;
  margin: 0px 0px 0px 0px;
  padding: 5px 12px;
  width: auto;
  background-color:var(--color-white);
}
.box:hover {
  background: var(--color-grey-200);
  cursor: pointer;
  margin: 0px 0px 0px 0px;
  padding: 5px 12px;
  width: auto;
}
.boxHead {
  display: grid;
  flex-direction: row;
  border-bottom: 1px solid var(--color-secondary-100);
  grid-template-columns: 25% 35% 20% 20%;
  background: var(--color-secondary-500);
  color: var(--color-white);
  text-align: left;
  margin:0px 0px 0px 0px;
  padding: 12px;
  width: auto;
}
.boxHead > :nth-child(4), .box > :nth-child(4){
  text-align:right;
}
.dropdown {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  background: var(--color-grey-50);
  cursor: pointer;
  z-index: 999;
  position: relative;
  margin: 10px 0px 0px 0px;
}
.filterBtn {
  background-color: var(--color-grey-50);
  border: none;
  color: var(--color-secondary-500);
  padding: 10px;
  width: 100%;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.filterBtn span:first-of-type{
  position: absolute;
  padding: 10px !important;
}
.icoFilterBtn {
  float: right;
}
.lineFilter {
  width: 90%;
  text-align: left;
  margin-left: 45px;
}
.labeler {
  margin: 0 0 0 10px;
}
.links {
  text-decoration: none;
  color: #069;
}
.links:hover {
  color: #FF0000;
}
.links2 {
  text-decoration: none;
  color: #069;
  font-size: 150%;
  position: fixed;
  top: 0px;
  right: 20px;
  user-select: none;
  cursor: pointer;
}
.links2:hover {
  color: #FF0000;
}
.bottomLine {
  width: 100%;
  border-bottom: solid 1px var(--color-secondary-500);
  margin: 30px 0 0 0;
}
.dropdown-menu {
  display: none;
  background: none;
  z-index: 9999;  
  position: relative;
  padding-bottom: 15px;
}
.dropdown-menu2 {
  display: none;
  background: none;
  z-index: 9999;  
  position: relative;
  padding-bottom: 15px;
}
.dropdown-menu3 {
  display: none;
  background: none;
  z-index: 9999;  
  position: relative;
  padding-bottom: 15px;
}
.dropdown-menu4 {
  display: none;
  background: none;
  z-index: 9999;
  position: relative;
  padding-bottom: 15px;
}
.tableMain {
  display: table;
  width: 100%;
  background-color: rgb(255,255,255, 0.8);
  line-height: 2;
  font-size: 100%;
  position: relative;
  z-index: 99999999;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  display: none;
  overflow-x: hidden;
}
.tableRow {
  display: grid;
  color: var(--color-grey-800);
  line-height: 1.8rem;
  grid-template-columns: 2fr 4fr !important;
  text-align: left;
  width: 100%;
}
.tableCell,
.tableHead {
  display: table-cell;
  padding-left: 25px;
  padding-right: 25px;
}
.tableHeading {
  display: table-header-group;
  font-weight: bold;
}
.tableBody {
  margin: -1px auto; 
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-flow: row;
  -moz-box-pack: justify;
  justify-content: flex-start;
  flex-wrap: wrap;
  z-index: 1;
  background-color:var(--color-grey-100);
}
.tabHead {
  font-weight: bold;
}
/************Arbeitssprache***************/
#boxFilterA  {
    padding: 0px;
    margin: 0px;
	width: 100%;
	z-index:4;
}
.boxFilterA {
  width: 100%;
  display: block;
  z-index: 8;
  margin: -20px 0px 0px 0px;
  position: fixed;
;
}
/************Sprachregionen***************/
#boxFilterD  {
    padding: 0px;
    margin: 38px 0px 0px 0px;
	width: 100%;
    z-index:3;
}
.boxFilterD {
  width: 100%;
  display: block;
  z-index: 7;
  position: fixed;
}
/************Branchen***************/
#boxFilterC  {
   padding: 0px;
    margin: -58px 0px 0px 0px;
	width: 100%;
	z-index:2;
}
.boxFilterC {
  width: 100%;
  display: block;
  z-index: 6;
  position: fixed;
}
/************Expertisenbereich***************/
#boxFilterB {
    padding: 0px;
    margin: 154px 0px 0px 0px;
	width: 100%;
	z-index:1;
}
.boxFilterB {
  width: 100%;
  display: block;
  z-index: 5;
  position: fixed;
}
.spacerDivPrint{
width:100%;
border-top: 1px solid var(--color-grey-400);
}
/*MediaQueries*/
@media screen and (min-width: 768px) and (max-width: 1024px){

}
@media screen and (max-width: 768px) {
  .boxFilterA {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
    z-index: 4;

  }
  .boxFilterB {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
   z-index: 1;

  }
  .boxFilterC {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
    z-index: 2;
  }
  .boxFilterD {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
     z-index: 3;
  }
  .container {
    grid-template-columns: 100% !important;
  }
.boxContL {
    width: 100%;
    float: none;
    text-align: left;
    float: left;
    padding:10px;
    margin:60px 0px 0px 0px;
}
.boxContR {
    width: 100%;
    float: none;
    text-align: left;
    float: left;
    padding:-5px 0px;
    margin:-120px 0px 0px 0px;
}
.zurBtn{ border-radius:15px;margin:5px 5px 5px 15px;}

  .divClose {
    text-align: right;
    margin: -40px 0px 0 0;
  }
  .boxElement {
    width: 100%;
  }
  .dropdown {
    width: auto;
    z-index: 999;
  }
.lineFilter {
  width: 90%;
  text-align: left;
  margin-left: 15px;
}
  .zusInfos {
    position: relative;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    background: #db0018;
    border: #db0018 solid 1px;
    border-radius: 3px;
    color: var(--color-white);
    padding: 5px 0 5px 15px;
    font-weight: normal !important;
  }
.zusInfos:hover{ background:var(--button-background-color-hover);border:var(--button-background-color-hover) solid 1px;}
   
.viewMobile {
  display: none;
  }
.boxHead {
  display: grid;
  flex-direction: row;
  border-bottom: 1px solid var(--color-grey-400);
  grid-template-columns: 50% 50%;
  background: var(--color-secondary-500);
  color: var(--color-white);
  margin: 275px 0px 0px 0px;
}
.box {
  display: grid;
  flex-direction: row;
  border-bottom: 1px solid var(--color-grey-400);
  grid-template-columns: 50% 50%;
}
.tableRow {
  display: grid;
  color: var(--color-grey-800);
  line-height: 1.8rem;
  grid-template-columns: 1fr !important;
  text-align: left;
  width: 100%;
}
.tableBody {
  margin: 5px;
  padding: 0px;
}
.filterBtn span:first-of-type {
    position: absolute;
    padding: 7px !important;
}
.labeler {
  margin: 0px;
  font-size:0.9rem;
}
ul {
    margin: 0px;
    padding: 0px 10px 0px 55px;
    line-height: 1.2rem;
}
span.spacerTd{
    padding: 0px 10px 0px 35px;

}
.boxSetfilter{margin:0px 5px 5px 5px;text-align: left;}
}