@charset "utf-8";

.site {
	position: relative;
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: 1fr 150px;
	-ms-grid-columns: 250px minmax(min-content,auto) minmax(min-content,auto) 320px;
	grid-template-rows: 1fr 150px;
	grid-template-columns: 250px minmax(min-content,auto) minmax(min-content,auto) 320px;
	grid-template-areas: "main-content main-content main-content main-content" "footer footer footer footer";
	margin: 0;
	padding: 0;
	border: none;
	margin: 0 auto;
	
}
.main-content{
  background:#fff; -ms-grid-row:3; -ms-grid-row-span: 1; -ms-grid-column:1; -ms-grid-column-span:4; grid-area:main-content;
  display:-ms-inline-grid;
  display:inline-grid;
  -ms-grid-rows: min-content;
  -ms-grid-columns: 100%;
  grid-template-rows: min-content;
  grid-template-columns: 100%;
  grid-template-areas:
    "chart";
  margin:0; padding:10px; border:none;
  z-index:0;
  overflow: hidden;
}



.chart-container {
	display: grid;
	grid-template-columns: 100% max-content;
	grid-template-rows: minmax(min-content,auto);
}

#chart-draw {
	grid-column-start: 1;
	grid-column-span: 1;
	grid-row-start: 1;
	grid-row-span: 1;
}

.legende {
	display: grid;
	grid-template-columns: 350px;
	grid-template-rows: 40px 50px 40px 40px 40px 40px 40px 40px 40px 40px 30px;
	grid-column-start: 2;
	grid-column-span: 1;
	grid-row-start: 1;
	grid-row-span: 1;
}

.legende-title {
	padding-top: 10px;
	padding-left: 5px;
	grid-column-start: 1;
	grid-column-span: 1;
	grid-row-start: 1;
	grid-row-span: 1;
}

.legende-bottom {
	padding-left: 5px;
	grid-column-start: 1;
	grid-column-span: 1;
	grid-row-start: 11;
	grid-row-span: 1;
}

.legende-1 {
	display: grid;
	padding-left: 5px;
	grid-template-columns: 40px 310px;
	grid-template-rows: 40px;
	grid-column-start: 1;
	grid-column-span: 1;
	grid-row-start: 3;
	grid-row-span: 1;
}

.legende-2 {
	display: grid;
	padding-left: 5px;
	grid-template-columns: 40px 310px;
	grid-template-rows: 40px;
	grid-column-start: 1;
	grid-column-span: 1;
	grid-row-start: 4;
	grid-row-span: 1;
}

.legende-3 {
	display: grid;
	padding-left: 5px;
	grid-template-columns: 40px 310px;
	grid-template-rows: 40px;
	grid-column-start: 1;
	grid-column-span: 1;
	grid-row-start: 5;
	grid-row-span: 1;
}

.legende-4 {
	display: grid;
	padding-left: 5px;
	grid-template-columns: 40px 310px;
	grid-template-rows: 40px;
	grid-column-start: 1;
	grid-column-span: 1;
	grid-row-start: 6;
	grid-row-span: 1;
}

.legende-5 {
	display: grid;
	padding-left: 5px;
	grid-template-columns: 40px 310px;
	grid-template-rows: 40px;
	grid-column-start: 1;
	grid-column-span: 1;
	grid-row-start: 7;
	grid-row-span: 1;
}

.legende-6 {
	display: grid;
	padding-left: 5px;
	grid-template-columns: 40px 310px;
	grid-template-rows: 40px;
	grid-column-start: 1;
	grid-column-span: 1;
	grid-row-start: 8;
	grid-row-span: 1;
}

.legende-7 {
	display: grid;
	padding-left: 5px;
	grid-template-columns: 40px 310px;
	grid-template-rows: 40px;
	grid-column-start: 1;
	grid-column-span: 1;
	grid-row-start: 9;
	grid-row-span: 1;
}

