/* !!!!! IMPORTANT: Always place media queries for specific chart type directly with the specific (!) chart type class (! for example: .chart--hotspots, .chart--dnd.. or custom class) or for general Stylings at the end of the code !!! */
/* IMPORTANT: Do not use !important unless absolutely necessary; alternatives: use/create/update a variable, add an ID to the selector, or ask PR for help on how to avoid !important */
/* Using !important creates chaos with new variants and leads to a chain of additional !important declarations. */


/* INHALT CSS: */
/* 1. VARIABLES */
/* 2. General CSS */
/* 3. Header and Footer GUI */
/* 4. Voting Charts */
/* 5. Allgemeine Media Queries */
/* 6. Fish + Fish Media Queries */
/* 7. Fragebogen Special Chart  + Media Queries */
/* 8. Custom Charts */
/* VARIABLES */
body#cbook-body.contrast--normal,
body#extension-body.contrast--normal {
    --nav-padding: var(--space-small);
    --nav-width: calc(2.3rem + 1*var(--space-medium));

    /*Voting*/
    --voting-balken-button-radius: var(--border-radius-small);
    /* balken answers */
    --voting-balken-button-bg: var(--primary-light);
    --border-radius-voting: var(--border-radius-small);
    /* results */

    --diagram-study-css: var(--primary-100);
    --diagram-community-css: var(--primary);
    --diagram-primary-css: var(--secondary);

    /* focus */
    --focus-color: #f6a117;
    --focus-outline: 5px solid var(--focus-color);
    --focus-offset: -5px;

}

body#cbook-body  .chart.chart--single .chart__interaction,
body#cbook-body .chart.chart--multiple .multiple__wrapper,
body#cbook-body .chart .cards-container,
body#cbook-body .chart .accordion {
       --focus-offset: 2px;
}


body#cbook-body:not(.contrast--normal) .cbook-container,
body#extension-body:not(.contrast--normal) .cbook-container {
    --header-bg: var(--primary-700);
    --footer-color: var(--white);
    --rose: var(--white);
    --rose-light: var(--white);
    --primary-light: var(--white);
    --primary-light-second: var(--white);
    --false: var(--white);
    --text: var(--secondary);
    --red-color: var(--black);
    --focus-color: var(--black);
    --focus-outline: 5px solid var(--focus-color);
    --secondary-dark: var(--primary);
      --focus-offset: 2px;
}

body#cbook-body:not(.contrast--normal) .cbook-container .ui-modal { --focus-offset: -5px; }

/* SCROLLBAR */

* {
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: var(--primary) var(--white);
    /* thumb color | track color */
}

/* Chrome, Edge, Safari */
html::-webkit-scrollbar,
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
    border-radius: 999px;
    /* round ends */
    background: var(--white);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

}

::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 999px;
    /* round ends */
    border: 2px solid var(--white);
    /* space around thumb for clean rounded look */
}




/* Hide scrollbar buttons more aggressively */
html::-webkit-scrollbar-button,
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:horizontal:decrement,
*::-webkit-scrollbar-button:horizontal:increment,
*::-webkit-scrollbar-button:vertical:decrement,
*::-webkit-scrollbar-button:vertical:increment,
*::-webkit-scrollbar-button:single-button {
    display: none;
    width: 0;
    height: 0;
}

::-moz-scrollbar-button:decrement,
::-moz-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement,
::-webkit-scrollbar-button:increment {
    width: 0px;
}

/* Optional: scrollbar corner (where bars meet) */
html::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
    background: var(--white);
}

/* GUI */


.book-wrapper .logo__wrapper {
    position: absolute;
    bottom: calc(0.5*var(--footer-height));
    translate: 0 50%;
    max-height: 2em;
    right: 0;
    margin-right: calc(5px + var(--nav-width));
    display: block;
    content: "" / "Beschreibender Text für Blinde";
}

body:not(.contrast--normal) .book-wrapper .logo {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(339deg) brightness(118%) contrast(110%);
}

.app-header .header-chart-title {
/*     position: absolute;
    bottom: calc(0.5*var(--footer-height));
    right: 25ch;
    translate: 0 50%;
    width: fit-content; */
    visibility: hidden;
    pointer-events: none;
    display: none;
}
 
.book-wrapper .logo__wrapper::before {
    content: "Gefördert von";
  
    font-size: var(--font-size-x-small);
    z-index: 1;
    color: var(--black);
    margin-right: 1em;
}

body:not(.font-size--normal) .book-wrapper .logo__wrapper::before {
    margin-right: 0.5em;
}

body:not(.contrast--normal) .book-wrapper .logo__wrapper::before {
    color: var(--white);
}
body:not(.font-size--normal) .book-wrapper .logo__wrapper::before {
    font-size: var(--font-size-small);
}

@media only screen and (max-width: 993px) {
    .book-wrapper .logo.logo--right {
        /* margin-right: -1.5em; */
        transform: scale(1);
       /*  vertical-align: top; */
    }

    .app-header .header-chart-title::after {
        visibility: hidden;

    }
}

@media only screen and (max-width: 500px) {
    .book-wrapper .logo.logo--right {
        transform: scale(0.8);
    }
    .book-wrapper .logo__wrapper { display: flex; }
}

@media only screen and (max-width: 330px) {
    .book-wrapper .logo.logo--right {
        margin-right: -2.2em;
        transform: scale(0.7);
    }
}

@media only screen and (max-width: 314px) {
    .book-wrapper .logo.logo--right {
        visibility: hidden;
    }
}

.app-header {
    padding: 0;
    padding-right: var(--space-x-small);
    width: fit-content;
    /*min-width: 12%;*/
    gap: 0;
    border-bottom-right-radius: var(--border-radius-medium);
    --slide-link-background-hover: var(--primary);
    --text-button--hover: var(--white);
    box-shadow: var(--shadow-large);
}


.app-header button:hover,
.app-header button:focus {
    color: var(--text-button--hover, inherit);
}

.app-footer .chart-progress__label:hover,
.app-footer .chart-progress__label:focus,
.app-footer .actions-menu__link:hover,
.app-footer .actions-menu__link:focus {
    color: var(--text-button--hover, inherit);
    background: var(--slide-link-background-hover);
}

body:not(.font-size--normal) .app-header {
    gap: 1em;
    padding: 1rem;
}

