.kade_comment_wrapper {
    max-width: 800px;
    margin: 20px auto;
    background: #8a3dae;
    border: 1px solid #ddd;
    border-radius:20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    padding: 20px 50px;
	position:relative;
}

.kade_question {
	font-size: 1.6rem;
    line-height: 1.3em;
    margin: 1.5rem 0; 
	font-weight:600;
	margin:0 20px;
	color:white;
	margin-top:20px;
	
}

.kade_comment_amount{
	  font-size: 1rem;
   line-height: 1.3em;
   margin: 1.5rem 0; 
	font-weight:600;
	margin:0 20px;
	color:white;
	margin-bottom:40px !important;
}

.kade_comment_name_input::placeholder, .kade_comment_textarea::placeholder{
  font-weight: bold;
  opacity: 0.5;
}


.kade_comment_box form {
    margin-bottom: 40px;
}

.kade_comment_box input[type="text"],
.kade_comment_box textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.kade_comments_submit_btn {
	width:95%;
	display:flex;
	justify-content:right;
	
}

.kade_comments_submit_btn input {
	display: inline-block;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    font-size: 19px;
    border-radius: 28px;
    padding:15px 40px;
    line-height: 1em;
    position: relative;
    min-width: 100px;
    transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out;
    font-family: comfortaa, Arial, Calibri, sans-serif;
    font-weight: bold;
	background-color: white !important;
    border: solid 2px #9646ff;
	color:black;
	margin-top:10px;
	
}

.kade_comments_submit_btn input:hover {
    background-color:#dfcaf2;
	color:black;
	border-color:black;
}
.kade_comment_input_wrapper{
   margin:20px auto 0px auto;
	width:93%;
}

.kade_comment_input_wrapper:before{
		content: "";
    display: block;
    position: absolute;
    left: 15px;
    height: 45px;
    width: 45px;
background:url("https://mueckenschwein.de/wp-content/uploads/2024/04/commentqm2.svg");
	background-size:contain;
	color:white !important;

}


.kade_comments_container {
    margin:20px auto;
	width:93%;
	
	display:block;

}

.kade_comments_container:before{
			content: "";
    display: block;
    position: absolute;
    left: 15px;
    height: 45px;
    width: 45px;
background:url("https://mueckenschwein.de/wp-content/uploads/2024/04/commentel2.svg");
	background-size:contain;
	color:white !important;
}

.kade_comment_list {
    list-style: none;
    padding: 0 20px;
	margin:0;
	max-height:500px;
	overflow:scroll;
	overflow-x:hidden;
	background:white;

}


.kade_comment_item {
    padding: 15px;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
    align-items: flex-start; 
}

.kade_comment_item:first-child {
    border-top: none;
}

.kade_comment_text {
    position: relative;
    flex-grow: 1;
    padding-right: 100px;
	display:block;
}


.kade_comment_author {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.kade_comment_textarea{
	resize:none;
}

.kade_comment_name_input{
	width:100%;
}

.kade_comment_date {
    color: #777;
    font-size: 0.9em;
    margin-bottom: 5px;
}

.toggle_text, .toggle_text:focus {
    background-color: transparent;
    color: black;
    padding:0;
    border-radius: 5px;
    cursor: pointer;
	display:block;
	margin-top:10px;
	text-decoration:underline;
	font-weight:500;
}


.toggle_text:hover {
 background-color:transparent;
	color:var(--accent)
}

.toggle_text:active{
	 background-color:transparent;
}


@media(max-width:768px){
	
		.kade_comment_wrapper{
			padding:15px 5px;
		}

		.kade_comment_input_wrapper:before, .kade_comments_container:before{
			content: "";
			display: none;
			visibility:hidden;
	background:url("https://mueckenschwein.de/wp-content/uploads/2024/04/commentqm.svg");
		background-size:contain;

	}
	
	.kade_comment_text{
		padding-right:0px;
	}
	
	.kade_question p {
		font-size:1.3rem;
	}
	
		}
	
	.kade_comment_amount{
	font-size: .9rem !important;
	margin-top:8px !important;
	margin-bottom:20px !important;
}
}

@media(min-width:768px) and (max-width:1024px){
	.kade_comment_input_wrapper:before, .kade_comments_container:before{
		left:10px

}