.legende-8 {
	display: grid;
	padding-left: 5px;
	grid-template-columns: 40px 310px;
	grid-template-rows: 40px;
	grid-column-start: 1;
	grid-column-span: 1;
	grid-row-start: 10;
	grid-row-span: 1;
}

.chart {
	background: #fff;
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	-ms-grid-column: 1;
	grid-area: chart;
	height: auto; /*calc(55vw - 130px);*/
	min-height: 0;
	padding: 20px;
	font-family: "Cairo", sans-serif;
	font-size: 16px;
	line-height: 160%;
	font-weight: normal;
	color: #111;
}

.canvas-chart {
	width: 100%;
	max-width: 100%;
	max-height: 100%;
}

.chart a {
	line-height:150%;
	color:#222;
	font-family: "Cairo", sans-serif;
	font-weight: bold;
	text-decoration:none;
}

.chart a:hover {
	color:fuchsia;
	font-weight:bold;
	transition: .25s;
}
.chart-search{
	display: inline-block;
	margin-left: 0;
	margin-top: 0px;
	padding: 7px;
	width: 250px;
	vertical-align:middle;
	align: middle;
}

.chart-search .input-aktie {
  padding: 0;
  margin-top: 0;
  font-size: 13px;
  height: 20px;
  width: 150px;
  border-style:dotted;
  border-width:0.5px;
  border-color:#666;
  border-radius:1px;
  color:#666;
}

.chart-search .input-submit {
	background: #888;
	color:white;
	width:70px;
	text-align:center;
}

.chart-search .input-submit:hover {
  background: #ccc;
}

.company-text2 {
	font-size: 16px;
	line-height: 160%;
	text-align: justify;
}

.legende-dropdn {
	padding-top: 0px;
	grid-column-start: 1;
	grid-column-span: 1;
	grid-row-start: 2;
	grid-row-span: 1;
}

.descr1 {
	display: block;
}

.descr2 {
	display: none;
}

@media (max-width: 1280px) {
	.site {
		grid-template-areas: "main-content main-content" "footer footer";
		-ms-grid-rows: 1fr 150px;
		-ms-grid-columns: 250px 1fr;
		grid-template-rows: 1fr 150px;
		grid-template-columns: 250px 1fr;
	}

	.chart-container {
		grid-template-columns: 1fr;
		grid-template-rows: min-content min-content;
	}

	.legende {
		border: 1px solid #555;
		max-width: 920px;
		line-height: 125%;
		grid-column-start: 1;
		grid-row-start: 2;
		grid-template-columns: 350px 350px;
		grid-template-rows: 40px 50px 40px 40px 40px 30px;
	}

	.legende-title {
		padding-top: 0px;
		grid-column-start: 1;
		grid-column-span: 1;
	}

	.legende-dropdn {
		padding-top: 0px;
		grid-column-start: 2;
		grid-row-start: 1;
	}

	.legende-bottom {
		grid-column-span: 2;
		grid-row-start: 6;
	}

	.legende-1 {
		grid-row-start: 2;
	}

	.legende-2 {
		grid-row-start: 3;
	}

	.legende-3 {
		grid-row-start: 4;
	}

	.legende-4 {
		grid-row-start: 5;
	}

	.legende-5 {
		grid-column-start: 2;
		grid-row-start: 2;
	}

	.legende-6 {
		grid-column-start: 2;
		grid-row-start: 3;
	}

	.legende-7 {
		grid-column-start: 2;
		grid-row-start: 4;
	}

	.legende-8 {
		grid-column-start: 2;
		grid-row-start: 5;
	}
}



@media (max-width: 940px) {
	
	.company-text2 {
		font-size: 20px;
	}

	.chart {
		font-size: 20px;
	}
}