.numeral-indicator {
    background: var(--footer-bg);
    border: 2px solid var(--primary-500);
    font-size: var(--font-size-small);
    font-weight: bold;
}

#footer {
    position: absolute;
    bottom: 0;
    pointer-events: none;
    width: 100%;
    justify-content: flex-start;
    --slide-link-background-hover: var(--primary);
    --text-button--hover: var(--white);
    box-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.12);
}

#footer {
    right: 0;

}


.app-footer__options,
.app-footer .actions-menu__link-text {
    display: none;
}

.app-footer .chart-progress__label {
    pointer-events: none;
}


/** NAVIGATION **/
/*
.app-chart-nav {
    height: var(--footer-height);
    top: auto;
    bottom: 0;
    z-index: 9999;
    pointer-events: none;
}*/

.app-chart-nav .chart-nav {
    box-shadow: 0 4px 4px 0 rgb(0, 0, 0, 25%);
}

.app-chart-nav .chart-nav--back {
    padding: 0.5em;
}

/*
body .app-chart-nav .chart-nav:not(.chart-nav--back) svg {
    scale: 1.5;
}

body .app-chart-nav .chart-nav.chart-nav--back svg {
    scale: 1.1;
}

body.font-size--normal .app-chart-nav .chart-nav:not(.chart-nav--back) svg {
    scale: 1.5;
}*/

/*
.app-chart-nav .chart-nav:hover,
.app-chart-nav .chart-nav:focus {
    color: var(--primary-900);
    background: var(--gray-250);
}
*/
.chart-nav--back {
    display: none;
}

.transitioner {
    height: var(--stage-height);
    width: var(--stage-width);
    background-color: transparent;
    position: absolute;
    z-index: 0;
    top: 0;
}

/* GUI End */
/* General Stylings chart Header  - start */

.chart header.chart__header {
    display: flex;
    flex-direction: column;
}

header.chart__header .heading__caption {
    margin-bottom: 1rem;
    opacity: 1;
    font-size: var(--font-size-medium);
    font-family: var(--font-paragraph);
    line-height: 1.3;
    word-break: break-word;
    font-style: normal;
    font-weight: normal;
}

/* Caption Header */
.chart header.chart__header .heading__caption {
    order: 1;
    padding-top: 1em;
}

.chart:not(.description-margin-bottom) .heading__description p:last-child {
    margin-bottom: 0;
}

.chart header.chart__header:has(.heading__description) .heading__caption {
    padding-top: 0;
}

/* General Stylings chart Header  - end */
/* next button interactions */
.chart__next-link {
    display: block;
}

.chart__next-link button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Focus Fokus farbe */
*:focus-visible,
.book-wrapper *:focus-visible {
    outline: var(--focus-outline) !important;
    outline-offset: var(--focus-offset, 2px) !important;
}

.chart--single .single__radio-input:focus-visible+.single__answer {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset, 2px) ;
    box-shadow:none;
}

body:not(.contrast--normal) *:focus-visible,
body:not(.contrast--normal) .book-wrapper *:focus-visible {
    outline: var(--focus-outline) !important;
    outline-offset: var(--focus-offset, 2px) !important;
    box-shadow: 0 0 0 5px var(--white);
}

.chart--hotspots .hotspot__flex:focus-visible {
    outline: var(--focus-color) solid 7px !important;
    outline-offset: 5px !important;
}

body:not(.contrast--normal) .social-app-wrapper .ui-toggle-button.pressed:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

/* GENERAL END */
/* VOTING + MC  BG angepasst - START */
/** VOTING -- START **/
/* not theme */
#app-community-voting .chart__body.ext__body {
    height: auto;
}

/* VOTING GENERLAS */
#app-community-voting .chart-einschatzung__choice-container span {
    font-size: var(--font-size-medium);
}

#app-community-voting .chart__body {
    background-repeat: no-repeat;
    background-position: center 85%;
    background-size: cover;
    background-attachment: fixed;
}

#app-community-voting .chart__body.ext__body {
    width: calc(100vw - 2 * var(--chart-content-padding-inline, 4rem));
    overflow: hidden;
}

#app-community-voting .voting-chart-container {
    margin: 0;
}

#app-community-voting .chart__legend-item {
    justify-content: flex-start;
    text-align: left;
}

#app-community-voting .chart__legend-item.diagram-community-label p:nth-of-type(2) {
    word-break: keep-all;
}

#app-community-voting h3 {
    font-size: var(--font-size-x-large);
}

#app-community-voting .chart__legend-item .chart__legend-color-box {
    min-width: 20px;
}

#app-community-voting .chart__legend-item.diagram-study-label .chart__legend-color-box {
    background-color: var(--diagram-study, var(--diagram-study-css, var(--tertiary))) !important;
}

#app-community-voting .chart__legend-item.diagram-user-label .chart__legend-color-box {
    background-color: var(--diagram-primary, var(--diagram-primary-css, var(--primary))) !important;
}

#app-community-voting .chart__legend-item.diagram-community-label .chart__legend-color-box {
    background-color: var(--diagram-community, var(--diagram-community-css, var(--secondary))) !important;
}

/** BALKEN VOTING - Multiple Choice Community Voting  -- START **/
#app-community-voting .chart-balken__field.chart-balken__study div {
    background-color: var(--diagram-study, var(--diagram-study-css, var(--tertiary)));
}

#app-community-voting .chart-balken__field.chart-balken__community div {
    background-color: var(--diagram-community, var(--diagram-community-css, var(--secondary)));
}

#app-community-voting .chart-balken__field div span {
    border-radius: var(--border-radius-voting, var(--border-radius-full));
}

#app-community-voting .chart-balken__field.chart-balken__study div span {
    color: var(--primary);
}

#app-community-voting .chart-balken__field.chart-balken__community div span {
    color: var(--white);
}

#app-community-voting .chart-balken__field.chart-balken__community div,
#app-community-voting .chart-balken__field.chart-balken__community div span {
    background-color: var(--diagram-community, var(--diagram-community-css, var(--secondary)));
}

#app-community-voting .chart-balken__field div span {
    padding: var(--space-xx-small) var(--space-x-small);
    word-break: normal;
    font-weight: bold;
}

