@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Schoolbell);
* {box-sizing:border-box}
* h1,
* h2 {color:#333}
html {height:100%}
body {font-family:'Alegreya Sans',sans-serif;height:100%;margin:0}
address {font-style:normal}
.logo {fill:#fff}
.logo .line {fill:#f99d1c}
@media screen and (max-width:899px) {.logo {width:100% }}
#outline {width:100%;height:100%;display:flex;flex-direction:column}
#head {margin:0;padding:20px 0;flex:0 0 auto;background-color:#62bb46}
@media screen and (max-width:899px) {#head {padding:0 }}
#content {flex-grow:1;background-repeat:no-repeat;background-size:400px;background-position:right bottom;background-color:#fff}
#content.bg1 {background-image:url("../themes/quartiersladen/assets/images/bild_blaubeeren.jpg")}
#content.bg2 {background-image:url("../themes/quartiersladen/assets/images/bild_orange.jpg")}
#content.bg3 {background-image:url("../themes/quartiersladen/assets/images/bild_johannis.jpg")}
#content.bg4 {background-image:url("../themes/quartiersladen/assets/images/bild_radi.jpg")}
@media screen and (max-width:899px) {#content {background-size:70vw }#content .center {padding-bottom:40vw }}
#navi {flex:0 0 auto;z-index:1;background:url("../themes/quartiersladen/assets/images/header-border.svg");background-position:center bottom;background-size:2000px auto;background-repeat:repeat-x;padding-bottom:50px;margin-bottom:6px}
#navi >ul {margin:0;display:flex;flex-direction:row;padding:0;margin-right:-1.5em;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:900px;padding:0 20px}
@media screen and (max-width:899px) {#navi >ul {flex-direction:column }}
#navi >ul li {color:white;list-style-type:none;font-size:18pt}
#navi >ul li a {display:block;color:white;text-decoration:none;align-self:flex-start;padding-bottom:10px}
#navi >ul li.active a {background:url("../themes/quartiersladen/assets/images/line.svg") right bottom no-repeat;background-size:100% 10px}
@media screen and (max-width:899px) {#navi >ul li.active a {background:none;color:#f99d1c;font-weight:bold }}
#menu-toggle {display:none}
@media screen and (max-width:899px) {#menu-toggle {display:inline-block;margin:0 20px 10px;padding:2px 10px;color:white;font-size:1.5em;border:1px solid #b2d235;border-radius:3px }}
#menu-toggle-checkbox {width:0;height:0;overflow:hidden;margin:-1px;opacity:0.001}
@media screen and (max-width:899px) {#menu-toggle-checkbox + ul {display:none }#menu-toggle-checkbox:checked + ul {display:block }}
#stage {font-family:'Schoolbell';position:relative;overflow:hidden;width:100%;height:500px;margin-top:-40px}
#stage .center {z-index:1;position:relative;display:flex;flex-direction:row;padding:2em 0;align-items:stretch}
#stage .note {width:400px;height:390px;background:url('../themes/quartiersladen/assets/images/note.png');background-size:100% auto;background-repeat:no-repeat;transform:rotate(-5deg);box-shadow:0 10px 21px rgba(0,0,0,0.1),0px 1px 2px rgba(0,0,0,0.3);line-height:33px;padding:63px 30px 0 30px;overflow:hidden;position:absolute;left:0;top:50px}
#stage .note h1,
#stage .note h2,
#stage .note h3,
#stage .note h4,
#stage .note h5 {margin:0}
#stage .post-it {padding:2em 1.5em;align-self:flex-start;background:#fbfbfb;width:16em;height:16em;box-shadow:0 10px 21px rgba(0,0,0,0.1),0px 1px 2px rgba(0,0,0,0.3);transform:rotate(4deg);position:absolute;right:0;top:50px}
#stage .post-it h2 {margin-top:0}
#stage .post-it ul {padding:0;list-style:square}
#stage .post-it a,
#stage .post-it a:visited {color:inherit}
#stage .post-it a:hover {text-decoration:none}
@media screen and (max-width:700px) {#stage {height:740px }#stage .post-it {left:20px;right:20px;width:100vw;padding:2em 1.5em;height:100vw;max-width:400px;max-height:400px }#stage .note {top:340px;z-index:2;right:40px;left:auto }}
@media screen and (max-width:480px) {#stage .note {right:auto;left:40px }}
#mini-map {background-size:cover;background-repeat:no-repeat;background-position:center;background-image:url('https://maps.googleapis.com/maps/api/staticmap?key=AIzaSyCoDlo9O_Ly3BowIn286aOinJa_IQ_LLTc&center=47.9756126,7.8229057&zoom=16&size=320x240&markers=color:red|47.975491,7.822866&style=feature:poi|element:all|visibility:off');height:240px;width:320px;margin-bottom:2rem;float:right;margin-left:2rem;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;text-decoration:none}
#mini-map div {margin:20px;color:#FFF;background:#a3cd1f;border:none;padding:4px 10px;border-radius:4px}
#mini-map:hover div {background-color:#b2d235}
@media screen and (max-width:899px) {#mini-map {background-image:url('https://maps.googleapis.com/maps/api/staticmap?key=AIzaSyCoDlo9O_Ly3BowIn286aOinJa_IQ_LLTc&center=47.9756126,7.8229057&zoom=16&size=800x200&markers=color:red|47.975491,7.822866&style=feature:poi|element:all|visibility:off');height:33vw;float:none;margin:0 -20px 20px;width:auto }}
table {padding:5px 0;border:1px solid black}
#map {height:500px;margin-bottom:3em}
@media screen and (max-width:899px) {#map {max-height:50vh }}
#content {font-size:140%}
#content h1 {font-size:220%}
#content h1,
#content h2,
#content h3 {font-family:'Schoolbell';font-weight:normal;margin-top:1.5em;margin-bottom:1rem}
#content img {clear:both;margin:0 auto;display:block;width:100%;position:relative;overflow:visible}
#content img::after {position:absolute;bottom:-50px;left:0}
#content .oeffnungszeiten h1 {margin:0;font-size:inherit;font-weight:bold;clear:left;margin-top:33px}
#content .oeffnungszeiten h2 {margin:0;font-size:inherit;display:inline-block;width:50%;float:left;font:inherit;white-space:nowrap}
#content .oeffnungszeiten p {margin:0;width:50%;text-align:right;font-size:inherit;font:inherit;display:inline-block;white-space:nowrap}
.grid {display:flex;flex-direction:row;margin:0 -10px}
.grid >* {margin:0 10px;flex:1 1 0}
@media screen and (max-width:899px) {.grid {flex-direction:column }}
#foot {flex:0 0 auto;background-image:url(../themes/quartiersladen/assets/images/footer.svg);background-size:2000px 200px;background-position:bottom center;height:200px;width:100%}
@media screen and (max-width:899px) {#foot {height:auto;background-size:200% 100% }#foot::before {content:"";float:left;padding-bottom:20% }#foot::after {content:"";clear:left }}
#footer {background:#62bb46;height:50px}
#footer .center ul {display:flex;flex-direction:row;margin:0;padding:0}
#footer .center ul li {list-style-type:none;padding:10px}
#footer .center ul li a {text-decoration:none;color:#666}
#footer .center ul li a:hover {text-decoration:underline}
.center {margin-left:auto;margin-right:auto;max-width:900px;padding:0 20px}
.downloads a {box-sizing:content-box;background:#eee url("../themes/quartiersladen/assets/images/pdf.png") 1em center no-repeat;padding:1em 1em 1em 4em;border-radius:4px;background-size:2em;height:2em;margin:1em 0;display:flex;align-items:center;text-decoration:none;color:inherit}
.downloads a:hover {background-color:#F2F2F2}
#content .sortiment-wrapper {display:flex;align-items:flex-start;margin-left:-40px;flex-wrap:wrap}
@media screen and (max-width:899px) {#content .sortiment-wrapper {margin:0 }}
#content .sortiment {margin:20px 0 20px 40px;display:inline-block;width:calc(50% - 40px)}
@media screen and (max-width:899px) {#content .sortiment {width:auto;display:block;margin:20px 0 }}
#content .sortiment-double {margin-left:40px}
#content .sortiment-double .images {display:flex;margin-left:-40px}
#content .sortiment-double .images >div {margin-left:40px;flex:1 1 50%;padding-top:30%;position:relative;overflow:hidden}
#content .sortiment-double .images img {position:absolute;top:0;right:0;left:0;bottom:0}
@media screen and (max-width:899px) {#content .sortiment-double {width:auto;display:block;margin:0 }#content .sortiment-double .images {margin:0 -20px 0 -24px }#content .sortiment-double .images >div {margin-left:4px }#content .sortiment-double .images >div img {margin:0 }}
@media screen and (max-width:899px) {#content img,#map {width:calc(100% + 40px);margin:0 -20px }}
#content section.with-logo {clear:right}
#content section.with-logo .section-logo {float:right;max-width:220px;margin-left:24px}
@media screen and (max-width:500px) {#content section.with-logo {clear:none }#content section.with-logo .section-logo {float:none;max-width:200px;margin:0 auto }}
#content .quote-with-icon {display:flex;align-items:center;margin:2rem 0;background:#F2F2F2;border-radius:1rem;padding:2rem}
#content .quote-with-icon blockquote {margin:0;padding:0;color:#454545}
#content .quote-with-icon blockquote:before {content:"„"}
#content .quote-with-icon blockquote:after {content:"”"}
#content .quote-with-icon img {flex:0 0 200px;border-radius:1000px;height:200px;background:white;object-fit:contain}
#content .quote-with-icon.right img {order:2;margin-left:2rem}
#content .quote-with-icon.left img {order:-1;margin-right:2rem}
@media screen and (max-width:899px) {#content .quote-with-icon {flex-direction:column }#content .quote-with-icon.left img,#content .quote-with-icon.right img {flex:0 0 auto;order:-1;margin-right:0;margin-bottom:1rem;width:140px;height:140px }}