/* Mobile */
#mobileMenu
{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: none;
}

#mobileMenu ul li
{
        display:block;
        background-color: #f9f9f9;
        color: #fff;
        padding: 12px 0;
        letter-spacing: 0.1em;
        text-align: center;
        text-transform: uppercase;
        border-bottom: 1px solid #e1e1e1;
}
.toggleMobile
{
        display: none;
}

/* Alle */

.logos-footer {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

.logos-footer > div {
  text-align: center;
  font-size: 30px;
}

a {
	color: grey;
}
a:hover{
	color:grey;
	text-decoration:underline;
}

html {
		box-sizing: border-box;
	}
	*, *:before, *:after {
		box-sizing: inherit;
	}
	* {
		margin: 0;
		padding: 0;
	}
		body {
		font: 100%/1.5 sans-serif;
	}
	.wrapper {
		margin: 0 auto;
	}
	.cf:after {
		content: " ";
		display: table;
		clear: both;
	}

img {
	width: auto; /* IE8 */
}

#box {
	Color: white;
	font-size: 21px;
	text-shadow:  1px  1px 1px black,
                  1px -1px 1px black,
                 -1px  1px 1px black,
                 -1px -1px 1px black;
}
dd { 
	display:none; 
}

.closed, .closed:link, .closed:visited { 
	border: 1px solid #ccc;
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.closed:hover { 
	background-color: #ff7f76;
	color: #ededed;
	}
	
.open, .open:link, .open:visited { 
	border: 1px solid #ccc;
    background-color: green;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.open:hover { 
	background-color:#60a160;
	color: #ededed;
	}
	
 div.feature a {
	Color: white;
	font-size: 21px;
	text-shadow:  1px  1px 1px black,
                  1px -1px 1px black,
                 -1px  1px 1px black,
                 -1px -1px 1px black;
 }

p {
	Color: white;
	font-size: 21px;
	text-shadow:  1px  1px 1px black,
                  1px -1px 1px black,
                 -1px  1px 1px black,
                 -1px -1px 1px black;
}
@viewport {
   width: device-width;
   zoom:1;
}

.top-container {
  background-color: white;
  padding: 5px;
  width: auto; /* IE8 */
}
.header {
  padding: 1px 1px;
  background: black;
}
/* Bottom right text */
.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}
.jumbotron{
	border-bottom:2px solid #ccc;
}
a.button:link, a.button:visited {
	border: 1px solid #ccc;
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
a.button:hover {
	background-color: #ff7f76;
	color: #ededed;
}
a.footer:link {
   color: white;
   background-color:black;
   padding: 0px 0px;
}
a.footer:hover {
	color: grey;
	background-color:black;
	padding: 0px 0px;
}
 body {
	font-family: "Lato", sans-serif;
}
			
* {box-sizing: border-box
}

/* Style the tab */
.tab {
    float: right;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 30%;
    height: 341px;
}

/* Style the buttons inside the tab */
.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 16px 16px;
    width: 100%;
/* 	height:16%;*/
    border: none;
    outline: none;
    text-align: right;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    padding: 0px 12px;
/*    border: 1px solid #ccc;*/
    width: 70%;
    border-right: none;
    height: 341px;
	text-align: end;
}
.footer {
    left: 0;
    bottom: 0;
    max-width: 100%;
    background-color: black;
    color: white;
    text-align: center;
}
div.shop {
	background-image: url('../img/bildE.jpg');
	background-repeat: no-repeat;
	padding:20px;
	border-radius: 8px;
	width:785px;
	height:320px;
	max-width: 100%;
	color:white;
}

div.erdbeerbowle {
	background-image: url('../img/bildA.jpg');
	background-repeat: no-repeat;
	padding:20px;
	border-radius: 8px;
	width:785px;
	height:320px;
	max-width: 100%;
	color:white;
}

div.termine {
	background-image: url('../img/bildD.jpg');
	background-repeat: no-repeat;
	padding:20px;
	border-radius: 8px;
	width:785px;
	height:320px;
	max-width: 100%;
	color:white;
}
div.UnserSortiment {
	background-image: url('../img/bildB.jpg');
	background-repeat: no-repeat;
	padding:20px;
	border-radius: 8px;
	width:785px;
	height:320px;
	max-width: 100%;
	color:white;
}
div.Franchise {
	background-image: url('../img/bildF.jpg');
	background-repeat: no-repeat;
	padding:20px;
	border-radius: 8px;
	width:785px;
	height:320px;
	max-width: 100%;
	color:white;
}
div.lutherstintenklecks {
	background-image: url('../img/bildC.jpg');
	background-repeat: no-repeat;
	padding:20px;
	border-radius: 8px;
	width:785px;
	height:320px;
	max-width: 100%;
	color:white;
}
table#table {
	width: 90%;
	border-collapse: separate;
	border-spacing: 8px;
	background-color: #FFFFFF;
	overflow-y: auto;
	margin: 0 0 1em;
}

table#table th:nth-child(even),
table#table td:nth-child(even) {
	background-color: #EEEEEE;
}

table#table th:nth-child(odd),
table#table td:nth-child(odd) {
	background-color: #FFFFFF;
}

table#table tr th,
table#table tr td {
	border: Solid 1px #000000;
}

table#table tr th,
table#table tr td {
	padding: 14px;
}
	
/* Anpassungen */
	
	@media only screen and (min-width: 900px) {
		.wrapper {
			max-width: 100%;
		}
		.wrapper div:nth-child(3) {
			float: left;
			clear: none;
		}
		footer {
		position: fixed;
		}
		img {
		margin-left:100px;
		}
	} 
	
	@media only screen and (max-width: 736px) { /* iPhone 6S Plus */
		.top-container {
			margin-left:100px;
		}
	}
	
	@media only screen and (min-width: 700px) {
		.box {
			font: 100%/1.5 sans-serif;
		}
		.wrapper div:nth-child(3) {
			margin: 0 auto;
			float: none;
			clear: left;
		}
		.top-container {
			margin-left:90px;
		}
	}
	
	@media only screen and (max-width: 640px) { /* Nexus 4 */
		.box{
		width: 100%;
	}
		.top-container {
			margin-left:90px;
		}
	}
	
	@media only screen and (max-width: 568px) { /* iPhone SE */
	.box{
		width: 100%;
	}
	
		.top-container {
			margin-left:-30px;
		}
	}
	
	@media (max-width: 500px) {
		.jumbotron, .tab, .tab button, .tab button:hover, .tab button.active, .tabcontent
			{
                display: none !important;
			}
		body {
			font: 100%/1.5 sans-serif;
		}
		footer {
			font: 80%/1.5 sans-serif;
		}
		.box {
			width: 100%;
			margin: 0 -3em;
			
		}
		.top-container {
			margin-left:100px;
		}
		/* Mobile */
		#mobileMenu
        {
                display: block;
                z-index: 99;
        }
        .toggleMobile
        {
                position: fixed;
                top: 10px;
                left: 10px;
                display: block;
                width: 40px;
                height: 36px;
                cursor: pointer;
                z-index: 999;
        }
        .toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3
        {
                display: block;
                position: absolute;
                width: 40px;
                height: 8px;
                left: 0;
                background: #d10000;
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile span.menu1
        {
                top: 0;
        }
        .toggleMobile span.menu2
        {
                top: 14px;
        }
        .toggleMobile span.menu3
        {
                top: 28px;
        }
        .toggleMobile.active span.menu1
        {
                top: 14px;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu2
        {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu3
        {
                opacity: 0;
                -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
	{