@media (max-width: 720px) {
	.legende {
		display: grid;
		grid-template-columns: 350px;
		grid-template-rows: 40px 50px 40px 40px 40px 40px 40px 40px 40px 40px 30px;
		grid-column-start: 2;
		grid-column-span: 1;
		grid-row-start: 1;
		grid-row-span: 1;
	}
	
	.legende-title {
		padding-top: 10px;
		padding-left: 5px;
		grid-column-start: 1;
		grid-column-span: 1;
		grid-row-start: 1;
		grid-row-span: 1;
	}
	
	.legende-bottom {
		padding-left: 5px;
		grid-column-start: 1;
		grid-column-span: 1;
		grid-row-start: 11;
		grid-row-span: 1;
	}
	
	.legende-1 {
		display: grid;
		padding-left: 5px;
		grid-template-columns: 40px 310px;
		grid-template-rows: 40px;
		grid-column-start: 1;
		grid-column-span: 1;
		grid-row-start: 3;
		grid-row-span: 1;
	}
	
	.legende-2 {
		display: grid;
		padding-left: 5px;
		grid-template-columns: 40px 310px;
		grid-template-rows: 40px;
		grid-column-start: 1;
		grid-column-span: 1;
		grid-row-start: 4;
		grid-row-span: 1;
	}
	
	.legende-3 {
		display: grid;
		padding-left: 5px;
		grid-template-columns: 40px 310px;
		grid-template-rows: 40px;
		grid-column-start: 1;
		grid-column-span: 1;
		grid-row-start: 5;
		grid-row-span: 1;
	}
	
	.legende-4 {
		display: grid;
		padding-left: 5px;
		grid-template-columns: 40px 310px;
		grid-template-rows: 40px;
		grid-column-start: 1;
		grid-column-span: 1;
		grid-row-start: 6;
		grid-row-span: 1;
	}
	
	.legende-5 {
		display: grid;
		padding-left: 5px;
		grid-template-columns: 40px 310px;
		grid-template-rows: 40px;
		grid-column-start: 1;
		grid-column-span: 1;
		grid-row-start: 7;
		grid-row-span: 1;
	}
	
	.legende-6 {
		display: grid;
		padding-left: 5px;
		grid-template-columns: 40px 310px;
		grid-template-rows: 40px;
		grid-column-start: 1;
		grid-column-span: 1;
		grid-row-start: 8;
		grid-row-span: 1;
	}
	
	.legende-7 {
		display: grid;
		padding-left: 5px;
		grid-template-columns: 40px 310px;
		grid-template-rows: 40px;
		grid-column-start: 1;
		grid-column-span: 1;
		grid-row-start: 9;
		grid-row-span: 1;
	}
	
	.legende-8 {
		display: grid;
		padding-left: 5px;
		grid-template-columns: 40px 310px;
		grid-template-rows: 40px;
		grid-column-start: 1;
		grid-column-span: 1;
		grid-row-start: 10;
		grid-row-span: 1;
	}
	
}

.divrow {
	width: calc(1fr - 20px);
	padding: 10px;
	background-color: #eee;
	border-style: solid;
	border-color: #444;
	border-width: 0.5px;
	border-collapse: collapse;
}

