@charset "UTF-8";

/* Basicfarbe ksm Pink #ea1264  ist identisch mit HWK-logo Hand mit Daumen hoch */

	/* Reset */
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
/* Produktlink */
    #Produkte{ border: medium solid #ea1264; border-radius: 5px;}
    .pro-dukte {  display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); gap: 2px; }
     .titel{ grid-column: 1 / -1; margin-top: -1px;}
    .pro-dukte { width: 100%;  margin: 0;  background: #ea1264 url("./css/pink.gif") repeat -12px -12px; } 
       
    .thb{ height: 132px; }
    #dusche{ background:  url("./bilder/dusche-200px.JPG") no-repeat 0 1.6em; 
         background-size: contain;  font-size: 1em; }
    #spuele{ background: url("./bilder/bonbonschuebchen-200px.jpg") no-repeat 0 1.6em; 
         background-size: contain; font-size: 1em; }
    #waschtisch{ background: url("./bilder/waschtisch-aufsatzbecken-200px.JPG") no-repeat 0 1.6em; 
         background-size: contain; font-size: 1em; }
    #spiegel{  background: url("./bilder/spiegelschrank-200px.JPG") no-repeat 0 1.6em; 
         background-size: contain; font-size: 1em; }
    #badewanne{  background: url("./bilder/badewanne-freistehend-200px.JPG") no-repeat 0 1.6em; 
         background-size: contain;  font-size: 1em; }
    #problem{ background: url("./bilder/problem-200px.JPG") no-repeat 0 1.6em; 
         background-size: contain;  font-size: 1em; }
 
    @media only screen and (min-device-width: 580px) and (max-device-width: 859px) {
    .thb{ height: 140px; }
    }
      @media only screen and (min-device-width: 860px) {
            .container { grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); }
    .thb{ height: 125px; }
    }
 
/** Kleine Monitore mobile first **/
	body {
	margin: 0 auto; 
	font: normal 1em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
	line-height: 1.4em;	text-wrap: normal;

	display: grid; gap: .4em;
	grid-template-columns: repeat(1, 1fr);
	grid-template-areas: "danke-mail" 
                            "head" 
                            "produkt-a" 
                            "produkt-b"
                            "produkte" 
                            "produkt-c" 
                            "produkt-d"
                            "produkt-e" 
                            "produkt-f"
                            "produkt-g"
                            "produkt-h"
                            "foot"
                            "plink";
      width: 380px; margin: 0 auto; text-align: center; margin-top: 2em;             	
		 }
                 
		/* grid benennen */
        #danke-mail{grid-area:danke-mail;}   
	header { grid-area: head; margin-bottom: .5em;}
	#Produkt-a { grid-area:produkt-a;}
	#Produkt-b { grid-area:produkt-b;}
	#Produkte { grid-area:produkte;}
	#Produkt-c { grid-area:produkt-c;}
	#Produkt-d { grid-area:produkt-d;}
	#Produkt-e { grid-area:produkt-e;}
	#Produkt-f { grid-area:produkt-f;}
	#Produkt-g { grid-area:produkt-g;}
	#Produkt-h { grid-area:produkt-h;}
	footer { grid-area: foot; clear: both !important;}
	#plus-link{grid-area: plink; width: 100%;  background-color: #ea1264;
                    border: medium solid #ea1264; border-radius: 5px; margin-bottom: 2.5em;}  /* Pluslink am Seitenende */
		 
	#logo-ksm{
		border: medium solid #ea1264; border-radius: 5px;	
		display: inline-box;
		width: 100%;
		height: 104px;
	  	background: url(logos/ksm-hwk-logo-380.gif) no-repeat 0 0;
		background-size: contain;
		background-color: #ea1264;
		margin-top: 20px;
		margin-bottom: 15px;}
		
	#probox{margin-top: 10px;}

	h1#Produktinfo{background: #ea1264 url("pink.gif") -12px -12px; background-size: contain; color: #fff; padding: .5em; line-height: 1.3em; border-radius: 5px; margin-top: 1.5em;}  
	h2{background: #ea1264 url("pink.gif") -22px -32px; background-size: contain; color: #fff; padding: .5em; margin-top: 0; line-height: 1.2em;}
	p{padding: .2em; font-size: 1.3em; line-height: 1.5em;	margin: .8em;}
	a.btn{ color: #fff; font-size: 1.2em;  padding: .2em; margin: .3em}
	a.btn:hover{background-color: #ea1264; color: #fff; border-radius: 5px;}
	.pro-info{ background:#888; color: #fff; border: medium solid #ea1264; border-radius: 5px;	}
	

/* Tabletts */					   
	@media (min-width: 580px) {
	body {display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:"danke-mail danke-mail" 
                        "head head"
						"produkt-a produkt-b"
						"produkte produkte"
						"produkt-c produkt-d"
						"produkt-e produkt-f"
						"produkt-g produkt-h"
						"foot foot"
						"plink plink";
      width: 530px; margin: 0 auto; text-align: center; margin-top: 2em;             	
					   }
	#logo-ksm{
	   display: inline-box;
	   width: 100%;
	   height: 112px;
	   background: url("logos/ksm-hwk-logo-530.gif")  no-repeat 0 0;	
            background-size: contain;
            background-color: #ea1264;
		}
	 }
	   
/* Mittlere Monitore */
	@media only screen and (min-width: 860px) {
	body { width: 830px;  margin: 0 auto; text-align: center; margin-top: 2em;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:"danke-mail danke-mail" 
				"head head"
				"produkt-a produkt-b"
				"produkte produkte"
				"produkt-c produkt-d"
				"produkt-e produkt-f"
				"produkt-g produkt-h"
				"foot foot"
				"plink plink";	}
	#logo-ksm{
		display: inline-box;
		width: 100%;
		height: 180px;
		background: url("logos/ksm-hwk-logo-820.gif")  no-repeat right;
		background-size: contain;	
		background-color: #ea1264;		
		margin-bottom: 15px;}
	}

/* Grosse Monitore */
	@media only screen and (min-width: 1080px) {
	body { width: 1060px;  margin: 0 auto; text-align: center; margin-top: 2em;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:"danke-mail danke-mail" 
                        "head head"
  								"produkt-a produkt-b"
								"produkte produkte"
								"produkt-c produkt-d"
                        "produkt-e produkt-f"
                        "produkt-g produkt-h"
                       	"foot foot"
                        "plink plink";	}
	#logo-ksm{
	   width: 100%;
	   height: 175px;
	   background: url("logos/mixa217.jpg")  no-repeat,
				url("logos/ksm-hwk-logo-820.gif")  no-repeat right;   /* x y Achse! */
				background-size: contain;	 
				background-color: #fff;		
				margin-bottom: 15px;}
	}