#app-community-voting .balken-item {
    align-items: flex-start;
    /* --diagram-community: var(--primary);*/
}

#app-community-voting:not(.evaluated) .balken-item {
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

#app-community-voting:not(.evaluated) .balken-item:nth-child(1) {
    animation-delay: 0s;
}

#app-community-voting:not(.evaluated) .balken-item:nth-child(2) {
    animation-delay: 0.3s;
}

#app-community-voting:not(.evaluated) .balken-item:nth-child(3) {
    animation-delay: 0.6s;
}

#app-community-voting:not(.evaluated) .balken-item:nth-child(4) {
    animation-delay: 0.9s;
}

#app-community-voting:not(.evaluated) .balken-item:nth-child(5) {
    animation-delay: 1.2s;
}

#app-community-voting:not(.evaluated) .balken-item:nth-child(6) {
    animation-delay: 1.5s;
}

#app-community-voting:not(.evaluated) .balken-item:nth-child(7) {
    animation-delay: 1.8s;
}

#app-community-voting:not(.evaluated) .balken-item:nth-child(8) {
    animation-delay: 2.1s;
}

#app-community-voting:not(.evaluated) .balken-item:nth-child(9) {
    animation-delay: 2.4s;
}

#app-community-voting:not(.evaluated) .balken-item:nth-child(10) {
    animation-delay: 2.7s;
}

#app-community-voting .chart-balken__bar {
    color: var(--black);
    background: var(--voting-balken-button-bg, var(--button-background));
    border-radius: var(--voting-balken-button-radius, var(--button-border-radius));
    border: var(--button-border);
    font-size: var(--font-size-large);
    min-width: 74%;
    padding: 1.5ch;
    min-height: calc(3ch + 2*var(--font-size-large));
    height: auto;
    hyphens: auto;
    justify-content: flex-start;
}

#app-community-voting .chart-balken__bar:hover,
#app-community-voting .chart-balken__bar:focus,
#app-community-voting .chart-balken__bar.selected {
    background-color: var(--diagram-primary, var(--primary));
    color: var(--white);
    border-radius: var(--voting-balken-button-radius, var(--button-border-radius));
    border: var(--button-border-hover);
}

#app-community-voting.evaluated .chart-balken__bar.selected {
    background-color: var(--diagram-primary-css);
    border: var(--button-border);
}

body:not(.contrast--normal) #app-community-voting .chart-balken__bar:hover,
body:not(.contrast--normal) #app-community-voting .chart-balken__bar:focus,
body:not(.contrast--normal) #app-community-voting .chart-balken__bar.selected {
    background-color: var(--black);
}

#app-community-voting .chart-balken__field {
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
}

#app-community-voting .chart-balken__eval-bar {
    justify-content: flex-start;
    width: 25%;
    margin-left: var(--space-x-small);
    gap: var(--space-x-small);
    min-height: calc(3ch + 2*var(--font-size-large));
    height: auto;
}

#app-community-voting .chart-balken__field {
    -webkit-animation: width-grow-to-right 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: width-grow-to-right 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

#app-community-voting .chart-balken__field span {
    opacity: 0;
    -webkit-animation: fade-in 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: fade-in 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 1.5s;
}

#app-community-voting .chart-balken__field:nth-child(1) {
    animation-delay: 0.5s;
}

#app-community-voting .chart-balken__field:nth-child(2) {
    animation-delay: 0.8s;
}

#app-community-voting .chart-balken__field:nth-child(3) {
    animation-delay: 1.1s;
}

@-webkit-keyframes width-grow-to-right {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes width-grow-to-right {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

/* SLIDER  VOTING  Start */
/* voting slider thin */
/*
#app-community-voting .userSlider {
    height: 5px;
}*/
#app-community-voting ul.voter {
    border: 1px solid var(--primary-300);
}

#app-community-voting .voter--unselected {
    border-left: 1px solid var(--primary-300);
}

/* DIAGRAMM  VOTING- Start */
/*  not standard colors */
#app-community-voting .voter--selected,
#app-community-voting .voter--active {
    background-color: var(--diagram-primary, var(--diagram-primary-css));
}

#app-community-voting .voter--active:after {
    border-top-color: var(--diagram-primary, var(--diagram-primary-css));
}

#app-community-voting .communitySlider .voter--selected,
#app-community-voting .communitySlider .voter--active {
    border-color: var(--diagram-community, var(--diagram-community-css));
    background-color: var(--diagram-community, var(--diagram-community-css));
}

#app-community-voting .chart-balken__field.chart-balken__study div {
    background-color: var(--diagram-study, var(--diagram-study-css));
}

#app-community-voting .chart-balken__field.chart-balken__study div,
#app-community-voting .chart-balken__field.chart-balken__study div span {
    background-color: var(--diagram-study, var(--diagram-study-css));
}

/*not standard colors*/
#app-community-voting .chart-einschatzung__diagram-container {
    display: flex;
    justify-content: flex-end;
}

#app-community-voting .chart-einschatzung__diagram-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#app-community-voting .chart-einschatzung__diagram-container>div {
    overflow: visible;
    min-width: fit-content;
    width: 900px;
}

#app-community-voting .chart-einschatzung__diagram-container svg {
    overflow: visible;
    width: 900px;
}

#app-community-voting .chart-einschatzung__diagram-container>div>div:first-of-type {
    overflow: visible !important;
    min-width: fit-content;
}

#app-community-voting .chart-einschatzung__diagram-container .diagram-label {
    font-size: var(--font-size-small) !important;
    fill: var(--black);
    opacity: 1;
}

body:not(.contrast--normal) #app-community-voting .chart-einschatzung__diagram-container svg path:nth-child(1),
body:not(.contrast--normal) #app-community-voting .chart-einschatzung__diagram-container svg path:nth-child(2),
body:not(.contrast--normal) #app-community-voting .chart-einschatzung__diagram-container svg path:nth-child(5) {
    stroke: var(--black);
    stroke-width: 2px;
}

#app-community-voting .chart-einschatzung__diagram-container .diagram-axis-y {
    stroke: var(--black) !important;
}

/* diagram elemnts on hover (for proper Contrast)*/
#app-community-voting .chart-einschatzung__diagram-container>div>div:last-of-type {
    background-color: var(--white) !important;
    border-color: var(--black) !important;
    color: var(--black) !important;
    font-size: var(--font-size-small) !important;
}

