:root {
    --ihk-fosa-icon-chatbot: url("/fileadmin/toujou/Chatbot/chatbot.svg");
    --ihk-fosa-chatbot-launcher-y-transform: 0;
    --ihk-fosa-chatbot-launcher-icon-scale: 0.975;
    --ihk-fosa-chatbot-launcher-icon-scale-hover: 1;
    --ihk-fosa-chatbot-launcher-toggle-bottom: 2rem;
    --ihk-fosa-chatbot-launcher-toggle-right: 1rem;
    --ihk-fosa-chatbot-launcher-toggle-size: 7rem;
    --ihk-fosa-chatbot-bubble-display: none;
    --ihk-fosa-chatbot-bubble-close-button-size: 1.5rem;
    --ihk-fosa-chatbot-dialog-close-button-size: 1.5rem;
}

@media only screen and (width < 640px) {
  :root {
    --ihk-fosa-chatbot-launcher-toggle-bottom: 2.5rem;
    --ihk-fosa-chatbot-launcher-toggle-size: 3.5rem;
  }
}

body:has(.topbutton[is-visible]) {
    --ihk-fosa-chatbot-launcher-y-transform: -2rem;
}

body:has(#ihk-fosa-chatbot-dialog[open]) {
    overflow: hidden;
}

ihk-fosa-chatbot-launcher[data-bubble-is-open="true"] {
    --ihk-fosa-chatbot-bubble-display: block;
}

ihk-fosa-chatbot-launcher[data-bubble-is-open="true"]:has(#ihk-fosa-chatbot-dialog[open]) {
    --ihk-fosa-chatbot-bubble-display: none;
}

.html-container:has(ihk-fosa-chatbot-launcher) {
    display: contents;
}

.ihk-fosa-chatbot-launcher__toggle {
    position: fixed;
    bottom: var(--ihk-fosa-chatbot-launcher-toggle-bottom);
    right: var(--ihk-fosa-chatbot-launcher-toggle-right);
    border: none;
    background-color: var(--bg-color);
    height: var(--ihk-fosa-chatbot-launcher-toggle-size);
    width: var(--ihk-fosa-chatbot-launcher-toggle-size);
    padding-inline: 0;
    border-radius: var(--border-radius-m);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    z-index: var(--z-index-top-button);
    -webkit-transition: -webkit-transform var(--animation-duration-normal) var(--animation-easing-normal);
    transition: -webkit-transform var(--animation-duration-normal) var(--animation-easing-normal);
    transition: transform var(--animation-duration-normal) var(--animation-easing-normal);
    transition: transform var(--animation-duration-normal) var(--animation-easing-normal), -webkit-transform var(--animation-duration-normal) var(--animation-easing-normal);
    -webkit-transform: translateY(var(--ihk-fosa-chatbot-launcher-y-transform));
    transform: translateY(var(--ihk-fosa-chatbot-launcher-y-transform));
}

.ihk-fosa-chatbot-launcher__toggle::after {
    content: "";
    display: block;
    height: var(--ihk-fosa-chatbot-launcher-toggle-size);
    width: var(--ihk-fosa-chatbot-launcher-toggle-size);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--ihk-fosa-icon-chatbot);
    mask-image: var(--ihk-fosa-icon-chatbot);
    background-color: var(--color-primary);
    -webkit-transition: -webkit-transform var(--animation-duration-fast) var(--animation-easing-normal);
    transition: -webkit-transform var(--animation-duration-fast) var(--animation-easing-normal);
    transition: transform var(--animation-duration-fast) var(--animation-easing-normal);
    transition: transform var(--animation-duration-fast) var(--animation-easing-normal), -webkit-transform var(--animation-duration-fast) var(--animation-easing-normal);
    -webkit-transform: scale(var(--ihk-fosa-chatbot-launcher-icon-scale));
    transform: scale(var(--ihk-fosa-chatbot-launcher-icon-scale));
}

.ihk-fosa-chatbot-launcher__toggle:is(:hover, :focus-visible)::after {
    -webkit-transform: scale(var(--ihk-fosa-chatbot-launcher-icon-scale-hover));
    transform: scale(var(--ihk-fosa-chatbot-launcher-icon-scale-hover));
}

