:root #cookieChoiceInfo {
    /*
     Variables for the Cookie Banner Design
     Change the values to overwrite the standard design of the cookie banner
    */

    /* Fonts */
    /* Use PX, REM, EM for font-sizes and "bold", "normal", "500", "800" for font-weight ... */
    --intro-title-font-weight: normal; /* The font weight of the title of the cookie-bar (standard: bold) */
    --intro-title-font-size: 30px; /* The title of the cookie-bar (standard: 30px)*/
    --main-text-font-size: 16px; /* The regular text of the cookie-bar (standard: 16px) */
    --main-text-font-weight: 300; /* The font weight of the regular text of the cookie-bar (standard: normal) */
    --checkbox-font-size: 16px; /* The text-size of the checkboxes + the checkbox text (standard: 16px) */
    --button-font-size: 16px; /* The text-size of the buttons (standard: 16px) */
    --button-font-weight: 500; /* The font-weight of the buttons (standard: normal)*/
    --footer-font-size: 14px; /* The text-size of the links at the bottom (standard: 14px) */
    --footer-font-weight: normal; /* The font-weight of the links at the bottom (standard: normal) */

    /* Main */
    --banner-border-top-width: 1px; /* Width of the top border (standard: 1px) */
    --banner-border-top-color: #003228; /* Color of the top border (standard: #d51317) */
    --banner-background-color: #ffffff; /* Background color of the whole banner (standard: #f0f0f0) */
    --color-text: #003228; /* Standard text color used in the cookie-banner (standard: #000000) */
    --color-links-info-text: #003228; /* The color of the (inline-)links in the info text (standard: #d51317) */

    /* Links */
    --text-decoration-links: underline; /* Text-decoration if the regular links (standard: underline) */

    /* Layout */
    --banner-max-width: 1526px; /* The maximum width of the banner content on desktop (Only use PX, EM, REM). "none" = full width. (standard: 1140px) */
    --banner-padding-x: 15px; /* Padding (inner space) left + right (standard: 15px) */
    --banner-padding-y: 15px; /* Padding (inner space) top + bottom (standard: 30px) */

    /* The 3 buttons */
    --button-text-color: #003228; /* Buttons color (standard: #d51317) */
    --button-text-color--hover: #003228; /* Buttons color hover state (standard: #d51317) */
    --button-background-color: #ffffff; /* Buttons background-color. You can use "transparent" and use a border-width to get a "ghost button" design. (standard: transparent) */
    --button-background-color--hover: #A4F2E0; /* Buttons background-color hover state (standard: transparent) */
    --button-border: 1.5px; /* Width of the buttons border. "0" = no border. (standard: 2px) */
    --button-border--hover: 1.5px; /* Button border mouseover state. "0" = no border. (standard: 3px) */
    --border-radius: 4px; /* Border-radius of the buttons. "0" = no border radius. (standard: 0) */

    /* The 3 checkboxes */
    --color-checkbox-disabled: #cccccc; /* Color of the first (disabled) checkbox (standard: #cccccc) */
    --color-checkbox: #003228; /* Color of the regular checkboxes (standard: #d51317) */

    /* Footer links */
    --color-footer-links: #003228; /* Color of the links in the footer (standard: #777777) */
    --color-footer-links-hover: #2EA993; /* Mouseover state color of the links in the footer (standard: #cccccc)*/

    /* Special options */
    --z-index: 10000; /* If things overlap the Cookie Banner try higher numbers here to get it to the top (standard: 100009) */

    /*
     Variables for the iframes
     Change the values to overwrite the standard design of the text-field and the buttons
    */
    /* --iframe-button-background-color: #000; */
}

:root {
    /*
     Main variables
     Change the values to overwrite the standard design various elements
    */
    --cookie-settings-font-family: "Vorwerk", sans-serif; /* font family for all text (standard: inherit [takes the standard font used on the website]) */

    /*
     Variables for the iframes
     Change the values to overwrite the standard design of the text-field and the buttons
    */
    /* Buttons */
    --iframes-button-color: #fff; /* iframe buttons color (standard: #fff) */
    --iframes-button-color-hover: #fff; /* iframe buttons color on hover (standard: #fff) */
    --iframes-button-background-color: #003228; /* iframe buttons background-color (standard: #d51317) */
    --iframes-button-background-color-hover: #444444; /* iframe buttons background-color on hover (standard: #444444) */

    /* Text */
    --iframes-text-color: #222; /* iframe info text color (standard: #222) */
    --iframes-link-color: #003228; /* iframe info text link-color (standard: #d51317) */
    --iframes-link-decoration: underline; /* iframe info text link decoration (standard: underline) */

    /*
    * Variables for the Cookie-Settings button in footer of website
    */
    --cookie-settings-padding-x: 0; /* Padding (inner space) left + right (standard: 0) */
    --cookie-settings-padding-y: 0; /* Padding (inner space) top + bottom (standard: 0) */
    --cookie-settings-background-color: transparent; /* Background color (standard: transparent)*/
    --cookie-settings-background-color-hover: transparent; /* Background color on hover (standard: transparent)*/
    --cookie-settings-color: #003228; /* Text color (standard: #777777)*/
    --cookie-settings-color-hover: #2EA993; /* Text color on hover (standard: #999999)*/
    --cookie-settings-font-weight: normal; /* Font weight (standard: normal) */
    --cookie-settings-font-size: 16px; /* Font-size (standard: 16px)*/
}

/* specific css for cookiebanner for this website */
.page-configurator {
    --cookie-settings-color: #fff;
    --cookie-settings-color-hover: #fff;
}

/* Inline info-text links (e.g. "Datenschutzerklärung", and the Datenschutz/Impressum
   links in the text) — per-state colours from the Figma "akf button" spec. Only the
   colour changes per state; type, underline and the default colour (#003228) are left
   untouched. The base cookiebar.css hovered these to black (#000); this overrides it.
   Order = focus → hover/pressed → disabled so the expected state wins on overlap. */

/* Focus (keyboard) — color/primary/400 teal, thicker underline; the browser's
   default (blue) focus ring is suppressed to match the Figma state. */
#cookieChoiceInfo > .schokicookie-banner-main a:focus-visible {
    color: #2EA993;
    text-decoration-thickness: 20%;
    text-underline-offset: 25%;
    text-underline-position: from-font;
    outline: none;
}

/* Hover + pressed — color/primary/400 teal. */
#cookieChoiceInfo > .schokicookie-banner-main a:hover,
#cookieChoiceInfo > .schokicookie-banner-main a:active {
    color: #2EA993;
    text-decoration-thickness: auto;
    text-underline-offset: 25%;
    text-underline-position: from-font;
}

/* Disabled — color/primary/900, no underline. */
#cookieChoiceInfo > .schokicookie-banner-main a[aria-disabled="true"],
#cookieChoiceInfo > .schokicookie-banner-main a.disabled {
    color: #003228;
    text-decoration: none;
}