#app-community-voting .chart-einschatzung__diagram-container>div>div:last-of-type>div>div:nth-of-type(2) div span:first-of-type {
    background-color: var(--black) !important;
}

#app-community-voting .chart-einschatzung__diagram-container>div>div:last-of-type>div>div:nth-of-type(2) div span,
#app-community-voting .chart-einschatzung__diagram-container>div>div:last-of-type>div>div:first-of-type {
    color: var(--black) !important;
    font-size: var(--font-size-small) !important;
}

body:not(.font-size--normal) #app-community-voting .chart-einschatzung__diagram-container>div>div:last-of-type>div>div:nth-of-type(2) div span,
body:not(.font-size--normal) #app-community-voting .chart-einschatzung__diagram-container>div>div:last-of-type>div>div:first-of-type {
    font-size: calc(0.9*var(--font-size-xx-small)) !important;
}

/* Media media queries (Votings)*/
@media only screen and (max-width: 768px) {
    #app-community-voting .chart__body.ext__body {
        hyphens: auto;
    }

    #app-community-voting .chart-einschatzung {
        flex-direction: column;
    }

    #app-community-voting .voting-chart-container {
        margin: 0;
    }

    #app-community-voting .choice-holder .choice,
    #app-community-voting .chart-einschatzung__choice-container,
    #app-community-voting .chart-einschatzung__diagram-container {
        width: 100%;
    }

    #app-community-voting .chart-einschatzung__diagram-container div,
    #app-community-voting .chart-einschatzung__diagram-container svg {
        max-width: 100%;
    }

    #app-community-voting .chart-einschatzung__diagram-container>div svg>g {
        transform: translateX(-0%);
    }
}

/* responsive media queries */
@media only screen and (max-width: 768px) {
    #app-community-voting .chart__body.ext__body {
        padding: var(--chart-content-padding, var(--space-medium) 4rem);
        width: calc(100% - 2* var(--chart-content-padding-inline, 4rem));
    }

    #app-community-voting .balken-item {
        flex-direction: column;
    }

    #app-community-voting .chart-balken__eval-bar {
        margin-top: 0.5rem;
        min-height: calc(3ch + 1*var(--font-size-small));
        width: 95%;
    }

    #app-community-voting .chart-balken__bar {
        width: 100%;
    }
}

/* responsive media queries */
@media only screen and (max-width: 768px) {
    #app-community-voting .chart__body.ext__body.einschaetzung {
        width: calc(100% - 2* var(--chart-content-padding-inline, 4rem));
    }
}

/* Contrast - VOTINGS */
/* BF */
/* -- use Varible for Contrast -- bugs */
/*
body:not(.contrast--normal) #app-community-voting .chart-balken__bar {
    border: 1px solid var(--primary);
    background-color: var(--white);
}

body:not(.contrast--normal) #app-community-voting .chart-balken__bar:hover,
body:not(.contrast--normal) #app-community-voting .chart-balken__bar:focus {
    background-color: var(--black);
}*/
body:not(.contrast--normal) #app-community-voting .chart__legend-item.diagram-study-label .chart__legend-color-box,
body:not(.contrast--normal) #app-community-voting .chart-balken__bar {
    border: var(--button-border-hover);
}

body:not(.contrast--normal) #app-community-voting .chart-balken__field.chart-balken__study div {
    border: var(--button-border-hover);
}

body:not(.contrast--normal) #app-community-voting .chart-einschatzung__diagram-container,
body:not(.contrast--normal) #app-community-voting .chart__legend .chart__legend-item .chart__legend-color-box,
body:not(.contrast--normal) #app-community-voting .voter--active,
body:not(.contrast--normal) #app-community-voting .voter--selected {
    --diagram-primary: var(--primary);
    --diagram-study: red;
    --diagram-community: black;
}

body:not(.contrast--normal) #app-community-voting {
    /*Voting*/
    --voting-balken-button-radius: var(--border-radius-cards);
    --border-radius-voting: var(--border-radius-small);
    --voting-balken-button-bg: var(--gray-100);
}

body:not(.contrast--normal) #app-community-voting:has(.chart-balken) .chart__legend .chart__legend-item .chart__legend-color-box,
body:not(.contrast--normal) #app-community-voting .chart-balken {
    --diagram-study: var(--primary-100);
    --diagram-community: var(--primary);
}

body:not(.contrast--normal) #app-community-voting ul.voter {
    border: 1px solid var(--primary);
}

body:not(.contrast--normal) #app-community-voting .voter--unselected {
    border-left: 1px solid var(--gray-500);
}

/** VOTING -- END **/
/** BALKEN VOTING - Multiple Choice Community Voting  -- END **/
/** Community Chart Essay Reflexion -- START **/
/* es ist shcon in Theme */
/*
.chart--essay .chart__body {
    padding: var(--chart-content-padding);  
}
*/
/** Media Queries Allgemein Responsive -- START **/
@media only screen and (max-width: 768px) {

    :root,
    body#cbook-body.contrast--normal,
    body#extension-body.contrast--normal,
    .cbook-container,
    .chart--essay .chart__body {
        --chart-content-padding: calc(2.3rem + var(--header-height)) 2.3rem 1rem;
        --chart-content-padding-inline: 2.3rem;
        --chart-content-padding-block: 2.3rem 1rem;
    }
}

/** Media Queries Allgemein Responsive -- END **/
/**********************************************************************************/
/**********************************************************************************/
/** TEXT/BILD SLIDE -----  Text/Image Slide ---- general Stylings **/
.chart--page .mce-content-body {
    padding: 0;
}





.chart.fixed-bg .chart__body {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}



/* firefox fix */
.browser-firefox .chart--page-builder .chart__header {
    height: fit-content !important;
    min-height: 42% !important;
}

@media (max-width: 992px) {
    .browser-firefox .chart--page-builder .chart__header {
        min-height: 65% !important;
    }
}

@media (max-width: 480px) {
    .browser-firefox .chart--page-builder .chart__header {
        min-height: 80% !important;
    }
}

/* font size large fix */
body:not(.font-size--normal) .startseite .gjs-widget-container .gjs-widget-container {
    justify-content: flex-start !important;
}

