/* Stylesheet für Selfhtml Design 08 
  responsives Layout mit Grid Layout ab Z. 249   */

/* ====================================================   GLOBAL DEFINITION   ==================================================== */

/* alternatives Boxmodell */
html { 
  	box-sizing: border-box; 
	padding: 0;
	margin: 0;	
} 

*, ::before, ::after { 
	box-sizing: inherit; 
}

body {
	font: normal 1em Arial, sans-serif;
}

/* ====================================================   Inhalt   ==================================================== */


a {
  color: #FFFFFF;
}

a:hover,
a:focus {
	background:#ffffff ;
}


header h1 {
	padding-left: 1em;
	padding-top: 0.5em;
	margin: 0 0 0 0em;
	height: 3.5em;

}

header {
	max-width: 80em;
	color: white;
	background: rgb(217,233,83);
	background-repeat: no-repeat;
	background-position: right;
	margin: 0 auto 1.6em;
	position: relative;
   
}

header #logo {
  display: inline-block;
   margin: 0 0 0 0em;
  text-decoration: none;
  
}

section.center {
padding-top: 1.5em;
padding-left: 1.5em;

}
.beschriftung {
	padding-left: 0.1em;
	padding-top: 0.8em;
	font-family: "BankGothic Md BT";
	font-size: 27px;
	color: #000;
}

main {
  display: block;   /*für IE9-11 */	
  max-width: 70em;
  position:relative;
  padding:0 20px 0;
  margin: 0 auto;
  background: #fffbdb;
  color: #000;
}

