@charset "UTF-8";
/**
 * SECTION - Cookie Icon in Titles
 * Styles for cookie icon in modal titles
 * Stile für Cookie-Icon in Modal-Titeln
 **/
.cct4u-cookie-icon {
  width: 29px;
  height: 29px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  margin-left: 6px;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
  transition: filter 0.3s ease, transform 0.2s ease;
}
.cct4u-cookie-icon:hover {
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
  transform: translateY(-1px);
}

.cn-header h1:hover .cct4u-cookie-icon,
.cm-header h1:hover .cct4u-cookie-icon,
h1:hover .cct4u-cookie-icon {
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
  transform: translateY(-1px);
}

.cn-header h1,
.cm-header h1 {
  cursor: default;
  transition: opacity 0.2s ease;
}
.cn-header h1:hover,
.cm-header h1:hover {
  opacity: 0.95;
}

/**
 * SECTION - Border Radius for Popups
 * Sets border radius for cookie consent popups
 * Setzt Border-Radius für Cookie-Consent-Popups
 **/
#klaro .cookie-notice,
#klaro-cookie-notice,
.cookie-modal .cm-modal {
  border-radius: 12px !important;
}

/**
 * SECTION  - Preference Link Wrapper
 * This section contains the styles for the wrapper and icon of the button to open the Klaro settings.
 * Dieser Abschnitt enthält die Stile für den Wrapper und das Icon des Buttons zum Öffnen der Klaro-Einstellungen.
 **/
.cct-4u-preference-link-wrapper {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9999;
}
.cct-4u-preference-link-wrapper .cct-4u-preference-link-button {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  background-color: #333;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  transition: box-shadow 0.3s ease, opacity 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.cct-4u-preference-link-wrapper .cct-4u-preference-link-button:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.cct-4u-preference-link-wrapper .cct-4u-preference-link-button.is-hidden {
  display: none !important;
}
.cct-4u-preference-link-wrapper .cct-4u-preference-icon {
  display: block;
  width: 2em;
  height: auto;
}

body.klaro-modal-open .cct-4u-preference-link-wrapper .cct-4u-preference-link-button,
body.klaro-notice-open .cct-4u-preference-link-wrapper .cct-4u-preference-link-button {
  opacity: 0;
  pointer-events: none;
}

/**
 * SECTION - Focus Isolation
 * Prevents website focus styles from affecting plugin
 * Verhindert dass Website-Focus-Styles das Plugin beeinflussen
 **/