@media (max-height: 650px) {
    .startseite .gjs-widget-container .gjs-widget-container {
        justify-content: flex-start !important;
    }
}



/********************* --------------- *****************/
/* Disable Chapter Tracking  - START */
/********************* --------------- *****************/
.app-menu__chapter .progress-display {
    display: none;
}

/********************* --------------- *****************/
/* Disable Chapter Tracking  - END */
/********************* --------------- *****************/


.chart-menu__visited {
    visibility: hidden;
}

.chart-menu__visited.chart-menu__visited--active {
    visibility: visible;
}

/********************* --------------- *****************/
/* Bonus Material icon */
/********************* --------------- *****************/

.material-item__data {
    gap: 0.5em;
}

.material-item__icon img {
    aspect-ratio: 1;
}

body:not(.contrast--normal) .material-item__icon img {
    filter: brightness(0) saturate(100%) invert(10%) sepia(80%) saturate(6730%) hue-rotate(245deg) brightness(94%) contrast(150%);

}



/********************* --------------- *****************/
/* Fragebogen START  */
/********************* --------------- *****************/
/* 
#huk {
    --primary-color: var(--primary);
    --secondary-color: var(--primary-light);
    --text-color: var(--text);
    --light-text-color: var(--gray-600);
    --border-color: var(--gray-350);
    --shadow-color: rgba(0, 0, 0, 0.08);
    --card-background: var(--white);
    font-family: 'Poppins', sans-serif;
    background-color: var(--secondary-color);
    color: var(--text);
    margin: 0;
    padding: 2rem 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


#huk.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--card-background);
    border-radius: 12px;
    box-shadow: 0 8px 30px var(--shadow-color);
    padding: 2rem 2.5rem;
    overflow: hidden;
}

#huk #gotoResult {
    text-align: center;
}

#huk .button-wrapper {
    margin-top: 1rem;
}

#huk a.button {
    text-decoration: none;
    font-weight: bold;
    color: var(--button-text);
    font-size: var(--font-size-medium);
    background: var(--button-background);
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
    border: var(--button-border);
    letter-spacing: 0.4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#huk a.module-button {
    background: var(--button-background);
    color: var(--button-text);
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
    border: var(--button-border);
    text-decoration: none;
    font-weight: bold;
    font-size: var(--font-size-medium);
    padding: 0.5rem;
    position: absolute;
    right: -20px;
    bottom: -10px;
    letter-spacing: 0.4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#huk a.button:hover,
#huk a.module-button:hover {
    border: var(--button-border-hover);
    color: var(--button-chart-text--hover);
    background: var(--button-background-hover);
}

#huk .hidden-button {
    display: none;
}

#huk header {
    text-align: center;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
}

#huk h2.headline--large {
    color: var(--primary-color);
    font-size: var(--font-size-xxx-large);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

#huk header p {
    color: var(--light-text-color);
    max-width: 90%;
    margin: 0 auto;
}

#huk .question-card {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    transition: box-shadow 0.3s ease;
}

#huk .question-card:hover {
    box-shadow: 0 4px 15px var(--shadow-color);
}

#huk h2 {
    color: var(--primary);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1rem;
}

#huk .question-text {
    font-style: italic;
    color: var(--text-color);
    font-weight: 400;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 3px solid var(--primary);
}

#huk .options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

#huk .option {
    display: flex;
    align-items: center;
    cursor: pointer;
}

#huk .option input[type="radio"] {
    margin-right: 0.75rem;
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
}

#huk details {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

#huk summary {
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    list-style: none;
    display: block;
    transition: color 0.2s ease;
    font-size: var(--font-size-small);
}

#huk summary::-webkit-details-marker {
    display: none;
}

#huk summary:hover {
    opacity: 0.8;
}

#huk summary::before {
    content: '\25BA';
    margin-right: 0.5rem;
    font-size: var(--font-size-x-small);
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

#huk details[open]>summary::before {
    transform: rotate(90deg);
}

#huk .details-content {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--secondary-color);
    border-radius: 6px;
    font-size: var(--font-size-small);
    color: var(--light-text-color);
}

#huk .details-content p {
    margin: 0 0 0.5rem 0;
}

#huk .details-content strong {
    color: var(--text-color);
}

#huk .haupt,
#huk .answered-yes {
    border-left: 5px solid var(--primary);
    transform: scale(1.02);

    box-shadow: 0 8px 30px var(--shadow-color);
}

#huk .haupt {
    border: 5px solid var(--primary);

}

#huk .answered-no {
    opacity: 0.7;
    filter: grayscale(50%);
 
}

#huk .result-text {
    font-size: var(--font-size-small);
    color: var(--text-color);
    margin-bottom: 1rem;
}

#huk .user-answer {
    font-size: var(--font-size-small);
    color: var(--light-text-color);
    background-color: var(--secondary-color);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    display: inline-block;
}

#huk .hidden.button-wrapper,
#huk .hidden, */
.hidden {
    display: none;
}

/********************* --------------- *****************/
/* Fragebogen END */
/********************* --------------- *****************/
/*only sozialministerium */
.chart--hotspots .hotspot__bullet {
    transition: box-shadow 0.3s ease-in-out !important;
    box-shadow: 0 0 10px var(--white),
    0 0 25px var(--white),
    0 0 40px var(--white) !important;
}


.chart--hotspots .entity__hotspot:hover .hotspot__bullet,
.chart--hotspots .hotspot__bullet:hover {
  box-shadow:
    0 0 30px var(--white),
    0 0 50px var(--white),
    0 0 70px var(--white) !important;
}

/********************* --------------- *****************/
/* Custom Classes für Page Builder START */
/********************* --------------- *****************/
.book-wrapper .chart--page-builder .preview-invisible {
    opacity: 0;
    height: 50%;
    width: 80%;
    max-height: 8em;
}

body:not(.font-size--normal) .chart--page-builder .max-height-font-large {
    max-height: 10em;
}


.chart--page-builder .text--white * {
    color: var(--white);
}

.chart--page-builder .text--small p {
    font-size: var(--font-size-small);
    line-height: 1;
}

.chart--page-builder .h4-primary h4 {
    color: var(--primary);
}

.chart--page-builder .h4-secondary h4 {
    color: var(--secondary);
}

.chart--page-builder .h4-tertiary h4 {
    color: var(--tertiary);
}


