:root,
::before,
::after{
	--column_gutter: 18px; 
	--max_logo_width: 220px;


	/* IMAGES */
	--button-image-leichte-sprache-weiss: url(../images/leichte_Sprache_FFFFFF.svg); /*leichte sprache weiß*/
	--button-image-kontrast-weiss: url(styles/web/dresden.de/images/contrast_white.svg); /*kontrast weiß*/

	/* Farbe der Hintergrundbilder der Buttons: Zurück-Pfeil, Weiter-Pfeil, OK-Haken, Abbrechen-Kreuz */
    	--button-image-pfeil-rechts: url(../images/navigate_right_black.svg); /* weiß: url(../images/navigate_right.svg); schwarz: url(../images/navigate_right_black.svg);*/
	--button-image-pfeil-rechts-weiss: url(../images/navigate_right.svg);
    	--button-image-pfeil-links: url(../images/navigate_left_black.svg); /*url(../images/navigate_left.svg); weiß: url(../images/navigate_left.svg); schwarz: */
	--button-image-pfeil-links-weiss: url(../images/navigate_left.svg); 
    	--button-image-abort: url(../images/cross.svg); /* weiß: url(../images/cross_white.svg); schwarz: url(../images/cross.svg) */
    	--button-image-ok: url(../images/check_black.svg); /*weiß: url(../images/check_white.svg); schwarz: url(../images/check_black.svg) */


	/* FARBEN */
	--primary-color: #FFEA00; /*hellgold*/
       	--secondary-color: #DBBD00; /*dunkelgold*/

	--color-hellgold: #FFEA00;
        --color-dunkelgold: #DBBD00;
        --color-schwarz: #000000;
        --color-weiss: #FFFFFF;

        --color-grau0: #353535;
        --color-grau1: #474747;
        --color-grau2: #595959;
        --color-grau3: #6D6D6D;
        --color-grau4: #8D8D8D;
        --color-grau5: #C2C2C2;
        --color-grau6: #DBDBDB;
        --color-grau7: #EBEBEB;	

	/* Für Borders */
	--formFieldBorder: var(--formFieldBorderWidth) var(--formFieldBorderStyle) var(--formFieldBorderColor);
	--formFieldBorderRadius: 50px;
  	--focusOutlineStyle: dotted;
  	--focusBorderStyle: 2px dotted;
  	--focusButtonOutlineWidth: 2px;
  	--focusButtonOutlineOffset: var(--focusButtonOutlineWidth);
  	--focusButtonOutlineStyle: dotted;
  	--focusButtonOutline: var(--focusButtonOutlineWidth) var(--focusButtonOutlineStyle) #000;

	/* FONTS */
	/*dunno if works*/
	--font-family: "Source Sans Pro", sans-serif;
  	--font-family_styled: "Source Sans Pro", sans-serif;
  	--font-family_styled_classic: "adobe-garamond-pro", garamond, serif;

	/* Accordion border color tests */
	/* Test, welche Farbe passend ist */
	--border-color-accordion: #dddddd;
	--border-color-accordion-2: #c5c5c5;
        --border-color-accordion-3: rgba(61,61,61,0.2);
	--border-color-accordion-4: var(--color-grau6); 

	--border-color-focus: /*yellow*/ transparent; /*Farbe für Border bei Focus*/
	--border-color-hover: var(--primary-color); /*Farbe für border bei Hover*/ 
	--border-color-hover-focus: var(--primary-color); /*Farbe für Border bei Hover und Focus*/	 

	/*--clr-functional-visited: var(--color-grau2);*/
	--color-disabled-info-circle: #e0e0e0;

	--color_text: #000000;
	--color_dark: #000;
	--color_light: #fff;

	--color_background_page: #ebebeb;
	--color_background_body: #d2d2d2;
	--color_background_footer: #353535;
	
	
	/* Allgemeines */
 	--links: #a6921a; /*Farbe von Links, z.B. Hilfe, Impressum...*/
 	--links-focus: var(--links); /*Farbe von Links bei Focus*/
  	--links-hover: var(--links); /*Farbe von Links bei Hover*/
	--links-hover-focus: var(--links-hover); /*Farbe von Links bei Hover und Focus*/

	
	/* BUTTONS */
	/*Hover: mit Maus über Element fahren
	  Focus: Tastatur liegt auf Element*/
	
	/*Farbe Buttons*/
	--button-color: var(--primary-color); 
	--button-color-hover: var(--primary-color);
       	--button-color-focus: var(--primary-color); 
	--button-color-hover-focus: var(--button-color-hover);	
	
	/*Farbe Disabled Buttons*/
	--button-color-disabled: #EFEFEF; 
	--button-color-focus-disabled: /*rgba(61,61,61,0.2);*/ #D3D3D3; /*bei Focus*/
    	--button-color-hover-disabled: #D3D3D3; /*bei Hover*/
    	--button-color-hover-focus-disabled: var(--button-color-hover-disabled); /*bei Hover und Focus*/

	/*Schriftfarbe Buttons*/
        --button-font-color: #000000;	
	/*bei Hover*/
	--button-font-color-hover: #000000;
       	/*bei Focus*/
        --button-font-color-focus: #000000;
	/*bei Hover und Focus*/
    	--button-font-color-hover-focus: var(--button-font-color-hover);

	/*Plus/Minus-Button Schriftfarbe und Hintergrundfarbe*/
	--plusminus-button-font-color: #000000; 
	--plusminus-button-color: var(--primary-color);  

	/*Farbe Border von Buttons*/
        --button-border-color: transparent;
	/*bei Hover (+Focus)*/
    	--button-border-color-hover: transparent; 
    	--button-border-color-focus: transparent;
	--button-border-color-focus: var(--primary-color);
    	--button-border-color-hover-focus: var(--button-border-color-hover);

	/*Farbe Border von Buttons bei Focus*/
    	--button-border-color-focus: var(--border-color-focus); 


	/* ACCORDIONS */
       	/* ausklappbare Elemente, zB. Infoboxen*/
        /*Accordion geöffnet */
	--accordion-header-color-open: var(--primary-color);
        --accordion-header-font-color-open: var(--button-font-color); /*TODO*/
        --accordion-header-border-color-open: var(--primary-color);

	/*Accordion geöffnet bei Hover*/
        --accordion-header-color-open-hover: /*var(--secondary-color);*/ var(--primary-color);
        --accordion-header-font-color-open-hover: var(--button-font-color);
        --accordion-header-border-color-open-hover: var(--primary-color);

	/*Accordion geöffnet bei Focus*/
        --accordion-header-color-open-focus: var(--primary-color);
        --accordion-header-font-color-open-focus: var(--button-font-color);
        --accordion-header-border-color-open-focus: var(--button-border-color-focus); /*TODO*/

	/*Accordion geöffnet bei Hover und Focus*/
        --accordion-header-color-open-hover-focus: var(--accordion-header-color-open-focus);
        --accordion-header-font-color-open-hover-focus: var(--accordion-header-font-color-open-hover);
        --accordion-header-border-color-open-hover-focus: var(--accordion-header-border-color-open-hover);

	/*Accordion geschlossen*/
	--accordion-closed-color: /*rgba(61,61,61,0.2)*/ var(--color-grau6); 
        --accordion-header-color-closed: var(--accordion-closed-color);
        --accordion-header-border-color-closed: var(--accordion-closed-color);
        --accordion-header-font-color-closed: rgb(25,25,25);

	/*Accordion geschlossen, bei Hover*/
        --accordion-header-color-closed-hover: var(--accordion-closed-color);
        --accordion-header-border-color-closed-hover: /*var(--primary-color);*/ var(--border-color-accordion); 
        --accordion-header-font-color-closed-hover: rgb(25,25,25);

	/*Accordion geschlossen, bei Focus*/
        --accordion-header-color-closed-focus: var(--accordion-closed-color);
        --accordion-header-border-color-closed-focus: /*var(--accordion-header-border-color-closed-focus);*/ /*var(--primary-color);*/ var(--border-color-accordion-4);  
        --accordion-header-font-color-closed-focus: rgb(25,25,25);

	/*Accordion geschlossen, bei Hover und Focus*/
        --accordion-header-color-closed-hover-focus: var(--accordion-header-color-closed-hover);
        --accordion-header-border-color-closed-hover-focus: /*var(--accordion-header-border-color-closed-hover);*/ /*var(--primary-color);*/ var(--border-color-accordion-4);
        --accordion-header-font-color-closed-hover-focus: var(--accordion-header-font-color-closed-hover);

	/*KONTRAST Accordion*/
	/*Accordion geöffnet mit Kontrast*/
	--kontrast-accordion-header-color-open: black; 
	--kontrast-accordion-header-font-color-open: white; 
	--kontrast-accordion-header-border-color-open: black; 

	/*Accordion geschlossen mit Kontrast*/
	--kontrast-accordion-header-color-closed: white; 
	--kontrast-accordion-header-font-color-closed: black; 
	--kontrast-accordion-header-border-color-closed: rgba(61,61,61,0.2);

	/*Accordion geöffnet bei Hover mit Kontrast*/
	--kontrast-accordion-header-color-open-hover: black; 
	--kontrast-accordion-header-font-color-open-hover: white; 
	--kontrast-accordion-header-border-color-open-hover: white; 

	/*Accordion geöffnet bei Focus mit Kontrast*/
	--kontrast-accordion-header-color-open-focus: black; 
	--kontrast-accordion-header-font-color-open-focus: white;
	--kontrast-accordion-header-border-color-open-focus: white; 

	/*Accordion geschlossen bei Hover mit Kontrast*/
	--kontrast-accordion-header-color-closed-hover: white; 
	--kontrast-accordion-header-border-color-closed-hover: black; 

	/*Accordion geschlossen bei Focus mit Kontrast*/
	--kontrast-accordion-header-color-closed-focus: white;
	--kontrast-accordion-header-border-color-closed-focus: black; 

	/* FONT */
	--font-colored: #000; /*maybe change?*/

	--column-gutter: 18px;

}