#klaro *:focus, #klaro *:focus-visible, #klaro *:focus-within, #klaro *:active, #klaro:focus, #klaro:focus-visible, #klaro:focus-within, #klaro:active,
.klaro *:focus,
.klaro *:focus-visible,
.klaro *:focus-within,
.klaro *:active,
.klaro:focus,
.klaro:focus-visible,
.klaro:focus-within,
.klaro:active,
.cct-4u-preference-link-wrapper *:focus,
.cct-4u-preference-link-wrapper *:focus-visible,
.cct-4u-preference-link-wrapper *:focus-within,
.cct-4u-preference-link-wrapper *:active,
.cct-4u-preference-link-wrapper:focus,
.cct-4u-preference-link-wrapper:focus-visible,
.cct-4u-preference-link-wrapper:focus-within,
.cct-4u-preference-link-wrapper:active {
  outline: none !important;
  box-shadow: none !important;
}
#klaro button:not(.cct-4u-preference-link-button):focus, #klaro button:not(.cct-4u-preference-link-button):focus-visible, #klaro button:not(.cct-4u-preference-link-button):focus-within, #klaro button:not(.cct-4u-preference-link-button):active,
#klaro a:not(.cct-4u-preference-link-button):focus,
#klaro a:not(.cct-4u-preference-link-button):focus-visible,
#klaro a:not(.cct-4u-preference-link-button):focus-within,
#klaro a:not(.cct-4u-preference-link-button):active,
#klaro input:focus,
#klaro input:focus-visible,
#klaro input:focus-within,
#klaro input:active,
#klaro textarea:focus,
#klaro textarea:focus-visible,
#klaro textarea:focus-within,
#klaro textarea:active,
#klaro select:focus,
#klaro select:focus-visible,
#klaro select:focus-within,
#klaro select:active,
#klaro .cm-btn:focus,
#klaro .cm-btn:focus-visible,
#klaro .cm-btn:focus-within,
#klaro .cm-btn:active,
#klaro .cm-toggle:focus,
#klaro .cm-toggle:focus-visible,
#klaro .cm-toggle:focus-within,
#klaro .cm-toggle:active,
#klaro .cm-switch:focus,
#klaro .cm-switch:focus-visible,
#klaro .cm-switch:focus-within,
#klaro .cm-switch:active,
#klaro [role=button]:focus,
#klaro [role=button]:focus-visible,
#klaro [role=button]:focus-within,
#klaro [role=button]:active,
#klaro [tabindex]:focus,
#klaro [tabindex]:focus-visible,
#klaro [tabindex]:focus-within,
#klaro [tabindex]:active,
.klaro button:not(.cct-4u-preference-link-button):focus,
.klaro button:not(.cct-4u-preference-link-button):focus-visible,
.klaro button:not(.cct-4u-preference-link-button):focus-within,
.klaro button:not(.cct-4u-preference-link-button):active,
.klaro a:not(.cct-4u-preference-link-button):focus,
.klaro a:not(.cct-4u-preference-link-button):focus-visible,
.klaro a:not(.cct-4u-preference-link-button):focus-within,
.klaro a:not(.cct-4u-preference-link-button):active,
.klaro input:focus,
.klaro input:focus-visible,
.klaro input:focus-within,
.klaro input:active,
.klaro textarea:focus,
.klaro textarea:focus-visible,
.klaro textarea:focus-within,
.klaro textarea:active,
.klaro select:focus,
.klaro select:focus-visible,
.klaro select:focus-within,
.klaro select:active,
.klaro .cm-btn:focus,
.klaro .cm-btn:focus-visible,
.klaro .cm-btn:focus-within,
.klaro .cm-btn:active,
.klaro .cm-toggle:focus,
.klaro .cm-toggle:focus-visible,
.klaro .cm-toggle:focus-within,
.klaro .cm-toggle:active,
.klaro .cm-switch:focus,
.klaro .cm-switch:focus-visible,
.klaro .cm-switch:focus-within,
.klaro .cm-switch:active,
.klaro [role=button]:focus,
.klaro [role=button]:focus-visible,
.klaro [role=button]:focus-within,
.klaro [role=button]:active,
.klaro [tabindex]:focus,
.klaro [tabindex]:focus-visible,
.klaro [tabindex]:focus-within,
.klaro [tabindex]:active,
.cct-4u-preference-link-wrapper button:not(.cct-4u-preference-link-button):focus,
.cct-4u-preference-link-wrapper button:not(.cct-4u-preference-link-button):focus-visible,
.cct-4u-preference-link-wrapper button:not(.cct-4u-preference-link-button):focus-within,
.cct-4u-preference-link-wrapper button:not(.cct-4u-preference-link-button):active,
.cct-4u-preference-link-wrapper a:not(.cct-4u-preference-link-button):focus,
.cct-4u-preference-link-wrapper a:not(.cct-4u-preference-link-button):focus-visible,
.cct-4u-preference-link-wrapper a:not(.cct-4u-preference-link-button):focus-within,
.cct-4u-preference-link-wrapper a:not(.cct-4u-preference-link-button):active,
.cct-4u-preference-link-wrapper input:focus,
.cct-4u-preference-link-wrapper input:focus-visible,
.cct-4u-preference-link-wrapper input:focus-within,
.cct-4u-preference-link-wrapper input:active,
.cct-4u-preference-link-wrapper textarea:focus,
.cct-4u-preference-link-wrapper textarea:focus-visible,
.cct-4u-preference-link-wrapper textarea:focus-within,
.cct-4u-preference-link-wrapper textarea:active,
.cct-4u-preference-link-wrapper select:focus,
.cct-4u-preference-link-wrapper select:focus-visible,
.cct-4u-preference-link-wrapper select:focus-within,
.cct-4u-preference-link-wrapper select:active,
.cct-4u-preference-link-wrapper .cm-btn:focus,
.cct-4u-preference-link-wrapper .cm-btn:focus-visible,
.cct-4u-preference-link-wrapper .cm-btn:focus-within,
.cct-4u-preference-link-wrapper .cm-btn:active,
.cct-4u-preference-link-wrapper .cm-toggle:focus,
.cct-4u-preference-link-wrapper .cm-toggle:focus-visible,
.cct-4u-preference-link-wrapper .cm-toggle:focus-within,
.cct-4u-preference-link-wrapper .cm-toggle:active,
.cct-4u-preference-link-wrapper .cm-switch:focus,
.cct-4u-preference-link-wrapper .cm-switch:focus-visible,
.cct-4u-preference-link-wrapper .cm-switch:focus-within,
.cct-4u-preference-link-wrapper .cm-switch:active,
.cct-4u-preference-link-wrapper [role=button]:focus,
.cct-4u-preference-link-wrapper [role=button]:focus-visible,
.cct-4u-preference-link-wrapper [role=button]:focus-within,
.cct-4u-preference-link-wrapper [role=button]:active,
.cct-4u-preference-link-wrapper [tabindex]:focus,
.cct-4u-preference-link-wrapper [tabindex]:focus-visible,
.cct-4u-preference-link-wrapper [tabindex]:focus-within,
.cct-4u-preference-link-wrapper [tabindex]:active {
  outline: none !important;
  box-shadow: none !important;
}