.width-20 {
    width: 30%;
}

.width-30 {
    width: 30%;
}

.width-40 {
    width: 40%;
}

.width-50 {
    width: 50%;
}

.width-55 {
    width: 55%;
}

.width-60 {
    width: 60%;
}

.width-70 {
    width: 70%;
}

.width--fit-content {
    width: fit-content;
}

.width--fill-available {
    width: -webkit-fill-available;
}


.flex.col {
    flex-direction: column;
}

.flex-grow {
    flex-grow: 1;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-wrap>div {
    min-width: fit-content;
}

.justify-content--sb {
    justify-content: space-between;
}

.justify-content--center {
    justify-content: center;
}

.align-items--center {
    align-items: center;
}

h4.font-weight--500 {
    font-weight: 500;
}


.gap-small {
    gap: var(--space-small);
}

.gap-medium {
    gap: var(--space-medium);
}

.gap-large {
    gap: var(--space-large);
}

.chart-padding {
    padding: var(--chart-content-padding);
}

.overflow--visible img {
    overflow: visible;
}




@media screen and (min-width: 992px) {
    .flex-row-reverse>div {
        flex-direction: row-reverse !important;
    }

    .gap-zero>div>div[data-widget-type="flex-row-50-50"]>div {
        gap: 0 !important;
    }

    .gap-zero>div {
        gap: 0 !important;
    }
}

/*  boxes */

.primaryBox {
    background-color: var(--primary);
    color: var(--text-inverse);

    border-radius: var(--border-radius-vc);
}


.redBox {
    background-color: var(--red-color);
    color: var(--text-inverse);
    border-radius: 0.5rem 0 0 0.5rem;
}

.redBox h3 {
    color: inherit;
    font-size: var(--font-size-xx-large);
}

.primaryLightBox {
    background-color: var(--primary-light);

}

.primaryLightBox.left {
    border-radius: 0 var(--border-radius-vc) var(--border-radius-vc) 0;
}

.primaryLightBox.right {
    border-radius: var(--border-radius-vc) 0 0 var(--border-radius-vc);
}

.secondaryBox {
    background-color: var(--secondary);
    color: var(--text-inverse);

    border-radius: var(--border-radius-vc);
}

.roseBox {
    background-color: var(--rose);
    border-radius: var(--border-radius-vc);
}





.large-font-size * {
    font-size: calc(1.5 * var(--font-size-xxx-large));
}

.text-white * {
    color: var(--text-inverse, white);
}

.bg-rose {
    border: 2px solid var(--rose);
}

.bg-primary-light {
    background-color: var(--primary-light);
}


.object-postion--x75 img {
    object-position: 75% 50%;
}

.chart--page-builder .text-bubble {
    border-radius: var(--border-radius-vc);
    padding: var(--space-medium) var(--space-x-large);
    position: relative;
}


.chart--page-builder .text-bubble::after {
    content: '';
    position: absolute;
    right: -50px;
    bottom: 45px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 7px 0 50px;
    transform: rotate(180deg);
    border-color: var(--primary) transparent transparent transparent;
}

/* CONTRASTS*/
body:not(.contrast--normal) .bg-rose {
    border: 2px solid var(--black);
}


body:not(.contrast--normal) .roseBox {
    background-color: var(--black, black);
    color: var(--white, white);
}



body:not(.contrast--normal) .primaryLightBox {
    border: 1.5px solid var(--black);
}


body:not(.contrast--normal) .black-icon-contrast img {
    filter: brightness(0) saturate(100%) invert(10%) sepia(80%) saturate(6730%) hue-rotate(245deg) brightness(94%) contrast(150%);
}

body:not(.contrast--normal) .black-icon-contrast-inverse img {
    filter: brightness(0) saturate(100%) invert(97%) sepia(54%) saturate(5224%) hue-rotate(357deg) brightness(100%) contrast(106%);
}

body:not(.font-size--normal) .boxTop {
    height: fit-content;
    min-height: 25ch;
}

body:not(.font-size--normal) .primaryLightBox {
    height: fit-content;
    min-height: fit-content;
    flex-grow: 1;
}

body:not(.font-size--normal) .font-size-large-height-fix {
    height: auto !important;
}

/********************* --------------- *****************/
/* Custom Classes für Page Builder END */
/********************* --------------- *****************/

/********************* --------------- *****************/
/* Custom CHARTS  Datenschutz START */
/********************* --------------- *****************/

/** chart Datenschutz voicover - start */
.container-voiceover {
    display: grid;
    grid-template-columns: 30% auto 30%;
    grid-template-rows: 1fr 1fr;
    gap: 1em 0.5em;
    grid-auto-flow: row;
    grid-template-areas:
        "img1 centerText img2"
        "img3 centerText img4";
    height: 100%;
    width: 100%;
}

.container-voiceover .centerText h2 {
    font-size: calc(1.2 * var(--font-size-xxx-large));
}

.container-voiceover .img1 {
    grid-area: img1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.container-voiceover .img2 {
    grid-area: img2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.container-voiceover .centerText {
    grid-area: centerText;
}

.container-voiceover .img3 {
    grid-area: img3;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.container-voiceover .img4 {
    grid-area: img4;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.img1 img,
.img2 img,
.img3 img,
.img4 img {
    width: 100%;
    display: block;
    aspect-ratio: 29/20;
    object-fit: contain;
}


.container-voiceover .centerText img {
    width: 100%;
    height: 100%;
    display: block;
    max-height: 20vh;
}

@media screen and (max-width:768px) {
    .container-voiceover {
        grid-template-columns: minmax(30%, 50%) 18% minmax(30%, 50%);
    }
}

/** chart Datenschutz voicover - end */

/** chart Hotspots Tab - start */

.chart--hotspots.grid-card-tab #hotspots__grid {
    align-items: flex-start;
    grid-template-columns: repeat(var(--grid-columns, 1), minmax(max-content, 1fr));
    gap: var(--space-small);
}




.chart--hotspots.grid-card-tab .chart__body .chart__interaction#hotspots__grid {
    margin-top: auto;
    margin-bottom: auto;
    min-height: 30vw;
}

.chart--hotspots.grid-card-tab .entity.entity__area .area__content {
    font-size: var(--font-size-x-large);
    background-color: var(--secondary);
    color: var(--text-inverse);
    text-align: center;
    font-weight: 400;
    border: 1.5px solid transparent;
    border-radius: var(--border-radius-vc) var(--border-radius-vc) 0 0;
}

.chart--hotspots.grid-card-tab .entity.entity__area.bullet__open .area__content {
    background-color: var(--secondary-dark);
}

.chart--hotspots .entity.entity__area .area__content .area__header .area__label {
    font-weight: 100;
    font-size: var(--font-size-x-large);
}

.chart--hotspots.grid-card-tab .ui-popover__wrapper {
    padding: var(--space-x-large);
    border: none;
    box-shadow: var(--shadow-large);
    background-color: var(--gray-100);
    border-radius: 0 var(--border-radius-vc) var(--border-radius-vc) var(--border-radius-vc);
    margin-bottom: 10px;
}


.chart--hotspots.grid-card-tab .ui-popover__container.ui-popover__container--open {
    max-width: calc(100% - 2*var(--chart-content-padding-inline));
    width: calc(100% - 2*var(--chart-content-padding-inline));
    top: 3.48em;
    left: var(--chart-content-padding-inline);
    min-height: 38ch;
    display: flex;
    max-height: unset;
}

.chart--hotspots.grid-card-tab .ui-popover__wrapper .bullet__text {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
}


.chart--hotspots.grid-card-tab .ui-popover .bullet__text p {
    margin: 0;
}


.chart--hotspots.grid-card-tab .ui-popover .bullet__text p:last-child strong {
    margin-bottom: 0.5em;
    display: inline-block;
}

.chart--hotspots.grid-card-tab .ui-popover .bullet__text p:first-child {
    max-width: 50%;

}


.chart--hotspots.grid-card-tab .ui-popover .bullet__text p:last-child {
    border-radius: var(--border-radius-vc);
    width: 50%;
    text-align: center;
}

.chart--hotspots.grid-card-tab .ui-popover .bullet__text p:only-child {
    width: 100%;
    max-width: 100%;
}

body:not(.font-size--normal) .chart--hotspots.grid-card-tab .ui-popover__container {
    top: 3.59em;
}

body:not(.contrast--normal) .chart--hotspots.grid-card-tab .ui-popover .bullet__text p:first-child {
    /*color: var(--text-inverse); */
}

body:not(.contrast--normal) .chart--hotspots.grid-card-tab .entity.entity__area:not(.bullet__open) .area__content {
    background-color: var(--white);
    color: var(--black);
    border: 1.5px solid var(--black);
}

@media screen and (max-width:1200px) {
    .chart--hotspots.grid-card-tab .ui-popover__container.ui-popover__container--open {
        min-height: 30ch;
    }
}

@media screen and (max-width:1024px) {
    .chart--hotspots.grid-card-tab .chart__body .chart__interaction#hotspots__grid {
        min-height: 35vw;
    }
}


@media screen and (max-width:900px) {

    .chart--hotspots.grid-card-tab #hotspots__grid {
        align-items: flex-start;
        grid-template-columns: repeat(1, minmax(100%, 1fr));
        grid-template-rows: repeat(4, minmax(max-content, 1fr));
        gap: var(--space-small);
        min-height: unset;
    }

    .chart--hotspots.grid-card-tab .entity.entity__area {
        flex-direction: column;
    }


    .chart--hotspots.grid-card-tab .ui-popover__container.ui-popover__container--open {
        position: relative;
        left: 0;
        top: 0;
        max-width: 100vw;
        width: 100%;
        scroll-snap-type: block;
        scroll-snap-align: start;
    }


    .chart--hotspots.grid-card-tab .ui-popover__wrapper .ui-popover__content .bullet__text {
        flex-direction: column;
    }

    .chart--hotspots.grid-card-tab .ui-popover .ui-popover__content .bullet__text p {
        width: 100%;
        max-width: 100%;
        text-align: left;

    }
}

/** chart Hotspots Tab - end */
/** chart Hotspots text bubble - end */

.chart--hotspots .entity.entity__area.txt-bubble .area__content {
    border-radius: var(--border-radius-vc);
    padding: var(--space-medium) var(--space-x-large);
}

.chart--hotspots .entity.entity__area.txt-bubble .area__content::after {
    content: '';
    position: absolute;
    bottom: -50px;
    /* Adjust for spacing */
    right: 20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 7px 0 50px;
    /* Creates inverted triangle */
    border-color: var(--area-bg) transparent transparent transparent;
    /* Background color (inherit) */
}

.chart--hotspots .entity.entity__area.txt-bubble.bubble-left .area__content::after {
    left: 20px;
    right: auto;
    border-width: 50px 50px 0 7px;
}

.chart--hotspots .entity.entity__area.overflow--vis .area__content .area__background .area__background-image {
    overflow: visible;
}

.chart--hotspots .entity.entity__area.img-person {
    --area-top: auto !important;
    bottom: 0;
}

.chart--hotspots.header-width--65p header.chart__header {
    width: clamp(350px, 65%, 120ch);
}

.chart--hotspots.header-width--35p header.chart__header {
    width: clamp(350px, 40%, 80ch);
}




body:not(.font-size--normal) .chart--hotspots.header-width--65p header.chart__header,
body:not(.font-size--normal) .chart--hotspots.header-width--35p header.chart__header {
    width: 100%;
}


.chart--hotspots .entity.entity__area.img-person .area__content:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: hsl(0deg 0% 100% / 39%);
    backdrop-filter: blur(4px);
}