.divelement {
	display: inline-block;
	padding-right: 7px;
	padding-left: 7px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.sel-class {
	margin: 10px;
	min-height: 25px;//35px
	display: float;
	font-size: 14px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em 0.8em;
	width: 100%;//350px
	max-width: 100%;//350px
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	
}

.inp-class {
	min-height: 35px;
	display: float;
	font-size: 14px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em 0.8em;
	width: 200px;
	max-width: 200px;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

.text-class {
	min-height: 35px;
	display: inline;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	padding: .6em 1.4em .5em 0.8em;
	width: 200px;
	max-width: 200px;
	box-sizing: border-box;
	margin: 0;
}

.btn-class, .btn-class2, .btn-class3 {
	min-height: 35px;
	text-align: center;
	display: table-cell;
	font-size: 14px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em 0.8em;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	/*background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;*/
}

	.btn-class:disabled {
		color: #aaa;
		background-image: linear-gradient(to bottom, #ffffff 0%,#f5f5f5 100%);
	}

.btn-class2 {
	background-color: #2a2;
	background-image: linear-gradient(to bottom, #2a2 0%,#292 100%);
	color: #eee;
}

	.btn-class2:hover {
		background-color: #060;
		background-image: linear-gradient(to bottom, #191 0%,#181 100%);
		color: #aaa;
	}

	.btn-class2:disabled {
		background-color: #060;
		background-image: linear-gradient(to bottom, #2c2 0%,#2b2 100%);
		color: #aaa;
	}


.btn-class3 {
	color: #a00;
}

.sel-class::-ms-expand {
	display: none;
}

.sel-class:hover {
	border-color: #888;
}

.sel-class:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}

.inp-class:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}


.sel-class option {
	font-weight: normal;
}

.result-container {
    display: grid;
    margin-bottom: 10px;
    margin-top: 10px;
    grid-template-columns: 430px 620px 360px; /*410px 585px 335px;*/
    grid-template-rows: min-content min-content;
    background-color: rgba(80,80,80,0.10);
    border-radius: 7px;
    /*-webkit-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.75);*/
}

.result-box {
    display: grid;
    grid-column-start: 1;
    grid-column-end: span 1;
    grid-row-start: 1;
    grid-row-end: span 11;
    grid-template-columns: 100%;
    grid-template-rows: min-content min-content;
}

.result-box-upper {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
    padding-left: 10px;
    padding-top: 10px;
    grid-template-columns: 100px 300px;
    grid-template-rows: 25px 25px 25px 25px;
}

.result-box-lower {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 2;
    padding: 5px;
    padding-left: 10px;
    grid-template-columns: 110px 90px 110px 90px;
    grid-template-rows: 25px 25px 25px 25px 25px 25px;
}

.result-box-line0, .result-box-line1, .result-box-line2, .result-box-line3, .result-box-line4 {
    padding: 2px;
    border-style: groove;
    border-width: 1px;
    border-color: #FFF;
    font-family: "Cairo", sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #222;
    grid-column-start: 1;
    grid-column-end: span 1;
    grid-row-end: span 1;
}

.result-box-line1, .result-box-line3 {
    font-size: 12px;
}

.result-box-line3 {
    grid-column-start: 3;
}

.result-box-line2, .result-box-line4 {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    grid-column-start: 2;
}

.result-box-line4 {
    grid-column-start: 4;
}

.result-chart {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 5px;
    grid-column-start: 2;
    grid-column-end: span 1;
    grid-row-start: 1;
    grid-row-end:span  1;
    
}

.result-overview {
    position: relative;
    margin-left: 20px;
    margin-right: 10px;
    margin-top: 5px;
    grid-column-start: 3;
    grid-column-end: span 1;
    grid-row-start: 1;
    grid-row-end: span 1;
}

.result-description {
    display: grid;
    padding: 10px;
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row-start: 2;
    grid-row-end: span 1;
    font-family: "Cairo", sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 150%;
    color: #222;
    width: 100%;
}

.result-graph {
    background-color: #FFF;
}

.selection-wrapper {
    display: grid;
    grid-template-columns: 360px 360px 360px 360px;
    grid-template-rows: 60px min-content min-content min-content 60px;
}

.selection-container1, .selection-container2, .selection-container3, .selection-container4, .selection-container5, .selection-container6, .selection-container7 {
    display: grid;
    border-radius: 5px;
    padding-bottom: 10px;
    grid-template-columns: 100%;
    grid-template-rows: 35px min-content;
}

.selection-button-upper {
    display: grid;
    grid-template-columns: 720px 720px;
    grid-column-start: 1;
    grid-column-end: span 4;
    grid-row-start: 1;
    grid-row-end: span 1;
}

.selection-button-upper1 {
    padding-top: 8px;
    display: grid;
    grid-template-columns: 360px 360px;
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 1;
    grid-row-end: span 1;
}

.selection-button-upper2 {
    display: grid;
    padding-top: 8px;
    grid-template-columns: 360px 360px;
    grid-column-start: 2;
    grid-column-end: span 1;
    grid-row-start: 1;
    grid-row-end: span 1;
}

.selection-button-lower {
    display: grid;
    padding-top: 8px;
    grid-template-columns: 720px 720px;
    grid-column-start: 1;
    grid-column-end: span 4;
    grid-row-start: 5;
    grid-row-end: span 1;
}

.selection-container1 {
    background-color: rgba(0,0,0,0.2);
    
}

.selection-container2 {
    background-color: rgba(32,32,200,0.25);
    
}

.selection-container3 {
    background-color: rgba(32,200,32,0.25);
    
}

.selection-container4 {
    background-color: rgba(245,182,41,0.25);
    
}

.selection-container5 {
    background-color: rgba(255,142,41,0.25);
    
}

.selection-container6 {
    background-color: rgba(255,82,41,0.25);
    
}

.selection-container7 {
    background-color: rgba(235,32,11,0.25);
    
}

@media screen and (max-width: 1500px) {
    .result-container {
        grid-template-columns: 360px 70px 620px; /*410px 585px 335px;*/
        grid-template-rows: min-content min-content;
        max-width: 1050px;
    }

    .result-box {
        grid-column-start: 1;
        grid-column-end: span 2;
    }

    .result-chart {
        grid-column-start: 3;
    }

    .result-overview {
        grid-column-start: 1;
        grid-row-start: 2;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
    }

    .result-description {
        grid-column-start: 2;
        grid-column-end: span 2;
        grid-row-start: 2;
        max-width: 660px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 1150px) {
    .result-container {
        grid-template-columns: 430px 190px 180px; /*410px 585px 335px;*/
        grid-template-rows: min-content min-content min-content;
        max-width: 800px;
    }

    .result-box {
        grid-column-start: 1;
        grid-column-end: span 1;
    }

    .result-chart {
        grid-column-start: 1;
        grid-column-end: span 2;
        grid-row-start: 2;
    }

    .result-overview {
        grid-column-start: 2;
        grid-column-end: span 2;
        grid-row-start: 1;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
    }

    .result-description {
        grid-column-start: 1;
        grid-column-end: span 3;
        grid-row-start: 3;
        max-width: 800px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 1500px) {
    .selection-wrapper {
        grid-template-columns: 360px 360px 360px;
        grid-template-rows: 70px min-content min-content min-content min-content 70px;
    }

    

    .selection-button-upper {
        grid-column-start: 1;
        grid-column-end: span 1;
        grid-row-start: 1;
        grid-row-end: span 2;
    }

    .selection-button-upper2 {
        grid-column-start: 2;
        grid-column-end: span 1;
        grid-row-start: 1;
        grid-row-end: span 1;
    }

    .selection-button-lower {
        grid-column-start: 1;
        grid-column-end: span 2;
        grid-row-start: 6;
        grid-row-end: span 1;
    }
}

@media screen and (max-width: 1150px) {
    .selection-wrapper {
        grid-template-columns: 360px 360px;
        grid-template-rows: 70px 70px min-content min-content min-content min-content min-content 70px;
    }


    .selection-button-upper {
        grid-column-start: 1;
        grid-column-end: span 2;
        grid-row-start: 1;
        grid-row-end: span 2;
    }

    .selection-button-upper2 {
        grid-column-start: 1;
        grid-column-end: span 2;
        grid-row-start: 2;
        grid-row-end: span 1;
    }

    .selection-button-lower {
        grid-column-start: 1;
        grid-column-end: span 2;
        grid-row-start: 8;
        grid-row-end: span 1;
    }
}

    .selection-title {
        border-radius: 5px 5px 0px 0px;
        padding: 3px;
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 1;
        grid-row-end: 1;
        text-align: center;
        color: #DDD;
        background-color: #555;
    }

    .selection-body {
        padding: 3px;
        border-radius: 0px 0px 5px 5px;
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 2;
        grid-row-end: 2;
    }

    .selection-unit {
        padding: 3px;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 23px min-content;
    }

    .selection-text {
        padding-left: 2px;
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 1;
        grid-row-end: 1;
        font-family: "Cairo", sans-serif;
        font-size: 13px;
        font-weight: normal;
        text-align: left;
        color: #222;
    }

    .selection-dropbtn {
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 2;
        grid-row-end: 2;
    }

    .selection-input {
        width: 100%; //338px
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 2;
        grid-row-end: 2;
        border-radius: 3px;
        box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    }

    .dropbtn-selection {
        background-color: #4CAF50;
        color: white;
        padding: 5px;
        font-size: 14px;
        border: none;
        cursor: pointer;
        min-width: 100%;//max(100%,338px);
        text-align: left;
    }

    /* The container <div> - needed to position the dropdown content */
    .dropdown-selection {
        position: relative;
        display: inline-block;
    }

    /* Dropdown Content (Hidden by Default) */
    .dropdown-content-selection {
        display: none;
        position: absolute;
        min-width: 160px;
        box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

        /* Links inside the dropdown */
        .dropdown-content-selection a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

            /* Change color of dropdown links on hover */
            .dropdown-content-selection a:hover {
                background-color: #f1f1f1
            }

    /* Show the dropdown menu on hover */
    .dropdown-selection:hover .dropdown-content-selection {
        display: block;
    }

    /* Change the background color of the dropdown button when the dropdown content is shown */
    .dropdown-selection:hover .dropbtn-selection {
        background-color: #3e8e41;
    }

    .select-wrapper {
        width: 200px;
        position: relative;
    }

        .select-wrapper::before {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f107";
            font-size: 20px;
            position: absolute;
            right: 15px;
            top: 5px;
            color: #aaa;
            pointer-events: none;
        }

    select option {
        
    }

/* ─── Screener Filter Accordion – Redesign ─────────────────── */
#accordionFlushFilter .accordion-item {
    border: none;
    border-radius: 8px !important;
    margin-bottom: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
#accordionFlushFilter .accordion-button {
    background: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    padding: 13px 16px;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}
#accordionFlushFilter .accordion-button:not(.collapsed) {
    background: #f8fafc;
    color: #1e293b;
    box-shadow: none !important;
}
#accordionFlushFilter .accordion-body {
    background: #fff;
    padding: 10px 16px 14px;
    display: grid;
    grid-template-columns: minmax(110px, max-content) 1fr;
    column-gap: 14px;
    row-gap: 5px;
    align-items: center;
}
/* Aktien-Suche (langer Label + Textinput) braucht volle Breite */
#accordionFlushFilter label[for="stock_str"],
#accordionFlushFilter #stock_str { grid-column: 1 / -1; }
#accordionFlushFilter .form-select,
#accordionFlushFilter .form-control {
    font-size: 0.78rem;
    padding-top: 0.22rem;
    padding-bottom: 0.22rem;
    margin-bottom: 0;
}
/* Mobile: zurück zu gestapeltem Layout */
@media (max-width: 575px) {
    #accordionFlushFilter .accordion-body {
        display: block;
        padding: 10px 14px 14px;
    }
    #accordionFlushFilter .form-select,
    #accordionFlushFilter .form-control { margin-bottom: 8px; }
}
.scr-pip {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}
.scr-label {
    font-size: 0.68rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    white-space: nowrap;
    line-height: 1.2;
    margin-bottom: 0;
}
/* Pip – neutrale Farbe */
.scr-pip { background: #cbd5e1; }

    select:focus::-ms-value {
        background-color: transparent;
    }