/* =================================================================== */
/* Komplettes Redesign für das Klaro Cookie-Einstellungsfenster      */
/* Für: Telepronto.de                                                */
/* =================================================================== */

/* 1. Hauptcontainer des Modals
------------------------------------------------------------------- */
.klaro .cookie-modal .cm-modal {
    background-color: #f8f9fa; /* Ein sehr helles Grau als Grundton */
    color: #212529;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15); /* Weicher, moderner Schatten */
    border-radius: 12px; /* Stärkere Abrundung für modernes Aussehen */
    max-width: 600px; /* Eine angenehme maximale Breite */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* 2. Header-Bereich (Titel & Beschreibung)
------------------------------------------------------------------- */
.klaro .cookie-modal .cm-header {
    background-color: #ffffff; /* Weißer Header, um ihn vom Body abzuheben */
    padding: 24px;
    border-bottom: 1px solid #dee2e6 !important; /* Saubere Trennlinie */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.klaro .cookie-modal .cm-header .title {
    font-size: 1.5em; /* Größerer Titel für bessere Hierarchie */
    font-weight: 600;
    margin-bottom: 0.5em;
    color: #000;
}

.klaro .cookie-modal .cm-header p {
    color: #495057; /* Etwas helleres Grau für den Beschreibungstext */
    line-height: 1.6;
}

.klaro .cookie-modal .cm-header .hide {
    stroke: #6c757d; /* Farbe für das Schließen-X */
}


/* 3. Body-Bereich (Liste der Dienste)
------------------------------------------------------------------- */
.klaro .cookie-modal .cm-body {
    padding: 8px 0; /* Nur oben/unten Padding, links/rechts kommt in die Listenelemente */
    background: #ffffff;
}

/* Einzelner Zweck in der Liste (z.B. "Analytische Cookies") */
.klaro .cm-purposes .cm-purpose {
	padding: 16px 24px !important;
	border-bottom: 1px solid #e9ecef;
}
.klaro .cm-purposes .cm-purpose:last-child {
    border-bottom: none; /* Keine Linie beim letzten Element */
}

/* Titel des Zwecks (z.B. "Analytische Cookies") */
.klaro .cm-list-label .cm-list-title {
    font-weight: 500;
    font-size: 1.1em;
}


/* 4. Ausklappbare Dienste ("1 Dienst")
------------------------------------------------------------------- */
.klaro .cm-services {
    margin-top: 12px;
    padding-left: 12px;
}

.klaro .cm-caret a {
    color: #007bff;
    text-decoration: none;
    font-size: 0.9em;
}

/* Ausgeklappter Bereich für einen Dienst */
.klaro .cm-services .cm-content {
    background-color: #f8f9fa; /* Heller Hintergrund zur Abgrenzung */
    border-radius: 8px;
    margin-top: 8px;
    padding: 16px;
    border: 1px solid #e9ecef;
}


/* 5. Schalter (Toggle)
------------------------------------------------------------------- */
/* Technischer Fix für die Position (bleibt wichtig!) */
.klaro .cm-switch {
    position: relative !important;
}
.klaro .cm-switch .slider {
    position: absolute !important;
}

/* Visuelles Design des Schalters */
.klaro .cm-switch .slider {
    background-color: #ced4da; /* Ausgeschalteter Zustand */
    border-radius: 34px;
}

.klaro .cm-switch .slider:before {
    background-color: white; /* Der runde Knopf selbst */
    border-radius: 50%;
}

/* Anpassen, wenn der Schalter AKTIVIERT ist */
.klaro .cm-list-input:checked + .cm-list-label .cm-switch .slider {
    background-color: #007bff; /* Blau, wenn aktiv */
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service.cm-toggle-all, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose.cm-toggle-all, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service.cm-toggle-all, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose.cm-toggle-all {
	border-top-width: 1px;
	border-top-width: var(--border-width, 1px);
	border-top-style: solid;
	border-top-style: var(--border-style, solid);
	border-top-color: #5c5c5c;
	border-top-color: var(--dark2, #dee2e6) !important;
	padding-top: 1em;
}


html.no-js body.gr-bg5 div#klaro div.klaro div#cookieScreen.cookie-modal div.cm-modal.cm-klaro div.cm-body ul.cm-purposes li.cm-purpose.cm-toggle-all{
    border: none !important;
}

input[type="checkbox"] ~ label::before {
	content: "";
	font-family: var(--icon-font);
	font-weight: 700;
	position: absolute;
	left: 0px;
	top: 15px !important;
	background-color: var(--white-color);
	border: 1px solid var(--th-border-color);
	height: 18px;
	width: 18px;
	line-height: 18px;
	text-align: center;
	font-size: 12px;
}


/* 6. Footer-Bereich (Buttons & "Powered by")
------------------------------------------------------------------- */
.klaro .cookie-modal .cm-footer {
    padding: 16px 24px;
    background: #f8f9fa;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    display: flex; /* Flexbox für saubere Ausrichtung */
    justify-content: space-between; /* Elemente auseinanderdrücken */
    align-items: center;
    border: 1px solid #dee2e6 !important;

}

/* Alle Buttons */
.klaro .cm-footer .cm-btn {
    border: none;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.klaro .cm-footer .cm-btn:active {
    transform: scale(0.98); /* Kleiner Klick-Effekt */
}

/* "Ablehnen"-Button */
.klaro .cm-footer .cm-btn-decline {
    background-color: #e9ecef; /* Neutrales Grau */
    color: #495057;
}

/* "Auswahl speichern" / "Akzeptieren"-Button */
.klaro .cm-footer .cm-btn-success {
    background-color: #007bff; /* Haupt-Blau */
    color: #ffffff;
}

/* "Realisiert mit Klaro!"-Link */
.klaro .cm-powered-by a {
    font-size: 0.8em;
    color: #6c757d; /* Dezentes Grau */
    text-decoration: none;
}
.klaro .cm-powered-by a:hover {
    text-decoration: underline;
}


.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
	margin-bottom: .5em;
	color: #495057 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) {
 
	background-color: #fff !important;
	z-index: 999;
	position: fixed;
	width: 100%;
	bottom: 0;
	right: 0;
	 
}

.klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success {
 
	background-color: var(--theme-color) !important;
    color: #fff;
}

.klaro .cookie-modal a, .klaro .context-notice a, .klaro .cookie-notice a {
	 
	color: var(--theme-color) !important;;
	text-decoration: none;
}

.klaro .cookie-notice:not(.cookie-modal-notice) {
	border-radius: 4px;
	border-radius: var(--border-radius, 4px);
	position: fixed;
	position: var(--notice-position, fixed);
	right: 20px;
	right: var(--notice-right, 20px);
	left: auto;
	left: var(--notice-left, auto);
	bottom: 20px;
	bottom: var(--notice-bottom, 20px);
	top: auto;
	top: var(--notice-top, auto);
	max-width: 400px;
	max-width: var(--notice-max-width, 300px) !important;
	box-shadow: 0 4px 6px 0 rgba(0,0,0,.2),5px 5px 10px 0 rgba(0,0,0,.19);
	z-index: 999999;
}