body:not(.font-size--normal) .chart--hotspots .entity.entity__area.txt-bubble {
    --area-height: fit-content !important;
    --area-top: 0 !important;
    --area-width: clamp(380px, 51%, auto) !important;
    --area-left: 28% !important;
    right: 21%;
    left: 5%;
}

body:not(.font-size--normal) .chart--hotspots .entity.entity__area.txt-bubble.second {
    --area-top: -17% !important;
    right: 18%;
}


@media only screen and (max-width: 768px) {

    .chart--hotspots header.chart__header {
        background-color: var(--white_60);
    }

    body:not(.font-size--normal) .chart--hotspots .entity.entity__area.txt-bubble {
        --area-width: auto !important;
        --area-left: 2% !important;
        --area-top: 15% !important;
        right: 21%;
    }

    body:not(.font-size--normal) .chart--hotspots .entity.entity__area.txt-bubble.second {
        --area-top: -15% !important;
        right: 18%;
    }

    body:not(.font-size--normal) .chart--hotspots .entity.entity__area.img-person {
        --area-top: auto !important;
        bottom: -5%;
    }
}

/** chart Hotspots text bubble - end */

/* full flex Hotspots - Version HUK start*/

.chart--hotspots.full-flex-huk .chart__body {
    display: flex;
    min-height: 100%;
}

