html{ -webkit-text-size-adjust: 100%; -ms-text-size-adjust:100%; }
body { background-color:#DDDDDD; padding:0; margin:0; font-family: Verdana,Helvetica,Arial,sans-serif; }

.main { background-color:#E9E9E9; padding-bottom:2rem; } /* Die Fussgrafik ist damit ausgenommen, was hinsichtlich Transparenz der Grafik wichtig ist. */

.header { height:10rem; text-align:center; background-image: url('img/header2.jpg'); background-size: cover; }

.headerlogo { text-align:right;  z-index:1000; }
.headerlogoimg { height:2.5rem; width:auto; position:fixed; right:1rem; top:1.2rem;  z-index:1000; }

.fussgrafik { height:15rem;background-image: url('img/header2.jpg'); background-position:bottom; opacity: 0.4; background-size: cover; clear:both; }
.fuss { background-color:#DDDDDD; color:#999999; padding:1.5rem; }

.fussdetail { padding:0.5rem; vertical-align:top; font-size:70%; }

.fussdetaila { color:#999999; }

.navmobil { display:block; position:fixed; top:1rem; left:1rem; }

.navmobildiv { padding:0.2rem; background-color: #B3B3B3; }
.navmobildiv:hover { background-color:#888888;}

.navmobilnav { width:8rem; text-align:left; position:absolute; display:block; visibility:hidden; overflow:hidden; -ms-transform:translateX(-100%); transform:translateX(-100%); z-index:1000; -ms-transform-origin:right; transform-origin:right; left:0; transition:all .5s cubic-bezier(.6, -.61, .38, 2.03); } 

.navmobilul { margin:0; padding:0; }
.navmobilli { position:relative; display:block;  font-size:120%; }
.navmobila { display:block; color:#EEEEEE; text-decoration:none; padding:0.5rem; background-color:#B3B3B3; }
.navmobila:hover { background-color:#888888; }
.navmobila:focus { background-color:#888888; }
.navmobilaktiv { display:block; color:#EEEEEE; text-decoration:none; padding:0.5rem; background-color:#888888;}

.navmobilespan { cursor:pointer; }
.navmobilespanstarter { border-top-style:solid; border-top-width:0.3rem; border-top-color: #EEEEEE; display:block; border-radius:.2rem; width:1.7rem; margin:0.3rem; }
.navmobilespan::before, .navmobilespan::after { border-top-style:solid; border-top-width:0.3rem; border-top-color: #EEEEEE; content:""; display:block; position:relative; right:0; border-radius:0.2rem; width:1.7rem; margin:0.3rem; transition:0.2s all ease-in; }

.navmobilcheckbox:checked+.main .navmobildiv { width:7.6rem; }

.navmobilcheckbox:checked+.main .navmobilnav { visibility:visible; -ms-transform:translateX(0); transform:translateX(0); }

.navmobilcheckbox:checked+.main .navmobilcheckboxlabel .navmobilespan::before,
.navmobilcheckbox:checked+.main .navmobilcheckboxlabel .navmobilespan::after { right:1rem; transition:0.2s all ease-in; }

.navmobilcheckbox:checked+.main .navmobilcheckboxlabel .navmobilespan::before { -ms-transform:rotate(-45deg) scaleX(0.5); transform:rotate(-45deg) scaleX(0.5); -ms-transform-origin:right; transform-origin:right; }

.navmobilcheckbox:checked+.main .navmobilcheckboxlabel .navmobilespan::after { -ms-transform:rotate(45deg) scaleX(0.5); transform:rotate(45deg) scaleX(0.5); -ms-transform-origin:right; transform-origin:right; }
/*
.navdesktop { width:100%; text-align:center; display:none; }
.navdesktopul {  margin: 0rem; padding: 0rem; background-color:#D0DFE4; }
.navdesktopli { position:relative; display:inline-block; }
.navdesktopa { display:block; color:#EEEEEE; text-decoration:none; letter-spacing:0.4rem; xtext-transform:uppercase; padding:0.7rem; background-color:#B3B3B3;}
.navdesktopa:hover { background-color:#888888;}
.navdesktopa:focus { background-color:#888888;}
.navdesktopaktiv { display:block; color:#EEEEEE; text-decoration:none; letter-spacing:0.4rem; xtext-transform:uppercase; padding:0.7rem; background-color:#888888; }
*/

.content { padding: 0.8rem; padding-left:1.5rem; padding-right:1.5rem; max-width: 50rem; margin:0 auto; }

.imgindex { width:20rem; max-width:30vw; height:auto; float:right; shape-outside: polygon(70% 0%, 100% 0%, 100% 100%, 10% 100%, 10% 85%, 1% 80%, 0% 70%, 0% 60%, 10% 45%, 24% 31%, 63% 27%, 45% 15%, 45% 10%); }
.imgprofil { width:80%; height:auto; }
.imgicon { width:15%; height:auto; margin-left:0.5rem; margin-right:0.5rem; }


.iconlink { height:0.8rem; margin-right:0.3rem; }

.karte { width:100%; height:20rem; border:none; }
.contentheader { font-weight:bold; color:#777777; letter-spacing:0.5rem; text-transform:uppercase; position:relative; visibility:visible; }

.contentsummary { position: relative; line-height: 200%; padding-left: 0.5rem; xborder-top: solid 0.1rem #AAAAAA; cursor:pointer; }

/* Das Marker Handling wird nicht in allen Browsern unterstuetzt, daher der Workaround: */
.contentsummaryhidemarker { content:""; border:solid #E9E9E9; border-right-width:0.5rem; border-left-width:0.5rem; background-color:#E9E9E9; z-index:300; position:relative; left:-1.1rem; }

.contentsummary::after { border-top-style:solid; border-top-width:0.2rem; border-top-color: #999999; content:""; z-index:500; display:block; position:absolute; left:0; top:0.5rem; border-radius:0.1rem; width:1rem; margin:0.5rem; transition:0.2s all ease-in; transform: rotate(40deg); }
.contentsummary::before 
{ border-top-style:solid; border-top-width:0.2rem; border-top-color: #999999; content:""; z-index:500; display:block; position:absolute; left:0.7rem; top:0.5rem; border-radius:0.1rem; width:1rem; margin:0.5rem; transition:0.2s all ease-in; transform: rotate(-40deg); }

.contentdetails { padding: 0.3rem; max-width: 50em; margin:0 auto; padding-left: 3rem; padding-right: 3rem; }

.contentdetails[open] .contentsummary::after 
{ transform: rotate(-40deg); }
.contentdetails[open] .contentsummary::before 
{ transform: rotate(40deg); }

.contentdetails[open] .contentsummary {	font-weight:bold; }

.contentitem { padding: 0.8rem; padding-left:2.4rem; }


@media (min-width:50rem) { .header { height:6rem; text-align:center; background-image:url('img/header1.jpg'); }; .fussgrafik { background-image:url('img/header1.jpg'); }; }

@media (min-width:35rem) { .contentdetails { padding-left: 3rem; padding-right: 3rem; }; }