* {
	font-family: var(--font-family); 
}

.wrapper_nav {
        background: var(--color-schwarz):
}

.container, .wrapper{
        width: 100%;
}

.wrapper_nav .page {
        position: unset;
        display: flex;
        padding-left: 0;
        padding-right: 0;
}

.oversize {
  	background-color: var(--color-schwarz);
  	display: flex;
  	flex-flow: row wrap;
  	justify-content: space-around;
}

.header_logo {
	/*todo, hab ich aber nicht gebraucht*/
}

.lhd_tevis_menu {
	/*todo, hab ich aber nicht gebraucht*/
}

.logo_container {
  	flex-grow: 1;
  	max-width: 220px;
}

img {
	/*das vllt ändern, falls das die grünen hacken wieder verschiebt*/
	/*display: block;*/ 
}

.logo_link {
   	display: flex;
   	z-index: 10;
   	align-items: center;
   	background-color: var(--color-hellgold);
	max-width: max(33vw, 130px);
   	height: 100%;
   	position: relative;
}

.logo_link img {
	width: 100%; 
	max-width: var(--max-logo-width); /*todo*/
	height: auto;
}	

.header_logo {
  	width: 100%;
	margin-top: 20px; 
  	/*background-color: var(--color-hellgold);*/
  	/*padding: 10px;*/
  	/*margin-bottom: -20px;*/
}

