body {
	background-image: url("../img/backgrounds/bg_kleckse_beige.webp");
}

article a:link {
    color: #658990;
}

/* visited link */
article a:visited {
    color: #658990;
}

/* mouse over link */
article a:hover {
    color: #658990;
}

article {
    margin-top: 20px;
    padding-bottom: 488px;
	margin-left: 150px;
	margin-right: 150px;
	letter-spacing: 4px;
    word-spacing: 0px;
	font-size: 22px;
	color: black;
}

.KontaktLinks {
    width: 50%;
    float: left;
}

.KontaktRechts {
    width: 50%;
    float: ;
}

.links {
    padding-right: 45%;
}

.rechts {
    padding-left: 45%;
}

article .zitat{
    padding-top: 80px;
    padding-bottom: 80px;
}

article .zitattext{
    box-shadow: 0px 0px 40px #c9b59f;
    border-radius: 20px;
    padding: 50px 50px;
    margin: 0 auto;
    margin-top: -40px;
    background-color: #f5e8d9;
    text-align: center;
    width: 65%;
}


article .zitattext p{
    color: #2f5259;
    font-size: 27px;
    font-weight: bold;
}

article h1{
    letter-spacing: 2px;
	font-size: 40px;
	color: #658990;
	margin: 5px 5px;
}

article h2{
    letter-spacing: 4px;
	font-size: 30px;
	color: #658990;
	margin: 5px 5px;
}

article h3{
    letter-spacing: 4px;
	font-size: 30px;
	color: #658990;
	margin: 5px 5px;
}

article p, label, input, li{
    letter-spacing: 2px;
	margin-left: 10px;
}

article ul{
  list-style: none; /* Remove default bullets */
	padding: 10px 40px;
}

article ul li::before {
    letter-spacing: 2px;
	font-size: 30px;
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #658990; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 0.7em; /* Also needed for space (tweak if needed) */
    height: 0.7em;
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.vieroben th img{
    height: 250px;
}

.vieroben th{
    vertical-align: text-top;
    width: 25%;
}

.vierunten th{
    vertical-align: text-top;
    width: 25%;
}

.links {
	float: left;
	margin-top: 12px;
}

.textrechts {
	margin-left: 80px;
}

.Kontakt input {
    padding: 12px 20px;
    margin: 8px 20px;
}

.Kontakt input[type=text], select {
    width: 100%;
    display: inline-block;
    border: 2px solid #658990;
    border-radius: 4px;
    box-sizing: border-box;
}

.Kontakt input[type=submit] {
    width: 100%;
    background-color: #658990;
    color: white;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	font-size: 20px;
}

.Kontakt input[type=submit]:hover {
    background-color: #658990;
}

.Kontakt textarea {
    width: 97%;
    height: 150px;
    margin: 8px 20px;
    padding: 12px 10px;
    box-sizing: border-box;
    border: 2px solid #658990;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: vertical;
    cursor: auto;
    font-size: 16px;
}

.herz {
    -webkit-transform: rotate(38deg);
    -moz-transform: rotate(38deg);
    -o-transform: rotate(38deg);
    -ms-transform: rotate(38deg);
    transform: rotate(38deg);
}


article .accordion {
    background-color: #faf4ee; 
    cursor: pointer;
    margin: 5px;
    padding: 0 30px;
    width: 100%;
    border: none;
    text-align: left;
    border-radius: 30px;
    transition: 0.4s;
}

article .active, .accordion:hover {
    background-color: #faf4ee; 
}

article .panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1200px) {
    article {
        margin-top: 20px;
        padding-bottom: 488px;
        margin-left: 10px;
        margin-right: 10px;
        letter-spacing: 3px;
        word-spacing: 0px;
        font-size: 22px;
        color: black;
        font-size: 4vw;
    }
    
    
    article .zitattext p{
        color: #2f5259;
        font-size: 27px;
        font-weight: bold;
    }
    
    article h1{
        letter-spacing: 1vw;
        font-size: 8vw;
        margin: 5px 5px;
    }
    
    article h2{
        letter-spacing: 1vw;
        font-size: 6vw;
        margin: 5px 5px;
    }
    
    article h3{
        letter-spacing: 1vw;
        font-size: 6vw;
        margin: 5px 5px;
    }
    
    article .zitat{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    article .zitattext{
        box-shadow: 0px 0px 40px #c9b59f;
        border-radius: 20px;
        padding: 30px 10px;
        margin: 0 auto;
        margin-top: -40px;
        background-color: #f5e8d9;
        text-align: center;
        width: 85%;
    }
    
    article .zitattext p{
        font-size: 4vw;
    }
    
}