/**
 * SECTION  - Klaro Cookie Notice
 * This section styles the Klaro cookie notice.
 * Dieser Abschnitt stylt die Klaro-Cookie-Notice.
 **/
#klaro-cookie-notice {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
#klaro-cookie-notice .cn-body {
  padding: 14px;
}
#klaro-cookie-notice .cn-header {
  padding: 0 14px;
}
#klaro-cookie-notice .cn-header h1 {
  font-size: 28px;
}

/**
 * SECTION  - Hide Klaro-Notice
 * This section hides the Klaro notice when it is displayed as a context notice.
 * Dieser Abschnitt blendet die Klaro-Notice aus, wenn sie als Kontext-Notice angezeigt wird.
 **/
.cm-powered-by {
  display: none !important;
}

/**
 * SECTION  - Service Placeholder
 * Base styling for service placeholders shown before consent.
 * Basisstil für Service-Platzhalter, die vor der Zustimmung angezeigt werden.
 **/
.cct-4u-placeholder {
  position: relative;
  padding: 1rem;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  text-align: center;
}

/**
 * SECTION - Context Notice 4U
 * Custom context notices for contextual consent services
 * Eigene Context Notices für Services mit kontextuellem Consent
 * @created 20251016-134730
 **/
.context-notice-4u {
  background-color: transparent;
}
.context-notice-4u .klaro.cm-as-context-notice {
  border: 1px solid #c8c8c8;
  border-radius: 5px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 12px;
  margin-bottom: 12px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.context-notice-4u .klaro.cm-as-context-notice .context-notice {
  border: 0;
  background-color: transparent;
}
.context-notice-4u .klaro.cm-as-context-notice .context-notice p {
  color: #003366;
}
.context-notice-4u .klaro.cm-as-context-notice .context-notice p button {
  color: #003366;
}
.context-notice-4u .klaro.cm-as-context-notice .context-notice > p:first-child {
  background-color: rgba(255, 255, 255, 0.888);
  border-radius: 5px !important;
  padding: 2px 12px;
}

/**
 * SECTION  - Credit Link
 * Styling for credit links in both consent and settings modals.
 * Stil für Credit Links in beiden Modals (Consent und Settings).
 **/
.cct4u-credit {
  margin-top: 10px;
  padding-top: 10px;
  text-align: center;
  font-size: 11px;
  color: inherit;
  border-top: 1px solid;
  border-top-color: inherit;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cct4u-credit.cct4u-credit-visible {
  opacity: 0.5;
  transform: translateY(0);
}
.cct4u-credit.cct4u-credit-visible:hover {
  opacity: 0.8;
}
.cct4u-credit a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.cct4u-credit a:hover {
  text-decoration: underline;
}

.cct4u-credit-settings {
  margin-left: auto;
  padding-left: 15px;
  font-size: 11px;
  color: inherit;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.cct4u-credit-settings.cct4u-credit-visible {
  opacity: 0.5;
  transform: translateX(0);
}
.cct4u-credit-settings.cct4u-credit-visible:hover {
  opacity: 0.8;
}
.cct4u-credit-settings a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.cct4u-credit-settings a:hover {
  text-decoration: underline;
}

/**
 * SECTION  - Settings Modal Adjustments
 * Adjustments for the settings modal (second popup).
 * Anpassungen für das Settings-Modal (zweites Popup).
 **/
#klaro > .klaro > div[id=""] {
  display: none !important;
}
#klaro.cookie-notice .cn-header h1 {
  color: inherit !important;
}
#klaro.cookie-notice a {
  color: inherit !important;
  text-decoration: underline;
}
#klaro.cookie-notice a:hover {
  opacity: 0.8;
}
#klaro .cookie-modal a {
  color: inherit !important;
  text-decoration: underline;
}
#klaro .cookie-modal a:hover {
  opacity: 0.8;
}
#klaro .cookie-modal .cm-modal {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
#klaro .cookie-modal .cm-modal .cm-header {
  border-bottom: none !important;
  padding-right: 14px;
}
#klaro .cookie-modal .cm-modal .cm-header h1 {
  color: inherit !important;
}
#klaro .cookie-modal .cm-modal .cm-header .cm-close,
#klaro .cookie-modal .cm-modal .cm-header button.hide {
  padding-right: 15px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}
