/* Allgemeines
   ========================================================================== */

/* Hintergrundfarben */
.white {background-color: #ffffff;}
.light {background-color: #f1f1f1;}
.mid   {background-color: #e5e5e5;}
.dark  {background-color: #dddddd;}

/* Schriften */
h1 {font-size: 2.5rem;}

h2 {
	border-left: 0.25rem solid #3399cc;
	color: #3399cc;
	font-family: Roboto Slab, sans-serif;
	font-size: 2rem;
	font-weight: 100;
	letter-spacing: 0.125rem;
	line-height: 3.5rem;
	margin: 0 0 1.875rem;
	padding-left: 1.25rem;
	text-transform: uppercase;
}

h3 {
    color: white;
    font-size: 1.25rem;
    font-weight: 100;
    margin: 0;
    text-align: center;
}

h5 {
	font-size: 0.875rem;
	font-weight: 400;
}

p {
	color: #666; 
	font-size: 1rem;
	line-height: 1.5rem;
	margin: 0;
}

.addition {
    font-size: 0.75rem;
    font-style: italic;
}

/* Grid-Layout */
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Effekte */
.hover {
    box-shadow: none;
    transition: all 0.3s;
}

.hover:hover {
    box-shadow: 0 0 0.625rem rgba(0,0,0,0.2);
    -webkit-transform: translateY(-0.125rem);
    transform: translateY(-0.125rem);
}

.fly {
    opacity: 0;
    transition: all 0.3s;
    -webkit-transform: translateY(6.25rem) scale(1.05) translate3d(0, 0, 0);
    transform: translateY(6.25rem) scale(1.05) translate3d(0, 0, 0);
}

.show-block {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1) translate3d(0, 0, 0);
    transform: translateY(0) scale(1) translate3d(0, 0, 0);
}



/* Navigation
   ========================================================================== */

header {
    background-color: rgba(255, 255, 255, 0.925);
    /*background-color: rgba(0, 0, 0, 0.5);*/
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

header nav {
    max-width: 80rem;
    margin: 0 auto;
    z-index: 999;
    transition: height 0.3s;
}

header nav > a {
    float: left;
    line-height: 0;
}

header nav > a > img {
    height: 6.875rem;
    margin: 1rem 0;
    width: auto;
    cursor: pointer;
    transition: all 0.3s;
}

header nav ul {
    list-style-type: none;
    float: right;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

header nav li {
    float: left;
}

header nav li a {
    border-bottom: 0.0625rem solid transparent;
    color: black;
    display: inline-block;
    font-weight: 100;
    font-size: 1.125rem;
    margin: 3.875rem 2.125rem 0;
	padding-bottom: 0.25rem;
    text-decoration: none;
    transition: all 0.3s;
}
header nav li a:hover, header nav li a:focus {
    border-bottom: 0.0625rem solid orange;
    color: orange;
}

/**
 * Klasse, die mittels JS beim scrollen hinzugefügt
 * wird zum verkleinern der Navigation
 */
header.smaller nav img {
    height: 3.75rem;
    margin: 0.625rem 0 0.625rem 1rem;
}

header.smaller nav li a {
    margin: 2.125rem 2.125rem 0;
}



/* Inhalte (Main)
   ========================================================================== */

/* Gerüst */
main > div {
    width: 100%;
}

main > div section {
    max-width: 70rem;
    margin: 0 auto;
    overflow: hidden;
    padding: 2.5rem 5rem 3.5rem;
}


/* Banner / Hero */
.banner {
    height: 100vh;
    max-width: none;
    margin: 0 auto;
	overflow: auto; /* verhindert "collapsing margins" der child Elemente */
    background: url(../images/seitenelemente/background.jpg) no-repeat center center; /* hinten noch "fixed" ergänzen und überlegen, ob inhalt über das Bild hinweg scrollt bis an nav angedockt wird */
    background-size: cover;
}

.banner h1 {
    background: rgba(0, 0, 0, 0.5);
	background: linear-gradient(to right, rgba(30,87,153,0.8) 0%,rgba(125,185,232,0.8) 100%);
	color: white;
	font-weight: 100;
	margin: 40vh 10% 0 5%;
	padding: 1rem 3.125rem 1rem 1.625rem;
	max-width: 46.875rem;
}

.banner h1 a {
    border-bottom: 0.0625rem solid transparent;
	color: white;
    display: inline-block;
    font-size: 1rem;
    margin-top: 1rem;
	padding-bottom: 0.25rem;
    text-decoration: none;
    transition: all 0.3s;
}

.banner h1 a:hover, .banner h1 a:focus {
    border-bottom: 0.0625rem solid orange;
	color: orange;
}

/**
 * Von hier bis Keyframes: animierter Scroll Down Hinweis.
 */
.banner div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5%;
    height: 4.625rem;
    width: 5rem;
    border-radius: 2.5rem;
    margin: 0 auto;
    padding-top: 0.375rem;
    background: rgba(0, 0, 0, 0.5);
    background: radial-gradient(rgba(30,87,153,0.8) 15%,rgba(125,185,232,0.8) 100%);
    transition: all 0.3s;
}
.banner div:hover, .banner div:focus {
    -webkit-transform: scale(1.2) rotate(360deg);
    transform: scale(1.2) rotate(360deg);
}
.banner div span {
    display: block;
    width: 0.9375rem;
    height: 0.9375rem;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-right: 0.125rem solid white;
    border-bottom: 0.125rem solid white;
    margin: 0 auto 0.1875rem auto;
}
.scroll-pfeil-oben {
    margin-top: 0.375rem;
}
.scroll-pfeil-oben,
.scroll-pfeil-mitte,
.scroll-pfeil-unten {
    -webkit-animation: mouse-scroll 1s infinite;
	-moz-animation: mouse-scroll 1s infinite;
	animation: mouse-scroll 1s infinite;
}
.scroll-pfeil-oben {
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    animation-delay: .1s;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    animation-direction: alternate;
}
.scroll-pfeil-mitte {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    animation-delay: .2s;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    animation-direction: alternate;
}
.scroll-pfeil-unten {
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    animation-delay: .3s;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    animation-direction: alternate;
}
@-webkit-keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}
@keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}


/* Über uns / Impressionen */
#impressionen {
    max-width: 80rem;
    padding: 0;
}

#slider {
    display: none;
}
#slider .slidesjs-control {
    z-index: 0; /* Fix, dass beim Bildwechsel, dass Bild über dem Nav liegt.*/
}