.mixed_content_container {
        display: flex;
	/*flex-grow: 1;*/
}

.search_container {
        display: flex;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: calc(var(--column_gutter) * 1.5);
        justify-content: flex-end;
        flex-grow: 1;
}

.logo_link::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 20px;
        bottom: -20px;
        background-color: var(--color-hellgold);
}

h1 {
    	color: var(--color-schwarz); 
}

/* Blendet temporär die Schrittanzeige aus, nicht barrierefrei*/
.wizard {
    	display: none;
}

/* Blendet temporär die Tevis-Footer-Links aus, nicht barrierefrei*/
.footer_links {
    	display: none;
}

.display_page_header {
	display: none;
}

.display_page_footer {
	display: none;
}

/*temp test*/
.kontrast :focus-visible {
  	outline: 1px double black !important;
  	color: white !important;
}

/* BUTTONS */

.NavigationButton, .nomenu {
    	background-color: var(--color-schwarz); 
}

.btn{
    	background-color: var(--button-color); 
	/*height: 60px;*/
	/*line-height: 60px;*/
	/*padding: 0;*/
	/*transition: background-color .1s;*/
	outline: 0 !important; 
    	color: var(--color-schwarz);
    	font-weight: bold;
	/*sf*/
	border: 0px solid var(--button-border-color) !important;
}

.sel_button:hover, .sel_button:focus{
	/*sf*/
	border: 0px solid var(--button-border-color) !important;
}


/*.sel_button, .btn, .btn-primary, .pull-right, .onehundred, .select_mdt_btn {
    	/*background-color: var(--color-hellgold);*/

/* WIZARD */
/* Ändert Farbe von den Schrittkreisen */
.wizard li.active span.round-tab {
    	background: #fff;
    	border: 6px solid var(--color-schwarz);
    	color: var(--color-schwarz);
}

/*Inaktive Tabs/Kreise*/
.wizard li.disabled span.round-tab {
    	border: 6px solid var(--color-disabled-info-circle);
    	color: var(--color-disabled-info-circle);
}

/* Zahlen */
.wizard li.visited span.round-tab {
    	border: 6px solid var(--color-schwarz);
    	color: var(--color-schwarz);
}

/* Besuchte Tabs/Kreise */
.wizard li.done span.round-tab {
    	border: 6px solid #000;
    	color: var(--color-schwarz);
}



/* Trennlinie */
.wizard .nav-tabs{
    	/*border-bottom-color: var(--clr_t1_hellgold);*/
    	border-bottom-color: var(--color-schwarz);
    	border-bottom-width: 3px;	
}

/* Pfeil unter den Kreisen */
.wizard li.active:after {
    	content: " ";
    	opacity: 1;
    	margin: 20px auto 0 auto;
    	border: 10px solid transparent;
    	/*border-bottom-color: #0095ff*/;
    	border-bottom-color: var(--color-schwarz);
    	display: block;
    	width: 1px;
}

/**/

.disclosure-nav {
 	background-color: black;
        display: flex-end;
	list-style-type: none;
	padding: 0;
	justify-content: flex-end;
}

.disclosure-nav button {
    	align-items: center;
    	border: 1px solid transparent;
    	background-color: black;
	/*border-right-color: transparent;
    	border-right-color: var(--navigation-vertical-border-color);*/
    	display: flex-end;
    	padding: 1em 0.25em 1em 1em;
}

/**/
.languageSelect{
    	background-color: var(--color-schwarz);
    	padding-right: 1em !important;
}

/* Ändert die Hintergrundfarbe der Buttons für Kontrast und Einfache Sprache bei Hover */
.disclosure-nav button:hover, .disclosure-nav button[aria-expanded="true"] {
  	background-color: black;
  	color: #fff; 
}

/* Ändert die Hintergrundfarbe der Buttons für Kontrast und Einfache Sprache bei Focus */
.disclosure-nav button:focus {
	background-color: black; 
  	/*background-color: var(--navigation-button-color-focus);*/ 
  	color: #fff;
}

