:root { /* background (normal, hell, dkl, button)*/
	--bg	: #FFFFCC;	--bgd	: tan; --bgh	: #efdfbf; --bbt	: #C04000; 
	--tx	: #800000; /* color */ --tsh	: 2px 2px 2px #7f4000; /* text-shadow */
}

body {font-family: Tahoma, Helvetica, sans-serif; margin:0; padding:0; color:var(--tx); background-color: var(--bg); font-size: clamp(.9rem,-.48rem+6.89vw, 4rem); }

header {margin:0; background:var(--bgd);}
p#monitor {display: block; font-size:.6em;} /* Breitenmessung Bildschirm */
img#logo1 {width:60px; display:block; position:absolute; top:6%; right:2%;}
img#logo2 {width:100px; display:block; margin:-4em 30% -4em auto; transition:all 2s;}
@media screen and (min-width:550px) {
	img#logo1 {right:30%;}
	img#logo2 {width:110px; position:absolute; top:6%; right:2%; margin:0;}
}

a {background-color:#e9d9b9; color:#600; padding:2px 6px; border-radius:6px; border-bottom:1px solid #c0b090; border-right:1px solid #c0b090; text-decoration: none;}
a:hover {color: #ffab11; background-color: var(--bgh);}

main {margin:0; width:100%; min-height:420px; box-shadow:5px 8px 5px #7f4000, inset 0 0 1.2em #800000; display:flex; flex-flow:row wrap; justify-content:space-around; border-radius:30px; }
main>div {flex-basis: auto; align-self:center;}
@media screen and (min-width:600px) {	main {width:90%; margin:0 auto; padding:1em;} }
div#box {order:3; flex-basis:480px;}
div#seiten {order:1;}
div#wetter, div#home {order:2;}
footer {text-align:center; background:var(--bgd); padding:.6em 1em; margin-top:2em;}
footer p:after {content:attr(id); margin-left:1.2em;}  

div#seiten p {margin-left:1.2em;}
div#seiten ul {padding-left:0;}
div#seiten ul, div#b1 ul {list-style-type:none;} 
@media (min-width:580px) {#seiten ul {column-count:2; column-fill:balance;} }
div#seiten div.bt:hover, div#b2 div.bt:hover {box-shadow: 4px 4px 2px #000;}

div#seiten a, div#b2 a {color: #E0FF00 !important; background-color:transparent;font-weight: bolder; border: none; text-shadow:1px 1px 1px #111;}
div#seiten a:hover, div#b2 a:hover {color: #fff !important;}
div#seiten a.b {background:var(--bgh); color: #600; padding: 2px 6px; border-bottom: 1px solid #c0b090; border-right: 1px solid #c0b090; text-decoration: none;}

h1 {font-size: 4em; width:300px; padding-left:.2em; }
h1.sh {background-image: linear-gradient(to right, #FFFFCC 20%, tan 100%); }
@media screen and (min-width:600px) {h1 {margin-left:2em;}}

figure {text-align:center;}  figure img {width:100%;}
p.txt {margin-left:3.5cm; margin-right:5cm;} p.tx {margin-left:1.5cm;}

li.bt {border:6px outset #A02000; width:230px; height:46px; margin:5px; margin-top:0; text-align:center; background:var(--bbt); color:#E0FF00; border-radius:40px; text-align:left; box-sizing:border-box; }
li.bt img {vertical-align: middle; margin-left: 1.2em; margin-right: 1.1em;}
li.bt a {display:inline-block; font-size:1.1em; width: 100%; font-weight:bold;}
li.lock::after {content:"🔒️"; margin-left:-3em; text-shadow:2px 2px 1px #333;}
div.cont {display:flex; } div.cont ul {flex-basis:100%;}

div.symbol {position: absolute; top:50px; right:20px;}
div#wetter {text-align: center; min-width: 216px; } div#wetter div {font-size:1.4em;} div#wetter div a {font-size:.7em; margin-bottom:3px;}
div#wetter iframe {width: 216px; height: 369px ;}

.cont {display: flex; flex-wrap:wrap;} .cont div {flex:1;} .cont figure {margin:.1em 0;}
.copyleft {transform: scaleY(-1); display: inline-block;}

#neu {border:16px solid transparent; width: 88%; margin: 1em auto; border-radius:40px; background:var(--bgh); box-shadow: 5px 5px 4px #000;}
#neu h3 {text-shadow:1px 1px 1px #111;}
#neu li {text-align: left; margin-bottom:.2em; margin-left:-.4em;} 
#neu li:nth-of-type(odd) {background-color:#efdfbf;}
#neu ul {list-style-type:none; padding-left:1em; background-image: linear-gradient(#FFFFCC 0%, #e9d9b9 74%, #C04000 99.8%); display: block; max-height: 14em; overflow: scroll; cursor: ns-resize;}	

#monitor {text-align:center; display:block;}
#box .sh {font-size:1.52em;}
::backdrop {background:rgba(33,33,33,0.5)}
[popover]:popover-open {padding:.6em 1.2em; width:90%; max-width:600px;}
.b {font-weight: bold; } a.b {padding-top:02px;}
.big {font-size:1.3em;}
.c {text-align: center;}
.cls {width:2em; position:absolute; top:.5em; right:.5em;}
.g {letter-spacing:.2em;} .g:before {content:" ";}
.nix {display:none;}
.s {font-size:70%;}
.r {text-align: right; padding-right:12px;}
.weg {text-decoration: line-through;}
.sh  {text-shadow:var(--tsh);}
.symb {margin-left:.5em; text-align:justify;} .symb:first-line {font-weight:bold; text-shadow:var(--tsh);}
.symb span::after {content:"\A0";}
/* Symbole */
.gast:before{content:"🍽️" " "; text-shadow:3px 3px 2px #333;}
.club:before{content:"🦊" " "; text-shadow:3px 3px 2px #333;}
.fun:before	{content:"🐱" " "; text-shadow:3px 3px 2px #333;}
.hist:before{content:"🏰" " "; text-shadow:3px 3px 2px #333;}
.kart:before{content:"🌍️" " "; text-shadow:3px 3px 2px #333;}
.leut:before{content:"🧑" " "; text-shadow:3px 3px 2px #333;}
.lnx:before	{content:"🐧" " "; text-shadow:3px 3px 2px #333;}
.nav:before {content:"🧭" " "; text-shadow:3px 3px 2px #333;}
.post:before{content:"@" " "; text-shadow:3px 3px 2px #333;}
.rest:before{content:"❓" " "; text-shadow:3px 3px 2px #333;}
.rez:before	{content:"🍔" " "; text-shadow:3px 3px 2px #333;}
.shot:before{content:"📸" " "; text-shadow:3px 3px 2px #333;}
.tabl:before{content:"🖥" " "; text-shadow:3px 3px 2px #333;}
.tech:before{content:"🖥️" " "; text-shadow:3px 3px 2px #333;}
.tel:before	{content:"📱" " "; text-shadow:3px 3px 2px #333;}
.uni:before {content:"🎓" " "; text-shadow:3px 3px 2px #333;}
.vid:before {content:"🎞️" " "; text-shadow:3px 3px 2px #333;}