#slider .slidesjs-pagination {
    float: right;
    list-style: none;
    margin: -1.375rem 1rem 0 0;
    position: relative;
    z-index: 2;
}

#slider .slidesjs-pagination li {
    float: left;
    margin: 0 0 0 0.25rem;
}

#slider .slidesjs-pagination li a {
    background-image: url("data:image/svg+xml,%3Csvg id='pagination' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.85 110.55'%3E%3Cdefs%3E%3C/defs%3E%3Cpath d='M18.43,5A13.43,13.43,0,1,1,5,18.43,13.44,13.44,0,0,1,18.43,5m0-5A18.43,18.43,0,1,0,36.85,18.43,18.43,18.43,0,0,0,18.43,0Z'/%3E%3Ccircle cx='18.43' cy='55.28' r='18.43'/%3E%3Ccircle fill='%23333366' cx='18.43' cy='92.13' r='18.43'/%3E%3C/svg%3E%0A");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 0;
    padding-top: 0.75rem;
    overflow: hidden;
    width: 0.75rem;
}

#slider .slidesjs-pagination li a.active,
#slider .slidesjs-pagination li a:hover.active,
#slider .slidesjs-pagination li a:focus.active {
    background-position: 0 -0.75rem;
}

#slider .slidesjs-pagination li a:hover,
#slider .slidesjs-pagination li a:focus {
    background-position: 0 -1.5rem;
}

#bildunterschrift {
    background: rgba(0, 0, 0, 0.5);
    background: linear-gradient(to right, rgba(51,51,102,0.85), rgba(0,102,153,0.85) 30%, rgba(51,204,255,0.85));
    color: white;
    font-size: 1rem;
    line-height: 2rem;
    margin-top: -2rem;
    padding-left: 1rem;
    position: relative;
    z-index: 1;
}


/* Öffnungszeiten */
#oeffnungszeiten > div > div {
    border: 0.0625rem solid #ddd;
    display: table;
    height: 13.125rem;
    margin-bottom: 2rem;
    width: 17.5rem;
}

