*, *:before, *:after {box-sizing:border-box;}  
html, body {margin:0;padding:0;border:0;}
body { font-family:Verdana, Arial, sans-serif;font-size:100%; background:#111; color:#eee;}
article {color:#000;margin-top:30px;background:#ddd;max-width:86%;min-height:50vw;margin-left:auto;margin-right:auto;padding:10px;border:2px solid #aaa;}

#main, #logo, #menubar, #footer { margin-left:auto; margin-right:auto;}
#main { padding-bottom:20px;}
#header { background:transparent url(logo.jpg) no-repeat center;min-height:120px;}
#wahl1, #wahl2, #wahl3, #wahl4, #wahl5, #wahl6 {background: rgba(200,0,0,.6);}
.spalten{display:flex;justify-content:space-evenly;}

p { margin: 0px; padding: 0px 0px 16px 0px; line-height: 1.7em;}
h1, h2, h3, h4, h5, h6 {margin: 0 0 6px 0; padding:6px 0 5px 0;}
h1 { font-size:110%; color:#443;}
h2 { font-size:105%; color:#0bf;}
h3 { font-size:100%; }
h4, h5, h6  { margin:0; padding:0 0 5px 0; color:#0bf;}

a, a:hover {text-decoration:none;color: #068;}
a {border-bottom: 1px solid;}
a:hover {color: #0af; background:#fff;}

img {border: 0px; margin: 0px; padding: 0px;}
form { padding: 0; margin: 0;}

.spalten{display:flex;justify-content:space-evenly;}


ul { margin: 2px 20px 18px 16px; padding: 0px;}
ul li{ margin:5px 0px; padding:0 5px 0px;}
ol { margin: 8px 0px 0px 24px;  padding: 0px;}
ol li { margin: 0px 0px 11px 0px; padding: 0px;}
#logo  { max-width:90%; position:relative; height:100px;margin-left:10%;}
#logo #logo_text{ position: absolute; top: 15px; left: 0;}

#logo h1, #logo h2 { font: normal 300% 'century gothic', arial, sans-serif; margin:0 auto;}

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {padding:12px 0 0 0; color:#fff;border:0;}
#logo_text h1 a .logo_colour {color: #FC9C04;}
#logo_text a:hover .logo_colour {color:#fff;}
#logo_text h2 { font-size:120%; padding:4px 0 0 0;  color:#fff; text-shadow:2px 2px 1px #000}

#menubar {width:90%;min-height:45px; margin:-122px 10px 80px 75%;}

#menu {margin:10px;}
#menu li {float:left; margin:2px 5px; padding:0 5px 0px; list-style: none; width:160px;}
#menu li a {display:block;float:left;height:30px;padding:2px 6px;text-align:center;color:#FFF;width:90%;}
#menu li.selected a, #menu li.selected a:hover { color:#f90;}
#menu li a:hover { color:#f90;}


.sidebar {float:right; width:24%; min-height:100%; background:#eee; padding:0 4px 4px 6px; font-size:80%;border:1px solid; color:#000}
.sidebar ul {max-width:95%;margin:2px 0 1px -15px;}
.sidebar li {list-style: none;padding: 0 0 4px 0;}
.sidebar li a, .sidebar li a:hover {padding: 0 0 0 30px; display:block; border:0;color:#066;}

#content {text-align:left;max-width:88%;}
#content ul {margin: 2px 0 22px 0px;}
#content ul li {list-style-type:none; margin:0;padding:0 0 4px 25px; line-height:1.5em;}

#footer {max-width:86%;
font-size: 90%;
height: 28px;
padding: 20px 0 5px 0;
text-align: center;
background: transparent;
color: #efc;
letter-spacing: 0.1em;}

#footer p { padding: 0;}
#footer a, #footer a:hover  { color: #efc;}
#footer a:hover { text-decoration: underline;}
.top { font-size:26px;position:sticky;bottom:40px;--offset:100px;margin-top:calc(100vh + var(--offset));margin-left:91%;}
.top a {border:0}
.search {color: #555; border:1px solid #ddd; width:95px; padding:5px;}

.form_settings { margin: 15px 0 0 0;}
.form_settings p { padding: 0 0 4px 0;}
.form_settings span { float: left; width: 200px; text-align: left;}
.form_settings input, .form_settings textarea { padding:5px; width: 299px; font: 100% arial; border: 1px solid #eed; background:#fff; color: #443;}
.form_settings .submit {
    width: 50px;
    margin: 0 0 0 212px;
    height: 33px;
    padding: 2px 0 3px 0;
    cursor: pointer;
    background: #444;
    color:#fff;}
.form_settings textarea, .form_settings select { font: 100% arial; width: 299px;}
.form_settings select { width: 290px;}
.form_settings .checkbox {margin:4px 0;padding:0;width:14px; border:0;background:none;}

table { margin: 10px 0 30px 0;}
table tr th, table tr td {background:#444; color:#FFF;padding:7px 4px; text-align:left;}
table tr td  {background: #eed;color: #443;border-top: 1px solid#fff;}

.drehen { transition:all .5s; display:inline-block; text-rendering:auto; font-size:24px; font-weight:900; text-shadow:#666 2px 1px 1px; color: #fff;}  
.drehen:hover {transform:rotate(900deg);}
label { display:inline-block;color:#fff; background:#158; padding:.2rem .5rem; margin:2rem -11rem .2rem auto; position:relative; z-index:2;}
                                                                                                        /* menu unsichtbar */
#menu {width:90%; position:relative; background:rgba(40,94,140,.7); margin-top:-60rem;margin-left:-60rem; visibility:hidden;transition:all 1s;opacity:0;}  
#menu ul {display:inline-block; text-align:center; margin:1rem 0 0 0; padding:2px; width:60%;}  
#menu li {list-style-type:none; margin:.2rem; padding:0;}  
#menu li a {display:block;text-align:left;text-decoration:none; margin:0; color:#fff;}
#menu li a:link    { background: rgba(200,0,0,.6);  }
#menu li a:visited { background: rgba(200,0,50,.6); }
#menu li a:hover   { background: rgba(30,100,30,.6);}
#menu li a:active  { background: rgba(50,250,50,.6);}  

input[type=checkbox]{display:none;}                      /* checkbox versteckt */
input[type=checkbox]:checked ~ #menu {visibility:visible;opacity:1;margin-top:.5rem;margin-left:-6rem;width:180px}      /* schaltet menu ein */


@media (min-width: 480px) { #menu li a {width:30rem;}   }

@media (min-width: 1024px) {
#menubar {max-width:64%;height:45px; margin:-70px 0 50px 40%;}
#menu {background:transparent;transition:none;visibility:visible;opacity:1;margin-top:0;margin-left:0;}
#menu ul {width:90%;}
#menu li {display:inline-block;margin:3px; width:fit-content; border-bottom: 2px solid #fff;border-radius:10px;transform:skewX(-9deg);}
#menu li a {width:100%;padding:5px 22px;border-radius:10px;transform:skewX(-9deg);}
label{display: none;}
input[type=checkbox]:checked ~ #menu {margin-top:0; margin-left:0;width:200px}
}