.gallery{
	margin: 0 auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.reponsive {
max-width: 100%;
height: auto;
}

  /* slide in captions found @http://css-tricks.com/slide-in-image-captions/ */
figure {
	padding: 0;
	margin: 0 20px;
	display: block;
	position: relative;
	overflow: hidden;
 


}

figure:before { 
  content: "?"; 
  position: absolute; 
  background: rgba(255,255,255,0.75); 
  color: black;
  width: 24px;
  height: 24px;
  bottom:30px; left:30px;
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  transition: all 0.6s ease;
  opacity: 0.75;  
}
figure:hover:before {
  opacity: 0;
}

img.gallery {
	width: auto;
	height: auto;
	display: block;
	margin-top: 0.5em;
	
}
h3.adresse {
	text-align: center;
	color: #000;
	text-shadow: white 0.5em 0.5em 0.6em;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 23px;
	margin-top: 0.4em;

}


figcaption { 
  position: absolute; 
  background: rgba(0,0,0,0.75); 
  color: white; 
  padding: 10px 20px;
  width:100%; 
  opacity: 0;
  bottom: -20%; 
  left: 0;
  transition: all 0.6s ease;
  
    
}

figcaption h2 {
  margin: 0 12px;
}

figcaption p {
  margin: 12px 12px 0;
  padding: 0;
    font: bold"Comic Sans MS", "Tw Cen MT Condensed", "fantasy";
}
figure:hover figcaption {
  opacity: 1;
  bottom: 0;
}
.farbkarte {
	margin-top: -1.3em;
	width: auto;
	height: auto;
	display: block;
}

header::after {
  position: absolute;
  content: "";
  background: linear-gradient(to top, #fffbdb 25%, #000 25%, #ebecec 50%, #000 50%, #d9e953 75%, #fffbdb 75%);
  height: 1.6em;
  left: 0;
  right: 0;
  bottom: -1.6em;
}

section.werbung {
	padding: 0.3em;
	text-align: left;
	background-color: ##d9e953;
	border: thin double #000;
	background: rgb(217,233,83);
	background-position: left;
	height: 350px;
	background-image: url(../bilder/halbkreis.png);
	background-repeat: no-repeat;
}
h4.werbetechnik {
	font-family: "BankGothic Md BT";
	font-size: 1.7em;
	text-align: center;
	margin-top: -1px;
	text-shadow: 3px 3px 2px #FFFFFF;
}
ul.magnet {
	font-family: "Arial Black", Gadget, sans-serif;
	list-style-type: none;
	margin-left: 30px;
	list-style-image: url(../bilder/haken.png);
	list-style-position: outside;
	margin: -20px 10px 0 10px;
	background-image: url(../bilder/digitaldruck.png);
	background-repeat: no-repeat;
	background-position: right 1.4em;
}

li.magnet {
	padding-left: 1em;
}

section.textilien{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border: thin double #000;
	background-size: auto;
	height: 350px;
	padding: 0.5em;
	background-image: url(../bilder/section_services.jpg);
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	}
	
h4.textildruck {
	font-family: "BankGothic Md BT";
	font-size: 1.5em;
	text-transform: uppercase;
	text-align: center;
	color: #06C;
	border-bottom: 3px solid black;
	padding: 2px;
	margin-top: -1px;
	background-color: #fffbdb;
	 }
ul.textil {
	font-weight: bold;
	text-align: center;
	list-style-type: none;
	margin-top: -0.5em;
	padding-bottom: 30em;
	font-size: 1.5em;
}
li.shirt{
	font-family: "Comic Sans MS", cursive;
	font-size: 1em;
	text-shadow: 2px 4px 2px #a2d9f7;
	margin-top: -0.9em;
}
li.polo{
	font-family: "Comic Sans MS", cursive;
	font-size: 1.2em;
	color: #000000;
	margin-top: -0.7em;
	text-shadow: 2px 4px 2px #FFC;
	padding-right: 9em;
}
li.sweat{
	font-family: "Comic Sans MS", cursive;
	font-size: 1em;
	margin-top: -0.6em;
	padding-left: 5em;
	text-shadow: 2px 4px 2px #fffbdb;
}
li.hoody{
	font-family: "Comic Sans MS", cursive;
	font-size: 1em;
	margin-top: -0.5em;
	padding-right: 6em;
	text-shadow: 2px 4px 2px #0CF;
	color: #000;
}
li.uvm{
	font-family: "BankGothic Md BT";
	font-size: 0.8em;
	margin-left: 5em;
	margin-top: -0.4em;
}
.angebottshirt{
	background-image: url(../bilder/tshirt_gelb.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center -1.3em;



	margin-top: -2.em;
	padding-bottom: 3.2em;
	margin-right: 1.7em;
	margin-top: -3.5em;
}
h4.tshirt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	padding: 0.3em;
	text-align: center;
	margin-top: 0.5em;
	margin-top: 3.2em;
	color: #000;
	padding-top: 1.1em;
	}
li.einseitigtextil {
	font-family: "Comic Sans MS", cursive;
	font-size: 0.7em;
	color: #06F;
	font-weight: bold;
	text-align: center;
	margin-top: -2.5em;
	padding-top: 0.5em;
} 
li.preistextil {
	font: 1em "Arial Black", Gadget, sans-serif;
	color: #F00;
	text-shadow: 3px 2px 0px #fff, 5px 4px 0px #ccc;
	border-radius: 10px 10px 10px 10px;
	transform: rotate(-3deg);
	text-align: center;
	margin-top: 0.2em;
}
section.fotogeschenke {
	background-repeat: no-repeat;
	background-size: auto;
	border: thin double #000;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-filter: brightness(1.6);
	filter: brightness(1.16);
	padding: 0.3em;
	height: 350px;
	text-align: center;
	background-image: url(../bilder/dekohome.png);
	background-position: left;
}
h4.schiefertafel{
	font-family: "Comic Sans MS", cursive;
	font-size: 31px;
	color: #000;
	text-shadow: 2px 2px #CCCCCC;
	text-align: center;
	margin-top: -0.9px;
}
.tafel{
	margin-top: -1em;
	vertical-align: middle;
	margin-left: 2em;
}	
div.preissubli {
	font: 1.4em "Arial Black", Gadget, sans-serif;
	color: #F00;
	text-shadow: 3px 2px 0px #fff,5px 4px 0px #ccc;
	border-radius: 10px 10px 10px 10px;
	transform: rotate(-3deg);
	text-align: center;
	margin-top: 0.6em;
}
 div.einseitigsubli {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.6em;
	color: #06C;
	font-weight: bold;
	text-align: center;
	margin-top: 5px;
}
section.allgemein{
	background-size: auto;
	background-position: left;
	height: 350px;
	border: thin double #000;
	background-image: url(../bilder/dekohome.png);
	background-repeat: no-repeat;
	padding-top: 3px;

}
h4.tasse{
	font-family: "Comic Sans MS", cursive;
	font-size: 2.5em;
	text-align: center;
	font-weight: bold;
	color: #000;
	text-shadow: 2px 2px #CCC;
	margin-top: -0.9px;
}
.keramik{
	font-family: "Arial Black", Gadget, sans-serif;
	color: #F00;
	transform: rotate(-2deg);
	font-size: 10px;
	padding-left: 4em;
	margin-top: 6px;
}
.duraglaze{
	justify-content: center;
	align-items: center;
	padding-left: 7em;
	width: auto;
}
.druck{
	font-family: "Comic Sans MS", cursive;
	font-size: 1.2em;
	color: #F00;
	font-weight: bold;
	transform: rotate(-3deg);
	text-align: center;
	margin-top: -0.6em;
	padding-left: 1em;
}
.tassenpreis{
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	transform: rotate(-3deg);
	color: #F00;
	border-radius: 10px;
	text-shadow: 3px 2px #FFF;
	margin-top: 0.5em;
}
section.fotoservice {
	padding: 0.3em;
	text-align: center;
	background-color: #00a0e3;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border: thin double #000;
	height: 350px;

	background-image: url(
../bilder/foto_gelb%20(2).png);
	background-repeat: no-repeat;
	background-position: bottom;
	background-image: url(../bilder/foto_gelb.png);
}
img.foto {
	text-align: center;
	width: auto;
	margin-top: -1.3em;
}
div.foto {
	font: normal bold 1.4em "Arial Black", Gadget, sans-serif;
	text-shadow: 1px 1px 2px white, 0 0 25px #a2d9f7, 0 0 5px #fffbdb;
	margin-top: -1.3em;
}


div.beschriftungen {
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 1em;
	font-weight: bold;
	margin-right: 12em;

}
section.post {
	background-color: #F7C200;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border: thin double #000;
	height: 200px;
	padding-right: 0.3em;
	
}
ul.dhl {
	background-color: #F7C200;
	margin-top: 0.8em;
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
	margin-right: 0.3em;
}
ul.dhl li::before {
  content: "\2022";
  color: red;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
  padding: 0.2em;
}		
li {
	font-weight: bold;
	font-size: 0.8em;
	line-height: normal;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: none;
}
span {
	color: #000;
	font-weight: bolder;
	
}
div.pakete {
	color: #F00;
	font-weight: bolder;
	font-size: 0.8em;
	line-height: 1.2em;
	text-transform: uppercase;
}
ul img {
	text-align: right;
	padding: 0.2em;
}
p.leistungen {
	font-family: "Comic Sans MS", cursive;
	color: #F00;
	margin-top: 1em;
}
img.logo {
	margin-bottom: 0.5em;
	padding-top: 0.2em;
}

	










img.services {
	margin-left: 45px;

}


.keramik{
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 0.7em;
	text-align: center;
	margin-top: -5em;
}


p.huelle {
	text-align: left;
	font: 0.5em bolder Arial, Helvetica, sans-serif;
	color: #000;
	background-color: #FFF;
	margin-top: 0.2em;
}
span.bedruckt {
	text-align: left;
	font: 0.7em bold Arial, Helvetica, sans-serif;
	color: #000;
	margin-top: -0.4em;
}

div.services{
	border: thin double #000;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: #FFF;
	-webkit-filter: brightness(1.5);
	filter: brightness(1.16);
	padding-bottom: 0.5em;
}

div.tasse {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	color: #06C;
	font-weight: bold;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 0.1em;
}


div.preiskeramik {
	font: 1.3em "Arial Black", Gadget, sans-serif;
	color: #F00;
	text-shadow: 3px 2px 0px #fff, 5px 4px 0px #ccc;
	border-radius: 10px 10px 10px 10px;
	transform: rotate(-50drg);
	text-align: center;
	


}

div.info {
	margin-top: 70px;
	background-color: #d9e953;
	width: 301px;
	border-radius: 23px 14px 14px 19px;
	-webkit-box-shadow: -4px -1px 14px 0px rgba(0,0,0,0.42);
	-moz-box-shadow: -4px -1px 14px 0px rgba(0,0,0,0.42);
	box-shadow: -4px -1px 14px 0px rgba(0,0,0,0.42);
	height: 800px;
}
transform:rotate: 1 1 0 60deg;  
	transform: rotate(-4deg);
	padding-left: 70px;
	position: absolute;
}
/* Sign in form */

#signin label {
	display: block;
}  