.chart--hotspots.full-flex-huk.column .chart__body {
    flex-direction: column;
}

.chart--hotspots.full-flex-huk header.chart__header {
    position: unset;
    padding-bottom: 0;
}

.chart--hotspots.full-flex-huk .chart__body .chart__interaction {
    padding: var(--chart-content-padding, var(--space-medium) 4rem);
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

body:not(.font-size--normal) .chart--hotspots.full-flex-huk .chart__body .chart__interaction {
    position: relative;
    height: auto;
    flex-grow: 1;
    min-height: 40vw;
    margin-top: auto;
    margin-bottom: auto;
    max-height: fit-content;
}




@media only screen and (max-width: 1024px) {

    body:not(.font-size--normal) .chart--hotspots.full-flex-huk .chart__body .chart__interaction {
        min-height: 55vw;
    }
}


@media only screen and (max-width: 768px) {

    body:not(.font-size--normal) .chart--hotspots.full-flex-huk .chart__body .chart__interaction {
        min-height: 100vw;
    }
}

/* full flex Hotspots - Version HUK -end */

.chart--hotspots .entity.entity__area.area-as-bg {
    right: 0;
    bottom: 0;
    aspect-ratio: 1215/859;
}

.chart--hotspots .entity.entity__area.area-as-bg .area__content .area__background .area__background-image {
    object-position: bottom;

}


/* .browser-firefox .chart--hotspots .entity.entity__area .area__content .area__background .area__background-image {
    translate: -35% 0;
    width: auto;
    height: auto;
} */


.browser-firefox #iqh99 {
    width: auto;
    height: auto;
    max-height: 100%;
    overflow: visible;
    display: flex;
    aspect-ratio: 1;
}

/********************* --------------- *****************/
/* Custom CHARTS  Datenschutz END */
/********************* --------------- *****************/

/* =============================================================================
   FINALER FIREFOX FIX (Überschreibt fehlerhafte Regeln in Zeile 1121)
   ========================================================================== */

.browser-firefox .chart--hotspots.hotspotschart03 .entity.entity__area .area__content .area__background .area__background-image {
    translate: 0 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
}

.chart--hotspots.hotspotschart03.full-flex .chart__body .chart__interaction {
    padding: 0 !important;
    left: 0 !important;
    width: 100% !important;
}

.chart--hotspots.hotspotschart03 .entity.entity__area {
    width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
}


.chart--hotspots.hotspotschart03 header.chart__header {
    padding-left: 5rem !important;
    padding-right: 2rem !important;
    box-sizing: border-box !important;
    z-index: 10;
    left: 0 !important;
    padding: var(--chart-content-padding, var(--space-large) 4rem) !important;
}

/* Sonstige */
body#extension-body.font-size--normal,
body#cbook-body.font-size--normal {
    --text-multiplier: 1.2;
}

@media (max-width: 992px) {

    body:not(.font-size--normal) #iviq {
        padding: var(--chart-padding, var(--space-large) 4rem);
    }

}

body:not(.font-size--normal) #irut5-4,
body:not(.font-size--normal) #irut5-4-2,
body:not(.font-size--normal) #irut5-4-2-2,
body:not(.font-size--normal) #irut5-4-2-2-2 {
    padding: 5px;
    background-color: var(--white);
    border: 0px solid #471D70;
    border-radius: 20px 20px 20px 0;
    width: 107%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 85px;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    margin-left: -25px;
    margin-top: -60px;
    box-shadow: none;
}

@media (max-width: 1200px) {
    body:not(.font-size--normal) #ib56c {
        height: 130%
    }

}


.chart-menu__link span {
    white-space: break-spaces;

}

.chart-menu__link {
    height: max-content;
    min-height: 2rem;
}

.chart--hotspots.hotspotschart03 header.chart__header {
    justify-content: flex-start;
}

@media (max-width: 780px) {
    .app-menu__search-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .app-menu__search-form,
    .app-menu__search-wrapper .app-menu__favorites-only {
        width: 100%;
    }

    .app-menu.app-menu-enter-active .app-menu__wrapper,
    .app-menu.app-menu-enter-done .app-menu__wrapper {
        border-left: 0;
    }

    /* Gap for readability */
    .chart-menu__link {
        margin-top: 0.5rem;
        margin-left: 0.25rem;
        border-bottom: 1px solid #d5d5d5;
    }

    .chart-menu__item:first-of-type .chart-menu__link {
        margin-top: 0;
    }

    .app-menu__results .app-menu__chapters {
        padding: 0 0.25rem 1px;

    }

    p.app-menu__header {
        padding: var(--space-large) 0.25rem;
    }

    .app-menu__search-wrapper {
        padding: 0 0.25rem;
    }

    .level-2.app-menu__chapter {
        padding-left: 1ch;

    }
}


@media (max-width: 768px) {
    .app-footer {
        padding: 0 4rem;
    }

    .app-chart-nav {
        top: unset;
        bottom: 4.25rem;
        z-index: 11;
    }

.book-wrapper .logo__wrapper::before {
    visibility: hidden;
}


    .book-wrapper .logo.logo--right {
       /*  translate: -32.5% 50%; */
        max-width: 189px;
    }

}

@media (max-height: 450px) {
    .app-footer {
        padding: 0 4rem;
    }


    .app-chart-nav {
        top: unset;
        bottom: 4.25rem;
        z-index: 11;
    }

    .book-wrapper .logo.logo--right {
        translate: -32.5% 50%;
    }
}

/* Info-Boxen und Hervorhebungen auf Textseiten*/
.info-box {
  background-color: var(--info-50);
  border-radius: 8px;
  padding: 0.75em 1em;
}

.zitat-box {
  background-color: var(--success-200);
  border-radius: 8px; 
  padding: 0.5em 0.5em;
}