#cossd-banner {
    display: none;
    position: fixed;
    z-index: 5000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: none;
    padding: 1rem;
    box-shadow: var(--wp--preset--shadow--input);
    border-radius: var(--wp--custom--boxborderradius);
    text-align: center;
    width: calc(500px - 1rem); /* begrenzt die maximale Breite des Banners */
    pointer-events: auto;
    font-size: var(--wp--preset--font-size--xx-small);

}

#cossd-banner h4 {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight:300;
	margin:0;
	padding:0;
}

#cossd-banner h5 {
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight:300;
	margin:0;
	padding:0;
	text-align:left;
	text-transform: inherit;
}

/* Hintergrund Overlay */

body.modal-open {
    overflow: hidden; /* verhindert das Scrollen des Hauptinhalts, während das Modal geöffnet ist */
    pointer-events: none;
}

body.modal-open::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3); /* erstellt ein semi-transparentes Overlay über dem Inhalt */
    z-index: 999; /* stellt sicher, dass das Overlay unter dem Modal ist, aber über dem restlichen Inhalt */
}

#cossd-banner p {
    margin-bottom: 20px;
	text-align: center;
}

#cossd-banner .wp-block-heading {
    font-weight: bold;
    font-size: 1.2em;
}

#cossd-banner .wp-element-button {
    /* padding: calc(0.3rem + 2px) calc(3.333em + 2px); */
    margin: 0.3rem 1rem; /* Reduziert den Abstand unterhalb der Buttons */
	width: 50%; /* reduziert die Breite der Buttons, um den Abstand zwischen ihnen zu verringern */
}

#cossd-banner a {
    margin-bottom: 20px;
}

@media screen and (max-width: 800px) {
    #cossd-banner .wp-element-button {
    width: 80%;
    }
	
	#cossd-banner {
	width: 80%; 
	}

	#cossd-banner .wp-element-button {
    padding: calc(0.3rem + 2px) calc(1.333em + 2px);
	}
}

#cossd-banner .separator {
    margin: 0 5px;
}

#cossd-banner #cossd-accept:hover {
    background-color: green; /* Hintergrundfarbe bei Hover über dem Akzeptieren-Button */
}

#cossd-banner #cossd-decline {
    background-color: white; /* Hintergrundfarbe des Ablehnen-Buttons */
    color: var(--wp--preset--color--contrast); /* Vordergrundfarbe des Ablehnen-Buttons */
}

#cossd-banner #cossd-decline:hover {
    background-color: red; /* Hintergrundfarbe bei Hover über dem Ablehnen-Button */
    color: white; /* Vordergrundfarbe des Ablehnen-Buttons bei Hover */
}

.hidden {
    display: none;
}

#cossd-toggle {
    position: relative;
}
#cossd-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
	margin-left: 10px;
    transform: translateY(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid black;
    transition: transform 0.3s ease;
}

#cossd-toggle.open::after {
    transform: translateY(-50%) rotate(180deg);
}

.ToggleContent {
		padding-bottom: 0.5rem;
}


.cookie-table {
    width: 100%;
}

.cookie-table tr th {
	font-weight:300;
}

.cookie-table td, .cookie-table th {
    border-top: 1px solid #808080;
    vertical-align: top;
}


.cookie-name, .cookie-duration, .cookie-description  {
    text-align: left;
	vertical-align: top;
}

.cookie-name, .cookie-duration  {
    width: 20%;
}

.cookie-description {
    width: 60%;
}