/* 
highPC, Arnold Schrader, Rennweg 27, 93049 Regensburg
*/

/* alle --> */
html { font-family: sans-serif; margin:0; scroll-behavior: smooth; }
img[align=right] { max-width:60%; padding:0 0 5px 10px; }
img[align=left] { max-width:60%; padding:0 10px 5px 0; }
p { color: #1a486b; font-size: 1em; font-weight: normal; }
a { color: #1a486b; }
h1 { color: #1a486b; font-size: 1.3em; margin-block:0.4em; }
h1 a { color: #1a486b; text-decoration: none; }
h2 { color: #1a486b; font-size: 1.2em; font-style: italic; font-weight: normal; margin-block:0.4em; } 
h2 a { color: #1a486b; text-decoration: none; }
th { background-color:#1a486b; color: white; }
hr { border:0; border-top:1px solid #1a486b; clear:left; }
caption { font-size: 0.9em; text-align:left; }
.site td { color: #1a486b; font-size:10pt; }
.site fieldset td { color: #1a486b; background-color:#fff; font-size:10pt; }
fieldset th { background-color:#9bccf7; color:#1a486b; }
input[type=button] { border-width:2px; border-color: buttonface; text-align: center; color: buttontext; background-color: #e0e0e0; box-sizing: border-box; }
input[type=button]:hover { background-color:#f1f1f1; }
input[type=button][disabled=disabled] { color:#999; }
input[type=button][disabled=disabled]:hover { background-color:#e0e0e0; }
#goTop { display:none; position:fixed; color:rgba(0,0,0,0.5); bottom:40px; right:20px; }
fieldset { font-size:0.9em; color: #fff; background: #1a486b; border: 0; margin:5px; box-shadow: 2px 2px 5px #777; }
fieldset a { text-decoration:none; font-weight:bold; color:#fff; }
fieldset p { font-size:1em; color:#fff; }
fieldset legend { font-size:1.2em; font-weight: bold; color: #1a486b; background: #9bccf7; padding:5px; border: none; border-radius:5px; }
fieldset legend a { color: #1a486b; }
fieldset .small { color:#fff; }
fieldset label { color:#fff; }
fieldset hr { border-color:#9bccf7; }
label { font-size:0.8em; }
.storeitem { border:2px solid #bbb; border-radius:10px; background-repeat: no-repeat; background-position: left+10px top+10px; background-size: 90% auto; height: 300px; width: 216px; margin: 10px 10px 10px 0; padding: 10px; position: relative; text-align: center; float: left; box-shadow: 7px 7px 10px #777; }

@font-face {
	font-family: 'FontAwesome'; font-weight: 400; font-style: normal;
	src: url('./symbole.ttf') format('truetype');
}
@keyframes blinkborder{	50%{border-color:red;}}
@keyframes blinkbackground{	50%{background-color:red;}}

.fa { display: inline-block; font-family: FontAwesome; font-weight: normal; font-size: inherit; text-rendering: auto; }
.thick { font-weight:bold; }
.print { display:none; }
ins { text-decoration: none; background-color: #d4fcbc; }
del { text-decoration: line-through; background-color: #fbb6c2; color: #555; }

.menu ul { list-style:none; margin:0; padding:0; border:0; display: inline-block; font-weight: normal; font-size: inherit; }
.menu li { display:inline; margin:0; padding:0; border:0; }
.menu li a.current { color:#1a486b; background-color:#9bccf7; }
.menu li a:hover{ color:#fff; }
.logo p a { color:#fff; margin:0; }
.footer { margin:10px 0 0 0; color:#9bccf7; background-color:#1a486b; text-align: right; width:100%; clear:both; }
.footer ul { list-style:none; margin: 0; padding:8px; border:0; }
.footer li { display:inline; margin:0; padding:0; border:0; }
.footer li a { font-size:0.8em; margin:0; padding:5px; color:#9bccf7; text-decoration:none; }
.footer li a:hover { color:#fff; }
.entry {}
.flex { display:grid; width:100%; grid-template-columns:repeat(2,1fr); gap: 1rem; margin:0 auto; box-sizing:border-box; padding-top:10px; }
section { display:flex; flex-direction: column; position:relative; width:100%; height:300px; border:0; overflow:hidden; }
.fullrow { grid-column: span 2 / 3; /*height:400px;*/ }
section .img { float:left; margin:0 10px 10px 0; width:30%; height:250px; background-size:cover; background-position:center; background-repeat:no-repeat; }
.fullrow .img { width:50%; /*height: 350px;*/ }
section #bott { position:absolute; bottom:0; left:0; width:100%; padding-top:30px; background:linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,1) 30px 100%); }
/* section #bott p { display:table-cell; vertical-align: bottom; } */

.toppic { padding:0 10px 5px 0; max-width:250px; max-height:150px; float:left; }
.small { font-size:0.7em; }

#ontop{ margin:0; position:fixed; height: 100%; z-index:999; padding:0px; width:100%; left:0px; top:0px; clear:none; background-color:rgba(0,0,0,0.75); display:none; }
#infoframe { position:absolute; left:50%; box-shadow: 10px 10px 20px #333; }
div#infoframe { margin-left:-250px; top:50px; width:500px; padding:10px; height:auto; min-height:300px; overflow:auto; max-height:80%; text-align:left; background-color:rgb(255,255,255); color:rgb(0,0,0); border:2px solid rgb(100,100,100); }
div ~ #close {position:inherit; left:50%; margin-left:255px; top:35px;}
#infoTop { display:none; position:fixed; z-index:100; bottom:20px; left:20px; background-color:#9bccf7; border:1px solid #1a486b; border-radius:10px; color:#1a486b; padding:10px; box-shadow: -5px 5px 20px #333; }
dd { margin-inline-start: 10px; }
strike { display:none; }
div#Quick strike { display:inline; background-color:#ccc; text-decoration:none; }
div#Data strike { display:inline; background-color:#ccc; text-decoration:none; }

@media screen and (max-width: 600px) {
	body { background: #ffffff; color: #1a486b; text-align: left; margin: 0; padding:0; font-size:0.9em; }
	.flex { grid-template-columns: 1fr;}
	section { padding: 0 15px; width:calc(100% - 30px); }
	.fullrow { grid-column: 1; height:600px; }
	section .img { }
	.fullrow .img { width:100%; float:unset; margin: 0 0 10px 0; height:200px; }
	.site { width:100%; margin:0; padding:0; text-align: left; }
	.menu { margin-left:40%;  padding:0; font-weight:normal; text-decoration:none; border:0; }
	.menu li a { color:#9bccf7; font-size:1.2em; margin:2px; padding:5px; text-decoration:none; border:none; border-radius:5px; }
	.side { display:none; }
	.rate { display:none; position:fixed; top: 50%; right:0px; margin-top:-100px; margin-right:5px; min-width:25px; width: auto; height: auto; min-height: 50px; text-align: center; font-size:2em; }
	.logo { margin:0; color:#ffffff; position:relative; background-color:#1a486b; background-size:39% auto; background-image: url('bp-logo.svg'); background-position: 10px 10px; background-repeat: no-repeat; height:90px; text-align: left; width:100%; }
	.logo p { color:#fff; margin:3px; text-align:right; }
	.pay { width:90%; float:left; padding:5px; color:#fff; }
	.ucol { width: calc(100% - 12px); padding:5px; margin:0; float: left; overflow: hidden; }
	.toptitles {clear:both; position:absolute; bottom:5px; right:5px;}
	.tech {display: inline-block; width:12.5%; text-align:center; overflow: hidden; }
}
@media screen and (min-width:601px) and (max-width: 1000px) {
	body { background: #ffffff; color: #1a486b; text-align: left; margin: 0; padding:0; font-size:0.9em; }
	.logo { margin:0; color:#ffffff; position:relative; background-color:#1a486b; background-size:39% auto; background-image: url('bp-logo.svg'); background-position: 10px 10px; background-repeat: no-repeat; height:90px; text-align: left; width:100%; }
	.logo p { color:#fff; margin:3px; }
	.site { width:100%; margin:0; padding:0; text-align: left; }
	.menu { margin-left:40%;  padding:0; font-weight:normal; text-decoration:none; border:0; }
	.menu li a { color:#9bccf7; font-size:1.4em; margin:2px; padding:5px; text-decoration:none; border:none; border-radius:5px; }
	.side { float:right; margin:5px 0 5px 5px; width:260px; min-height:450px; background-color:#fff; border-left: 1px dashed #ccc; }
	.rate { display:none; position:fixed; top: 50%; left:0px; margin-top:-100px; margin-left:5px; min-width:25px; width: auto; height: auto; min-height: 50px; text-align: center; font-size:2em; }
	.toptitles {clear:both; position:absolute; bottom:5px; right:5px;}
	#mask { overflow:hidden;}
	#sidenews { display:block; margin:auto; background-color:#fff; width:250px; height:340px; text-align:center; }
	#sidenews ul { width:2500px; position:relative; left:0px; margin:0; padding:0; list-style:none;	}	
	#sidenews li { width:250px; height:320px; position:relative; display:inline; float:left; margin:0; padding:0; }
	#sidenews li div { display:block; width:240px; text-align:center;height:310px; position:relative; top:0; left:0; padding:5px; background-repeat: no-repeat;background-position: left bottom; background-size:70% auto;}
	#sidenews li div span { padding:5px; position:absolute; bottom:0; right:0; text-align:right; }
	#sidenews ul li div h2 { font-size:1em; font-weight:bold; color:#1a486b; }
	#sidenews ul li div p { font-size:0.75em; font-weight:normal; text-align:justify; color:#1a486b; background-color:rgba(255,255,255,0.75); }
	.pay { width:calc(50% - 11px); float:left; padding:5px; color:#fff; }
	.ucol { width:calc(50% - 144px); padding:5px; margin:0; float: left; overflow: hidden; }
	.tech {display: inline-block; width:12.5%; text-align:center; overflow: hidden;} /* 254px gesamt abziehen */
}
@media screen and (min-width: 1001px) {
	body { background: #ffffff; color: #1a486b; text-align: left; margin: 0; padding:10px; font-size:1em; }
	.site { position:absolute; padding:0px; width:1000px; left:50%; margin-left:-500px; min-height:600px; text-align: left; border: 0; }
	.menu { margin:0; padding:0; font-weight:normal; text-decoration:none; border:0; }
	.menu li a { color:#9bccf7; font-size:1.4em; margin:5px; padding:5px; text-decoration:none; border:none; border-radius:7px; }
	.side { float:right; margin:5px 0 5px 5px; width:350px; min-height:450px; background-color:#fff; border-left: 1px dashed #ccc; }
	.logo { margin:0; padding-left:40%; color:#ffffff; position:relative; background-color:#1a486b; background-size:39% auto; background-image: url('bp-logo.svg'); background-position: 10px 10px; background-repeat: no-repeat; height:100px; text-align: left; width:60%; }
	.logo p { color:#fff; margin:3px; }
	.rate { display:none; position:fixed; top: 50%; left:50%; margin-top:-100px; margin-left:-540px; min-width:25px; width: auto; height: auto; min-height: 50px; text-align: center; font-size:1.5em; }
	.pay { width:230px; float:left; padding:5px; color:#fff; }
	.ucol { width: calc(50% - 190px); padding:5px; margin:0; float: left; overflow: hidden; }
	.toptitles {clear:both; position:absolute; bottom:5px; right:5px;}
	.tech {display: inline-block; width:12.5%; text-align:center; overflow: hidden;} /* 352px gesamt abziehen */
	#mask { overflow:hidden;}
	#sidenews { display:block; margin:auto; background-color:#fff; width:250px; height:340px; text-align:center; }
	#sidenews ul { width:2500px; position:relative; left:0px; margin:0; padding:0; list-style:none;	}	
	#sidenews li { width:250px; height:320px; position:relative; display:inline; float:left; margin:0; padding:0; }
	#sidenews li div { display:block; width:240px; text-align:center;height:310px; position:relative; top:0; left:0; padding:5px; background-repeat: no-repeat;background-position: left bottom; background-size:70% auto;}
	#sidenews li div span { padding:5px; position:absolute; bottom:0; right:0; text-align:right; }
	#sidenews ul li div h2 { font-size:1em; font-weight:bold; color:#1a486b; }
	#sidenews ul li div p { font-size:0.75em; font-weight:normal; text-align:justify; color:#1a486b; background-color:rgba(255,255,255,0.75); }
}