#oeffnungszeiten > div > div:nth-child(1) {
    background: url(../images/seitenelemente/oeffnungszeiten_waschstrasse.jpg) no-repeat center center / cover;
}
#oeffnungszeiten > div > div:nth-child(2) {
    background: url(../images/icons/icon_clock.svg) no-repeat center center;
    border: none;
    width: 7.5rem;
}
#oeffnungszeiten > div > div:nth-child(3) {
    background: url(../images/seitenelemente/oeffnungszeiten_sb.jpg) no-repeat center center / cover;
}

#oeffnungszeiten > div > div > div {
    background: rgba(0, 0, 0, 0.5);
    background: linear-gradient(to right, rgba(51,51,102,0.85), rgba(0,102,153,0.85) 30%, rgba(51,204,255,0.85));
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    width: 100%;
}

#oeffnungszeiten > p {
    font-size: 0.875rem;
    line-height: normal;
    text-align: center;
}

.tooltip {
    display: inline-block;
    position: relative;
}

.tooltip > span {
    background-color: #444;
    bottom: 125%;
    font-size: 0.875rem;
    left: 50%;
    line-height: normal;
    margin-left: -11rem;
    opacity: 0;
    padding: 0.5rem;
    position: absolute;
    text-align: center;
    transition: opacity 0.3s ease-out;
    visibility: hidden;
    width: 14rem;
    z-index: 1;
}

.tooltip > span::after {
    content: "";
    border-color: #444 transparent transparent transparent;
    border-style: solid;
    border-width: 0.5rem;
    left: 50%;
    margin-left: 3rem;
    position: absolute;
    top: 100%;
}

.tooltip:hover > span {
    visibility: visible;
    opacity: 1;
}

.tooltip > img {
    height: 1rem;
    width: auto;
}


/* Preise & Leistungen */
#preise {
    padding-top: 0.75rem;
    padding-bottom:  0;
}

.line-break {
    display: none;
    width: 100%;
}

.waesche {
    border: 0.0625rem solid #ddd;
    margin-bottom: 2rem;
    width: 12.5rem;
}
.waesche:nth-child(1) {
    background: url(../images/seitenelemente/waschprogramme_luxuswaesche.png) no-repeat center top;
}
.waesche:nth-child(2) {
    background: url(../images/seitenelemente/waschprogramme_premiumwaesche.png) no-repeat center top;
}
.waesche:nth-child(4) {
    background: url(../images/seitenelemente/waschprogramme_wachspflege.png) no-repeat center top;
}
.waesche:nth-child(5) {
    background: url(../images/seitenelemente/waschprogramme_basiswaesche.png) no-repeat center top;
}

.waesche h3 {
    margin: 0.875rem 0 8rem;
}

.waesche ul {
    list-style: none;
    height: 13rem;
    margin: 0 0.5rem;
    padding: 0;
}

.waesche li {
    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='5px' width='5px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16;' xml:space='preserve'%3E%3Cg%3E%3Ccircle fill='%23006699' cx='8' cy='8' r='8'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0.125rem 0.625rem;
    color: #666;
    padding: 0.3125rem 0 0 0.75rem;
}
.plus {
    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='plus' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='8px' width='8px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bstroke:%23006699;stroke-width:4;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cline class='st0' x1='0' y1='8' x2='16' y2='8'/%3E%3Cline class='st0' x1='8' y1='0' x2='8' y2='16'/%3E%3C/svg%3E") no-repeat 0 0.625rem!important;
    color: rgba(0,102,153,1)!important;
}

.waesche p {
    border-top: 0.0625rem solid #666;
    font-size: 2rem;
    margin: 0.5rem 0.5rem 1rem;
    padding-top: 1rem;
    text-align: center;
}

.zusaetze {
    flex-grow: 1;
    margin-right: 3.125rem;
}

.zusatz {
    border: 0.0625rem solid #ddd;
    height: 3.75rem;
    margin: 0 auto 2rem;
    width: 100%;
}
.zusatz:nth-child(1) {
    background: url(../images/seitenelemente/zusatzprogramm_felgenreinigung.png) no-repeat left center;
}
.zusatz:nth-child(2) {
    background: url(../images/seitenelemente/zusatzprogramm_unterbodenwaesche.png) no-repeat left center;
}