/* Ändert die Hintergrundfarbe der Buttons für Kontrast und Einfache Sprache bei Focus:Hover */
.disclosure-nav button:focus:hover {
  	background-color: black;
  	/*background-color: var(--navigation-button-color-hover-focus);*/
  	color: #fff;
}

/*todo*/
.disclosure-nav button:hover:focus {
  	border-color: black;
  	/*border-color: var(--navigation-vertical-border-color);*/
  	position: relative;
}

/*button text hover*/
.btn.hover,
.btn:hover {
    	color: var(--button-font-color-hover);
    	text-decoration: underline;
    	text-decoration-style: solid;
    	text-decoration-color: #000000; 
	z-index: 5 !important;
    	/*text-decoration-thickness: 2px;*/ 
}

/*TODO*/
.btn:focus,
.btn:hover {
	/*background-color: red;*/
    	color: var(--button-font-color-focus);
    	text-decoration: underline;
}

.btn.hover.focus,
.btn:hover:focus {
    	color: var(--button-font-color-hover-focus);
    	text-decoration: none;
}

.btn.active,
.btn:active {
        outline: 0; 
        background-image: none;
       	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
        /*box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);*/
	box-shadow: inset 0 0px 0px rgba(0,0,0,0);
	text-decoration: underline; 
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    	cursor: not-allowed;
    	opacity: 1 ;
    	/*filter: alpha(opacity=65);*/
    	-webkit-box-shadow: none;
    	box-shadow: none;
    	border-color: #EDEDED;
    	/*border-color: var(--button-color);*/
    	color: var(--button-font-color-disabled);
    	background-color: var(--button-color-disabled) !important;
}

.btn:active.disabledButton,
.btn:focus.disabledButton,
.btn:hover.disabledButton {
    	background-color: var(--button-color-hover-disabled) !important; /*todo*/ 
	/*border: var(--button-color) !important;*/
	border: #EDEDED !important; 
}

/*active and focus not*/
.btn:active:not(.disabledButton),
.btn:focus:not(.disabledButton) {
        background-color: var(--button-color-focus) !important;
        color: var(--color-schwarz) !important;
        border-color: transparent !important;
        border-color: var(--button-border-color-focus) !important;
	/*border-color: black !important;
        border-style: dotted;*/
	border: dotted black;
}

/*allg hovereffekt von buttons auf erster seite und auf den seiten unten, aber nicht den grauen*/
.btn:hover:not(.disabledButton) {
        /*color: var(--color-schwarz) !important;*/ /*text color should maybe stay grey?*/ 
        border-color: transparent !important;
        border-color: var(--button-border-color-hover) !important;
}

.btn.disabled:hover,
.btn[disabled]:hover {
    	background-color: var(--button-color-hover-disabled) !important;  /*hover color from disabled button, change!!!!!!!!*/
    	outline: none !important;
    	border-bottom-color: #fff;
    	border-color: transparent !important;
}

.btn-number:hover:not(.disabledButton) {
  	background-color: var(--secondary-color);
}

.disabledButton {
    	cursor: not-allowed !important;
    	opacity: 1;
    	color: #666;
    	color: var(--button-font-color-disabled) !important;
    	background-color: var(--button-color-disabled)!important;
}

.input-number-control .input-number {
    	height: 55px;
    	border: 1px solid lightgrey;
    	text-align: center;
    	font-weight: 600;
    	/*font-size: 22px;*/
    	font-size: 1.571em;
    	margin-left: 0px;
    	margin-right:0px;
    	margin-top: 2px;
    	width: 100%;
}

input:hover {
    	/*border: 2px solid var(--input-border-color-hover) !important;*/
	border: 2px solid black !important;
    	/*transition: border-color .3s;*/
}

input:focus {
    	/*border: 2px solid var(--input-border-color-focus) !important;*/
	border: 2px solid black !important;
	border-style: dashed; 
    	/*transition: border-color .3s;*/
}

/*sf*/
input.required {
	background-image: none !important;
}
.validateimg {
  	content: none !important;
}


/*#zurueck[aria-label] {
  	padding-left: 30px;
}*/

.disabledButton:hover {
    	background-color: var(--button-color-hover-disabled) !important;
}
.disabledButton:focus {
    	background-color: var(--button-color-focus-disabled) !important;
}

/*KONTRAST Button*/
/*note: change disabled buttons -> bc theyre not grey anaymore,for now okay but TODO*/
.kontrast .btn {
    	border-radius: 0;
    	background-color: #000!important;
    	height: 60px;
    	line-height: 60px;
    	transition: background-color .1s;
    	color: #fff !important;
    	white-space: normal;
    	/*line-height: initial;*/
    	line-height: 1;
    	border-radius: 0px 0px 0px 0px;
    	border-radius: var(--button-border-radius-left-top) var(--button-border-radius-right-top) var(--button-border-radius-right-bottom) var(--button-border-radius-left-bottom);
}

/* Pfeile nach Rechts */
.pull-right {	
    	background-repeat: no-repeat;
    	background-image: var(--button-image-pfeil-rechts) !important;
    	background-size: 32px auto;
    	background-position: 95%;
}
/*sf*/
huhu

