html{box-sizing:border-box;background:#bde}
*,::before,::after{box-sizing:inherit}
body{max-width:75em;margin:0 auto;padding:0;background:#bfd2eb;color:#333;font:normal 1em Arial,sans-serif}
header{position:relative;height:210px;margin:1em 0 0 3em;background:#777 url(../img/top_bg44.jpg) no-repeat right;background-size:contain;padding:0 0 6em}
header a h1,header a p{color:white;padding:0;display:table}
article{width:90%;margin-left:auto;margin-right:auto;}
.ribbon{display:inline-block;position:relative;margin:2em 0 2em -1.5em;padding:.5em 1em;background:#479;box-shadow:0 1px 3px rgba(0,0,0,.8)}
.ribbon::before{display:block;width:1.5em;height:0;position:absolute;bottom:-1.5em;left:0;content:"";border-bottom:1.5em solid transparent;border-right:1.5em solid rgb(0,80,116)}
main{margin:0 0 1em;padding:1em;background:#fff}
h1,h2{font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;color:#333;border-bottom:3px solid #468}
h2 span{font-size:.7em;text-transform:none}
h3{font-size:1.25em;font-weight:normal;padding:0;margin:0;color:#4E68AD}
p{text-align:left;line-height:1.6em;padding:20px 0}
a{color:#123;outline:none;text-decoration:none}
a:hover,/* Durch Maus oder Tastatur angewählte Verweise werden sichtbar gemacht */
a:focus{color:white;text-decoration:none;background-color:#4e7a92}
a.more{float:right;font-weight:bold}
a.more:after{content:" \2192 ";font-size:1.2em;font-weight:bold}
ul.square{list-style-type:square;color:#999;margin:0 0 .5em .5em;font-size:.8em;font-weight:bold}
ul.square li{padding:10px;}
li {list-style-type: none;background-color:#fff;}
section { background-color: #abc; display: flex; flex-wrap: wrap;  justify-content: center;padding:20px}
section div{background-color:#7ad;display:flex;margin:100px;padding:10px}
#navigation ul li {background-color:#ccc;margin:5px;border-radius:6px}
dl.grid{display:grid}
dd{margin:0;padding-left:1em}
dd span:first-child{display:inline-block;width:4em}
dl.grid dd{margin-bottom:1em}
a[href^="tel"]{white-space:nowrap}
#footer-nav{max-width:80%;margin-left:auto;margin-right:auto;display:flex;border-right:1px solid #aaa; justify-content: center;}
ul#footer-nav li{display:inline;padding:0 .7em;border-right:1px solid #aaa}
footer{display:grid;padding:1em}
ul#footer-nav li:last-child{border:none}
ul#footer-nav img{width:1.5em}
ul#footer-nav a:hover,ul#footer-nav a:focus,ul#footer-nav a:active{background:white}
footer p{text-align:right}
nav#navigation{background:#eee;min-height:45px}
#navigation ul{max-width:100%;display:inline-block; justify-content:center;margin:8px 0;z-index:9}
#navigation ul li {background:#777 url(ziegel.png) no-repeat;background-size:100%;border-radius:6px}
#navigation ul li a {font-size:1.1em;line-height:1em;text-decoration:none;width:9em}
#navigation ul li a {display:inline-block;height:2em;padding:9px 40px;border:1px dotted #faa;}
nav a[aria-current=page]{background:#aaa}

.top { text-decoration:none; padding:0 3px; font-size:24px; color:#33f; background:#f33; border-radius:25px; position:sticky;
       bottom:80px; --offset:100px; margin-top:calc(100vh + var(--offset)); margin-left:91%; text-align:center; border:1px solid #0f0;}
.top a {color:#66f;background:0;text-decoration:none}  

@media (min-width: 30em) {
main{display:grid}
.spalte img{width:50%;float:left;margin-right:.5em}
}
@media (min-width: 50em) {
.spalte img{width:33%}
#navigation ul{width:100%;display:inline-flex; justify-content:center;margin:2px 20px}
}