﻿*								{	font-size:100%; margin:0; padding:0; font-family: Verdana, Arial, sans-serif; }
			
body 							{	background-color:#fff; text-align:center; }


/* ================================================ KOPF/FUSS und MENUES ============================================== */

header							{	display:inline-block; text-align:left; width:95%; max-width:1000px; padding:2em 0 1em 0; }
								
footer							{	display:inline-block;  width:100%; margin-top:7em; }

nav 								{ 	margin:0 auto; }

#MenueGrossA, #MenueGrossB		{	display:block; list-style-type:none; margin:2em 0em; }
#MenueGrossA li, #MenueGrossB li	{	float:left; height:3em; }
li.willkommen div.Taste			{	padding:0.6em 1em 0.7em 1em; }
li.produkte						{	 }
li.kissen						{	width:30em; }

#MenueKlein, #button			{	list-style-type:none; position:relative; margin:2em 0em; }

#MenueFooter					{	list-style-type:none; }

#LC-Logo						{	display:block; position:relative; left:-5%; width:35%; min-width:22em; }

#Slogan							{	display:inline-block; text-align:left; font-size:120%; margin:0.8em auto 1em 0em; width:25em; }
#Slogan	a						{	text-decoration:none; color:black; }

#kontaktAktuell					{	position:absolute; top:9em; width:65%; max-width:700px; margin-left:2em; padding:4em; text-align:center; font-size:120%; line-height:1.4; background-color:#fff; opacity:0.75; }
#kontaktAktuell a				{	color:#000; }
#kontaktAktuell a:hover			{	color:#333; } 
#kontaktAktuellSchliessen		{	font-size:90%; cursor:pointer; text-decoration-line:underline; } 
						
div.Trenner						{	font-size:1em; height:1em; float:left; background-color:#fff; 
									padding:0.6em 1em 0.7em 1em; color:#999; }
						
div.Taste						{	font-size:1em; height:1em; float:left; background-color:#fff; 
									overflow:hidden; white-space:nowrap; text-overflow: ellipsis;
									text-align:center; padding:0.6em 0.75em 0.7em 0.75em; color:#999; }

div.Taste:hover					{ 	color:#666; background-color:#eee; }

div.Taste.AKTIV					{	font-weight:bold; color:#000; }

img.menue-btn					{	float:left; width:1.5em; padding:0.4em 1em 0.8em 0em; cursor:pointer; }

div.Taste.FOOTER					{	font-size:0.9em; height:1.5em; padding:0.5em 0; text-align:center; background-color:#ffffff; color:#666;
									outline:1px; outline-color:#aaa; outline-style:solid; }
div.Taste.FOOTER:hover			{ 	background-color:#eee; }

div.Taste.Menue					{	width:100%; padding:0.2em 0 0.6em 0; outline:1px; outline-color:#aaa; outline-style:solid; }
div.Taste.Menue:hover			{	color:#666; background-color:#eee; }

/* ----------------------------------------------- */

@media only screen and (max-width:550px){
	#MenueKlein					{	width:95%; }
	#MenueGrossA 				{	display:none; }
	#MenueGrossB 				{	display:none; }
	#button						{	display:block; }
	#menue						{	display:none; }
	#MenueKlein:target #button	{	display:none; }
	#MenueKlein:target #menue	{	display:block; width:95%; }
	div.Taste					{	width:100%; }
	//div.Taste					{	width:100%; outline:1px; outline-color:#aaa; outline-style:solid; }
	#LC-Logo					{	width:90%; min-width:21em; left:-4em; }
	#kontaktAktuell				{	top:10em; width:85%; margin-left:0; padding:2em; font-size:100%; }
}

@media only screen and (min-width:551px) and (max-width:650px){	
	#MenueGrossA 				{	display:block; }
	#MenueGrossB 				{	display:block; }
	#MenueKlein					{	display:none; }
	div.Taste					{	font-size:1em; }
	#kontaktAktuell				{	top:12em; width:85%; margin-left:0; padding:2em; font-size:105%; }
}


@media only screen and (min-width:651px) and (max-width:840px){	
	#MenueGrossA 				{	display:block; }
	#MenueGrossB 				{	display:block; }
	#MenueKlein					{	display:none; }	
	div.Taste.FOOTER				{	width:33.333%; }
}

@media only screen and (min-width:651px) and (max-width:750px){
	#kontaktAktuell				{	top:11em; width:65%; max-width:700px; margin-left:2em; padding:2em 4em; font-size:110%; }
}
@media only screen and (min-width:751px) and (max-width:840px){
	#kontaktAktuell				{	top:10em; width:65%; max-width:700px; margin-left:2em; padding:2em 3em; font-size:110%; }
}

@media only screen and (min-width:841px) and (max-width:1300px){	
	#MenueGrossA 				{	display:block; }
	#MenueGrossB 				{	display:block; }
	#MenueKlein					{	display:none; }		
	div.Taste.FOOTER				{	width:25%; }
	#kontaktAktuell				{	top:9em; width:65%; max-width:700px; margin-left:2em; padding:2em 3.5em; font-size:120%; }
}

@media only screen and (min-width:1301px){	
	#MenueGrossA 				{	display:block; }
	#MenueGrossB 				{	display:block; }
	#MenueKlein					{	display:none; }		
	div.Taste.FOOTER				{	width:16.666%; }
	#kontaktAktuell				{	top:9em; width:65%; max-width:700px; margin-left:2em; padding:2em 3.5em; font-size:120%; }
}

/* ================================================ RUMPF ============================================== */

main							{	width:95%; max-width:1000px; display:inline-block; margin:0 auto 20em auto; text-align:center; }

article						{	text-align:left; padding:2em 25% 3em 5%; line-height:1.4em; }

article h1						{	font-size:1.5em; margin:0em 0 1em 0; }
article h2						{	font-size:1.2em; margin:1em 0 0.5em 0; }
.textileDesign					{	font-size:1.1em; font-weight:normal;	margin-bottom:0; }
.textileDesign a				{	text-decoration:none; }
article h3						{	font-size:1em; margin:1em 0 0.25em 0; }

article p						{	font-size:1em; padding:0.5em 0;  }

article a						{	color:#666; }
article a:hover					{	color:#333; }

article ul						{	padding:0.3em 1.5em; }
article ul li						{	 }

article dt						{	float:left; width:7em; padding-top:1em; }
article dd						{	margin-left:7em; padding-top:1em; }


/* ---------------------------------------------- GALERIEN ----------------------------------- */

#galerie						{	position:relative; }
#sugarButton					{	position:absolute; width:75%; right:5%; bottom:-10%;  }
#gelberButton					{	position:absolute; width:25%; right:3%; top:-10%;  }

#teppichfarben					{	width:100%; max-width:30em; padding-right:20%; }
#wirPortrait					{	width:50%; padding-right:30%; }
.wirProjekt						{	width:48%; max-width:25em; padding-right:1%; }
.natuerlicheFasern				{	width:48%; max-width:25em; padding-right:1%; }
.kontakt						{	width:48%; max-width:25em; padding-right:1%; }
.erster							{	display:inline-block; text-align:left; width:95 %; padding:2em 2%; }
.erster a						{	color:#666; }
.adressblock					{	display:inline-block; text-align:left; vertical-align:top; line-height:140%; width:18em; padding:2em 0em; }
.adressblock a					{	color:#000; }
.adressblock.rechts				{	width:30em; line-height:180%; }


.unsichtbar						{	display:none; }

.galerieSichtbar				{	width:100%; display:flex; flex-flow:row wrap; }

.modusGalerie					{	width:80%; align-self:center; cursor:ew-resize; }
.modusGalerie.Teppiche			{	width:60%; }
.modusGalerie.Teppichmotive		{	width:50%; }
.modusGalerie.Farben			{	width:16em; }
.modusGalerie.Verantwortung		{	width:50%; }
.modusKatalog					{	width:60%; align-self:center; cursor:ew-resize; }
#A, #C							{	width:6%; opacity:0.2; align-self:center; cursor:pointer; }
#A:hover, #C:hover				{	opacity:0.3; }

.katalogTextSichtbar			{	display:inline-block; width:14em; align-self:top; text-align:left; padding:4em 0 0 3em; }
.bildTextSichtbar				{	display:inline; width:14em; align-self:top; text-align:left; padding:4em 0 0 3em; }

@media only screen and (max-width:1100px){
article							{	padding:3em 9%; }
.modusGalerie.Teppichmotive		{	width:60%; }
.modusKatalog					{	width:80%; }
.modusGalerie.Verantwortung		{	width:55%; }
.katalogTextSichtbar			{	width:80%; padding:0 0 0 20%; }
.bildTextSichtbar				{	width:80%; padding:1em 0 0 5%; }
}

@media only screen and (max-width:800px){
#wirPortrait					{	width:70%; padding-right:15%; }
article							{	padding:3em 3%; }
.modusGalerie.Teppiche			{	width:80%; }
.modusGalerie.Teppichmotive		{	width:70%; }
.modusGalerie.Verantwortung		{	width:70%; }
}

@media only screen and (max-width:550px){
#wirPortrait					{	width:100%; }
.wirProjekt						{	width:15em; padding:1%; }
.natuerlicheFasern				{	width:15em; padding:1%; }
.kontakt						{	width:15em; padding:1%; }
article							{	padding:3em 1%; -ms-hyphens:auto; -moz-hyphens:auto; -webkit-hyphens:auto; hyphens:auto; }
.modusKatalog					{	width:100%; }
.modusGalerie					{	width:100%; }
.modusGalerie.Teppiche			{	width:100%; }
.modusGalerie.Teppichmotive		{	width:100%; }
.modusGalerie.Verantwortung		{	width:100%; }
.bildTextSichtbar				{	width:100%; padding:1em 0 0 1%; }
#A, #C							{	display:none; }
#sugarButton					{	width:90%; right:-7%; bottom:-8%;  }
#gelberButton					{	width:35%; right:-7%; top:-10%;  }
}


/* ----------------------------------------------- Regal ----------------------------------------- */


#regal							{	display:inline-block; width:60em; }
div.fach						{	width:20em; text-align:center; float:left; margin-top:2em; }
div.fach img					{	width:100%; }
div.fach p						{	font-size:0.9em; margin-top:-2em; }

@media only screen and (min-width:645px) and (max-width:970px){
#regal							{	width:40em; }	
}
@media only screen and (max-width:644px){
#regal							{	width:20em; }
}


/* ----------------------------------------------- Einzelnes ----------------------------------------- */

#buttonOnlineShopping			{	display:block; opacity:0.7; color:#000; text-decoration:none; width:22em; padding:0.2em 1em; text-align:left; margin:1em 0 2em 5.5em; background-color:#FFF; outline:1px; outline-color:#999; outline-style:solid; }
#buttonOnlineShopping:hover		{ 	opacity:1; }
#buttonOnlineShopping img		{	width:12em; vertical-align:middle; }

#buttonHaendler					{	display:block; text-align:left; margin-bottom:1em; }
#buttonHaendler img				{	width:12em; vertical-align:middle; }

#buttonInstagram				{	display:inline-block; width:4em; padding:1em; }

@media only screen and (max-width:900px){
#buttonOnlineShopping			{	margin:1em 0 2em 0.5em; }
}




/*   
									outline:1px; outline-color:#00ffff; outline-style:solid;
 */