.kontrast .btn:hover.disabledButton {
    	//background-image: var(--button-image-pfeil-rechts-weiss) !important;
}
.kontrast .btn.disabledButton {
    	background-image: var(--button-image-pfeil-rechts-weiss) !important;
}
.kontrast .pull-right:not(.disabledButton), .kontrast .pull-right:not(.disabledButton) {
  	background-image: var(--button-image-pfeil-rechts-weiss) !important;
}
.kontrast .pull-left, .kontrast .pull-left {
  	background-image: var(--button-image-pfeil-links-weiss) !important;
}

/* Checkmark */
.btn-ok{
    	background-repeat: no-repeat;
    	background-image: var(--button-image-ok) !important;
    	background-size: 32px auto;
    	background-position: 90%;
}

/* Pfeile nach Links */
.pull-left  {
    	background-repeat: no-repeat;
    	background-size: 32px auto;
    	background-position: 4% !important;
    	background-image: var(--button-image-pfeil-links) !important;
}

/* Cross */
.btn-abort{
    	background-repeat: no-repeat;
    	background-size: 32px auto;
    	background-position: 10% !important;
    	background-image: var(--button-image-abort) !important;

}

/* ACCORDIONS */
.ui-state-default {
    	border-radius: var(--accordion-border-radius-left-top) var(--accordion-border-radius-right-top) var(--accordion-border-radius-right-bottom) var(--accordion-border-radius-left-bottom);
    	font-family: var(--font-family);
}

.ui-accordion-header.ui-state-active {
    	background-color: var(--accordion-header-color-open) !important;
    	border-color: var(--accordion-header-border-color-open) !important;
    	color: var(--color-schwarz) !important;
    	letter-spacing: 0.03em;
}

.ui-accordion-header.ui-state-default:not(.ui-state-active){
    	background-color: var(--accordion-header-color-closed) !important;
    	border-color: var(--accordion-header-border-color-closed) !important;
    	color: var(--accordion-header-font-color-closed) !important;
    	letter-spacing: 0.03em;
}

.ui-accordion-header.ui-state-active:hover {
    	background-color: var(--accordion-header-color-open-hover)!important;
    	border-color: var(--accordion-header-border-color-open-hover)!important;
    	color: var(--accordion-header-font-color-open-hover) !important;
    	text-decoration: underline;
    	letter-spacing: 0.03em;
}

.ui-accordion-header.ui-state-active:focus {
    	background-color: var(--accordion-header-color-open-focus) !important;
    	border-color: var(--color-hellgold) !important;
    	color: var(--color-schwarz) !important;
    	letter-spacing: 0.03em;
}

.ui-accordion-header.ui-state-active:focus:hover {
    	background-color: var(--color-hellgold) !important;
    	/*border-color: var(--accordion-header-border-color-open-hover-focus) !important;*/
    	/*color: var(--accordion-header-font-color-open-hover-focus) !important;*/
    	color: var(--color-schwarz)!important;
    	letter-spacing: 0.03em;
}

.ui-accordion-header:hover:not(.ui-state-active){
    	background-color:var(--accordion-header-color-closed-hover) !important;
    	border-color: /*var(--accordion-header-border-color-closed-hover)*/ var(--border-color-accordion-4) !important;
    	color: var(--accordion-header-font-color-closed-hover) !important;
    	letter-spacing: 0.03em;
    	text-decoration: underline; 
}

.ui-accordion-header:focus:not(.ui-state-active){
    	background-color:var(--accordion-header-color-closed-focus) !important;
    	border-color: var(--accordion-header-border-color-closed-focus) !important;
    	color: var(--accordion-header-font-color-closed-focus) !important;
    	letter-spacing: 0.03em;
}

.ui-accordion-header:focus:hover:not(.ui-state-active){
    	background-color:var(--accordion-header-color-closed-hover-focus) !important;
    	border-color: var(--accordion-header-border-color-closed-hover-focus) !important;
    	color: var(--accordion-header-font-color-closed-hover-focus) !important;
    	letter-spacing: 0.03em;
}

/*Accordion Kontrast*/
.kontrast .ui-accordion-header.ui-state-active {
        background-color: var(--kontrast-accordion-header-color-open) !important; /*black*/
        color: var(--kontrast-accordion-header-font-color-open) !important; /*white*/
        border-style: dashed !important;
        border-color: var(--kontrast-accordion-header-border-color-open) !important; /*black*/
        border-width: 3px;
}

.kontrast .ui-accordion-header.ui-state-default:not(.ui-state-active){
        background-color: var(--kontrast-accordion-header-color-closed) !important; /*white*/
        border-color: var(--kontrast-accordion-header-border-color-closed); /*rgba(61,61,61,0.2)*/
        color: var(--kontrast-accordion-header-font-color-closed) !important; /*black*/
        border-width: 3px;
}

.kontrast .ui-accordion-header.ui-state-active:hover {
        background-color: var(--kontrast-accordion-header-color-open-hover) !important; /*black*/
        border-style: dashed;
        border-color: var(--kontrast-accordion-header-border-color-open-hover) !important; /*white*/
	color: var(--kontrast-accordion-header-font-color-open-hover) !important; /*white*/
}