#klaro .cookie-modal .cm-modal .cm-header .cm-close svg,
#klaro .cookie-modal .cm-modal .cm-header button.hide svg {
  stroke: currentColor !important;
}
#klaro .cookie-modal .cm-modal .cm-header .cm-close:hover,
#klaro .cookie-modal .cm-modal .cm-header button.hide:hover {
  opacity: 0.7;
}
#klaro .cookie-modal .cm-modal .cm-header .hr-header {
  margin: 15px 0 0 0;
  border: none;
  border-top: 1px solid currentColor;
  opacity: 0.2;
  height: 0;
}
#klaro .cookie-modal .cm-modal .cm-body .cm-purposes li.cm-purpose {
  margin-left: 15px;
  margin-right: 15px;
}
#klaro .cookie-modal .cm-modal .cm-body .cm-purposes li.cm-purpose:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
#klaro .cookie-modal .cm-modal .cm-footer {
  border-top: none !important;
}
#klaro .cookie-modal .cm-modal .cm-footer .hr-footer {
  margin: 0 0 15px 0;
  border: none;
  border-top: 1px solid currentColor;
  opacity: 0.2;
  height: 0;
}
#klaro .cookie-modal .cm-modal .cm-footer .cm-footer-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

/**
 * SECTION - Toggle Switch Slider Shadows
 * Adds drop shadows to the toggle switch knobs
 * Fügt Schatten zu den Toggle-Switch-Knöpfen hinzu
 **/
#klaro .cm-switch .slider:before,
#klaro .cm-switch .slider.round:before,
.cm-switch .slider:before,
.cm-switch .slider.round:before {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#klaro .cm-list-label:hover .cm-switch .slider:before,
#klaro .cm-list-label:hover .cm-switch .slider.round:before,
.cm-list-label:hover .cm-switch .slider:before,
.cm-list-label:hover .cm-switch .slider.round:before {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

#klaro .cm-list-input:checked + label .cm-switch .slider:before,
#klaro .cm-list-input:checked + label .cm-switch .slider.round:before {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/**
 * SECTION - Responsive Adjustments
 * Fixes cookie modal width and appearance on smaller screens
 * Korrigiert Cookie-Modal-Breite und Darstellung auf kleineren Bildschirmen
 * @modified 20251109-162224
 **/
/* Tablet & Mobile - Fix 100% width issue (< 1024px) */
@media (max-width: 1023px) {
  /* Cookie Modal (Settings - zweites Popup) */
  #klaro .cookie-modal .cm-modal {
    max-width: 90% !important;
    width: 400px !important;
    min-width: 300px !important;
    margin: 20px 10px !important;
  }
  /* Ensure box-shadow is visible */
  #klaro .cookie-modal .cm-modal {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  }
  /* Cookie Notice (Consent Banner - erstes Popup) */
  #klaro-cookie-notice,
  #klaro .cookie-notice {
    max-width: 90% !important;
    width: 400px !important;
    min-width: 300px !important;
    margin: 20px 10px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  }
}
/* Small Tablets (< 768px) */
@media (max-width: 767px) {
  /* Cookie Modal (Settings - zweites Popup) */
  #klaro .cookie-modal .cm-modal {
    margin: 15px auto !important;
  }
  /* Cookie Notice (Consent Banner - erstes Popup) */
  #klaro-cookie-notice,
  #klaro .cookie-notice {
    margin: 15px 10px !important;
  }
}
/* Mobile (< 540px) */
@media (max-width: 539px) {
  /* Cookie Modal (Settings - zweites Popup) */
  #klaro .cookie-modal .cm-modal {
    max-width: 98% !important;
    margin: 10px auto !important;
    padding: 15px !important;
  }
  /* Reduce header spacing */
  #klaro .cookie-modal .cm-modal .cm-header {
    padding-right: 10px !important;
  }
  /* Smaller close button positioning */
  #klaro .cookie-modal .cm-modal .cm-header .cm-close,
  #klaro .cookie-modal .cm-modal .cm-header button.hide {
    top: 5px !important;
    right: 5px !important;
  }
  /* Cookie Notice (Consent Banner - erstes Popup) */
  #klaro-cookie-notice,
  #klaro .cookie-notice {
    max-width: 98% !important;
    margin: 10px 5px !important;
    padding: 15px !important;
  }
}/*# sourceMappingURL=cct-4u-frontend.css.map */