.zusatz p:nth-child(1) {
    float: left;
    font-size: 1.25rem;
    line-height: 3.75rem;
    margin-left: 7.5rem;
}

.zusatz p:nth-child(2) {
    float: right;
    font-size: 1.5rem;
    line-height: 3.75rem;
    margin-right: 1.25rem;
}

.onlineshop {
    background: url(../images/seitenelemente/onlineshop.jpg) no-repeat center center / cover;
    border: 0.0625rem solid #ddd;
    display: table;
    font-size: 1.25rem;
    height: 9.625rem;
    margin: 0 0 2rem;
    width: 16rem;
}

.onlineshop:hover, .onlineshop:focus {
    background: url(../images/seitenelemente/onlineshop-hover.jpg) no-repeat center center / cover;
}

.onlineshop a {
    color: white;
    display: block;
    height: 2rem;
    padding-top: 7.625rem;
    text-align: center;
    text-decoration: none;
    /*transition: all 0.3s;*/
}

.onlineshop:hover a, .onlineshop:focus a {
    color: orange;
}

#preise > p {
    font-size: 0.875rem;
    line-height: normal;
    text-align: center;
}

#preise > p > img {
    margin-top: 1rem;
    max-height: 5rem;
}


/* Anfahrt */
#anfahrt {
    padding-bottom: 0rem;
}

#karte {
    height: 50vh;
}

#adresse {
    background-color: rgba(0,102,153,0.85);
    color: white;
    display: none;
    font-size: 1rem;
    font-weight: 100;
    margin: 1.25rem 0 0 5rem;
    padding: 1.5rem 1.5rem 0.75rem;
}

#adresse tr {
    height: 3.5rem;
}

#adresse img {
    height: 1.875rem;
    width: 1.875rem;
    margin-right: 1rem;
}

#adresse p {
    color: white;
    font-size: 1.325rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

#adresse a {
    color: white;
    text-decoration: none;
}
#adresse a:hover, #adresse a:focus {
    text-decoration: underline;
}


/* Häufige Fragen */
.frage {
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    transition: all 0.3s;
}

.frage.active {
    margin-bottom: 0.375rem;
    padding-bottom: 0.375rem;
}

.frage img {
    height: 1rem;
    margin: 0.125rem 0.5rem 0.125rem 0;
    transition: all 0.3s;
    width: 1rem;
}

.frage.active img {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.frage p {
    flex-basis: 100%;
    line-height: 1.25rem;
    margin-right: 1.5rem;
}

.antwort {
    border-top: 0.0625rem solid #ddd;
    color: #999;
    display: none;
    line-height: 1.25rem;
    margin: 0 1.5rem 1.5rem;
    text-align: justify;
}

#faq > div:last-child,
#faq > div:nth-last-child(2) {
    margin-bottom: 0;
}



/* Footer   (+ Aside)
   ========================================================================== */

footer {
    background-color: black;
    height: 6.25rem;
}

footer > div {
    color: white;
    max-width: 80rem;
    margin: 0 auto;
}

footer > div > div {float: left;}
footer > div > div:last-child {float: right;}

footer > div > div > h5,
footer > div > div > a {
    float: left;
    margin: 2.6875rem 1.25rem 0;
}

footer > div > div > a {
    color: #666;
    text-decoration: none;
}

footer > div > div > a:hover, footer > div > div > a:focus {
	color: #999;
}

footer > div > div > a.active {
    border-bottom: 0.0625rem solid #999;
	color: #999;
    margin-bottom: -0.3125rem;
    padding-bottom: 0.25rem;
}

footer > div > div > a.social-button {
    margin: 1.5625rem 1.25rem 0 0;
    transition: all 0.3s;
}