.kontrast .ui-accordion-header.ui-state-active:focus {
        background-color: var(--kontrast-accordion-header-color-open-focus) !important; /*black*/
        border-color: var(--kontrast-accordion-header-border-color-open-focus) !important; /*white*/
        border-style: dashed;
        outline: None !important;
}

.kontrast .ui-accordion-header:hover:not(.ui-state-active){
        background-color: var(--kontrast-accordion-header-color-closed-hover) !important; /*white*/
        border-color: var(--kontrast-accordion-header-border-color-closed-hover) !important; /*black*/
        border-style: solid;
}

.kontrast .ui-accordion-header:focus:not(.ui-state-active){
        background-color: var(--kontrast-accordion-header-color-closed-focus) !important; /*white*/
        border-color: var(--kontrast-accordion-header-border-color-closed-focus) !important; /*black*/
        border-style: solid;
}

/*sf*/
.kontrast .input-number-control .input-number {
  	height: 60px;
}
.kontrast .input-number-control:hover {
  	height: 54px;
  	margin-top: 5px;
}
.kontrast .input-number-control:focus {
  	height: 54px;
  	margin-top: 5px;
}
.kontrast .input-number:hover {
  	height: 54px;
  	margin-top: 4px;
}
.kontrast .input-number:focus {
  	margin-top: 4px !important;
}
.kontrast input:hover, .kontrast input:focus, .kontrast input:active {
  	outline: 2px solid black !important;
  	height: 56px !important;
}
.kontrast .input-group[class*="col-"]:hover {
  	top: 7px !important;
  	margin-bottom: 19px !important;
}

/* MAP BUTTON */
/*change variables*/
#map_agreement{
    	border: solid 1px;
    	margin: 2% 0% 2% 0%;
    	text-align: center;
    	padding:8px;
}

#map_agreement_accept{
    	height: 34px;
    	margin-right: 20px;
    	padding: 0px 20px;
    	color: black;
    	border: 2px solid var(--button-border-color) !important;
    	text-transform: none;
}

#map_agreement_accept:hover {
    	color: var(--button-font-color-hover);
    	border: 2px solid var(--button-border-color-hover) !important;
}

#map_agreement_accept:focus {
    	color: var(--button-font-color-focus);
    	border: 2px solid var(--button-border-color-hover) !important;
}

#map_agreement_accept:focus:hover {
    	color: var(--button-font-color-hover-focus);
    	border: 2px solid var(--button-border-color-hover-focus) !important;
}

.kontrast #map_agreement_accept:hover,
.kontrast #map_agreement_accept:active,
.kontrast #map_agreement_accept:focus {
    	color: white;
}   


/*why is this here*/
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
 	/* border: 1px solid #003eff;*/
  	background: #007fff;
  	background-color: rgb(0, 127, 255);
  	font-weight: normal;
  	color: #ffffff;
}

/* LINKS */
/*TODO*/
a {
	/*color: #595959;*/ /*grau2*/
	color: black; 
  	/*color: var(--links);*/
}

a:hover {
  	color: black;
  	/*color: var(--primary-color);*/
}
a:focus {
	outline: dotted thin; /*WIPi*/
  	/*color: var(--links-focus);*/
	color: black; 
}

a:focus:hover {
  	/*color: var(--links-hover-focus);*/
	color: black; 
}

/* POP UP WINDOW */

.colored-title {
    	color:  var(--font-colored)!important;
    	font-weight: 600;
}

.colored-title > span {
    	color: #3d3d3d !important;
    	font-weight: 400;
}

/*davor kommt ui-selectmenu-button.ui-button*/
/*checkboxes*/
input[type=checkbox] {
	position: absolute;
    	left: -200%;
    	opacity: .1;
}

input[type=checkbox]+span {
	position: absolute;
    	width: 35px;
    	height: 35px;
    	left: 0;
    	top: 0;
	/*background-color: #ececec;
    	background-color: rgba(61, 61, 61, 0.2);*/
    	transition: background-color .1s;
    	/*border: 2px solid var(--input-border-color);*/ /*das grau von den kästchen*/
	border: 2px solid black; 
    	/*outline: 1px solid var(--input-border-color) !important;*/
    	border-radius: var(--checkbox-border-radius-left-top) var(--checkbox-border-radius-right-top) var(--checkbox-rorder-radius-right-bottom) var(--checkbox-border-radius-left-bottom);
}

/*focus von ungecheckter box*/
input[type=checkbox] + span:focus{
	/*border-color: var(--checkbox-border-color-focus);*/
	border-color: black;
       	/*border-style: dashed;*/	
}

input[type=checkbox] + span:hover{
    	/*border-color: var(--checkbox-border-color-hover);*/ 
	border-color: black; 
}

input[type=checkbox] + span:hover:focus{
    	/*border-color: var(--checkbox-border-color-hover-focus);*/
	border-color: black;
}

/*wenn man von der box weg hovert + aktives feld*/
input[type=checkbox]:focus + span{
    	/*border-color: var(--checkbox-border-color-focus);*/
	border-color: black; 
}