#signin input, #signin textarea {   
   width: 80%;
   border: 1px solid #dfdfdf;
   background: #fff;
   padding: 5px 3px;
}   

#signin textarea{
   height:105px;
   overflow:auto;
}      

#signin button{
   margin: 1em 1em;
   padding: 0.5em;
   float: right;
   color: #feb040;
   background: #0e76bc;
   border: 1px solid #333;
   border-radius: 5px;
}
   
#signin button:hover,
#signin button:focus {
	background: #feb040;
	color: #0e76bc;
}

.services img {
	width: 100%;
	
}

  /* Navigation */

nav {
	margin: 0;	
	width: 100%;
	background: #00000;
	color: #fffbdb;

	
}

nav ul {
	margin: 0;
	padding: 0.2em;
 	font: 1.3em  Arial, Helvetica, sans-serif;
 	list-style-type: none;
    color: #fffbdb;
	background-color:#000;
	
}

nav li {
	display: inline;
	margin: 0;
	color: #fffbdb;

	
	
    
}
li img.kopieren {
	padding-top: 0.6em;
	padding-right:1.5em;
	
	
}


nav a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: fffbdb;
	padding: .5em;
	
	
}

[aria-current=page] {
	font-weight: bold;
	color: #feb040;
}

nav a::after{
	content:" ▶";
	color: #00000;
	display: inline-block;
	width: 2em;
}