footer > div > div > a.social-button:hover, footer > div > div > a.social-button:focus {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

aside {
    background-color: #444;
}

aside > div {
    display: none;
    max-width: 77.5rem;
    margin: 0 auto;
    padding: 2rem 1.25rem;
}

aside > div h1 {
    color: #ddd;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

aside > div p {
    color: #ddd;
    font-size: 0.875rem;
    line-height: 1rem;
    margin: 0.5rem 0;
}

aside > div a {
    color: #ddd;
}

aside .close {
    cursor: pointer;
    text-align: center;
    text-decoration: underline;
}

aside > div a:hover, aside > div a:focus,
aside .close:hover, aside .close:focus {
    color: white;
}

aside td {
    color: #ddd;
    font-size: 0.875rem;
    line-height: 1rem;
}

aside td:nth-child(1) {
    padding-right: 0.5rem;
    vertical-align: top;
}



/* Media Queries  [Größe bis hier hin:  große Monitore (ab 1280px)]
   ========================================================================== */

/**
 * Anmerkung: Maximale Breite der Inhaltselemente ist auf 1280px beschränkt 
 * (max-width bei header nav, footer und section ). Darüber hinaus nur noch
 * eine Umrandung mittels grauen Hintergrund.
 */

/* Kleine Monitore (981px-1280px) */
@media screen and (max-width: 80rem) {
	h1 {font-size: 2rem;}

    header nav > a > img {
        height: 5.625rem;
        margin: 0.9375rem 0 0.9375rem 0.9375rem;
    }
    
    header nav li a {
        font-size: 1rem;
        margin: 3.375rem 1.125rem 0;
    }

	header.smaller nav li a {
		margin: 2.125rem 1.5625rem 0;
	}
	
	.banner  h1 {
		margin-top: 36vh;
	}
}


/* Tablets (761px-980px) */
@media screen and (max-width: 61.25rem) {
	h1 {font-size: 1.75rem;}
    .flex {justify-content: space-around;}

    header nav > a > img {
        height: 3.75rem;
        margin: 0.625rem 0 0.625rem 0.9375rem;
    }
    
    header nav li a {
        font-size: 0.875rem;
        margin: 2.1875rem 0.875rem 0;
    }

	header.smaller nav > a > img {
		height: 2.75rem;
		margin: 0.5rem 0 0.5rem 0.9375rem;
	}

	header.smaller nav li a {
		margin: 1.5rem 0.875rem 0;
	}
	
	.banner  h1 {
		margin-top: 32vh;
	}
    
    #oeffnungszeiten > div > div {
        height: 11.25rem;
        width: 15rem;
    }

    #oeffnungszeiten > div > div:nth-child(2) {
        display: none;
    }
    
    #oeffnungszeiten > div > div > div {
        font-size: 1.125rem;
    }
    
    #preise > div:nth-child(1) {
        justify-content: space-around;
    }
    
    .zusaetze {
        margin-right: 0;
    }
    
    .line-break {
        display: inherit;
    }
}