/*hovert alle unangecheckten boxen*/
input[type=checkbox]:hover + span{
    	/*border-color: var(--checkbox-border-color-hover);*/
	border-color:black; 
}

input[type=checkbox]:hover:focus + span{
    	/*border-color: var(--checkbox-border-color-hover-focus);*/
	border-color: black; 
}

.kontrast input[type=checkbox]:hover+span{
    	border: 4px solid black;
    	/*border: 1px solid var(--checkbox-border-color-hover);*/
}

input[type=checkbox]:checked+span {
    	background-image: url(../images/check-green.svg);
    	background-position-x: 60%;
    	background-position-y: center;
    	background-repeat: no-repeat;
    	background-size: 24px;
}

/*focus von gecheckter box*/
input[type=checkbox]:checked + span:focus{
    	/*border-color: var(--checkbox-border-color-focus);*/
	border-color: black;
	/*border-style: dashed;*/ 
}

/*hovert alle gecheckten boxen, wie die ungecheckten!!!*/
input[type=checkbox]:checked + span:hover{
	/*border-color: var(--checkbox-border-color-hover);*/
	border-color: black; 
}

input[type=checkbox]:checked + span:hover:focus{
    	/*border-color: var(--checkbox-border-color-hover-focus);*/
	border-color: black; 
}


/*Persönliche Daten Formular*/
/*TODO: variablen, telefonnummer nicht davon betroffen + wo wird die graue farbe festgelegt?*/

.tvweb_label {
    	float: left;
    	display: block;
    	clear:both;
    	width: 100%;
    	margin-top:10px;
    	/*font-size: 14px;*/
    	font-size: 1em;
    	font-weight: bold; 
}


.custom-a11yselect-container .custom-a11yselect-btn {
    	background:transparent none;
    	/*border:2px solid var(--selectbox-border-color);*/
    	border: 2px solid black; 
    	display:block;
    	font-family:Helvetica, Arial, sans-serif;
    	/*font-size:14px;*/
    	font-size: 1em;
    	font-style:normal;
    	font-weight:normal;
    	line-height:20px;
    	max-width:100%;
    	overflow:hidden;
    	padding:7px 35px 7px 15px;
    	text-align:left;
    	text-overflow:ellipsis;
    	white-space:nowrap;
    	width:100%;
    	/*! border-bottom-left-radius: var(--selectbox-border-radius-left-bottom); */
    	/*! border-bottom-right-radius: var(--selectbox-border-radius-right-bottom); */
    	/*! border-top-left-radius: var(--selectbox-border-radius-left-top); */
    	/*! border-top-right-radius: var(--selectbox-border-radius-right-top); */
    	border-radius: 50px; /*TODO: an varibale anpassen!!!!*/
}

.custom-a11yselect-container .custom-a11yselect-btn:focus{
    	/*border-color: var(--selectbox-border-color-focus);*/
	border-color: black;
       	border-style: dashed;	
}

.custom-a11yselect-container .custom-a11yselect-btn:hover{
    	/*border-color: var(--selectbox-border-color-hover);*/
	border-color: black;
}

.custom-a11yselect-container .custom-a11yselect-btn:focus:hover{
    	/*border-color: var(--selectbox-border-color-hover-focus);*/
	border-color: black;
	border-style: dashed;
}

/* FORMULAR */
input[type=text],
input[type=number],
input[type=email],
textarea {
    	/*border: 2px solid var(--input-border-color);*/
	border: 2px solid var(--color-schwarz); 
    	height: 35px;
    	margin-bottom: 5px;
    	width: 100%;
    	outline: 0;
    	padding-left: 10px;
    	padding-right: 10px;
    	/*transition: border-color .1s;*/
    	-moz-appearance: textfield;
	/*border: var(--formFieldBorder);*/
  	border-radius: var(--formFieldBorderRadius);
    	/*border-radius: var(--input-border-radius-left-top) var(--input-border-radius-right-top) var(--input-border-radius-right-bottom) var(--input-border-radius-left-bottom);*/
}

input:focus, select:focus, textarea:focus {
  	border-style: dashed;
}


/*todo*/
input[type=number]:focus {
    	border: 2px dashed black !important;
	border-color: black;
}

textarea {
    	resize: vertical;
    	min-height: 75px;
    	padding-top: 8px;
    	padding-bottom: 8px; 
}

/*todo*/
/* Umrandung vom angeklickten/aktiven feld */
input[type=text]:focus,
input[type=email]:focus,
select:focus,
textarea:focus {
    	border-color: rgba(61, 61, 61, .25);
    	/*border-color: var(--input-border-color-focus) !important;*/
    	/*border-color: pink !important;*/
	border-color: black !important; 
	border-style: dashed !important;
	/*outline: dashed black !important;*/ 	
}

/*todo*/
/* Hover das Aktive */
input[type=text]:focus:hover,
input[type=email]:focus:hover,
select:focus:hover,
textarea:focus:hover {
    	border-color: rgba(61, 61, 61, .25);
    	/*border-color: var(--input-border-color-hover-focus) !important;*/
    	border-color: black !important;
       	border-radius: 50px; 	
}

