/**************************************************************************************************************/
/*                                                    
/*    Firma:              UVEK/BFE/AMP/PU               
/*    Umsetzung:          Tanja Pulver / Stv. Nour-Eddine Bouazdia                        
/*    Zweck:              SPA BFE                         
/*    Letzte Änderung:    Bern, 05.06.2026, 14.08.2026 (PuA)
/*    Version:            Betrieb, 3.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: #f3f4f6;
  --color-grey-100: #e5e7eb;
  --color-grey-200: #d1d5db;
  --color-grey-300: #d1d5db;
  --color-grey-400: #9ca3af;  
  --color-grey-500: #6b7280;
  --color-grey-600: #4b5563;
  --color-grey-700: #374151;
  --color-grey-800: #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: #FF0000;  /*Default-Red #006699;*/
  --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: Font-Regular, 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: Font-Regular;
    font-style: normal;
    src: url(/_assets/fonts/NotoSans-Regular.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Font-Bold;
    font-style: normal;
    src: url(/_assets/fonts/NotoSans-Bold.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Font-Italic;
    font-style: italic;
    src: url(/_assets/fonts/NotoSans-Italic.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Font-Bold-Italic;
    font-style: italic;
    src: url(/_assets/fonts/NotoSans-BoldItalic.woff2) format("woff2")
}

@font-face {
    font-family: Fallback-font;
    src: local(Verdana);
    advance-override:125%;ascent-override:95%;descent-override:-25%;line-gap-override:25%}


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


html, body {
  font-family: Font-Regular,Helvetica,Arial,sans-serif;
  font-size: 100%;
  line-height: 1;
  color: var(--font-color-default);
  height:auto;
  background:var(--color-white);                              
  text-align:left;
  margin:0;
  width:100%;
  overflow-x:hidden;
}

/*Start Buttons*/
.printBtn{border-radius: var(--border-radius-sm);padding: 10px;border: 1px solid var(--button-border-color);text-decoration:none;background:var(--button-background-color);color:var(--button-font-color);margin: 0px 5px 5px 0px;float: left;width:90%;text-align:center;}
.printBtn:hover{border: 1px solid var(--button-border-color);background:var(--button-background-color-hover);color: var(--button-font-color-hover);}
.printBtn:last-of-type {width:50%;}
.mehrBtn{ width:100%;vertical-align:bottom;margin-top:auto;justify-content:center;display:flex;color:var(--button-font-color);}
.zusInfos{width: 100%;justify-content: center;background: var(--button-background-color);border: 1px solid var(--button-border-color);border-radius: var(--border-radius-sm);color: #fff;padding: 10px;font-weight: normal !important;text-align:center;}
.zusInfos:hover{ border: 1px solid var(--button-border-color);background:var(--button-background-color-hover);color: var(--button-font-color-hover);}
.zurBtn{ display:inline-flex;justify-content:left;position:relative;background-color:var(--color-secondary-500);border-radius: var(--border-radius-lg);padding:11px;color:#fff;width:auto;cursor:pointer;}
.zurBtn:hover{ background:var(--button-back-pills-background-color-hover);color:var(--font-color-default);}
.btnTxt{margin:0px 10px;white-space: nowrap;vertical-align:middle;color: var(--color-white);}
.btnTxtFilter{margin:0px 10px;white-space: nowrap;vertical-align:middle;color: var(--color-white);}
/*End Buttons*/


/*Start Search-Button*/
.search-container {
    position: relative;
    width: 97%;
    margin: 0 10px;
}

.search-container input {
    width: 100%;
    padding-right: 40px; /* Platz für die Lupe */
    box-sizing: border-box;
    height: 35px;
}

.search-button {
    position: absolute;
    right: 8px;
    top: 20px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
}
img.icoFilter {
    height: 30px;
    width: 30px;
	margin: -8px 10px -8px 10px;
}
img.icoSearch {
    height: 40px;
    width: 40px;
	margin: 105px 10px 0px 10px;
}


/*End Search-Button*/



.contLinks:hover{
text-decoration:underline;
}
.spacerDiv{
width:100%;height:20px;
}
.spacerBartop{
width:100%;height:10px;
}
.spacerBar{
width:100%;height:30px;
}
.spacerDivPrint{
width:100%;
height:30px;
border-top: 1px solid var(--color-grey-300);
margin-top: 20px;
}
.spacerDivPrintBottom{
width:100%;
height:30px;
border-top: 1px solid var(--color-grey-300);
margin-top: 120px;
}
.contElement{
  margin: 0px auto;
  padding: 60px 50px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-flow: row;
  -moz-box-pack: justify;
  justify-content: center;
  flex-wrap:wrap;
  /*margin-right: 15px;*/
}
.boxElement{
  cursor: pointer;
  height: 100%;
  width:30%;
  justify-content:flex-start;
  box-shadow: rgba(0, 0, 0, 0.13) 0px 0px 15px;
  padding: 10px;
  margin:10px;
  max-height:300px;  min-height:300px;
  box-sizing: border-box;
 /* transition: box-shadow 0.2s, transform 0.2s;*/
  transition: transform 0.2s ease;
  will-change: transform;
  
  background:#ffffff;
  display:flex;
  position:relative;
  z-index: 3;
}
.boxElement:hover{
 /* transform: scale(1.03);*/
  box-shadow: rgba(0, 0, 0, 0.18) 0px 11px 44px;
  z-index: 2;
}
.dispTitel{font-family: Font-Bold,Helvetica,Arial,sans-serif; color:var(--font-color-default);line-height:160%;line-height:1.2;font-size:2rem;font-weight: 700;}
/*Start Icons*/
.icoReset{width:17px;height:17px;}
.icoDetails{height:17px;vertical-align:middle;}
.icoClear{margin:2px 0 -3px 3px;}
.icoClosedetail{width: 30px;height: 30px;margin: -5px -10px 20px 0px; padding: 0px;}
/*End Icons*/
.titelBox{font-family: Font-Bold,Helvetica,Arial,sans-serif; text-align:left;line-height:130%;color:var(--font-color-default);padding-right:10px;font-size:16px; width: 85%;font-weight: 700;}
.lineBox{width:100%;height:1px;}
.descBox{width:90%;font-size:95%;max-height:95px;line-height:18px;font-weight:normal;color:var(--font-color-default);}
.lineStatus { position: absolute; left: 15px; bottom: 75px; margin: 0;font-size:14px;line-height:18px}
.boxFilters{ display:inline-flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;/*background:var(--color-white)*/;width:100%;float:left;margin-right:25%; }
.detailElement{ display:flex;z-index:+10;width:100%;height:100%;background:#FFF;display:none; }
.boxMainFilter{width:100%;background-color:var(--color-secondary-100);float:right;max-height:15px;}
.boxContL{width:100%;position:initial; top:43px;text-align: right;}
.boxContR{text-align: right;position: relative;top: -75px;float:right}
.boxLine{width:100%;border-bottom:solid 1px #666;margin:0px 0 15px 0;}
.container{
display: grid !important;
grid-template-columns: 2.5fr 0.1fr 1fr !important;
gap: 20px !important;
box-shadow: rgba(0, 0, 0, 0.13) 0px 11px 11px !important;
background:#FFF !important;
padding:0 15px 0 15px;
z-index:101;
line-height: 20px;
}
.divClose{text-align:right;margin-top:20px;}
.imgLogos{max-width:200px;}
/*Start Filter*/
.boxFiltersTop{width:100%;display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 3px;gap: 3px;position:relative;z-index:999;background-color:var(--color-secondary-100);}
.boxFilterA{width:33.33%;display:block;position:fixed;z-index:+9999;}
.boxFilterB{width:33.33%;display:block;position:fixed;z-index:+9999;margin:0 0 0 33.33%;}
.boxFilterC{width:33.33%;display:block;position:fixed;z-index:+9999;margin:0 0 0 66.66%;}
.boxFiltersBottom{width:100%;display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 3px;gap: 3px;position:relative;z-index:998;margin:60px 0 0 0;background-color:var(--color-secondary-100);}
.boxFilterD{width:33.33%;display:block;position:fixed;z-index:+9999;;}
.boxFilterE{width:33.33%;display:block;position:fixed;z-index:+9999;margin:0 0 0 33.33%;}
.boxFilterF{width:33.33%;display:block;position:fixed;z-index:+9999;margin:0 0 0 66.66%;background-color:var(--color-secondary-100);height:60px;}
.dropdown{font-family: Font-Regular,Helvetica,Arial,sans-serif;font-size:100%;background:var(--color-white);padding:10px;border:1px solid var(--color-secondary-100);border-radius: var(--border-radius-sm);cursor:pointer;
}
.input,input,select,textarea {
    padding: .625rem .625rem; width: 100%;
    --tw-shadow: 0px 1px 2px 0px rgba(0,0,0,.06),0px 1px 5px 0px rgba(0,0,0,.08);
    --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color),0px 1px 5px 0px var(--tw-shadow-color);
    border-width: 1px;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-border-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-border-opacity,1)); --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity,1));
    border-radius: .0625rem;
    line-height: 1;
    min-height: var(--input-min-height);
	font-family: Font-Regular, Hind, Fallback-font;
    font-size: 1.25rem;
    font-weight: 400;
	color: var(--color-grey-800);
}
label.check { line-height: 1.8;}

img.icoCash{border:none;position:absolute;top:-5px;left:80%;margin:3%;float:none;width:40px;height:40px;}
img#btnFilterA, img#btnFilterB, img#btnFilterC, img#btnFilterD, img#btnFilterE, img#btnFilterF, img#btnFilterG {width: 30px;height: 30px; margin: -5px 0px -10px 0px;padding: 0px;top: 30px;}

/*End Icons*/
.infBox {
display:none;
position:absolute !important;
top:0px !important;
bottom:0px !important;
right:0px !important;
left:0px !important;
width: 100% !important;
max-width: 800px !important;
z-index:+10 !important;
justify-content:flex-start !important;
margin: 2em auto !important;
font: 0.9em/1.2 Arial, Helvetica, sans-serif !important;
}
.container > div {
border-radius: var(--border-radius-sm) !important;
padding: 10px !important;
background-color:#FFF !important;
/*border: 1px solid #FFF !important;*/
    border: none;
line-height: 20px;
}
.container {
display: grid !important;
grid-template-columns: 2.5fr 0.1fr 1fr !important;
grid-gap: 10px !important;
gap: 10px !important;
line-height: 20px;
padding: 0 80px;
}
.container > div:last-child {
    border-radius: var(--border-radius-sm) !important;
    background-color: var(--color-grey-50) !important;
    border: 1px solid #FFF !important;
    line-height: 20px;
    padding: 10px 40px !important;
    margin-bottom: 60px;
}
.contFilter{width:100%;margin:0 10px 10px 10px;background:var(--color-secondary-100);height:100px;text-align:left;}
.containerFilter{
  margin: 0px auto;
  max-width: 1251px;
  padding: 5px 15px 5px 15px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-flow: row;
  -moz-box-pack: justify;
  justify-content: flex-start;
  flex-wrap:wrap;
  z-index:10;
}
/*Start Filter-Tags*/
.boxSetfilter{background:var(--button-pills-background-color);border:var(--color-secondary-100) solid 1px;border-radius:var(--border-radius-lg);padding:9px 7px 11px 11px;margin:13px 9px 9px 0px;cursor:pointer;color:var(--color-white);}
.boxSetfilter:hover{background:var(--button-pills-background-color-hover);}
.filterBtn{
background-color: var(--color-white);
border: none;
color: var(--color-grey-800);
padding: 10px;
width:100%;
text-align: left;
text-decoration: none;
display: inline-block;
font-size:16px;
font-weight:bold;
cursor:pointer;
}
/*End Filter-Tags*/
.containerDiv{
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
grid-gap: 10px !important;
gap: 10px !important;
}
.botton{
font-family: Font-Regular,Helvetica,Arial,sans-serif;
font-size:100%;
width:100%;
max-width:300px;
background:var(--color-white);
padding:10px;
border:1px solid var(--color-secondary-100);
border-radius: var(--border-radius-sm);
cursor:pointer;
color:var(--font-color-default);
}
div#dpProtype, div#dpUest{
	/* border-left:1px solid var(--color-white);*/ 
}
.icoFilterBtn{float:right;}
.lineFilter{ width:100%;text-align:left;padding:5px;flex:1;flex-direction:column;display:flex; }
.bottomLine{width:100%;border-bottom:solid 1px #666;margin:50px 0 0 0;}
.dropdown-menu{ position:relative;display:none; background:none;z-index:+1 !important;}
.dropdown-menu2{ display:none; background:none;z-index:+1;}
.dropdown-menu3{ display:none; background:none;z-index:+1;}
.dropdown-menu4{ display:none; background:none;z-index:+1;}
.dropdown-menu5{ display:none; background:none;z-index:+1;}
.dropdown-menu6{ display:none; background:none;z-index:+1;}
.descBox strong{font-weight:normal;}
.contLinks, a {text-decoration:none;color:var(--color-primary-600);font-weight:normal;cursor:pointer; list-style-type:disc;}
.contLinks, a:hover{text-decoration:none;color:var(--color-primary-600);font-weight:normal;cursor:pointer; list-style-type:disc;}
.contLinksClose span {color: var(--color-grey-600);}
.contLinksClose a:hover span{text-decoration:none !important;color:var(--color-grey-600) !important;font-weight:normal;cursor:pointer; }
li {list-style-type:disc;}
.contLinks:nth-child(1) {display:block;margin:-20px 0px 0px 0px;}
a.contLinks{display:list-item;position: relative;margin: 0px 20px -20px 18px;list-style-type:disc;}
.check{position:relative;display:block;padding-left:2rem;line-height:1.3;color:#000;}
.check input[type="checkbox"]{position: absolute;left:0;top:0.1rem;width:1.2rem;height:1.2rem;}
.check__text{display:inline;}
.divClose a {font-size:80%;}
#ProjekteOv{background-color:var(--color-secondary-100);}
/*MediaQueries*/
@media screen and (min-width: 768px) and (max-width: 1024px){
	 .boxElement{width:30%;  max-height:350px;  min-height:350px;} 
	 .zusInfos{position: relative;width: 95%;display: inline-flex;justify-content: center;background: #374151;border: #374151 solid 1px;border-radius: var(--border-radius-sm);color: #fff;padding: 5px;font-weight: normal !important;margin: 113px 0px 0px 0px;}
}
@media (max-width: 767px){
.h1, .dispTitel {overflow-wrap: break-word; hyphens: auto; max-width: 100%;}
.boxFilters {justify-content: left;}
.boxFiltersTop > * {text-align:left;width:100%;}
.boxFiltersTop{position:relative;display:inline-block;width:100%;}
.boxFilterA{width:100%;display:grid !important;grid-template-columns:1fr !important;position:relative;z-index:99999;margin:0 0 0 0%;}
.boxFilterB{width:100%;display:grid !important;grid-template-columns:1fr !important;position:relative;z-index:99999;margin:0 0.2% 0 0;}
.boxFilterC{width:100%;display:grid !important;grid-template-columns:1fr !important;position:relative;z-index:99999;margin:0 0.2% 0 0;}
.boxFiltersBottom > * {text-align:left;width:100%;}
.boxFiltersBottom{position:relative;display:inline-block;width:100%;margin:0 0 0 0;}
.boxFilterD{width:100%;display:grid !important;grid-template-columns:1fr !important;position:relative;z-index:99999;margin:0 0 0 0%;}
.boxFilterE{width:100%;display:grid !important;grid-template-columns:1fr !important;position:relative;z-index:99999;margin:0 0.2% 0 0;}
.boxFilterF{width:100%;display:grid !important;grid-template-columns:1fr !important;position:relative;z-index:99999;margin:0 0.2% 0 0;height:10px;}
.container{grid-template-columns: 100% !important;border:1px solid var(--color-secondary-100);margin: 20px 0px;padding: 0px 10px;}
.boxContL{width:100%;float:inline-end;position:relative;margin:40px 0px 10px 0px;text-align:right;top:0px;left:0px;}
.boxContR{width:100%;float:inline-end;position:relative;margin:inherit;text-align:left;top:-90px;left:0px;}
.divClose{text-align:right;margin:-40px 0px 0 0;}
.boxElement{width:100%;  min-height:100%;transition: none;} 
.boxElement:hover{transition: none;} 
.dropdown{width:auto;}
.zusInfos:hover{ background:var(--button-background-color-hover);border:var(--button-background-color-hover) solid 1px;}
.contElement {padding: 0px 15px;  }
.titelBox{font-size:18px;height:auto;padding-right: 16px;line-height: initial;}
.descBox{font-size: 90%;line-height: 1.2;margin-bottom:0px;max-height:120px;}
.lineStatus { font-size:14px;line-height:18px;margin:20px 0px!important;position:initial;}
.input, select, textarea { font-size:14px;}
.boxMainFilter {width: 100%;max-height:45px;}
a#showSearch{ margin: 20px 0px !important;}
span.countSearch{margin-top:20px};
.boxSetfilter{padding:9px 7px 11px 11px;margin:3px 9px 9px 0px;}
.zurBtn{ padding:9px 7px 11px 11px;margin:9px 9px 9px 0px;}

}