/* (c) 2022 Markus Senoner */
* {xmargin:0}
body {background-color:#ffffff; margin:0;}
body, table, tr, th, td, select, input
	{font-family:Verdana,Arial,Helvetica; font-size:14px;}
@font-face {font-family:"ARLRDBD"; src: url("/images/ARLRDBD.ttf") format("truetype"); font-display:swap;}

h1	{margin:20px 0; font-size:30px; font-family:"Arial Rounded MT Bold",ARLRDBD,sans-serif; font-weight:normal;}
h2	{margin:20px 10px;}
h3	{font-size:16px;}
p	{margin-left:10px;}

.menu {font-size:16px; font-weight:bold;}
.pixel {height:1px; font-size:0; line-height:0;}
.hidden {widht:0; height:0;} /* um Basis-SVG auszublenden */
.header {height:100px; line-height:0;}

.orange {background-color:#f60;}
.orangebg {background-image: linear-gradient(45deg, #f60 0%, #ff0 100%);}
.yellow {background-color:#ff0;}
.gray {background-color:#ddd;}
.graybg {background-image: linear-gradient(0deg, #ddd 0%, #fff 100%);}

.abc, .menubutton {border:0px none; margin:1px; width:26px; float:left; line-height:30px;
	text-align: center; text-decoration:none; font-weight:bold; color:#000000;
	background-image: linear-gradient(45deg, #f60 0%, #ff0 100%);}
.menubutton {width: 194px;}

.button {border:0px none; border-radius:5px; margin:5px 0; padding:5px; color:#000000;
	background-image: linear-gradient(45deg, #f60 0%, #ff0 100%);}

a {color:#000000;}
a:visited {color:#404040;}
a.abc:active, a.menubutton:active, a.button:active, input.button:active	{color: #ff0000;}
a.abc:hover, a.menubutton:hover, a.button:hover, input.button:hover	{background: #ffff00;}

a.x	{font-size:14px; color:#b60000; font-weight:bold; line-height:24px; display:inline-block;}

.content {margin:14px;}

ul.list {display:flex; flex-wrap:wrap; gap:10px; justify-content:space-evenly; padding:0; list-style:none; margin:20px;}
li.box {flex-grow:1; border:1px solid #ccc; border-radius:10px; text-align:center; box-shadow:2px 2px 10px 0 #ccc; width:20vw; max-width:242px; padding:10px; list-style:none;}
li.box a {font-size:120%; text-decoration:none; line-height:200%;}
li.box img.thumb {width:calc(100% - 2px); height:auto; aspect-ratio:8/5;}
li.box img.icon {width:32px; height:32px;}

.bigbox {display:inline-block; width:calc(100% - 20px); box-sizing:border-box; margin:20px 10px; border:1px solid #ccc; border-radius:10px; text-align:left; box-shadow:2px 2px 10px 0 #ccc; padding:10px;}
.meteoimage {float:left;}

.textcols {max-width:900px; padding:0 5vw; columns:auto 2; text-align:left;}

.desktop, .mobile {float:left; margin:10px; background-image:linear-gradient(110deg, #111 0%, #666 50%, #000 55%); box-shadow: 5px 5px 10px #bbb;}
.desktop {padding:10px; width:480px; height:300px;}
.mobile {padding:10px 3px 22px 3px; width:160px; height:288px; border-radius:6px;}
.daten {float:left; max-width:330px;}

.favicon {padding:0 10px;}

/* rating: */
.rating {border:0; display:inline-block;}
.klee {width:20px; height:20px; margin:0 2px; filter: drop-shadow(2px 2px 4px #bbb);}
.klee {stroke:#070; stroke-width:0.5; fill:#fff;}
.klee.half {fill:url(#half) #8d8;}
.klee.full {fill:url(#full) #0c0;}

/* meteo */
.smallbox {display:inline-block; margin:10px;}
.skala {display:inline-block; width:250px; height:20px; background: linear-gradient(to right, #00f 0%, #0ff 25%, #0f0 50%, #ff0 75%, #f00 100%);}
.temperatures {border:1px solid gray;}
.temperatures td {font-size:12px;}
.temperatures .min {text-align:center; background-color:#ddf;}
.temperatures .max {text-align:center; background-color:#fdd;}
.heatmap {width:500px; height:320px; filter:drop-shadow(5px 5px 10px #bbb);}

/* cookie-banner */
#cookie-banner {position:fixed; display:block; box-sizing:border-box; bottom:0; left:0; width:100%; padding:10px; text-align:center; z-index:20; background:rgba(192,192,224, 0.9)}
#cookie-banner p {margin:0; text-align:left; font-size:12px; float:left; width:calc(100vw - 240px - 40px);}
#cookie-banner button {width:100px; float:right; padding:5px; margin:10px; border:0;}
button.green {color:#ffffff; background-color:#008800;}
button.white {background-color:#eee; color:#444;}

@media screen and (max-width:740px) {
	.textcols {columns:auto 1;}
	#cookie-banner p {width:100%;}
}