/*todo*/
/* hovert die anderen, die gerade nicht angeklickt werden */
input[type=text]:hover,
input[type=email]:hover,
select:hover,
textarea:hover {
    	border-color: rgba(61, 61, 61, .25);
    	/*border-color: var(--input-border-color-hover) !important;*/
    	/*border-color: blue !important;*/
       	border-color: black !important; 	
}

/*sf*/
.input-group[class*=col-] {
    	top: 12px !important;
    	margin-bottom: 24px !important;
}

/* Checkboxes aus zweiter Funktionseinheit */
.checkbox{
	/*sf*/
	top: 3px !important;
	margin-bottom: 12px !important;
}

.checkbox .cr{
    	position: relative;
    	display: inline-block;
    	border: 2px solid black;
    	border-radius: 0px;
    	width: 1.3em;
    	height: 1.3em;
    	float: left;
    	margin-right: .5em;
}

.checkbox .cr .cr-icon{
    	position: absolute;
    	font-size: .8em;
    	line-height: 0;
    	top: 50%;
    	left: 20%;
}

.kontrast .checkbox .cr:active,
.kontrast .checkbox .cr:focus,
.kontrast .checkbox .cr:hover {
    	background-color: #595959 !important;
    	outline: 3px solid #000 !important;
}

.kontrast .checkbox .cr:checked {
    	background-color: #000;
    	border: 0!important;
    	background-image: url(../images/ic_check.svg);
    	background-position: 50%;
    	background-repeat: no-repeat;
    	background-size: 19px auto;
}

.checkbox label input[type="checkbox"] {
    	display: none;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon {
    	transform: scale(3) rotateZ(-20deg);
    	opacity: 0;
    	transition: all .3s ease-in;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon{
    	transform: scale(1) rotateZ(0deg);
    	opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled + .cr{
    	opacity: .5;
}

/* Kleine Icons (Pfeile, etc.)*/
/* (die sind nicht schwarz sondern grau) */
.ui-icon,
.ui-widget-content .ui-icon {
    	background-image: url("../images/ui-icons_444444_256x240.png");
}

.ui-widget-header .ui-icon {
    	background-image: url("../images/ui-icons_444444_256x240.png");
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
	background-image: url("../images/ui-icons_555555_256x240.png");
}

.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
    	background-image: url("../images/ui-icons_444444_256x240.png");
}

.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
    	background-image: url("../images/ui-icons_777620_256x240.png");
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    	background-image: url("../images/ui-icons_cc0000_256x240.png");
}

.ui-button .ui-icon {
    	background-image: url("../images/ui-icons_777777_256x240.png");
}

/* FOOTER */

/*impressum, datenschutz etc erstmal nur mit display none "auskommentiert" -> kann noch dynamisch gemacht werden*/
/*noch mit in doku aufnehmen*/
#footer-nav {
	/*display: none;*/ 
}

.footer_logo {
	/*display:flex;
	justify-content: space-around;*/
	display: block; 
}

.page_footer {
        background-color: var(--color_background_footer);
        margin-top: 100px;
        color: var(--color-weiss);
}

.page_footer .col2 {
  	text-align: right;
}

.page_footer p {
  	display: inline-block;
}

.page_footer .page {
	/*
  	padding-top: 40px;
  	padding-bottom: 50px;
	*/
	width: 100%;
  	max-width: 767px;
  	margin: 80px auto 20px;
  	padding: 30px 0px 90px 0px;
  	position: relative;
}

.page {
	position: relative; 
	padding: 0 var(--column-gutter); 
	/*das muss ich noch als variable machen*/
	/*max-width: var(--page-width);*/
}

.page_footer .row {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
}

.page_footer .row .col {
  	padding-left: calc(var(--column-gutter) / 2);
  	padding-right: calc(var(--column-gutter) / 2);
}

.page_footer .row .col1 {
  	padding-bottom: var(--column-gutter);
}

.page_footer .row .col2 {
  	flex-grow: 1;
}

.page_footer a {
        color: var(--color-weiss);
}

.site_copyright {
       	/* background-color: var(--color_background_footer);*/
	color: var(--color-weiss);
	font-size: 0.75rem;
}

.meta_nav {
  	font-weight: bold;
  	font-size: 0.75rem;
}

.meta_nav li {
  	display: inline-block;
  	margin: 0 0 0.833333em 18px;
}

.page_footer .site_copyright {
  	margin-left: 18px;
	color: #fff; 
}

/*sf*/
.modal-footer .btn + .btn {
	margin-left: 0px;
}

@media (max-width: 478px) {
	.header_logo {
  		margin-top: 0px;
	}
	.logo_link::after {
  		margin-top: 0px;
  		height: 0px;
	} 
	.logo_container {
  		margin-left: -4px;
	}
	.page_footer ul {
		text-align: center;
		margin-left: -58px !important;
	}
	.page_footer .site_copyright {
		margin-left: 0px;
		width: 100%;
		text-align: center;
	}

.disclosure-nav {
    background-color: black;
    display: flex-end;
    list-style-type: none;
    padding: 0;
}
}