/* Smartphones (bis 760px) */
@media screen and (max-width: 47.5rem) {
	h1 {font-size: 1.5rem;}
    
    h2 {
        border-left-width: 0.2rem;
        font-size: 1.5rem;
        line-height: 2.25rem;
        margin-bottom: 1.5rem;
    }

    header nav {
        height: 3.75rem;
        overflow: visible;
    }

    header nav > a {
        float: none;
    }

    header nav > a > img {
        display: block;
        height: 3.125rem;
        margin: 0 auto;
        padding: 0.3125rem 0;
    }

    header nav button {
        display: block;   
    }

    header nav ul {
        background-color: rgba(255, 255, 255, 0.925);
        border-bottom: #3399cc 0.125rem solid;
        display: none;
        position: absolute;
        float: none;
        top: 3.75rem;
        width: 100%;
    }

    header nav li {
        display: block;
        float: none;
    }
    header nav li:first-child {
        margin-top: 1.25rem;
    }

    header nav li a {
        display: block;
        font-size: 1.125rem;
        height: 1.25rem;
        margin: 0.625rem;
        text-align: center;
    }

    main > div section {
        padding: 3rem 1.5rem;
    }

    .banner {
        background-position: 90%;
    }

	.banner  h1 {
		margin: 10vh 2vh 0;
	}

    .banner div {
        height: 3.4375rem;
        width: 3.75rem;
        border-radius: 1.875rem;
        padding-top: 0.3125rem;
    }
    .banner div span {
        width: 0.625rem;
        height: 0.625rem;
    }

    #slider .slidesjs-pagination {
        margin-top: -1.5rem;
    }
    
    #slider .slidesjs-pagination li {
        margin-left: 0.25rem;
    }
    
    #slider .slidesjs-pagination li a {
        padding-top: 0.5rem;
        width: 0.5rem;
    }

    #slider .slidesjs-pagination li a.active,
    #slider .slidesjs-pagination li a:hover.active,
    #slider .slidesjs-pagination li a:focus.active {
        background-position: 0 -0.5rem;
    }

    #slider .slidesjs-pagination li a:hover,
    #slider .slidesjs-pagination li a:focus {
        background-position: 0 -1rem;
    }
    
    #bildunterschrift {
        font-size: 0.75rem;
        line-height: 1.5rem;
    }
    
    #oeffnungszeiten > div > div {
        margin: 0 auto 2rem!important;
    }
    
    #oeffnungszeiten > div > div:nth-child(2) {
        display: none;
    }
    
    .zusatz {
        height: auto;
        width: 12.5rem;
        background-position: left top!important;
    }
    
    .zusatz p:nth-child(1) {
        float: none;
        font-size: 1rem;
        line-height: normal;
        margin: 4.5rem 0 0;
        text-align: center;
    }
    .zusatz p:nth-child(2) {
        border-top: 0.0625rem solid #666;
        float: none;
        line-height: normal;
        margin: 0.5rem;
        padding-top: 0.5rem;
        text-align: center;
    }
    
    .onlineshop {
        font-size: 1rem;
        width: 12.5rem;
    }

    #karte {
        height: 80vh;
    }

    #adresse {
        font-size: 0.875rem;
        margin: 0 1.5rem;
        padding: 1rem 1.45rem 0.5rem;
    }

    #adresse tr {
        height: 2.5rem;
    }
    
    #adresse p {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }
    
    #adresse img {
        margin-right: 0.75rem;
        width: 1.25rem;
    }

	footer {
		overflow: hidden;
		height: auto;
	}

	footer > div  {
		display: table;
		margin: 0 auto;
	}

	footer > div > div,
	footer > div > div:last-child {
		clear: both;
		text-align: center;
		width: 100%;
	}
	
	footer > div > div > h5,
	footer > div > div > a {
		margin: 1.875rem 1.25rem 0;
	}
	
	footer > div > div > a.social-button {
		display: inline-block;
		float: none;
		margin: 1.875rem 1.25rem 1.0rem;
	}
}


/* Für Retina Displays */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

    #oeffnungszeiten > div > div:nth-child(1) {
        background: url(../images/seitenelemente/oeffnungszeiten_waschstrasse@2x.jpg) no-repeat center center / cover;
    }
    #oeffnungszeiten > div > div:nth-child(3) {
        background: url(../images/seitenelemente/oeffnungszeiten_sb@2x.jpg) no-repeat center center / cover;
    }
    
    .waesche:nth-child(1) {
        background: url(../images/seitenelemente/waschprogramme_luxuswaesche@2x.png) no-repeat center top;
        background-size: 200px 150px;
    }
    .waesche:nth-child(2) {
        background: url(../images/seitenelemente/waschprogramme_premiumwaesche@2x.png) no-repeat center top;
        background-size: 200px 150px;
    }
    .waesche:nth-child(4) {
        background: url(../images/seitenelemente/waschprogramme_wachspflege@2x.png) no-repeat center top;
        background-size: 200px 150px;
    }
    .waesche:nth-child(5) {
        background: url(../images/seitenelemente/waschprogramme_basiswaesche@2x.png) no-repeat center top;
        background-size: 200px 150px;
    }
    
    .zusatz:nth-child(1) {
        background: url(../images/seitenelemente/zusatzprogramm_felgenreinigung@2x.png) no-repeat left center;
        background-size: 100px 60px;
    }
    .zusatz:nth-child(2) {
        background: url(../images/seitenelemente/zusatzprogramm_unterbodenwaesche@2x.png) no-repeat left center;
        background-size: 100px 60px;
    }
    .onlineshop {
        background: url(../images/seitenelemente/onlineshop@2x.jpg) no-repeat center center / cover;
    }
    .onlineshop:hover, .onlineshop:focus {
        background: url(../images/seitenelemente/onlineshop-hover@2x.jpg) no-repeat center center / cover;
    }
}