.ihk-fosa-chatbot-bubble {
    display: var(--ihk-fosa-chatbot-bubble-display);
    background-color: var(--color-bg);
    border-radius: var(--border-radius-normal);
    padding: var(--spacing-normal);
    -webkit-box-shadow: var(--shadow-normal);
    box-shadow: var(--shadow-normal);
    position: fixed;
    bottom: calc(var(--ihk-fosa-chatbot-launcher-toggle-bottom) + var(--ihk-fosa-chatbot-launcher-toggle-size) + var(--spacing-normal));
    right: var(--ihk-fosa-chatbot-launcher-toggle-right);
    width: calc(100% - var(--spacing-l));
    max-width: 420px;
    -webkit-transition: -webkit-transform var(--animation-duration-normal) var(--animation-easing-normal);
    transition: -webkit-transform var(--animation-duration-normal) var(--animation-easing-normal);
    transition: transform var(--animation-duration-normal) var(--animation-easing-normal);
    transition: transform var(--animation-duration-normal) var(--animation-easing-normal), -webkit-transform var(--animation-duration-normal) var(--animation-easing-normal);
    -webkit-transform: translateY(var(--ihk-fosa-chatbot-launcher-y-transform));
    transform: translateY(var(--ihk-fosa-chatbot-launcher-y-transform));
    font-family: var(--font-family-text);
    font-size: var(--font-size-normal);
    color: var(--color-font);
    z-index: 100;
}

.ihk-fosa-chatbot-bubble__close {
    position: absolute;
    top: var(--spacing-s);
    right: var(--spacing-s);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: var(--ihk-fosa-chatbot-bubble-close-button-size);
    width: var(--ihk-fosa-chatbot-bubble-close-button-size);
    background-color: var(--color-bg);
    color: var(--color-primary);
    border: none;
    font-family: sans-serif;
    font-size: var(--font-size-l);
    cursor: pointer;
}

.ihk-fosa-chatbot-bubble__close:is(:hover, :focus-visible) {
    color: var(--ihk-fosa-color-green);
}

.ihk-fosa-chatbot-bubble__title {
    font-family: var(--font-family-headline);
    font-size: var(--font-size-m);
    margin: 0;
}

.ihk-fosa-chatbot-bubble__text {
    margin-top: var(--spacing-s);
}

.button.button--primary.ihk-fosa-chatbot-bubble__button {
    font-weight: var(--font-weight-text-bold);
    border: none !important;
}

.ihk-fosa-chatbot-dialog {
    border: 1px solid var(--color-primary);
    padding: 0;
    max-width: 1200px;
}

.ihk-fosa-chatbot-dialog::-webkit-backdrop {
    background: rgb(0 0 0 / 75%);
}

.ihk-fosa-chatbot-dialog::backdrop {
    background: rgb(0 0 0 / 75%);
}

.ihk-fosa-chatbot-dialog__header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: var(--color-bg);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: var(--spacing-xs);
}

.ihk-fosa-chatbot-dialog__close {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: var(--ihk-fosa-chatbot-bubble-close-button-size);
    width: var(--ihk-fosa-chatbot-bubble-close-button-size);
    background-color: var(--color-bg);
    color: var(--color-primary);
    border: none;
    font-family: sans-serif;
    font-size: var(--font-size-l);
    cursor: pointer;
}

.ihk-fosa-chatbot-dialog__content {
    padding: 0 var(--spacing-normal);
}

.ihk-fosa-chatbot-dialog__close:is(:hover, :focus-visible) {
    color: var(--ihk-fosa-color-green);
}

.ihk-fosa-chatbot-dialog__content h2 {
    font-size: var(--font-size-ms);
    margin-bottom: 0;
}

.ihk-fosa-chatbot-dialog__content h3 {
    font-size: var(--font-size-normal);
    margin-bottom: 0;
}

.ihk-fosa-chatbot-dialog__content h3:not(:first-child) {
    margin-top: var(--spacing-s);
}

.ihk-fosa-chatbot-dialog__content :is(p, ul) {
    font-size: var(--font-size-s);
    margin-bottom: var(--spacing-xxs)
}

.ihk-fosa-chatbot-dialog__content :is(p, ul):not(:first-child) {
    margin-top: var(--spacing-xxs);
}

.ihk-fosa-chatbot-dialog__dialog-actions {
    margin: var(--spacing-normal) auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    gap: var(--spacing-s) var(--spacing-l);
    padding: var(--spacing-normal);
}

.ihk-fosa-chatbot-dialog__label {
    font-family: var(--font-family-text);
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-text-bold);
    color: var(--color-font);
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto var(--spacing-normal) 1fr;
    grid-template-columns: auto 1fr;
    grid-gap: var(--spacing-normal);
}