nav a:hover::after, nav a:focus::after{
	content:" ▼";
}  

nav a:hover, nav a:focus {
	background: transparent;
	color: #000;
}


footer {
  max-width: 70em;
  padding: 1em;
  margin: 0 auto;
  color: #000;
    
	background: rgb(217,233,83);
background: linear-gradient(90deg, rgba(217,233,83,1) 52%, rgba(0,160,227,1) 74%, rgba(0,160,227,1) 99%);
border-top: #EBECEC dotted;
    font: normal 1em Arial, sans-serif; 
}

dl.grid {
	display: grid;
	grid-template-columns: 1fr 100%;
	font-family: Arial, Helvetica, sans-serif, 'Times New Roman', 'serif';
	font-weight: bold;   
}
dd { 
  margin: 0; 
  padding-left: 1em;
   
}
dl.grid dd {
  margin-bottom: 1em;
  
    

}

a[href^="tel"] { white-space: nowrap; }


.copy {
	font: normal 0.9em Arial, sans-serif;
	font-weight: bold;
   
}
.impressum { color: #000;
font: 0.9em  Arial, Helvetica, sans-serif;
list-style-type: none;
    color: #fffbdb;
	background-color:#000;
	text-decoration:none;
	font-weight:bold;
	padding: 0.3em;
	

}
#eu_cookiebox {
	display: block;
	z-index: 100;
	position: fixed;
	bottom: 0em;
	min-height: 1.875em;
	padding: 0.313em;
	margin: 0;
	width: 50%;
	color: #555;
	border: 0.063em solid black;
	border-bottom: none;
	background: #fff;
    
}

.frame {
    padding-left: 4em;
}

/* ====================================================   LAYOUT   ==================================================== */

/* Mobile first ! alle Blöcke haben 100%, Navigation unten*/

body {
  padding: 0 1em;
}

@media screen and (min-width: 35em) {    

	main, footer {
	  	display: grid;
	  	grid-template-columns: repeat(2, 1fr);
	  	grid-gap: 1em;
	}
	article {
		grid-column: 1 / 2;
	}	
	.gallery {
		grid-column: 1 / 3;
	}	
	
	aside  {
		grid-column: 2 / 3;	
	}
	
}

@media screen and (min-width: 50em) {   
	main, footer {
	  	grid-template-columns: repeat(3, 1fr);		/* 3Spalten, sobald Platz da ist */
	}
	
	article {
		grid-column: 1 / 3;
	}
	
	.gallery {
		grid-column: 1 / 4;
	}
	.foto {
		grid-column: 1 / 4;
	}
	.technik {
		grid-column: 1 / 4;
	}
	aside  {
		grid-column: 3 / 4;	
	}
	figure {
  		margin: 0;
	}


nav ul {
  padding: 0 0 0 2%;
  font: 1.2em Arial,Helvetica,sans-serif;
}
}