/* !!!!! 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. */


/* der Code wurde 1:1 von DWA kopiert*/
/* EN / CSS-INFOs */
/* Structure by chart type (CSS + MQ + Accessibility): always use chart-specific classes, e.g. chart--hotposts, chart__multiplechoice */
/* General styles and variables at the beginning of the CSS file */
/* At the end of the CSS file: general media queries and accessibility styles – includes global MQs, accessibility, contrast, and animations (independent of accessibility) */
/* Voting charts in VARIANT – issues with contrast */
/* Special footer and header at the bottom also styled in VARIANT */
/********************************
/* DE / CSS-INFOs */
/* Struktur nach Chart-Typ (CSS + MQ + Barrierefreiheit): immer mit chartspezifischen Klassen, z. B. chart--hotposts, chart__multiplechoice */
/* Allgemeine Styles und Variablen am Anfang der CSS-Datei */
/* Am Ende der CSS-Datei: allgemeine Media Queries und Barrierefreiheits-Styles – umfasst globale MQs, Barrierefreiheit, Kontraste und Animationen (unabhängig von der Barrierefreiheit) */
/* Voting-Charts im VARIANT – Probleme mit Kontrasten */
/* Spezieller Footer und Header unten ebenfalls im VARIANT gestylt */

/********************************/
/* Inhalt / Content structure: */
/* 1. Variables / Variablen */
/* 2. CSS for theme changes / CSS für Theme-Anpassungen */
/* 3. GUI + General styles / GUI + Allgemeines */
/* 4. General content / Allgemeiner Content */
/* 5. Separate blocks for each chart type, with MQ and accessibility styles: */
/*  Powerspots, Wordcloud, Pinwand, Essay, Multiple Choice, Drag and Drop, Richitg/Falsch (right-wrong).. Page Builder Charts */
/* 6. General MQ, Accessibility / Allgemeine MQs, Barrierefreiheit */
/* 7. MR Fish Stylings */
/********************************/
/* FONTS */

/** FONT - START **/
@font-face {
  font-family: "Source Sans Pro";
  src: url("../uploads/store/1599981/SourceSansPro-ExtraLight.ttf") format("truetype"),
    url('../uploads/store/1612069/SourceSansPro-ExtraLight.woff2') format('woff2'),
    url('../uploads/store/1612070/SourceSansPro-ExtraLight.woff') format('woff');
  font-style: normal;
  font-weight: 200;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../uploads/store/1599982/SourceSansPro-ExtraLightItalic.ttf") format("truetype"),
    url('../uploads/store/1612071/SourceSansPro-ExtraLightIt.woff2') format('woff2'),
    url('../uploads/store/1612072/SourceSansPro-ExtraLightIt.woff') format('woff');
  font-style: italic;
  font-weight: 200;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../uploads/store/1599984/SourceSansPro-Light.ttf") format("truetype"),
    url('../uploads/store/1612076/SourceSansPro-Light.woff') format('woff'),
    url('../uploads/store/1612077/SourceSansPro-Light.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../uploads/store/1599985/SourceSansPro-LightItalic.ttf") format("truetype"),
    url('../uploads/store/1612079/SourceSansPro-LightIt.woff2') format('woff2'),
    url('../uploads/store/1612078/SourceSansPro-LightIt.woff') format('woff');
  font-style: italic;
  font-weight: 300;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../uploads/store/1599986/SourceSansPro-Regular.ttf") format("truetype"),
    url('../uploads/store/1612081/SourceSansPro-Regular.woff2') format('woff2'),
    url('../uploads/store/1612080/SourceSansPro-Regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../uploads/store/1599983/SourceSansPro-Italic.ttf") format("truetype"),
    url('../uploads/store/1612075/SourceSansPro-It.woff2') format('woff2'),
    url('../uploads/store/1612074/SourceSansPro-It.woff') format('woff');
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../uploads/store/1599987/SourceSansPro-Semibold.ttf") format("truetype"),
    url('../uploads/store/1612083/SourceSansPro-Semibold.woff2') format('woff2'),
    url('../uploads/store/1612082/SourceSansPro-Semibold.woff') format('woff');
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../uploads/store/1599988/SourceSansPro-SemiboldItalic.ttf") format("truetype"),
    url('../uploads/store/1612073/SourceSansPro-SemiboldIt.woff2') format('woff2'),
    url('../uploads/store/1612084/SourceSansPro-SemiboldIt.woff') format('woff');
  font-style: italic;
  font-weight: 600;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../uploads/store/1599980/SourceSansPro-Bold.ttf") format("truetype"),
    url('../uploads/store/1612065/SourceSansPro-Bold.woff2') format('woff2'),
    url('../uploads/store/1612066/SourceSansPro-Bold.woff') format('woff');
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../uploads/store/1599979/SourceSansPro-BoldItalic.ttf") format("truetype"),
    url('../uploads/store/1612067/SourceSansPro-BoldIt.woff2') format('woff2'),
    url('../uploads/store/1612068/SourceSansPro-BoldIt.woff') format('woff');
  font-style: italic;
  font-weight: 700;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../uploads/store/1599977/SourceSansPro-Black.ttf") format("truetype"),
    url('../uploads/store/1612062/SourceSansPro-Black.woff2') format('woff2'),
    url('../uploads/store/1612061/SourceSansPro-Black.woff') format('woff');
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../uploads/store/1599978/SourceSansPro-BlackItalic.ttf") format("truetype"),
    url('../uploads/store/1612063/SourceSansPro-BlackIt.woff2') format('woff2'),
    url('../uploads/store/1612064/SourceSansPro-BlackIt.woff') format('woff');
  font-style: italic;
  font-weight: 900;
}

/** FONT - END **/

:root,
body#cbook-body.contrast--normal,
body#extension-body.contrast--normal,
.cbook-container,
#editor-container body#cbook-body {
  --primary: hsl(355, 100%, 24%);

  /* --primary-light: hsl(195, 30%, 92%);
  --primary-light-second: hsl(208, 35%, 93%); */

  --secondary: hsl(203, 100%, 25%);
  --secondary-dark: #003053;
  --tertiary: hsl(205, 29%, 92%);

  --false: #CA0237;
  --true: #38713E;

  --primary-h: 355;
  --primary-s: 100%;
  --primary-l: 24%;

  --secondary-h: 203;
  --secondary-s: 100%;
  --secondary-l: 25%;

  /*
  --primary-light-h: 195;
  --primary-light-s: 30%;
  --primary-light-l: 92%; */

  --tertiary-h: 205;
  --tertiary-s: 29%;
  --tertiary-l: 92%;

  --header-bg: var(--white);
  --header-color: var(--primary);
  --footer-bg: var(--white);
  --footer-color: var(--primary);
  --shadow-modal: rgba(0, 0, 0, 0.2) 0px 2px 5px;

  /* LINKS BUTTONS*/
  --slide-link-background-hover: var(--highlight);
  --background-inverse: var(--primary);
  --button-text--hover: var(--white);
  --button-chart-text--hover: var(--white);
  --button-background-hover: var(--secondary);
  --button-border-radius: var(--border-radius-medium);
  --button-border: 1.5px solid transparent;
  --button-border-hover: 1.5px solid transparent;
  --button-border-start: 2px solid var(--white);
  --button-padding: var(--space-x-small) var(--space-x-large);
  /* header */
  /*
  --header-color: var(--primary-700);
  --header-bg: var(--text-inverse);*/
  /*MEDI PALYER*/
  --media-player-color: var(--primary);
  --media-player-bg-hover: var(--gray-250);
  --media-player-color-hover: var(--primary-900);
  --hs-media-player-bg-hover: transparent;
  --hs-media-player-color-hover: var(--highlight);
  /*BORDER RADIUS*/
  --box-shadow: 0 .1875rem .375rem rgba(0, 0, 0, .16);
  --border-radius-vc: 0.3rem;
  --border-radius-cards: 0.3rem;
  --border-radius-landcard: 0.3rem;
  --border-radius-accordion: 0.3rem;
  /*-------------------------------------*/
  --header-height: 70px;
  --footer-height: 70px;

  --nav-height: var(--footer-height);
  --stage-height: calc(var(--cbook-height) - var(--footer-height) - (2 * var(--stage-padding-y)));

  /** ABSTÄNDE **/
  --button-mp-padding: var(--space-small);
  --chart-padding: var(--chart-content-padding);
  --chart-content-padding: calc(2rem + var(--header-height)) var(--chart-content-padding-inline) var(--chart-content-padding-block);
  --chart-content-padding-inline: 6rem;
  --chart-content-padding-block: 2rem;

  /* flipcards */
  --flipcards-front-bg: var(--secondary);
  --flipcards-back-bg: var(--tertiary);
  --flipcards-column-gap: 2em;
  /* for all flipCards but could be changed with extra class: .... .flipCards3, 4 etc.*/
  --flipcards-row-gap: 2em;

  /* HS */
  --powerspots-bg: var(--tertiary);
  --powerspots-open-bg: var(--powerspots-bg);
  /* MC*/
  --mc-answer-width: 35rem;
  --border-radius-mc: 0.3rem;
  --mc-answer-label-bg: var(--tertiary);

  /*DND*/
  --droparea-name: flex;
  --droparea-name-bg: var(--secondary);
  --droparea-name-color: var(--white);
  --droparea-bg: var(--white);
  --droparea-width: calc(33% - 0.5*var(--space-medium));
  /* for 2 columns */
  --droparea-border-radius: 0.3rem;
  --droparea-border: 12px solid var(--primary-light);
  --droparea-border-bottom: 18px solid var(--primary-light);

  /* Accordion */
  --accordion-body-bg-color: var(--tertiary);
  --accordion-body-color: var(--text);
  --accordion-header-bg-color: var(--secondary);
  --accordion-header-color: var(--tertiary);
  --accordion-open-header-bg-color: var(--secondary-800);
  --accordion-open-header-color: var(--tertiary);
  /* FONTS */

  --font-paragraph: 'Source Sans Pro', Verdana, Arial, Helvetica, sans-serif;
  --font-heading: 'Source Sans Pro', Verdana, Arial, Helvetica, sans-serif;
  --font-size--normal: var(var(--font-size--medium))
    /* icons sizes */
    --icon-size-s: 16px;
  --icon-size-m: 35px;
  --icon-size-l: 44px;
  --icon-size-xl: 48px;
}

.app-header,
.app-menu,
.social-app,
.media-player__controls {
  --button-padding: var(--space-small);
  --button-border-radius: var(--border-radius-small)
}

/** VARIABLEN -- END **/

.chart--page-builder #chart-container>div>div[data-element-type=gjs-flex-layout-widget].padding-bottom--zero {
  padding-bottom: 0;
}

/************ ---> THEME  START **************************/
/** THEME  delete after update */
.media-player__controls .controls__btn:focus,
.sequence__controls .controls__btn:focus,
.media-player__controls .controls__btn:hover,
.sequence__controls .controls__btn:hover {
  color: var(--media-player-color-hover, var(--button-text--hover));
  background: var(--media-player-bg-hover, (--button-background--hover));

}

/* footer + header  elements height -start */
.actions-menu__link,
.app-footer .chart-progress__label {
  height: auto;
  /* eight: calc(0.85*var(--footer-height)); */
}


/* THEME ACCESIBILITY  SET Important*/
.app-menu__search-wrapper .app-menu__favorites-only input#show-only-favorites {
  display: block;
}

/* footer + header  elements height - end */
/* theme 
 (same with  header.chart__header .heading__display ) */
.chart h2,
.chart h2.heading__display {
  color: var(--text);
  font-weight: 400;
  font-size: var(--font-size-xxx-large);

}

.chart h3 {
  color: var(--text);
  font-weight: 400;

}

/* MEDIA CHART DESCRIPTION */
.chart--media .media-description__wrapper {
  background: none;
}


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

  .chart--media .media-description__wrapper {
    margin-top: var(--footer-height);
     overflow: scroll;
     height: calc(100% - 48px - 48px);
    
  }
}

/* MEDIA PLAYER CONTROLS */
.chart--media .media-player__controls {
  z-index: 20;
}


/* MEDIA CHART SUBTITLES */
/*theme -start -delete after update*/
/*testing then delete*/
body.contrast--normal .chart--media .media-player__controls {
  background: var(--footer-bg);
}

/*theme -end -delete after update*/
/************ ---> THEME  END  **************************/
/* not theme */
.book-wrapper *:focus-visible {
  outline-offset: -2px;
}


/** GUI -- START **/
.progress-display__background {
  stroke: var(--secondary);
}

.progress-display__bar {
  stroke: var(--primary);
}

/** ALLGEMEIN -- START **/

.app-header .header-chart-title,
.app-footer .actions-menu__link {
  font-size: var(--font-size-x-small);
  font-family: var(--font-paragraph) !important;
  --font-paragraph: 'OpenSans', Helvetica, Segoe UI, Arial, sans-serif;
}

.app-footer .chart-progress__label {
  font-size: var(--font-size-medium);
  font-family: var(--font-paragraph) !important;
  --font-paragraph: 'OpenSans', Helvetica, Segoe UI, Arial, sans-serif;
}


.app-header .header-chart-title {
  font-size: var(--font-size-medium);
}

.ui-modal__close,
.ui-modal__close:hover,
.ui-modal__close:focus {
  background-color: transparent !important;
  color: var(--primary) !important;
}

.actions-menu__item--notes,
.actions-menu__item--activity-center {
  display: none;
}


/** HEADER -- START **/
/*
    .app-header button:hover,
    .app-header button:focus {
        --slide-link-background-hover: var(--client-dark-gray);
        color: var(--white);
    }*/

/** HEADER -- END **/

/** MENU -- START **/


.app-menu__header {
  font-family: var(--font-heading);
  font-weight: normal;
}


#cbook-root.cbook-container {
  background: var(--white);
}

body.contrast--normal .app-menu__chapter .title,
body.contrast--normal .app-menu__chapter .title.open,
body.contrast--normal .app-menu__chapter .title:hover,
body.contrast--normal .app-menu__chapter .title:focus {
  background: var(--client-light-gray);
  color: var(--text);
}

.cbook-container input,
.ui-modal__content {
  font-size: var(--font-size-large);
}

::-webkit-input-placeholder {
  color: var(--black);
}


.progress-display {
  display: none;
}

.app-menu__chapter .title .progress-display--compact .perc-val {
  color: var(--text) !important;
}

.chart-menu__link:before {
  opacity: 1;
}

.chart-menu__item .chart-menu__fav-btn {
  background: transparent !important;
  opacity: 1 !important;
}

/** MENU -- END **/
/** GUI -- END **/

/** General Stylings - START **/
/** BARRIEREFREIHEIT POPOVER -- START **/
.app-ally-modal__actions button.button__contrast--blackwhite,
.app-ally-modal__actions button.button__contrast--whiteblack,
.app-ally-modal__actions button.button__contrast--yellowblue,
.app-ally-modal__actions button.button__contrast--redcyan,
.app-ally-modal__actions button.button__contrast--greenblack,
body#cbook-body .app-ally-modal__actions .button__font-size--medium,
body#cbook-body .app-ally-modal__actions .button__font-size--large {
  display: none;
}

body#cbook-body .app-ally-modal__actions button:not(.button__contrast--blueyellow):hover,
body#cbook-body .app-ally-modal__actions button:not(.button__contrast--blueyellow):focus {
  background-color: transparent;
}

.app-ally-modal__shortcuts table {
  font-size: inherit;
}

.app-ally-modal__shortcuts tbody tr td kbd {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  color: var(--black);
}

.social-app .social-app-header,
.bonus-material__list {
  background-color: var(--white);
}


.social-app-header__content .ui-toggle-button:hover,
.social-app-header__content .ui-toggle-button:focus-within,
.social-app-header__content .ui-toggle-button.pressed:hover,
.social-app-header__content .ui-toggle-button.pressed:focus-within {
  color: var(--white);
}

.social-app-header__content .ui-toggle-button.pressed:hover,
.social-app-header__content .ui-toggle-button.pressed:focus-within {
  color: var(--primary);
}

/** BARRIEREFREIHEIT POPOVER -- END **/
/** CONTENT -- START **/

/** ALLGEMEIN -- START **/
.ui-modal__wrapper {
  display: flex;
  flex-direction: row;
  max-width: 60vw;
  width: 1000px;
  flex-wrap: wrap;
  justify-content: space-between;
}

body:not(.font-size--normal) .ui-modal__wrapper {
  max-width: 80vw;
}

.uppercase {
  text-transform: uppercase;
}

h2.margin-zero,
.chart--page-builder .margin-zero h2,
.margin-zero,
.margin-zero h3,
.margin-zero p {
  margin: 0;
}

.chart--page-builder .under-title h2 {
  font-weight: normal;
}

.under-title header.chart__header .heading__overline .heading__overline-text {
  font-family: var(--font-heading);
  font-size: var(--font-size-xx-large);
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1;
}

.under-title header.chart__header .heading__overline {
  margin: 0 0 var(--space-x-small);

}

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

.under-title.chart .heading__display {
  order: -1;
  margin-bottom: 0;
}


.chart .heading__overline * {
  color: var(--secondary);
}

body:not(.contrast--normal) .chart .heading__overline * {
  color: var(--black);
}


h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0 !important;
  font-family: var(--font-heading);
}

h1 {
  font-weight: bold;
}

.chart--page-builder .heading__start h4 {
  color: inherit;
}


.chart.chart--page-builder .heading__start h3 {
  font-size: calc(1.15*var(--font-size-xx-large));
  margin: 0;
  font-weight: normal;
}



.chart .heading__start h2 {
  font-weight: normal;
  margin: 0 0 var(--space-small);
}

.chart.modul-start .heading__start h2 {
  font-size: calc(1.3*var(--font-size-xxx-large));
}

.chart--page-builder .heading__start.heading__overline h2 {
  font-weight: 300;
}


.chart .heading__overline * {
  color: inherit;
}

body:not(.contrast--normal) .chart .heading__overline * {
  color: inherit;
}

/* theme 
 (same with  header.chart__header .heading__display ) */
header.chart__header .heading__display,
.chart h2 {
  color: inherit;
  margin: var(--space-x-small) 0;
}


.heading__description p:first-child {
  margin-top: 0;
  padding-top: 1em;
}


.heading__description.heading__start p:first-child {
  margin-top: 0;
  padding-top: 0;
}

.heading__description.heading__start p:last-child {
  margin-bottom: 3em;
}

#editor-container .chart p,
.chart--page-builder p {
  color: inherit;
}

.chart p,
.chart li,
.chart__body span,
.chart label,
.tab__label,
.chart__btn .chart__btn--text,
.area__label,
.chart__next-link button {
  font-size: var(--font-size-medium);
  font-family: var(--font-paragraph);
  line-height: 1.5;
  word-break: break-word;
  hyphens: auto;
}

p.font--small,
.font--small p {
  font-size: var(--font-size-small);
}


p.font--x-small,
.font--x-small p {
  font-size: var(--font-size-x-small);
}

p.font--xx-small,
.font--xx-small p {
  font-size: var(--font-size-xx-small);
}

.uppercase {
  text-transform: uppercase;
}


.u-trim-edges ol,
.u-trim-edges ul {
  margin-block: 0;
}

.u-trim-edges div>p:first-of-type {
  margin-block-start: 0;
}

.u-trim-edges div>p:last-of-type {
  margin-block-end: 0;
}

.p-last-child p:last-child {
  margin-bottom: 0;
}

.p-first-child p:last-child {
  margin-bottom: 0;
}


/* lists */
.chart--page-builder ul:not(.cards-list),
.chart--page-builder ol {
  padding-inline-start: 1.5em;
}

.chart--page-builder .ul-bold ul li::marker,
.chart--page-builder .ol-bold ol li::marker,
.chart--page-builder ul.bold li::marker,
.chart--page-builder ol.bold li::marker {
  font-weight: bold;
}

.chart--page-builder ul:not(.cards-list) li {
  margin-bottom: 0.5em;
}

.chart--page-builder ol ul {
  list-style-type: disc;
}

.chart--page-builder ol ul li {
  margin-left: 0 !important;
}


/* Bullet as ::before pseudo-element _ START */
/*

.chart--page-builder ul {
  list-style: none;
  padding-left: 0;
}

.chart--page-builder ul:not(.cards-list) li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.5em;
}

.chart--page-builder ul:not(.cards-list) li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 3px;
  height: 1.1em;
 /* background: url('')*/
/*
 background-color: var(--primary);
  background-size: contain;

  opacity: 0;
  transform: translateY(-20px);
  animation: dropBounce 0.6s forwards;
}


.chart--page-builder .blueBox ul:not(.cards-list) li::before {
background-color: var(--secondary);
}

/* Animation delay per bullet */
/*
.chart--page-builder ul li:nth-child(1)::before { animation-delay: 1s; }
.chart--page-builder ul li:nth-child(2)::before { animation-delay: 1.1s; }
.chart--page-builder ul li:nth-child(3)::before { animation-delay: 1.2s; }
.chart--page-builder ul li:nth-child(4)::before { animation-delay: 1.3s; }
.chart--page-builder ul li:nth-child(5)::before { animation-delay: 1.4s; }
.chart--page-builder ul li:nth-child(6)::before { animation-delay: 1.5s; }
.chart--page-builder ul li:nth-child(7)::before { animation-delay: 1.6s; }
.chart--page-builder ul li:nth-child(8)::before { animation-delay: 1.7s; }
.chart--page-builder ul li:nth-child(9)::before { animation-delay: 1.8s; }
.chart--page-builder ul li:nth-child(10)::before { animation-delay: 1.9s; }
*/

/* Bullet as ::before pseudo-element _ START */

body:not(.animation--hidden) .chart--page-builder ul:not(.cards-list) li::marker,
body:not(.animation--hidden) .chart--page-builder ol:not(.cards-list) li::marker {
  animation: dropBounce 0.6s both;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(1)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(1)::marker {
  animation-delay: 1s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(2)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(2)::marker {
  animation-delay: 1.1s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(3)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(3)::marker {
  animation-delay: 1.2s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(4)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(4)::marker {
  animation-delay: 1.3s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(5)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(5)::marker {
  animation-delay: 1.4s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(6)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(6)::marker {
  animation-delay: 1.5s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(7)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(7)::marker {
  animation-delay: 1.6s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(8)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(8)::marker {
  animation-delay: 1.7s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(9)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(9)::marker {
  animation-delay: 1.8s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(10)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(10)::marker {
  animation-delay: 1.9s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(11)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(11)::marker {
  animation-delay: 2s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(12)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(12)::marker {
  animation-delay: 2.1s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(13)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(13)::marker {
  animation-delay: 2.2s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(14)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(14)::marker {
  animation-delay: 2.3s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(15)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(15)::marker {
  animation-delay: 2.4s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(16)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(16)::marker {
  animation-delay: 2.5s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(17)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(17)::marker {
  animation-delay: 2.6s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(18)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(18)::marker {
  animation-delay: 2.7s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(19)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(19)::marker {
  animation-delay: 2.8s;
}

body:not(.animation--hidden) .chart--page-builder ul li:nth-child(20)::marker,
body:not(.animation--hidden) .chart--page-builder ol li:nth-child(20)::marker {
  animation-delay: 2.9s;
}




@keyframes dropBounce {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  70% {
    opacity: 1;
    transform: translateY(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



body:not(.contrast--normal) .chart--page-builder ul li::before {
  filter: brightness(0) saturate(100%) invert(7%) sepia(93%) saturate(7002%) hue-rotate(247deg) brightness(116%) contrast(144%);
}

/* BUTTONS FISH demo */

.chart--mrfish #safearea:has(.feedbackContainer) .scene-elements--safe-area #tryAgain {
  width: fit-content;
}


/* BUTTONS */


body#cbook-body:not(.contrast--normal) .chart--page-builder.landkarte .link-btn:hover,
body#cbook-body:not(.contrast--normal) .chart--page-builder.landkarte .link-btn:focus {
  color: var(--button-text) !important;
}


.chart--page-builder.landkarte .link-btn:hover,
.chart--page-builder.landkarte .link-btn:focus {
  background-color: var(--primary) !important;

}

.chart--page-builder:not(.landkarte, .landkarte-dwa) #link-button-cmp {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  pointer-events: all;
  color: var(--button-text);
  background: var(--button-background);
  padding: var(--button-padding);
  margin: var(--button-margin);
  border-radius: var(--button-border-radius);
  border: var(--button-border);
  box-shadow: var(--button-drop-shadow);
  width: auto;
  font-size: var(--font-size-medium);
  font-weight: normal;
  letter-spacing: 0.4px;
  text-transform: uppercase;

}

.chart--page-builder:not(.landkarte, .landkarte-dwa) #link-button-cmp:hover,
.chart--page-builder:not(.landkarte, .landkarte-dwa) #link-button-cmp:focus {
  background-color: var(--slide-link-background-hover);
  color: var(--button-text--hover);
}


.chart__btn .cbi {
  display: none;
}

.chart--page-builder:not(.landkarte, .landkarte-dwa) .link-btn span {
  gap: 5 !important;
}


.chart button {
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.chart__btn {
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
  font-weight: normal;
  text-transform: uppercase;
}

/* BUTTONS EXTENSIONS */
.cbook-container .chart button:hover,
.cbook-container .chart button:focus,
.chart button:hover,
.chart button:focus,
.exam-button:hover,
.exam-button:focus {
  /*border: var(--button-border-hover);*/
  color: var(--button-chart-text--hover);

  /***--->THEME **/
  background: var(--button-background-hover);
}

.exam-button {
  border: var(--button-border);
  margin: var(--button-margin);
  border-radius: var(--button-border-radius);
  box-shadow: var(--button-drop-shadow);
}

/* reverse colors btn */
/*
.cbook-container button.chart__btn-save,
.cbook-container .chart button.chart__btn-save,
.cbook-container .chart__btn.chart__btn-retry {
  color: var(--button-chart-text--hover);
  background: var(--button-background--hover);
  border: var(--button-border-hover);
}

.cbook-container .chart__btn.chart__btn-retry:focus,
.cbook-container .chart__btn.chart__btn-retry:hover,
.cbook-container .chart__btn.chart__btn-save:focus,
.cbook-container .chart__btn.chart__btn-save:hover {
  color: var(--button-text);
  background: var(--button-background);
  border: var(--button-border);
}*/

/*link inside button - as Template for clients - reseting stylings*/
.chart__btn.chart__btn-weiter a.social-activity__mention {
  color: var(--button-chart-text--hover);
  background: var(--button-background--hover);
  border: var(--button-border-hover);
  padding: var(--button-padding);
  margin: 0;
  border-radius: inherit;
  transition: none;
  font-size: var(--font-size-medium);
  font-family: var(--font-paragraph);
  line-height: 1.3;
}

body:not(.contrast--normal) .cbook-container .chart__btn.chart__btn-retry,
body:not(.contrast--normal) .chart__btn.chart__btn-weiter a.social-activity__mention {
  --button-background--hover: var(--white);
  --button-border: 1.5px solid var(--white);
}

body:not(.contrast--normal) .cbook-container button:not(#link-button-cmp, .close-btn, .ui-toggle-button.pressed):hover,
body:not(.contrast--normal) .chart button:not(#link-button-cmp, .close-btn, .ui-toggle-button.pressed):hover {
  color: var(--button-chart-text--hover);
  border: var(--button-border-hover);
}

body:not(.contrast--normal) .cbook-container button:not(#link-button-cmp, .close-btn, .ui-toggle-button.pressed, .chart__btn):focus,
body:not(.contrast--normal) .chart button:not(#link-button-cmp, .close-btn, .ui-toggle-button.pressed, .chart__btn):focus {
  color: var(--white);
  border: var(--button-border-hover);
}



body:not(.contrast--normal) .cbook-container .ui-modal button:not(#link-button-cmp, .close-btn, .ui-toggle-button.pressed):focus {
  color: var(--black) !important;
  border: var(--button-border-hover);
}

body:not(.contrast--normal) .ui-toggle-button:focus-within,
body:not(.contrast--normal) .ui-toggle-button:hover,
body:not(.contrast--normal) .social-app-options__btn:hover,
body:not(.contrast--normal) .social-app-options__btn:focus {
  color: var(--toggle-button-text--hover);
  background: var(--toggle-button-bg--hover);

}





.chart__btn.chart__btn-weiter:focus a.social-activity__mention,
.chart__btn.chart__btn-weiter:hover a.social-activity__mention {
  color: var(--button-text);
  background: var(--button-background);
  border: var(--button-border);
}

.chart__btn.chart__btn-weiter:has(a.social-activity__mention),
.chart__btn.chart__btn-weiter:has(a.social-activity__mention):hover,
.chart__btn.chart__btn-weiter:has(a.social-activity__mention):focus {
  padding: 0;
  border: none;
  background: transaprent;
}

/* buttions animation after disabled- enabled */
/*
.chart__btn-submit.chart__btn--disabled {
  animation:none;
}*/

body:not(.animation--hidden) .chart--dnd .chart__btn:not([disabled]),
body:not(.animation--hidden) .chart__btn.chart__btn-export:not([disabled]),
body:not(.animation--hidden) .chart__btn.chart__btn-save:not([disabled]),
body:not(.animation--hidden) .chart__btn.chart__btn-submit:not([disabled]),
body:not(.animation--hidden) .chart--multiple .chart__btn.chart__btn-submit:not(.chart__btn--disabled) {
  -webkit-animation: bounce-top 0.9s both;
  animation: bounce-top 0.9s both;

}

body:not(.animation--hidden) .chart__btn.chart__btn-save:not([disabled]) {
  animation-delay: 0.4s;
}


.chart--media.cover .media-image {
  width: 100%;
  object-fit: cover;
}

/** ALLGEMEIN -- END **/

/*************************************************************/
/* ************** TEMPLATES STYLINGS *************** */


/**********************************************************************/
/**********************************************************************/
/** CORE Interactions -- START **/

/*****************************************************************************************/
/* HS  DEMO */
/*  HS Powrspots  general Stylings */
.chart--hotspots .chart__body .chart__interaction {
  animation: fade-in 1s ease-in-out both;
}


.chart--hotspots .entity.entity__area.bg--transparent .area__content {
  --area-bg: transparent;
}

.chart--hotspots .entity.entity__area.bg--primary .area__content {
  --area-bg: var(--primary);
}

.chart--hotspots .entity.entity__area.bg--primary .area__content p {
  color: var(--text-inverse);
}


.chart--hotspots .entity.entity__area.bg--white .area__content {
  --area-bg: hsl(0deg 0% 100% / 39%);
  backdrop-filter: blur(4px);
}


.chart--hotspots .entity.entity__hotspot .hotspot__label {
  padding-inline: calc(50% + var(--space-medium));
  padding-left: calc(50% + var(--space-medium)) !important;
  /* THEME ?*/
  white-space: nowrap;
  color: var(--black);
  font-weight: 400;
  border-radius: var(--border-radius-small);
  max-height: 80%;
  min-height: 80%;
  display: flex;
  align-items: center;
  transition: all ease-in 0.3;
}

/* always show label on click */
.chart--hotspots .entity.entity__hotspot.label-always .hotspot__label,
.chart--hotspots .entity.entity__hotspot.bullet__open .hotspot__label {
  opacity: 1;
  width: auto;
  left: 50%;
  /* THEME ?*/
  transition: all ease-in 0.3;
}

.chart--hotspots .entity.entity__hotspot.bullet__open {
  z-index: 5;
}

.chart--hotspots .entity.entity__hotspot .hotspot__flex:hover,
.chart--hotspots .entity.entity__hotspot .hotspot__flex:focus {
  background: none;
}

.chart--hotspots .ui-popover__container {
  min-width: 30ch;
  border-radius: var(--border-radius-medium);
  max-height: 150px;
  min-height: 0px;
  left: 30px;
  top: 62px;
}

.chart--hotspots .entity.entity__hotspot {
  min-height: calc(var(--icon-size-s) + 0.5em);
  min-width: calc(var(--icon-size-s) + 0.5em);
  /* max-width: 50px;  /* --- only for points ?*/
}

.chart--hotspots .hotspot__bullet {
  background: var(--secondary);
  padding: 30%;
}

.chart--hotspots .hotspot__flex:focus {
  outline: 0px solid transparent;
}

.chart--hotspots .entity__hotspot:hover .hotspot__bullet,
.chart--hotspots .hotspot__bullet:hover {

  animation: none !important;
}


.chart--hotspots .white-hs .hotspot__bullet,
.chart--hotspots .white-hs.clicked .hotspot__bullet {
  background: var(--white);
}

.chart--hotspots .transparent-hs .hotspot__bullet,
.chart--hotspots .transparent-hs.clicked .hotspot__bullet {
  background: var(--white_00);
}


.chart--hotspots .clicked .hotspot__bullet {
  animation: none;
}

.chart--hotspots .hotspot__bullet:has(img.hotspot__icon) {
  padding: 0;
}


.chart--hotspots .hotspot__bullet * {
  /*fill: var(--primary-500);*/
  fill: var(--white);
}

.chart--hotspots .hotspot__bullet .cbi * {
  stroke-width: 10px;
  width: 80%;
}

body:not(.contrast--normal) .chart--hotspots .hotspot__bullet .cbi * {
  color: var(--black);
}



body:not(.contrast--normal) .chart--hotspots .entity:not(.bullet__open, .clicked) .hotspot__bullet {
  color: var(--primary);
}

.chart--hotspots .entity.entity__hotspot .hotspot__flex .hotspot__bullet>.cbi {
  scale: 2.5;
}



.ui-modal {
  border-radius: var(--border-radius-vc);
}

.chart--hotspots .hotspots-modal {
  position: absolute;
}

.chart--hotspots .hotspots-modal .ui-modal__content {
  max-height: 100%;
  gap: var(--space-x-small);
  pointer-events: all;
  border-radius: var(--border-radius-vc);
  box-shadow: var(--shadow-modal);
  background-color: var(--info-50);
  padding: var(--space-x-large);
  width: 100%;
}

.ui-modal__wrapper {
  width: 100%;
  padding-right: 0;
  max-width: 100%;
  /*calc(var(--icon-size-m) + 1 * var(--space-x-small));*/
}

.ui-modal .ui-modal__close {
  border: none;
  color: var(--tertiary);
  --button-background: transparent;
  height: auto;
  width: auto;
  aspect-ratio: 1;
  transform: translate(var(--space-medium), calc(-1*var(--space-medium)));
  border: 1.5px solid transparent;
}

.chart--hotspots .ui-modal .ui-modal__close {
  position: absolute;
  right: calc(-0.5*var(--space-x-large));
  top: calc(-0.5*var(--space-x-large));
}



body.contrast--normal .ui-modal__bg {
  background-color: hsla(195, 30%, 92%, 0.4);
}

.chart--hotspots .ui-modal__bg {
  backdrop-filter: blur(2px);
}

/* modal overlay column body */

.chart--hotspots .hotspots-modal .ui-modal .overlay__column.overlay__body--2-cols {
  flex-direction: column;
}

.chart--hotspots .hotspots-modal .overlay__column .overlay__left,
.chart--hotspots .hotspots-modal .overlay__column .overlay__right {
  width: 100%;
}


.chart--hotspots .hotspots-modal .ui-modal__content-header h2 {
  word-break: auto-phrase;
  font-size: var(--font-size-x-large);
  color: var(--text);
  padding-right: calc(var(--icon-size-m) + 1 * var(--space-x-small));
  margin-bottom: var(--space-large);
}


/** Powerspots Hotspots Agenda -- START **/

#app-responsive-hotspots .controls__volume-area .controls__btn {
  color: var(--white);
}

#app-responsive-hotspots .controls__volume-area .controls__btn:hover,
#app-responsive-hotspots .controls__volume-area .controls__btn:focus {
  background-color: transparent;
}

/** Powerspots Hotspots Agenda -- END **/



/*  THEME -----------------------------------------*/
.ui-modal__focus {
  max-height: var(--stage-height);
  margin-top: var(--header-height);
}

/* HS  .hotspotschart03 --------------------------- */



.chart--hotspots.hotspotschart03 .chart__body {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  overflow: hidden;
}

.chart--hotspots.hotspotschart03 #app-responsive-hotspots {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.chart--hotspots.hotspotschart03 .chart__interaction {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  padding: 0 !important;

}

.chart--hotspots.hotspotschart03.full-flex .entity.entity__area {
  top: 0px;
  left: 0px;
}

.chart--hotspots.hotspotschart03.full-flex .entity.entity__area .area__content {
  padding: 0px;
}

.chart--hotspots.hotspotschart03 img.area__background-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.chart--hotspots.hotspotschart03 header.chart__header {
  position: absolute !important;
  z-index: 10;
  top: 10%;
  left: 0%;
  /* transform: translateY(-50%); */
  min-width: 350px;
  background-color: var(--white);
  padding: var(--chart-content-padding-block) !important;
  padding-left: calc(var(--chart-content-padding-block)*2) !important;
  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 0px;
  width: 50%;
  max-height: 40%;
  min-height: 40% !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
}



.chart--hotspots.hotspotschart03 .entity.entity__hotspot .hotspot__flex,
.chart--hotspots.hotspotschart03 .entity.entity__hotspot .hotspot__bullet {
  position: relative !important;
  z-index: 100 !important;
}

.chart--hotspots.hotspotschart03 .ui-popover__container,
.chart--hotspots.hotspotschart03 .ui-popover__container:focus,
.chart--hotspots.hotspotschart03 .ui-popover__container:focus-within {
  z-index: 50 !important;
}

.chart--hotspots.hotspotschart03 .entity.entity__hotspot .hotspot__label {
  z-index: 10 !important;
  border: 0px;
  width: 30ch;
  white-space: normal !important;
  text-align: left !important;
}

.chart--hotspots.hotspotschart03 .ui-popover__container .ui-popover__wrapper {
  width: 45ch !important;

}

.chart--hotspots.hotspotschart03 .ui-popover__container,
.chart--hotspots.hotspotschart03 .ui-popover__container:focus,
.chart--hotspots.hotspotschart03 .ui-popover__container:focus-within {
  z-index: 50 !important;
  top: 80%
}

.chart--hotspots.hotspotschart03 .ui-popover__content {
  max-height: 150px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  display: block !important;
  padding-right: 5px !important;
}

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

  .chart--hotspots.hotspotschart03 .entity.entity__hotspot .PopOver-left .ui-popover__wrapper {
    /*right: 45% !important; braucht man das?*/

  }
}

/* --- MOBILE ANPASSUNG FÜR CHART 03 (unter 900px) --- */
@media screen and (max-width: 935px) {

  .chart--hotspots.hotspotschart03 .chart__body .chart__interaction,
  .chart--hotspots.hotspotschart03 .entity.entity__area,
  .chart--hotspots.hotspotschart03 .area__content,
  .chart--hotspots.hotspotschart03 .entity .area__content .area__background {
    position: relative;
    width: 100% !important;
    height: auto !important;
    display: block;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
  }

  .chart--hotspots.hotspotschart03 .chart__interaction {
    display: block;
  }

  /*   .chart--hotspots.hotspotschart03 .entity.entity__area,
  .chart--hotspots.hotspotschart03 .area__content,
  .chart--hotspots.hotspotschart03 .area__background {
    display: block !important;

  } */

  .chart--hotspots.hotspotschart03 img.area__background-image {
    position: relative;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .chart--hotspots.hotspotschart03 .chart__body {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .chart--hotspots.hotspotschart03 header.chart__header {
    position: relative !important;
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 70px !important;
    padding: var(--chart-content-padding-block) !important;
  }

  .chart--hotspots.hotspotschart03 .chart__interaction {
    order: 2 !important;
  }

  .chart--hotspots.hotspotschart03 .entity.entity__hotspot .hotspot__label {
    width: 22ch;
    padding-right: 1ch;

  }

  .chart--hotspots.hotspotschart03 .entity.entity__hotspot .hotspot__label.PopOver-left {
    width: 22ch !important;
    padding-right: var(--space-medium);
    padding-left: 1ch;

  }



  .chart--hotspots.hotspotschart03 .ui-popover__container {
    position: fixed !important;
    left: 7% !important;
    right: 7% !important;

    /* top: 75% !important; */
    top: auto !important;
    bottom: calc(0.7 * var(--footer-height));
    transform: translateY(-50%) !important;
    /* Exakt mittig */

    width: 86% !important;
    max-width: 90vw !important;
  }

  .chart--hotspots.hotspotschart03 .ui-popover__container,
  .chart--hotspots.hotspotschart03 .ui-popover__container:focus,
  .chart--hotspots.hotspotschart03 .ui-popover__container:focus-within {
    z-index: 999 !important;
  }

  .chart--hotspots.hotspotschart03 .ui-popover__container .ui-popover__wrapper {
    width: auto !important;
  }
}

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


  .entity__hotspot.popLeft .hotspot__label {
    left: calc(-165px) !important;
  }

  body:not(.font-size--normal) .entity__hotspot.popLeft .hotspot__label {
    left: calc(-285px) !important;
  }

}

@media screen and (orientation:landscape) and (max-width: 935px) {
  .chart--hotspots.hotspotschart03 .ui-popover__container {
    top: auto !important;
    bottom: calc(0.7 * var(--footer-height));
  }
}


/*  @media only screen and (max-width: 500px) {
body:not(.font-size--normal)
  .chart--hotspots.hotspotschart03.full-flex .chart__body .chart__interaction {
    display: flex;
    flex-direction: column;
    padding-inline: var(--chart-content-padding-inline)!important;
}

body:not(.font-size--normal)
.chart--hotspots.hotspotschart03.full-flex .entity.entity__area {
        position: absolute;
}

body:not(.font-size--normal)
.chart--hotspots.hotspotschart03.full-flex .entity.entity__hotspot {
    position: unset;
}

body:not(.font-size--normal)   .entity__hotspot.popLeft .hotspot__label {
    left: 50% !important;
}
}  */

@media only screen and (max-width: 500px) {
  .chart--hotspots.hotspotschart03.full-flex .chart__body .chart__interaction {
    overflow: auto;
  }

  body:not(.font-size--normal) .entity__hotspot.popLeft .hotspot__label {
    left: 50% !important;
  }
}

/* HS  .hotspotschart02 --------------------------- */
.chart--hotspots.hotspotschart02 header.chart__header {
  width: 50%;
  height: 100%;
  min-width: 350px;
}

.chart--hotspots.hotspotschart02 .chart__body .chart__interaction {
  position: relative;
  width: 50%;
  left: 50%;
  right: 0;
}


.chart--hotspots.hotspotschart02 .ui-modal__bg {
  backdrop-filter: none !important;
  background-color: transparent !important;
}

@media only screen and (min-width: 500px) {
  .chart--hotspots.hotspotschart02:not(.overlay-fullscreen) .ui-modal__bg {
    background-color: transparent;
  }

  .chart--hotspots.hotspotschart02:not(.overlay-fullscreen) .hotspots-modal {
    justify-content: flex-end;
    align-items: flex-start;
  }

  .chart--hotspots.hotspotschart02:not(.overlay-fullscreen) .ui-modal__focus {
    /*   max-height: 100%; */

    width: 90%;
    align-self: center;
    top: auto;
    position: relative;
    left: auto;
    margin-top: 0;

  }

  .chart--hotspots.hotspotschart02:not(.overlay-fullscreen) .ui-modal {
    margin-right: 5%;
    max-width: 90%;
    width: 45%;
    border-width: 0px;
    margin-top: 5%;
    margin-bottom: 5%;
  }
}

@media (max-width: 992px) {

  /* HOTSPOTS 02 */

  .chart--hotspots.hotspotschart02 #app-responsive-hotspots .chart__body {
    justify-content: flex-start;
  }

  .chart--hotspots.hotspotschart02 header.chart__header {
    position: relative;
    height: fit-content;
    width: 100%;
    min-width: 290px;
  }

  .chart--hotspots.hotspotschart02 .chart__body .chart__interaction {
    left: 0;
    width: 100%;
    min-height: 50vw;
  }

  .chart--hotspots.hotspotschart02 .entity.entity__hotspot {
    /*   min-height: 35px; */
    min-width: 35px;
  }


  .chart--hotspots.hotspotschart02 .hotspots-modal {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 90%;
    height: 100%;
    z-index: 10;

    justify-content: center;
    align-items: flex-end;
    padding: 0;
    pointer-events: none;
    margin-left: 5%;
    margin-top: 5%;
  }

  .chart--hotspots.hotspotschart02:not(.overlay-fullscreen) .ui-modal {
    width: 100%;
    border-width: 0px;
    margin-top: 5%;
    margin-bottom: 5%;
    max-height: 50%;

  }

  .chart--hotspots.hotspotschart02 .hotspots-modal .ui-modal__content {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    padding: var(--space-x-large);
    background-color: var(--white);
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* HS  .hotspotschart01 --------------------------- */
.chart--hotspots.hotspotschart01 header.chart__header {
  width: 50%;
  height: 100%;
  min-width: 350px;
}

.chart--hotspots.hotspotschart01 .chart__body .chart__interaction {
  position: relative;
  width: 50%;
  left: 50%;
  right: 0;
}


@media only screen and (min-width: 500px) {
  .chart--hotspots.hotspotschart01:not(.overlay-fullscreen) .ui-modal__bg {
    background-color: transparent;
  }

  .chart--hotspots.hotspotschart01:not(.overlay-fullscreen) .hotspots-modal {
    justify-content: flex-start;
    align-items: flex-end;
  }

  .chart--hotspots.hotspotschart01:not(.overlay-fullscreen) .ui-modal__focus {
    /* max-height: 45%; */
    width: 90%;
    align-self: center;
    top: auto;
    position: relative;
    left: auto;
    margin: auto;

  }

  .chart--hotspots.hotspotschart01:not(.overlay-fullscreen) .ui-modal {
    margin: var(--chart-content-padding);
    max-width: 90%;
    width: 90%;
    border-width: 0px;
  }


}

@media (max-width: 992px) {

  /* HOTSPOTS 01 */

  .chart--hotspots.hotspotschart01 #app-responsive-hotspots .chart__body {
    justify-content: flex-start;
  }

  .chart--hotspots.hotspotschart01 header.chart__header {
    position: relative;
    height: fit-content;
    width: 100%;
    min-width: 290px;
  }

  .chart--hotspots.hotspotschart01 .chart__body .chart__interaction {
    left: 0;
    width: 100%;
    min-height: 50vw;
  }

  .chart--hotspots.hotspotschart01 .entity.entity__hotspot {
    /*  min-height: 35px; */
    min-width: 35px;
  }


}


.chart--hotspots .entity.entity__area .area__content .area__background .area__background-image {
  display: block;
}

.chart--hotspots .entity.entity__area.obj--top .area__content .area__background .area__background-image {
  object-position: top;
}


/* animations - START */
@keyframes pulse-animation-blur {
  0% {
    box-shadow: 0 0 0 0px var(--tetriary-500_10);
  }

  100% {
    box-shadow: 0 0 10px 10px var(--tetriary-100);
  }
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px var(--tetriary-500_10);
  }

  100% {
    box-shadow: 0 0 0 10px var(--tetriary-100);
  }
}

/* animations - END */
/** ****************************************************************** **/
/* .entity.entity__hotspot.label-on-click   show label on click */
/* Hotspots FULL FLEX - class im Theme ?  header and interaction container flex , hs relative to area backgorund*/
.chart--hotspots.full-flex .chart__body {
  display: flex;
  min-height: 100%;
}

.chart--hotspots.full-flex.column .chart__body {
  flex-direction: column;
  justify-content: flex-start !important;
}

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

.chart--hotspots.full-flex header.chart__header {
  min-height: fit-content;
  /* backened only?*/
}

.chart--hotspots.full-flex .chart__body .chart__interaction {
  position: relative;
  height: auto;
  flex-grow: 1;
  min-height: 35vw;
  margin-top: auto;
  margin-bottom: auto;
  max-height: fit-content;
}

.chart--hotspots.full-flex .entity.entity__area {
  position: relative;

}

.chart--hotspots.full-flex .entity.entity__area .area__content {
  overflow: hidden;
  border-radius: 0;
}

body:not(.font-size--normal) chart--hotspots.full-flex .entity.entity__area .area__content {
  padding: 5px;
}

.chart--hotspots.full-flex .entity.entity__area .area__content .area__background .area__background-image {
  overflow-y: visible;
  display: block;
}

.chart--hotspots .ui-popover .bullet__text p img {
  width: 100%;
}

/* overlay postion right fix min 500px */
@media only screen and (min-width: 500px) {
  .chart--hotspots.overlay-fix-right .hotspots-modal {
    justify-content: flex-end;
  }

  .chart--hotspots.overlay-fix-right .ui-modal__focus {
    align-self: flex-end;
    max-height: 50%;
    max-width: 40%;
    min-width: 350px;
    margin: var(--chart-content-padding);
    padding-right: calc(1.5 * var(--space-large));
    /* not for each client */
  }

  .chart--hotspots.overlay-fix-right .ui-modal__bg {
    background-color: transparent;
  }

  .chart--hotspots.overlay-fix-right .ui-modal {
    border-width: 0px;
  }
}

@media only screen and (max-width: 500px) {
  .chart--hotspots.overlay-fix-right .ui-modal__focus {
    margin: var(--chart-content-padding);
    width: 100%;
  }

  .chart--hotspots .ui-modal,
  .chart--hotspots .hotspots-modal .ui-modal__content {
    width: 95%;
  }

  .chart--hotspots .hotspots-modal .ui-modal__wrapper {
    width: 100%;
    padding-right: calc(var(--space-small));
  }

  .chart--hotspots .hotspots-modal .ui-modal__content {
    align-items: flex-start;
  }

  /*     .chart--hotspots.full-flex .chart__body .chart__interaction {
    min-height: 50vh;
} */
}

/*paddings */
.chart--hotspots.hotspotschart-four-areas .chart__body .chart__interaction,
.chart--hotspots.full-flex .chart__body .chart__interaction {
  padding: var(--chart-content-padding, var(--space-medium) 4rem);
  padding-top: 0;
  margin-bottom: 1em;
}

.chart--hotspots.full-flex .chart__body .chart__interaction {
  padding-bottom: calc(0.5*var(--chart-content-padding-block));
}

/* media for Varible  -- not needed here>>>*/
/*
@media only screen and (min-width: 768px) {
    .chart--hotspots.hotspotschart-four-areas .chart__body .chart__interaction .chart--hotspots.full-flex .chart__body .chart__interaction {
        padding: var(--chart-content-padding, var(--space-medium) 4rem);
        padding-top: 0
    }
}

@media only screen and (min-width: 992px) {

    .chart--hotspots.hotspotschart-four-areas .chart__body .chart__interaction,
    .chart--hotspots.full-flex .chart__body .chart__interaction {
        padding: var(--chart-content-padding, var(--space-large) 4rem);
        padding-top: 0
    }
}*/
/* HS 4 areas hotspotschart-four-areas + overlay */
/* fix in theme */
.chart--hotspots #hotspots__grid {
  width: calc(var(--bullet-width) * var(--grid-columns));
  height: calc(var(--bullet-height) * var(--grid-rows));
  margin-bottom: 1em;
}

.chart--hotspots #hotspots__grid .entity.entity__size--percentage-unit.entity__hotspot.entity--grid {
  width: var(--bullet-width);
  height: var(--bullet-height);
}

@media only screen and (max-width: 768px) {
  .chart--hotspots #hotspots__grid {
    gap: var(--space-small);
  }

  .chart--hotspots.hotspotschart-four-areas .chart__body .chart__interaction {
    min-height: 50vw;
  }
}

.chart--hotspots:not(.hotspotschart-four-areas) .entity.entity__hotspot {
  max-width: 60px;
  min-width: 30px;
  /* --- only for points */
}

body#cbook-body:not(.contrast--normal) .chart--hotspots.hotspotschart-four-areas .entity.entity__hotspot .hotspot__label {
  border: none;
  border-radius: var(--border-radius-large);
}

body#cbook-body .chart--hotspots.hotspotschart-four-areas .bullet__open .hotspot__bullet,
body#cbook-body .chart--hotspots.hotspotschart-four-areas .clicked .hotspot__bullet {
  background: var(--secondary);
  border: var(--button-border-hover);
}

.chart--hotspots.hotspotschart-four-areas .entity.entity__hotspot .hotspot__flex .hotspot__bullet {
  border-radius: var(--border-radius-large);
  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.25);
  padding: 0;
}

.chart--hotspots.hotspotschart-four-areas .hotspot__flex {
  border-radius: var(--border-radius-large);
}

.chart--hotspots.hotspotschart-four-areas .entity.entity__hotspot.label-always .hotspot__label,
.chart--hotspots.hotspotschart-four-areas .entity.entity__hotspot.bullet__open .hotspot__label,
.chart--hotspots.hotspotschart-four-areas .entity.entity__hotspot.clicked .hotspot__label {
  opacity: 1;
  width: 100%;
  left: 0 !important;
  padding: var(--space-small) var(--space-medium) !important;
  z-index: 5;
  background-color: transparent;
  border: none;
  color: var(--white);
  text-align: center;
  justify-content: center;
  font-size: var(--font-size-large);
}

.chart--hotspots.hotspotschart-four-areas .entity.entity__hotspot.clicked .hotspot__label {
  color: var(--primary-500);
}

.chart--hotspots.hotspotschart-four-areas .entity.entity__hotspot .hotspot__flex .hotspot__bullet>.cbi {
  margin: 0;
  display: none;
}

#app-responsive-hotspots .hotspotschart-four-areas .entity:hover,
#app-responsive-hotspots .hotspotschart-four-areas .entity:focus,
#app-responsive-hotspots .hotspotschart-four-areas .entity:focus-visible {
  transform: scale(1.04);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  z-index: 99999;
}

#app-responsive-hotspots .entity:focus,
#app-responsive-hotspots .entity:focus-visible {
  outline: var(--focus-outline);
}

/* contrasts */
body#cbook-body:not(.contrast--normal) .chart--hotspots .entity.entity__hotspot .hotspot__label {
  border: 2px solid var(--black);
}

/* Hotspots custom 3 columns */

.chart--hotspots.columns-3 .entity.entity__area .area__content .area__background {
  left: 50%;
  width: 85%;
  height: 85%;
  translate: -50% -10%;
}


.chart--hotspots.columns-3 .entity.entity__area .area__content {
  background-color: var(--gray-100);
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}


.chart--hotspots.columns-3 #hotspots__grid .entity.entity__hotspot.entity--grid {
  transform: translateY(24vh);
  position: relative;
}

.chart--hotspots.columns-3 #hotspots__grid .entity.entity__area {
  min-width: 100%;
}


.chart--hotspots #hotspots__grid .entity.entity__size--percentage-unit.entity__area.entity--grid {
  width: var(--area-width);
  height: var(--area-height);
}

/* ---- Powerspots END------ */
/**********************************************************/

/** Home Page -- START **/

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

  .gjs-widget-container.homepage {
    margin: 0px auto;
    width: 80% !important;
  }
}

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

  .gjs-widget-container.homepage {
    width: 90% !important;
  }
}


/** Home Page -- END **/
/* ---- Wordcloud demo ------ */

#app-community-wordcloud .my-tags__item {
  background: var(--primary);
  color: var(--text-inverse);
  font-size: var(--font-size-medium);
  gap: 0.5em;
  border-radius: var(--border-radius-mc);
  padding-right: var(--space-x-small);
}

body:not(.font-size--normal) #app-community-wordcloud .my-tags__item {
  padding-right: var(--space-small);
}


#app-community-wordcloud .my-tags__item button {
  color: var(--primary);
  border-radius: var(--border-radius-mc);
  margin: var(--space-x-small) 0 var(--space-x-small) var(--space-medium);
  aspect-ratio: 1;

}

#app-community-wordcloud .input-container button.addTag__button {
  background: var(--button-background);
  padding: 0.5rem;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  margin: 0;
  height: 100%;
  aspect-ratio: 1;
  color: var(--white);

}

#app-community-wordcloud .input-container {
  flex-direction: row;
}

#app-community-wordcloud .input-container .input-field input {
  padding-right: 0;
  padding-left: 60px;
  border: none;
  border-bottom: var(--input-border);
  border-bottom-width: 1.5px;
  border-bottom-left-radius: var(--button-border-radius);
  border-top-left-radius: var(--button-border-radius);
}


#app-community-wordcloud .input-container .input-field input:focus-visible,
#app-community-wordcloud .input-container .input-field input:focus {
  outline-color: var(--primary);
}


#app-community-wordcloud .input-container .input-field input,
::-webkit-input-placeholder {
  font-size: var(--font-size-medium);
}

/*
.cbi-clear::after {
  content: "x";
  position: absolute;
  font-style: normal;
  color: inherit;
}*/

#app-community-wordcloud .wordcloud-label {
  font-family: var(--font-paragraph) !important;
}


body:not(.contrast--normal) #app-community-wordcloud .wordcloud-label {
  fill: var(--primary) !important;
}

/*
#app-community-wordcloud .wordcloud-label:nth-child(-n + 6) {
font-size: 60px !important;
}

#app-community-wordcloud .wordcloud-label:nth-child(n + 7):nth-child(-n + 19) {
font-size: 10px !important;
}

#app-community-wordcloud .wordcloud-label:nth-child(n + 20):nth-child(-n + 38) {
font-size: 10px !important;
}*/
/*Aniamtion */
.tracking-in-expand {
  -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}


/* ---- PINWAND ---- START ---- */
/* not theme-   DWA  Pinwand */
#app-pinnwand .container .chart-title .user-controls {
  position: fixed;
  right: 0;
  bottom: 0;
  height: auto;
  padding: var(--chart-content-padding, 0);
  padding-right: 2.5rem;
  z-index: 1;
}

/* not theme  DWA */
#app-pinnwand .container .postit-container .postit {
  background-color: var(--gray-100) !important;
  color: var(--text) !important;
  fill: var(--text) !important;
  border-radius: var(--border-radius-medium);
}

.container .chart-body.postit .postit-container .postit-header svg,
#app-pinnwand .container .postit-container .postit .edit-post svg {
  fill: var(--text) !important;
}


/*not theme DWA */
#app-pinnwand button {
  margin-left: 10px !important;
  height: 44px !important;
}

/* theme
.show-my-posts {
  padding: .5ch 10px;
  height: 44px !important;
}
*/
/* theme  + var */
/*
.print-postits span,
.bulkUpload-postits span {
  display: none;
}
*/

/* ---- PINWAND ---- END ---- */


/* extensions padding */
#extension-body .chart {
  font-family: var(--font-paragraph);
  color: var(--text);
  width: auto;
}

/* extensions padding */
#app-community-voting .chart {
  height: auto;
  min-height: calc(100vh - 1.92 *var(--footer-height));
}

/* Community Chart Essay Reflexion ---- ESSAY ---- START ---- */
/*  ESSAY */
.chart--essay .rte-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
  width: -moz-fit-content;
  width: 100%;
  animation: fade-in 1s both;
}


/* essay background */
div.chart--essay:not(.editor--essay) .chart__background {
  position: fixed;
}

/* .chart--essay {
    position: absolute;
} */
.chart--essay .RichTextEditor__editor___1QqIU {
  min-height: 10em;
}

.notranslate.public-DraftEditor-content {
  min-height: 12rem;
}



/** Community Chart Essay Reflexion -- END **/



/*  ESSAY + MC */
.chart__buttonbar {
  width: 100%;
  position: static;
  /* here better than sticky */
  position: relative;
  z-index: 2;
}



/* Exam end page - START */
.result-details {
  margin: 1.5rem 0;
}

.result-details__list {
  width: auto;
  padding: 1ch;
  border: var(--button-border-hover);
}


.result-details__item--failed,
.result-details__item--success {
  color: var(--text);
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 1ch;
}

.result-details__item--failed:before,
.result-details__item--success:before {
  content: "\2714";
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  font-size: smaller;
}

.result-details__item--success:before {
  content: "\2714";
}

.result-details__item--failed:before {
  content: "\2718";
}

/* Exam end page - END */


/** Right/Wrong - Richitg/Falsch Interaction --- START **/

.chart--single .chart__interaction {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 2em;
  width: 100%;
  margin-top: 2em;
  margin-bottom: 2em;
}

.chart--single .single__answer label {
  width: 100%;
  display: flex;
  justify-content: center;
  border-radius: var(--border-radius-mc) var(--border-radius-mc) 0 0;
  background: var(--tertiary);
  color: var(--white);
  margin: 0;
  gap: 0.5em;
}

.chart--single .single__answer.single__answer--selected label,
.chart--single .single__answer:hover label,
.chart--single .single__answer:focus label {
  background-color: var(--tertiary);
  color: var(--white);
}



/* .single__image {
  width: 320px;
  height: 243px;
}
 */
.chart--single .single__item {
  width: clamp(350px, 22%, 34vw);
}

.chart--single .single__answer {
  border-radius: var(--border-radius-mc);
  margin: 0;
  /*  width: 36%; */
  width: 100%;
  height: auto;
}

.chart--single .single__answer img {
  border-radius: var(--border-radius-mc) var(--border-radius-mc);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
}


.single__answer--incorrect,
.single__answer--correct {
  pointer-events: none;
  opacity: 1.0;
}

.single__answer--incorrect[aria-checked="true"] img,
.single__answer--incorrect[aria-checked="true"] label {
  border: 2px solid var(--false);
}

.single__answer--incorrect[aria-checked="true"] label {
  border-bottom: none;
}

.single__answer--incorrect[aria-checked="true"] img {
  border-top: none;
}


.chart--single .single__answer--incorrect label:before,
.chart--single .single__answer--correct label:before {
  content: "Richtig";
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  font-size: var(--font-size-large);
  font-weight: 300;

}

.chart--single--evaluated .single__answer img {
  border-radius: 0 0 var(--border-radius-mc) var(--border-radius-mc);
}



.chart.chart--single .chart__header .heading__overline-text {
  font-family: var(--font-size-medium);
  font-size: var(--font-paragraph);
  color: var(--black);
  margin-top: 0.25rem;
  margin-bottom: 0.85rem;
}

.chart.chart--single .chart__header h2 {
  font-size: var(--font-size-xxx-large);
  margin-bottom: 2rem;
}


body:not(.font-size--normal) .chart--single .single__item {
  width: calc(var(--text-multiplier)*clamp(350px, 22%, 34vw));
}


@media only screen and (max-width: 480px) {
  /*   .single__image {
    width: 280px;
    height: 200px;
  }
 */

  .single__answer {
    width: 40%;
    height: auto;
  }

}

/*  Right/Wrong - Richitg/Falsch Interaction --- END  */


/* MC - START */
/* MC multiple Choice */
.chart.chart--multiple .chart__body {
  background-image: url('');
  background-repeat: no-repeat;
  background-position: center 85%;
  background-size: cover;
}



.chart--multiple:not(.hinweis) .multiple__wrapper {
  margin-top: 2rem;
}

@media screen and (min-width:769px) {
  .chart--multiple.hinweis .multiple__wrapper {
    margin-block: auto;
  }

  .chart--multiple .multiple__wrapper {
    margin-bottom: calc(2rem * var(--text-multiplier));
  }
}


.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer:hover,
.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer:focus,
.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer {
  border-radius: var(--border-radius-medium);
}


.chart.chart--multiple .single__answers .multiple__item .multiple__answer:hover,
.chart.chart--multiple .single__answers .multiple__item .multiple__answer:focus,
.chart.chart--multiple .single__answers .multiple__item .multiple__answer {
  border-radius: var(--border-radius-medium);
  z-index: 1;
}


.chart__body .chart__interaction .multiple__answers .multiple__item .multiple__answer:before,
.chart__body .chart__interaction .single__answers .multiple__item .multiple__answer:before {
  display: none;
}

.chart.chart--multiple.chart--multiple--evaluated .multiple__answers,
.chart__body .chart__interaction .multiple__answers,
.chart.chart--multiple.chart--multiple--evaluated .single__answers,
.chart__body .chart__interaction .single__answers {
  padding: 0;
}

.chart.chart--multiple .single__answers,
.chart.chart--multiple .multiple__answers,
.chart.chart--multiple .multiple__answers,
.chart.chart--multiple .multiple__answers {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 50%;
  gap: 10px;
  align-content: flex-start;
}

.multiple__answer {
  width: 90% !important;
}

.chart--multiple--evaluated:has(.global-feedback__content) .chart__buttonbar .chart__btn-feedback,
.chart--multiple--evaluated .chart__buttonbar .chart__btn-submit {
  display: none;
}

.chart.chart--multiple .single__answers .multiple__item .multiple__answer,
.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer {
  border-radius: var(--border-radius-mc);
  background: var(--mc-answer-label-bg, --tertiary);
  color: var(--text);
  box-shadow: var(--button-drop-shadow);
  height: auto !important;
  justify-content: left;
  padding: 0.5ch 2ch;
  width: var(--mc-answer-width);
  margin-bottom: 1ch !important;
  /*theme for SC*/
  cursor: pointer;
  display: flex;
  padding: 0px;
}


.chart.chart--multiple .single__answers .multiple__item .multiple__answer:before,
.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer:before {
  margin: 0 1ch 0 0;
  content: '';
  display: block;
  flex-shrink: 0;

  aspect-ratio: 1 / 1;
  width: 50px;
  height: auto;

  border: 3px solid var(--mc-answer-label-bg-selected, var(--secondary));
  border-radius: var(--border-radius-mc) 0 0 var(--border-radius-mc);

  background-color: transparent;
  transition: all 0.2s ease;
}

.chart.chart--multiple .multiple__item input {
  width: var(--mc-answer-width);
}

.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer:hover,
.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer:focus,
.chart.chart--multiple .single__answers .multiple__item .multiple__answer:hover,
.chart.chart--multiple .single__answers .multiple__item .multiple__answer:focus {
  background-color: var(--mc-answer-label-bg-hover, var(--secondary));
  color: var(--white);
  border-radius: var(--border-radius-mc);
}

.chart.chart--multiple:not(.chart--multiple--evaluated) .multiple__answers .multiple__item .multiple__answer--selected,
.chart.chart--multiple:not(.chart--multiple--evaluated) .single__answers .multiple__item .multiple__answer--selected {
  background-color: var(--mc-answer-label-bg-selected, var(--secondary));
  color: var(--white);
}


.chart.chart--multiple:not(.chart--multiple--evaluated) .multiple__answers .multiple__answer--selected::before,
.chart.chart--multiple:not(.chart--multiple--evaluated) .single__answers .multiple__answer--selected::before {
  background-color: var(--mc-answer-label-bg, var(--white));
  border-color: var(--mc-answer-label-bg-selected, var(--secondary));

  background-image: none;
  box-shadow: none;
}


.chart.chart--multiple:not(.chart--multiple--evaluated) .single__answers .multiple__answer--selected::after,
.chart.chart--multiple:not(.chart--multiple--evaluated) .multiple__answers .multiple__answer--selected::after {
  content: '';
  position: absolute;
  display: block;

  width: 40px;
  height: 40px;

  background-color: var(--mc-answer-label-bg-selected, var(--secondary));

  border-radius: var(--border-radius-mc) 0 0 var(--border-radius-mc);

  top: 50%;
  transform: translateY(-50%);
  left: 7.5px;
  z-index: 20000000;
  pointer-events: none;
}

body:not(.font-size--normal) .chart.chart--multiple:not(.chart--multiple--evaluated) .single__answers .multiple__answer--selected::after,
body:not(.font-size--normal) .chart.chart--multiple:not(.chart--multiple--evaluated) .multiple__answers .multiple__answer--selected::after {

  width: 80px;
  height: 80px;
}



.chart.chart--multiple--evaluated .chart__body .multiple__item .multiple__answer__status--correctly-selected {
  background: var(--true);
  border: 2px solid var(--true);
  color: var(--text-inverse);

}







.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--missed {
  border: 2px solid var(--mc-answer-label-border-missed, var(--tertiary));
  color: var(--text);
}

.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer__status--incorrectly-selected {
  background: var(--false);
  color: var(--white);
  border: 2px solid var(--false);

}

body.contrast--normal .chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--incorrect.multiple__answer__status--correctly-not-selected {
  border: none;
}

body:not(.contrast--normal) .chart.chart--multiple--evaluated .chart__body .multiple__item .multiple__answer__status--correctly-selected {
  color: var(--text-inverse);
}

body:not(.contrast--normal) .chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer__status--incorrectly-selected {
  background: var(--white);
  color: var(--black);
}

/* MC FEEDBACK  start */

.boxColor {
  padding: 1.5rem;
}

.boxColor.boxGreen {
  background-color: var(--primary);
  border-radius: var(--border-radius-small);
}

.boxColor h2,
.boxColor p {
  color: var(--white);
}

.boxColor>div {
  display: flex;
  gap: 1em;
  align-items: flex-start;
}

.boxColor img {
  width: 15%;
  margin-block-start: 0.3em;
}


/* Shape for Feedback
.boxColor.bottom.right,
.global-feedback__content:has(.boxColor.bottom.right) {
  clip-path: polygon(0% 75.795%, 0% 75.795%, 0.051% 76.597%, 0.198% 77.368%, 0.437% 78.097%, 0.759% 78.777%, 1.16% 79.399%, 1.631% 79.954%, 2.167% 80.433%, 2.762% 80.828%, 3.408% 81.13%, 4.1% 81.33%, 94.112% 99.778%, 94.112% 99.778%, 95.022% 99.87%, 95.902% 99.781%, 96.736% 99.523%, 97.509% 99.112%, 98.206% 98.562%, 98.81% 97.889%, 99.308% 97.105%, 99.682% 96.227%, 99.918% 95.268%, 100% 94.243%, 100% 5.626%, 100% 5.626%, 99.935% 4.713%, 99.745% 3.848%, 99.443% 3.04%, 99.036% 2.303%, 98.537% 1.648%, 97.955% 1.085%, 97.301% 0.628%, 96.585% 0.287%, 95.816% 0.074%, 95.006% 0%, 4.994% 0%, 4.994% 0%, 4.184% 0.074%, 3.415% 0.287%, 2.699% 0.628%, 2.045% 1.085%, 1.463% 1.648%, 0.964% 2.303%, 0.557% 3.04%, 0.255% 3.848%, 0.065% 4.713%, 0% 5.626%, 0% 75.795%);
}*/
.boxColor.bottom.right.MCFeedback,
.global-feedback__content {
  animation-delay: 0s !important;
}

/* Füge auch die Animation Anwendung hinzu, falls sie nicht schon sehr weit unten ist: */
.global-feedback__content:has(.boxColor.bottom.right) {
  /* Oder der andere Selektor, der die Animation anwendet */
  /* Oder was auch immer der gewünschte Delay ist (wobei dein Schnipsel 0s sagt, aber die Zielseite 1s zeigt - nimm den Wert, den du willst) */
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
  align-items: flex-end;
}


/* MC Feedback Legende start */
.chart.chart--multiple .multiple__feedback .mc-legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 20px;
  width: 100%;
}

.chart.chart--multiple .multiple__feedback .mc-legend__item {
  display: flex;
  align-items: stretch;
  min-height: 54px;
  border-radius: var(--border-radius-mc);
  background: var(--mc-answer-label-bg, var(--tertiary, var(--gray-200)));
  color: var(--text);
  overflow: hidden;
  box-shadow: var(--button-drop-shadow);
  pointer-events: none;
}

.chart.chart--multiple .multiple__feedback .mc-legend__icon {
  position: relative;
  flex: 0 0 54px;
  width: 54px;
  min-width: 54px;
  height: 54px;
  box-sizing: border-box;
  background: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

.chart.chart--multiple .multiple__feedback .mc-legend__text {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-size: 1em;
  color: inherit;
}

.chart.chart--multiple .multiple__feedback .mc-legend-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 1.5rem;
  gap: 0.75rem 0;
}

.chart.chart--multiple .multiple__feedback .mc-legend__title {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  font-size: 1em;
  line-height: 1.3;
  color: var(--text);
}

/* 1. Richtig ausgewählt */
.chart.chart--multiple .multiple__feedback .mc-legend__item--correct-selected {
  background: var(--true);
  border: 2px solid var(--true);
  color: var(--white) !important;
}

.chart.chart--multiple .multiple__feedback .mc-legend__item--correct-selected .mc-legend__text {
  color: var(--white) !important;
}

.chart.chart--multiple .multiple__feedback .mc-legend__item--correct-selected .mc-legend__icon {
  background-color: var(--mc-answer-label-bg, var(--tertiary, var(--gray-200)));
  border: 2px solid var(--true);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338713E' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

/*barrierefreiheit farbe icon */
body:not(.contrast--normal) .chart.chart--multiple .multiple__feedback .mc-legend__item--correct-selected .mc-legend__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230902FF' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

/* 2. Falsch ausgewählt */
.chart.chart--multiple .multiple__feedback .mc-legend__item--incorrect-selected {
  background: var(--false);
  border: 2px solid var(--false);
  color: var(--white) !important;
}

.chart.chart--multiple .multiple__feedback .mc-legend__item--incorrect-selected .mc-legend__text {
  color: var(--white) !important;
}

.chart.chart--multiple .multiple__feedback .mc-legend__item--incorrect-selected .mc-legend__icon {
  background-color: var(--mc-answer-label-bg, var(--tertiary, var(--gray-200)));
  border: 2px solid var(--false);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CA0237' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

/* barrierefreiheit farbe icon */
body:not(.contrast--normal) .chart.chart--multiple .multiple__feedback .mc-legend__item--incorrect-selected {
  background: var(--primary);
  color: var(--white);
}

body:not(.contrast--normal) .chart.chart--multiple .multiple__feedback .mc-legend__item {
  border: 2px solid var(--primary)
}

body:not(.contrast--normal) .chart.chart--multiple .multiple__feedback .mc-legend__item--incorrect-selected .mc-legend__icon {
  border: 2px solid var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230902FF' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

/* 3. Richtige Antwort nicht ausgewählt */
.chart.chart--multiple .multiple__feedback .mc-legend__item--correct-missed {
  background: var(--mc-answer-label-bg-missed, var(--tertiary, var(--gray-200)));
  border: 2px solid var(--mc-answer-label-border-missed, var(--tertiary, var(--gray-200)));
  color: var(--text) !important;
}

.chart.chart--multiple .multiple__feedback .mc-legend__item--correct-missed .mc-legend__text {
  color: var(--text) !important;
}

.chart.chart--multiple .multiple__feedback .mc-legend__item--correct-missed .mc-legend__icon {
  background-color: transparent;
  border: 2px solid var(--true);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338713E' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

/*barrierefreiheit farbe icon */
body:not(.contrast--normal) .chart.chart--multiple .multiple__feedback .mc-legend__item--correct-missed .mc-legend__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230902FF' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}


/* 4. Falsche Antwort nicht ausgewählt */
.chart.chart--multiple .multiple__feedback .mc-legend__item--incorrect-not-selected {
  background: var(--mc-answer-label-bg, var(--tertiary, var(--gray-200)));
  border: 2px solid var(--mc-answer-label-border-missed, var(--tertiary, var(--gray-200)));
  color: var(--text) !important;
}

.chart.chart--multiple .multiple__feedback .mc-legend__item--incorrect-not-selected .mc-legend__text {
  color: var(--text) !important;
}

.chart.chart--multiple .multiple__feedback .mc-legend__item--incorrect-not-selected .mc-legend__icon {
  background-color: transparent;
  border: 2px solid var(--false);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CA0237' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

/* barrierefreiheit farbe icon */
body:not(.contrast--normal) .chart.chart--multiple .multiple__feedback .mc-legend__item--incorrect-not-selected .mc-legend__icon {
  border: 2px solid var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230902FF' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

@media screen and (max-width: 768px) {
  .chart.chart--multiple .multiple__feedback .mc-legend {
    grid-template-columns: 1fr;
  }

  .chart.chart--multiple .multiple__feedback .mc-legend__item {
    min-height: 48px;
  }

  .chart.chart--multiple .multiple__feedback .mc-legend__icon {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    height: 48px;
  }
}

body:not(.font-size--normal) .chart.chart--multiple .multiple__feedback .mc-legend__icon {
  flex: 0 0 90px;
  width: 90px;
  min-width: 90px;
  height: 90px;
}

/* MC MODAL start */
.chart.chart--multiple .multiple__feedback {
  right: auto;
  left: 0;
  justify-content: flex-end;
  padding: var(--chart-content-padding);
  overflow: visible;
}

.chart.chart--multiple .multiple__feedback.ui-modal-container {
  height: auto;
  min-height: 100%;
  position: fixed;
}


.chart.chart--multiple:has(div[aria-labelledby="global-feedback"]) .multiple__answers .multiple__item .multiple__answer__feedback,
.chart.chart--multiple.chart--multiple--evaluated:has(div[aria-labelledby="global-feedback"]) .multiple__answers .multiple__item .multiple__answer__feedback,
.chart.chart--multiple:has(div[aria-labelledby="global-feedback"]) .single__answers .multiple__item .multiple__answer__feedback,
.chart.chart--multiple.chart--multiple--evaluated:has(div[aria-labelledby="global-feedback"]) .single__answers .multiple__item .multiple__answer__feedback {
  width: var(--feedback_per_answer-width, 0);
  /* only when that global-feedback node is present */
  margin: var(--feedback_per_answer-margin, 0);
  display: var(--feedback_per_answer-display, none);
}



.chart--multiple .ui-modal__focus {
  max-height: unset;
  /*calc(var(--stage-height) - var(--space-large));*/
  margin-bottom: calc(var(--space-large) + var(--footer-height));
  margin-top: auto;
  width: auto;
  align-self: flex-start;
  box-shadow: var(--shadow-large);
  background-color: var(--white);
  border-radius: 0 var(--border-radius-vc) var(--border-radius-vc) var(--border-radius-vc);
}



.chart.chart--multiple .multiple__feedback .ui-modal {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

.ui-modal-container .-modal {
  border-radius: var(--button-border-radius);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  opacity: 1;
  border-width: 1px;
  border-style: solid;
  border-color: var(--gray-300);
  box-shadow: var(--modal-box-shadow);
  position: relative;
}

.chart.chart--multiple .multiple__feedback .ui-modal .ui-modal__content {
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  -webkit-animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-delay: 0.2s;
  max-height: calc(var(--stage-height) - 3* var(--footer-height));
}


.chart.chart--multiple .multiple__feedback .ui-modal .ui-modal__content-header {
  z-index: 99;
}

.chart.chart--multiple .multiple__feedback .ui-modal .ui-modal__content-header h2 {
  display: none;
}

.chart--multiple .multiple__feedback .ui-modal .ui-modal__close {
  transform: none;
  /*border-radius: 0 var(--border-radius-small) 0 var(--border-radius-small);*/
  position: absolute;
  right: 0;
  top: 0;
  box-shadow: none;
  -webkit-animation: fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-delay: 0;
}

.chart--multiple .multiple__feedback .ui-modal .ui-modal__close:not(:hover, :focus) {
  color: var(--button-text);
}

.chart.chart--multiple .multiple__feedback .chart__text-feedback {
  background: transparent;
  padding: var(--space-large);
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
  align-items: flex-end;
  width: auto;
}

.chart.chart--multiple .multiple__feedback .ui-modal__wrapper {
  max-width: 100%;
  background-color: var(--info-50);
}

.chart--multiple .multiple__feedback .ui-modal .ui-modal__content {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: all;
}

body:not(.font-size--normal) .chart.chart--multiple .multiple__feedback {
  padding-top: 0;
}

/* MC MODAL end*/
/* icons for Feedback - start   - not only in contrast mode body:not(.contrast--normal)  */
.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--correct:before,
.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--missed:before,
.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--incorrect:before {
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  font-size: smaller;

}

.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--correct:before {
  border: 2px solid var(--true);
  background-color: var(--gray-100);
  z-index: 1000;
  margin: 0 1ch 0 0;
  content: '';
  display: block;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  width: 50px;
  height: auto;
  border-radius: var(--border-radius-mc) 0 0 var(--border-radius-mc);
  transition: all 0.2s ease;

}

.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--incorrect:before {
  border: 2px solid var(--false);
  background-color: var(--gray-100);
  z-index: 1000;
  margin: 0 1ch 0 0;
  content: '';
  display: block;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  width: 50px;
  height: auto;
  border-radius: var(--border-radius-mc) 0 0 var(--border-radius-mc);
  transition: all 0.2s ease;


}

body:not(.font-size--normal) .chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--incorrect:before,
body:not(.font-size--normal) .chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--correct:before,
body:not(.font-size--normal) .chart.chart--multiple .single__answers .multiple__item .multiple__answer:before,
body:not(.font-size--normal) .chart.chart--multiple .multiple__answers .multiple__item .multiple__answer:before {

  width: 90px;
}

.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--correct:before,
.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--missed:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338713E' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--incorrect:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CA0237' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
}

body:not(.contrast--normal) .chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--correct:before,
body:not(.contrast--normal) .chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--missed:before {
  border-radius: 0px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230902FF' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

body:not(.contrast--normal) .chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--incorrect:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230902FF' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* icons for Feedback - end*/

/** Multiple Choice MC (extra Stylings)  -- START **/




/*
body.contrast--normal .chart.chart--multiple .multiple__item input {
    background-color: var(--primary-light);
}

body.contrast--normal .chart.chart--multiple .multiple__answers .multiple__item .multiple__answer--correct {
    background-color: var(--secondary);
}

body.contrast--normal .chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--missed {
    background-color: var(--tertiary-light);
    border: none;
}

body.contrast--normal  .chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--incorrect.multiple__answer__status--correctly-not-selected {
    background-color: var(--secondary-light);
}

body.contrast--normal .chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer__status--incorrectly-selected {
    background-color: var(--false);
    color: var(--white);
    border: none;
}

body.contrast--normal  .chart.chart--multiple .multiple__feedback .ui-modal__wrapper {
    background-color: var(--secondary);
    color: var(--white);
}

body.contrast--normal  .chart.chart--multiple .multiple__feedback .ui-modal__wrapper * {
    color: var(--white);
}
*/
.chart.chart--multiple .single__answers .multiple__item,
.chart.chart--multiple .multiple__answers .multiple__item {
  justify-content: left;
  -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;
}

.chart.chart--multiple .multiple__item:nth-child(1) {
  animation-delay: 0s;
}

.chart.chart--multiple .multiple__item:nth-child(2) {
  animation-delay: 0.3s;
}

.chart.chart--multiple .multiple__item:nth-child(3) {
  animation-delay: 0.6s;
}

.chart.chart--multiple .multiple__item:nth-child(4) {
  animation-delay: 0.9s;
}

.chart.chart--multiple .multiple__item:nth-child(5) {
  animation-delay: 1.2s;
}

.chart.chart--multiple .multiple__item:nth-child(6) {
  animation-delay: 1.5s;
}

.chart.chart--multiple .multiple__item:nth-child(7) {
  animation-delay: 1.8s;
}

.chart.chart--multiple .multiple__item:nth-child(8) {
  animation-delay: 2.1s;
}

.chart.chart--multiple .multiple__item:nth-child(9) {
  animation-delay: 2.4s;
}

.chart.chart--multiple .multiple__item:nth-child(10) {
  animation-delay: 2.7s;
}


body.contrast--normal .chart.chart--multiple .multiple__feedback .ui-modal__wrapper {
  border-radius: var(--input-border-radius);
  min-height: 5rem;
}

.chart--multiple .ui-modal__wrapper {
  padding: 1.5rem;
}

.chart.chart--multiple .multiple__feedback .chart__text-feedback {
  align-items: flex-start;
}

.chart.chart--multiple .multiple__feedback .chart__text-feedback h3,
.chart.chart--multiple .multiple__feedback .chart__text-feedback p {
  margin: 0;
}

.chart--multiple .multiple__feedback .ui-modal .ui-modal__close {
  padding: 0.5rem;
}


/* icon über modal */

.multiple__feedback .ui-modal__focus::before {
  content: "";
  position: absolute;
  left: 2rem;
  transform: translateX(-50%) scale(0.8);
  width: clamp(24px, 6vw, 48px);
  height: clamp(24px, 6vw, 48px);
  background-image: url('');
  filter: brightness(0) saturate(100%) invert(87%) sepia(40%) saturate(5375%) hue-rotate(27deg) brightness(93%) contrast(90%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: var(--secondary);
  opacity: 0;
  z-index: 10;
  transform: scale(0.8);
  animation: fadeZoomIn 0.4s ease-out 0.7s forwards;
}

.multiple__feedback.multiple__feedback--wrong .ui-modal__focus::before {
  transform: translateX(-50%) scale(0.8) rotate(180deg);
  background-image: url('');
  filter: brightness(0) saturate(100%) invert(66%) sepia(0%) saturate(628%) hue-rotate(200deg) brightness(98%) contrast(77%);
  color: var(--tertiary-light);
  animation: fadeZoomInWrong 0.4s ease-out 0.7s forwards;
}

body:not(.contrast--normal) .multiple__feedback.multiple__feedback--wrong .ui-modal__focus::before {
  filter: brightness(0) saturate(100%) invert(7%) sepia(100%) saturate(7393%) hue-rotate(247deg) brightness(113%) contrast(139%);
}

[data-testid="modal-wrapper"][aria-hidden="true"] .ui-modal__focus::before {
  display: none;
}

@keyframes fadeZoomIn {
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes fadeZoomInWrong {
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1) rotate(180deg);
  }
}



/* CONTRAST */
body.contrast--normal .chart.chart--multiple .multiple__feedback .ui-modal__wrapper * {
  color: var(--text);
}

body.contrast--normal .chart.chart--multiple .multiple__feedback .ui-modal .ui-modal__content {
  /*background-color: var(--secondary);*/
  overflow: visible;
  border: none;
  background-color: transparent;
}


body.contrast--normal .chart.chart--multiple .multiple__feedback.multiple__feedback--wrong .ui-modal .ui-modal__content {
  background-color: var(--tertiary-light);
  border-radius: var(--border-radius-small);
}

body.contrast--normal .chart.chart--multiple .multiple__feedback--wrong .ui-modal__wrapper * {
  color: var(--text);
}


body.contrast--normal .boxColor.boxGreen {
  box-shadow: var(--box-shadow-full);
}

body:not(.contrast--normal) .boxColor img {
  filter: invert(0%) sepia(59%) saturate(4009%) hue-rotate(355deg) brightness(104%) contrast(102%);
}

body:not(.font-size--normal) .chart.chart--multiple {
  --mc-answer-width: 100%;
}

body:not(.font-size--normal) .chart.chart--multiple .multiple__feedback .chart__text-feedback {
  width: 100%;
}

body:not(.contrast--normal) .chart.chart--multiple:not(.chart--multiple--evaluated) .single__answers .multiple__item .multiple__answer,
body:not(.contrast--normal) .chart.chart--multiple:not(.chart--multiple--evaluated) .multiple__answers .multiple__item .multiple__answer {
  border: var(--button-border-hover);
  border-width: 1.5px;

}

body:not(.contrast--normal) .chart.chart--multiple .single__answers .multiple__item .multiple__answer:hover::before,
body:not(.contrast--normal) .chart.chart--multiple .multiple__answers .multiple__item .multiple__answer:hover::before {
  border: 3px solid var(--white);

}


body:not(.contrast--normal) .chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer__status--incorrectly-selected {
  border: 1.5px solid var(--primary);
  background-color: var(--black);
  color: var(--white);
}

body:not(.contrast--normal) .chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--missed {
  border: 3px solid var(--primary);
}

body:not(.contrast--normal) .chart.chart--multiple--evaluated .chart__body .multiple__item .multiple__answer__status--correctly-selected {
  background: var(--primary);
}

/* barrierefreiheit */
body:not(.contrast--normal) .multiple__feedback--correct .ui-modal__focus::before {
  filter: brightness(0) saturate(100%) invert(8%) sepia(99%) saturate(7415%) hue-rotate(248deg) brightness(95%) contrast(144%);
}

/*
body:not(.contrast--normal) .chart.chart--multiple .multiple__item input,
body:not(.contrast--normal) .chart.chart--multiple--evaluated .chart__body .multiple__item .multiple__answer__status--correctly-selected
/*body:not(.contrast--normal) .chart.chart--multiple .multiple__feedback .ui-modal__wrapper **/
/*{
    color: var(--primary);
}

body:not(.contrast--normal) .chart.chart--multiple .multiple__answers .multiple__item .multiple__answer {
    border: var(--button-border-hover);
}*/

/* responsive media queries*/

/** MQ + Font size Large for MC -- START **/
@media (min-width: 992px) {
  body.font-size--normal .chart.chart--multiple .multiple__item {
    /*width: calc(50% - 20px) !important;*/
    width: var(--mc-answer-width) !important;
  }

  /*
  body.font-size--normal .chart.chart--multiple .multiple__feedback {
    width: calc(100% - var(--mc-answer-width));
  }*/

  body.font-size--normal .chart.chart--multiple.hinweis .multiple__feedback {
    max-width: 40%;
  }

  body.font-size--normal .chart--multiple .ui-modal__focus {
    margin-top: 10ch;
  }

  body.font-size--normal .chart--multiple.hinweis .ui-modal__focus {
    margin-top: 14ch;
  }
}

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

  .chart.chart--multiple {
    --mc-answer-width: 100%;
  }
}

@media (max-height: 500px) {
  .chart.chart--multiple .multiple__feedback {
    padding-top: 0;
  }

  body.font-size--normal .chart--multiple .ui-modal__focus {
    margin-top: 0;

  }
}


/*********************************/
/*********************************/
/* MC two Columns - start  */

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

  .chart.chart--multiple .single__answers:has(.multiple__item:nth-child(4)),
  .chart.chart--multiple .multiple__answers:has(.multiple__item:nth-child(4)) {
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 15px !important;
  }

}


@media only screen and (min-width: 769px) {

  .chart__body .chart__interaction .multiple__answers,
  .chart__body .chart__interaction .single__answers {
    display: block;
    column-count: 2;
    column-gap: 3rem;
  }
}

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

  .chart.chart--multiple .single__answers,
  .chart.chart--multiple .multiple__answers {
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
    height: auto !important;

    gap: 15px !important;
  }

  .chart.chart--multiple .multiple__item {
    width: 100% !important;
    margin: 0 !important;
  }
}

.columns--two .chart__body .chart__interaction .multiple__answers .multiple__item,
.columns--two .chart__body .chart__interaction .single__answers .multiple__item {
  break-inside: avoid;
  display: block;
  margin: 0 0 1.5ch;
  --mc-answer-width: 100%;
}


.chart.chart--multiple.columns--two .multiple__item {
  max-width: 100%;
}


.chart.columns--two.chart--multiple:has(div[aria-labelledby="global-feedback"]) .multiple__answers .multiple__item .multiple__answer__feedback,
.chart.columns--two.chart--multiple.chart--multiple--evaluated:has(div[aria-labelledby="global-feedback"]) .multiple__answers .multiple__item .multiple__answer__feedback,
.chart.columns--two.chart--multiple:has(div[aria-labelledby="global-feedback"]) .single__answers .multiple__item .multiple__answer__feedback,
.chart.columns--two.chart--multiple.chart--multiple--evaluated:has(div[aria-labelledby="global-feedback"]) .single__answers .multiple__item .multiple__answer__feedback {
  visibility: hidden;
  display: none;
}

.chart.chart--multiple .single__answers,
.chart.chart--multiple .multiple__answers {

  display: grid !important;


  justify-content: start;


  grid-template-columns: 35rem;

  gap: 10%;
  width: 100%;
  height: auto !important;
  padding: 0;
}

.chart.chart--multiple .single__answers:has(.multiple__item:nth-child(4)),
.chart.chart--multiple .multiple__answers:has(.multiple__item:nth-child(4)) {

  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);

  /* HIER IST DIE LÖSUNG: */
  /* Zwei Spalten à 35rem. Der Rest vom Bildschirm bleibt rechts leer. */
  grid-template-columns: 35rem 35rem;

  /* Exakt 20px Abstand zwischen den Spalten */
  column-gap: 20px;
}

/* Styling für die Items, damit sie hübsch aussehen */
.chart.chart--multiple .multiple__item {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.chart.chart--multiple .multiple__answer {
  width: 100% !important;
  height: 100%;
  /* Sorgen dafür, dass alle gleich hoch wirken in einer Zeile */
}


/* MC two Columns - END  */
/*********************************/
/*********************************/

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

  body:not(.font-size--normal) .chart.chart--multiple .multiple__feedback.ui-modal-container {
    height: 100%;
  }

  body:not(.font-size--normal) .chart--multiple .ui-modal-container .ui-modal__focus {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100dvh - var(--footer-height));
    margin-bottom: calc(var(--space-small) + var(--footer-height));
    margin-top: calc(var(--space-small) + var(--header-height));
  }

}

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

  .chart.chart--multiple .multiple__feedback.ui-modal-container {
    height: 100%;
  }

  .chart--multiple .ui-modal-container .ui-modal__focus {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    pointer-events: all;
    /* max-height: var(--stage-height); */
    max-height: calc(100dvh - var(--footer-height));
    height: calc(100dvh - var(--footer-height));
    margin-bottom: calc(var(--space-small) + var(--footer-height));
    margin-top: 0;
  }
}


/* MC end*/
/**************************************************************************************/
/* DND  + DND THEME */
/* THEME */

.dnd--automatic.dnd--top-right .dnd__draggables--top-right {
  position: absolute;
  top: calc(-3.5 * var(--font-size-xx-large));
  right: 0;
  max-width: 30%;
}

.chart--dnd header.chart__header {
  max-width: 70%;
  min-height: 12ch;
}

.dnd--automatic.dnd--top-right .ui-draggable.dnd__draggable {
  position: absolute;
  /*
  box-shadow: rgba(0, 0, 0, 0.67) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
*/
}

.dnd--automatic.dnd--top-right .dnd__droparea-dropables .ui-draggable.dnd__draggable {
  position: relative;
}

.dnd--automatic.dnd--top-right .dnd__draggable[tabindex="0"] {
  z-index: 5;
}

.dnd--automatic.dnd--top-right .dnd__draggable:nth-child(even) {
  margin-right: -5px;
  transform: rotate(2deg);
}

.dnd--automatic.dnd--top-right .dnd__draggable:nth-child(odd) {
  margin-right: 5px;
  transform: rotate(-2deg);
}

/* theme ??*/

.chart--dnd .chart__background {
  position: fixed;
  /* only for dnd in theme?*/
}

.chart--dnd .chart__background .chart__background-image {
  object-position: center 85%;
}


/* not THEME */
.dnd__dropgroup.dnd__dropgroup--automatic {
  width: 100%;
}

.dnd__dropgroup--automatic .dnd__droparea {
  min-height: 28vh;
  border-radius: var(--border-radius-small);
  border: none;
  margin-top: 1em;
  /* for dorparea name psotion */
  overflow: visible;
  padding: 0;
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

body:not(.animation--hidden) .dnd__dropgroup--automatic .dnd__droparea {
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

body:not(.animation--hidden) .dnd__dropgroup--automatic .dnd__droparea:nth-child(1) {
  animation-delay: 0s;
}

body:not(.animation--hidden) .dnd__dropgroup--automatic .dnd__droparea:nth-child(2) {
  animation-delay: 0.3s;
}

body:not(.animation--hidden) .dnd__dropgroup--automatic .dnd__droparea:nth-child(3) {
  animation-delay: 0.6s;
}

body:not(.animation--hidden) .dnd__dropgroup--automatic .dnd__droparea:nth-child(4) {
  animation-delay: 0.9s;
}

body:not(.animation--hidden) .dnd__dropgroup--automatic .dnd__droparea:nth-child(5) {
  animation-delay: 1.2s;
}

body:not(.animation--hidden) .dnd__dropgroup--automatic .dnd__droparea:nth-child(6) {
  animation-delay: 1.5s;
}

body:not(.animation--hidden) .dnd__dropgroup--automatic .dnd__droparea:nth-child(7) {
  animation-delay: 1.8s;
}

body:not(.animation--hidden) .dnd__dropgroup--automatic .dnd__droparea:nth-child(8) {
  animation-delay: 2.1s;
}

body:not(.animation--hidden) .dnd__dropgroup--automatic .dnd__droparea:nth-child(9) {
  animation-delay: 2.4s;
}

body:not(.animation--hidden) .dnd__dropgroup--automatic .dnd__droparea:nth-child(10) {
  animation-delay: 2.7s;
}


.dnd__droparea-name {
  width: 100%;
  border-radius: var(--border-radius-vc) var(--border-radius-vc) 0 0;
  /*margin-top: -2.5em;*/
  /* for dorparea name psotion */
  /*
  margin-bottom: 1ch;*/
  font-weight: bold;
  margin: 0;
  min-height: calc(1ch + 2 * var(--font-size-medium));
  align-items: center;
  justify-content: center;
}

.ui-draggable.dnd__draggable .cbi {
  min-width: fit-content;
}

.dnd--automatic.dnd--top-right .dnd__draggable:nth-child(even),
.dnd--automatic.dnd--top-right .dnd__draggable:nth-child(odd) {
  transform: none;
  margin-right: 0;
  transform-origin: bottom left;
}

.dnd--automatic.dnd--top-right .dnd__draggable {
  height: 8ch;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dnd--automatic.dnd--top-right .dnd__draggables .dnd__draggable {
  width: 27ch;
}

/* Answers bottom */
body:not(.font-size--normal) .chart--dnd:has(.dnd__draggables--bottom) header.chart__header {
  max-width: 100%;
}

.dnd--automatic.dnd--bottom .dnd__draggables--bottom {
  justify-content: space-around;
  align-items: stretch;
  gap: var(--space-medium);
  height: fit-content;
}

/* Answers stacked with gap */
.dnd--automatic.dnd--top-right .dnd__draggables .dnd__draggable:first-child {
  transform: translate(0, 0);
  color: var(--button-text);
}




.dnd--automatic.dnd--top-right .dnd__draggables .dnd__draggable:nth-child(2) {
  transform: translate(-5px, -5px);
  background-color: var(--primary-400);
  color: var(--button-text);
  z-index: 4;
}

.dnd--automatic.dnd--top-right .dnd__draggables .dnd__draggable:nth-child(n+3) {
  transform: translate(-10px, -10px);
  background-color: var(--primary-200);
  color: var(--button-text);
  z-index: 3;
}

body.contrast--normal .dnd--automatic.dnd--top-right .dnd__draggables .dnd__draggable:first-child:hover,
body.contrast--normal .dnd--automatic.dnd--top-right .dnd__draggables .dnd__draggable:first-child:focus {
  color: var(--button-text--hover);
}

/*
.dnd--automatic.dnd--top-right .dnd__draggable:nth-child(4) {
   transform: translate(-12px, -12px);
}
.dnd--automatic.dnd--top-right .dnd__draggable:nth-child(5) {
   transform: translate(-15px, -15px);
}
.dnd--automatic.dnd--top-right .dnd__draggable:nth-child(6) {
   transform: translate(-18px, -18px);
}
*/

/* dropped Answers layout 0*/

.dnd__droparea-dropables {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: var(--space-medium);
  border: var(--droparea-border, 2px dashed var(--highlight));
  border-bottom: var(--droparea-border-bottom);
  border-top: var(--droparea-border-bottom);
  border-radius: 0 0 var(--border-radius-vc) var(--border-radius-vc);
}

.dnd--automatic.dnd--top-right .dnd__droparea-dropables .dnd__draggable {
  margin: 0;
  transform: none;
  width: 45%;
  min-height: fit-content;
}

/* ANSWERS  same as buttons  not dropped */
.ui-draggable.dnd__draggable {
  color: var(--button-text);
  background: var(--button-background);
  border: var(--button-border);
  border-radius: var(--border-radius-small);
  max-width: 30%;
  margin: 0;
}

.ui-draggable.dnd__draggable:focus,
.ui-draggable.dnd__draggable:hover {
  border: var(--button-border-hover);
  background: var(--button-background-hover);
  color: var(--button-text--hover);
}

/* ANSWERS  same as buttons  dropped */

.dnd--automatic.dnd--bottom .dnd__droparea-dropables {
  align-items: stretch;
}

.dnd--automatic.dnd--top-right .dnd__droparea-dropables .dnd__draggable {
  margin-right: 0;
  transform: none;
}


.ui-draggable.dnd__draggable {
  background: var(--primary-100);
  color: var(--text);
}

.dnd__droparea-dropables .ui-draggable.dnd__draggable {
  background: var(--button-background);
  color: var(--button-text);
  box-shadow: var(--box-shadow);
  margin: 0;
  max-width: 100%;
}

/* Legend */
.chart__legend-item {
  font-size: var(--font-size-small);
}

/* fotn size large */
body:not(.font-size--normal) .dnd__droparea-dropables {
  flex-direction: column;
  gap: var(--space-large);
}

body:not(.font-size--normal) .dnd__droparea-name {
  margin-top: -1.7em;
  min-height: calc(1ch + 4 * var(--font-size-medium));
}

body:not(.font-size--normal) .ui-draggable.dnd__draggable .cbi {
  min-width: fit-content;
  margin-top: var(--space-large);
}


body:not(.font-size--normal) .dnd__draggables .draggable__text {
  margin: auto;
}

body:not(.font-size--normal) .dnd--automatic.dnd--top-right .dnd__draggables .dnd__draggable {
  align-items: flex-start;

}


body:not(.font-size--normal) .dnd--automatic.dnd--top-right .dnd__draggable {
  height: 16ch;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  padding: 1ch;
  /*
          align-items: flex-start;
          justify-content: flex-start; */
}

body:not(.font-size--normal) .chart--dnd header.chart__header {
  max-width: 65%;
}

body:not(.font-size--normal) .dnd__dropgroup--automatic .dnd__droparea {
  margin-top: 3.5em;
}

/* BF*/
body:not(.contrast--normal) .dnd__wrapper .ui-draggable.dnd__draggable {
  color: var(--button-text);
  background: var(--button-background);
  border: 1.5px solid var(--white);
  opacity: 1;
}

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

body:not(.contrast--normal) .dnd__wrapper .ui-draggable.dnd__draggable:focus,
body:not(.contrast--normal) .dnd__wrapper .ui-draggable.dnd__draggable:hover,
body:not(.contrast--normal) .dnd__wrapper .dnd__droparea-dropables .dnd__draggable:focus,
body:not(.contrast--normal) .dnd__wrapper .dnd__droparea-dropables .dnd__draggable:hover {
  color: var(--black);
  background: var(--button-background-hover);
  border: var(--button-border-hover);
  opacity: 1;
}

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

  .chart--dnd header.chart__header,
  body:not(.font-size--normal) .chart--dnd header.chart__header {
    max-width: 100%;
  }

  .dnd__droparea {
    --droparea-width: 100%;

  }

  .dnd__dropgroup--automatic .dnd__droparea {
    min-height: 20vh;
  }

  .dnd--automatic.dnd--top-right .dnd__draggables--top-right {
    position: static;
    max-width: 100%;
    min-height: 10ch;
  }

  body:not(.font-size--normal) .dnd--automatic.dnd--top-right .dnd__draggables--top-right {
    min-height: 20ch;
  }

  .chart__legend {
    flex-direction: column;
  }

}

/* DND END */

/** Right/Wrong - Richitg/Falsch Interaction --- START **/

.chart--single .chart__body {
  padding: var(--chart-padding, var(--space-large) 4rem);
}

.chart--single .chart__interaction {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 2em;
  width: 100%;
}

.chart--single .single__answer label {
  width: 100%;
  display: flex;
  justify-content: center;
  border-radius: var(--border-radius-mc) var(--border-radius-mc) 0 0;
  background: var(--primary-light);
  color: var(--black);
  margin: 0;
  gap: 0.5em;
}

.chart--single .single__answer.single__answer--selected label,
.chart--single .single__answer:hover label,
.chart--single .single__answer:focus label {
  background-color: var(--primary);
  color: var(--white);
}

.chart--single .single__answer.single__answer--selected im,
.chart--single .single__answer:hover img,
.chart--single .single__answer:focus img,
.chart--single .single__answer--selected img {
  border-radius: 0 0 var(--border-radius-medium);
}



.single__image {
  width: 320px;
  height: 243px;
}


.chart--single .single__answer {
  border-radius: var(--border-radius-mc);
  margin: 0;
}


.single__answer--incorrect,
.single__answer--correct {
  pointer-events: none;
}

.single__answer--incorrect[aria-checked="true"] img,
.single__answer--incorrect[aria-checked="true"] label {
  border: 10px solid var(--false);
  border-top-width: 0px;
  background-color: var(--false);
  color: var(--white);
  border-radius: 0 0 10px 10px;
}

.single__answer--incorrect[aria-checked="true"] label {
  border-bottom: none;
}

.single__answer--incorrect[aria-checked="true"] img {
  border-top: none;
}

.single__answer--correct[aria-checked="true"] img,
.single__answer--correct[aria-checked="true"] label {
  border: 10px solid var(--true);
  border-top-width: 0px;
  background-color: var(--true);
  color: var(--white);
}

.single__answer--correct[aria-checked="true"] label {
  border-bottom-width: 0px;
}

.chart.chart--single.chart--single--evaluated .single__answer--correct label {
  background-color: var(--true);
  color: var(--white);
  font-size: var(--font-size-large);
  border-radius: 10px 10px 0 0;

}

.chart.chart--single.chart--single--evaluated .single__answer--incorrect label {
  border-radius: 10px 10px 0 0;
  background-color: var(--false);
  font-size: var(--font-size-large);

  color: var(--white)
}

.single__answer--incorrect[aria-checked="true"] label {
  border-bottom: none;
}

.single__answer--incorrect[aria-checked="true"] img {
  border-top: none;
}

.chart--single .single__answer--incorrect label:before {
  content: "Falsch";
  font-size: var(--font-size-large);
  font-weight: 300;

}

.chart--single .single__answer--incorrect label:before,
.chart--single .single__answer--correct label:before {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  font-size: smaller;
}


body:not(.contrast--normal) .chart.chart--single.chart--single--evaluated .single__answer--incorrect label {
  color: var(--black);
  border: 2px solid var(--black) !important;

}

body:not(.contrast--normal) .chart--single .single__answer img,
body:not(.contrast--normal) .chart--single .single__answer label {
  border: 2px solid var(--primary);
}

body:not(.contrast--normal) .chart--single .single__answer label {
  border-bottom: none;
}


body:not(.contrast--normal) .chart--single .single__answer img,
body:not(.contrast--normal) .chart--single .single__answer label {
  border: none;
}

body:not(.contrast--normal) .chart--single .single__answer[aria-checked="true"] img,
body:not(.contrast--normal) .chart--single .single__answer[aria-checked="true"] label {
  border: 2px solid var(--primary) !important;
}

body:not(.contrast--normal) .chart--single .single__answer label {
  border-bottom: none;
}



@media only screen and (max-width: 480px) {
  .single__image {
    width: 280px;
    height: 200px;
  }


  .single__answer {
    width: 280px;
    height: 238px;
  }
}

/*  Right/Wrong - Richitg/Falsch Interaction --- END  */

/** Video --- START **/

.controls__progress-bg {
  background-color: var(--gray-250);
  border-radius: var(--border-radius-medium);
}

.controls__progress .controls__progress-elapsed {
  background-color: var(--primary);
  border-radius: var(--border-radius-medium);
}

.controls__volume-slider {
  accent-color: var(--primary);
  padding: 0px !important;

}

.media-player__controls .controls__btn:hover,
.media-player__controls .controls__btn:focus,
.sequence__controls .controls__btn:hover,
.sequence__controls .controls__btn:focus {
  color: var(--white);
  background: var(--primary) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.controls__progress {
  overflow: visible !important;
  position: relative;
  height: 6px !important;
}


/* 2. Den Knob (Handle) gestalten */
.controls__progress-handle {
  opacity: 1 !important;
  /* Hier war vermutlich das Problem */


  /* Positionierung direkt auf der Progress-Bar */
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;

  /* Design: Exakt wie beim Volume-Slider */
  width: 16px !important;
  height: 16px !important;
  background: var(--primary) !important;

  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

body:not(.contrast--normal) .controls__progress-handle {

  border: 2px solid var(--white);
}

body:not(.contrast--normal) .controls__progress .controls__progress-elapsed {
  background-color: var(--black);
  border: 2px solid var(--white);
}

.controls__progress:hover .controls__progress-handle {
  transform: translate(-50%, -50%) scale(1.2) !important;
}

/* Volume-Regler (Chrome/Safari) */
.controls__volume-slider:hover::-webkit-slider-thumb {
  transform: scale(1.2) !important;
  cursor: pointer;
}

/* Volume-Regler (Firefox) */
.controls__volume-slider:hover::-moz-range-thumb {


  transform: scale(1.2) !important;
  cursor: pointer;
}

.controls__progress-tooltip {
  position: unset;
  transform: unset;
  font-size: unset;
  line-height: unset;
  color: unset;
  background: unset;
  padding: unset;
  border-radius: unset;
  opacity: 0;
  transition: unset;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.controls__progress:hover .controls__progress-tooltip {
  opacity: 0;
  transition: unset;
}

.controls__progress-indicator .controls__duration {
  font-size: var(--font-size-medium);

}

.controls__progress-indicator .controls__elapsed-time {

  font-size: var(--font-size-medium);


}

body:not(.contrast--normal) .media-player__controls .controls__btn:focus,
body:not(.contrast--normal) .media-player__controls .controls__btn:hover {
  background-color: var(--white) !important;
}

body:not(.contrast--normal) .media-player__controls .controls__btn:focus,
body:not(.contrast--normal) .media-player__controls .controls__btn:hover {
  color: var(--black) !important;
}

body:not(.font-size--normal) .media-player {
  height: calc(100% - 40px);

}

.media-player {
  height: calc(100% - 60px);
  background-color: --var(footer-bg);
}

/** Video --- END **/


/** Landkarte dwa -- START **/
.chart--page-builder.landkarte-dwa {
  position: relative;
  overflow: hidden;
}

.chart--page-builder.landkarte-dwa .link-btn {
  display: flex;
  align-items: center;
  padding: var(--space-small) var(--space-medium);
  border-radius: var(--button-border-radius);
  text-decoration: none;
  font-weight: bold;
  font-size: var(--font-size-medium);
  color: var(--white);
  width: auto;
  max-width: 20rem;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 2px solid var(--white);
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center !important;
  opacity: 0;
  animation-name: text-focus-in;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transition: all 0.8s ease-in-out;
  justify-content: center;
}

.chart--page-builder.landkarte-dwa .link-btn>span {
  width: 100%;
}

/* Linie */
/*
.chart--page-builder.landkarte-dwa  .link-btn::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 2px;
  height: var(--line-length, 5rem);
  background-color: currentColor;
  z-index: 1;
}*/

/* Icon */
.chart--page-builder.landkarte-dwa .link-btn::after {
  content: '';
  background-image: var(--icon-url);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 50%;
  /*top: calc(100% + var(--line-length, 5rem));*/
  top: 100%;
  translate: -50% 25%;
  width: 2rem;
  height: 2rem;
  pointer-events: none;
  z-index: 2;
}

.chart--page-builder.landkarte-dwa .link-btn.btn--active:not(.btn--visited)::after {
  animation: rotate-center 2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite alternate both;
}

/* Modifier: Linie & Icon nach links */

/*
.chart--page-builder.landkarte-dwa  .link-btn.btn--left::before {
  top: 50%;
  left: 0;
  translate: -50% -50%;
  width: var(--line-length, 5rem);
  height: 2px;
}

.chart--page-builder.landkarte-dwa  .link-btn.btn--left::after {
  top: 50%;
  left: calc(-1 * var(--line-length, 5rem));
  translate: -50% -50%;
}

/* Modifier: Linie & Icon nach rechts */
/*
.chart--page-builder.landkarte-dwa  .link-btn.btn--right::before {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: var(--line-length, 5rem);
  height: 2px;
}

.chart--page-builder.landkarte-dwa  .link-btn.btn--right::after {
  top: 50%;
  left: calc(100% + var(--line-length, 5rem));
  translate: -50% -50%;
}
*/
/* Modifier: Icon top */
.chart--page-builder.landkarte-dwa .link-btn.btn--top::after {
  top: 0;
  left: 50%;
  translate: -50% -125%;
}

/* Beispielstatus – Active */
.chart--page-builder.landkarte-dwa .link-btn.btn--active {
  background-color: var(--secondary);
  color: var(--white);
  --icon-url: url('');
  --line-length: 5rem;
}

/* Beispielstatus – Visited */
.chart--page-builder.landkarte-dwa .link-btn.btn--visited {
  background-color: var(--primary-light) !important;
  color: var(--white);
  --icon-url: url('');
  --line-length: 4.5rem;
}

body:not(.contrast--normal) .chart--page-builder.landkarte-dwa .link-btn.btn--visited {
  color: var(--black);
  border-color: var(--black);
}

/* Beispielstatus – Unvisited */
.chart--page-builder.landkarte-dwa .link-btn.btn--unvisited {
  background-color: rgba(255, 255, 255, 0.8) !important;
  color: var(--white);
  --icon-url: url('');
  --line-length: 4.5rem;
  pointer-events: none;

}

.chart--page-builder.landkarte-dwa .link-btn.btn--unvisited span {
  color: var(--tertiary);
}

/* Hover */

.chart--page-builder.landkarte-dwa .link-btn:hover {
  background-color: var(--primary);
  color: var(--white);
  font-kerning: normal;
  letter-spacing: 0.03em;
}



.chart--page-builder.landkarte-dwa .chart div[data-widget-type="link-button-component"]:nth-child(1) .link-btn {
  animation-delay: 0.3s;
}

.chart--page-builder.landkarte-dwa .chart div[data-widget-type="link-button-component"]:nth-child(2) .link-btn {
  animation-delay: 0.6s;
}

.chart--page-builder.landkarte-dwa .chart div[data-widget-type="link-button-component"]:nth-child(3) .link-btn {
  animation-delay: 0.9s;
}

.chart--page-builder.landkarte-dwa .chart div[data-widget-type="link-button-component"]:nth-child(4) .link-btn {
  animation-delay: 1.2s;
}

.chart--page-builder.landkarte-dwa .chart div[data-widget-type="link-button-component"]:nth-child(5) .link-btn {
  animation-delay: 1.5s;
}

.chart--page-builder.landkarte-dwa .chart div[data-widget-type="link-button-component"]:nth-child(6) .link-btn {
  animation-delay: 1.8s;
}

.chart--page-builder.landkarte-dwa .chart div[data-widget-type="link-button-component"]:nth-child(7) .link-btn {
  animation-delay: 2.1s;
}

.chart--page-builder.landkarte-dwa .chart div[data-widget-type="link-button-component"]:nth-child(8) .link-btn {
  animation-delay: 2.4s;
}

.chart--page-builder.landkarte-dwa .chart div[data-widget-type="link-button-component"]:nth-child(9) .link-btn {
  animation-delay: 2.7s;
}

.chart--page-builder.landkarte-dwa .chart div[data-widget-type="link-button-component"]:nth-child(10) .link-btn {
  animation-delay: 3.0s;
}

/** Landkarte -- ENDE **/
/** Übersicht -- START **/
body:not(.contrast--normal) .overview-wrapper .chapter-wrapper {
  --chapter-color: var(--black) !important;
}

body:not(.contrast--normal) .overview-wrapper .chapter-icon img {
  filter: brightness(0) saturate(100%) invert(92%) sepia(100%) saturate(7500%) hue-rotate(356deg) brightness(103%) contrast(103%) !important;
}

/* body:not(.contrast--normal) .overview-wrapper {
   backdrop-filter: brightness(0) saturate(100%) invert(8%) sepia(87%) saturate(5991%) hue-rotate(242deg) brightness(126%) contrast(135%);
} */

@media only screen and (max-width: 1530px) {
  .overview .topicContainer#ib56c {
    gap: 0px !important;
    padding-left: 11px !important;
    zoom: 0.83;
  }

  .overview {
    width: 91%;
    max-width: 1365px;
  }

}

@media only screen and (max-width: 1200px) {
  .overview .topicContainer {
    flex-direction: column !important;
    align-items: center !important;
    background-repeat: no-repeat;
    background-image: url("../uploads/store/1606814/Vector 1.svg");
    background-position: center !important;
    background-size: contain !important;
  }

  .overview .topicContainer#ib56c {
    gap: 30px !important;
    zoom: 1;
  }

  #i54te {
    background-image: none !important;
  }
}

@media only screen and (max-width: 768px) and (orientation:portrait) {
  .overview-wrapper {
    background-repeat: no-repeat;
    background-image: url("../uploads/store/1606814/Vector 1.svg") !important;
    background-position: center !important;
    background-size: contain !important;
  }

  .row-parent {
    flex-direction: column !important;
    height: max-content !important;
    /* now the column equivalent */
  }

  .chapter-wrapper {

    max-width: 94%;

  }

  #chart-container .overview-wrapper {
    padding: 3vw 3vw 10vw;
  }
}


#idlky-3 img {
  position: relative;
  z-index: 2;
}


#iq9rc-4 {
  position: relative;
  z-index: 1;
}




#idlky-3::after {
  -webkit-filter: brightness(0) saturate(100%) invert(35%) sepia(54%) saturate(449%) hue-rotate(76deg) brightness(92%) contrast(86%);

  filter: brightness(0) saturate(100%) invert(35%) sepia(54%) saturate(449%) hue-rotate(76deg) brightness(92%) contrast(86%);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../uploads/store/1606857/overviewTemplate.svg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;

  z-index: 10;

  pointer-events: none;

}

#idlky-3,
#idlky-3-2,
#idlky-3-2-2,
#idlky-3-2-4,
#idlky-3-2-2-2 {
  position: relative;
  z-index: 1;
}

#idlky-3-2::after {
  -webkit-filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(1578%) hue-rotate(181deg) brightness(97%) contrast(102%);
  filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(1578%) hue-rotate(181deg) brightness(97%) contrast(102%);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../uploads/store/1606857/overviewTemplate.svg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
  pointer-events: none;
}

#idlky-3::after {
  -webkit-filter: brightness(0) saturate(100%) invert(19%) sepia(26%) saturate(3333%) hue-rotate(245deg) brightness(87%) contrast(107%);
  filter: brightness(0) saturate(100%) invert(19%) sepia(26%) saturate(3333%) hue-rotate(245deg) brightness(87%) contrast(107%);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../uploads/store/1606857/overviewTemplate.svg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;

  z-index: 10;

  pointer-events: none;
}

#idlky-3-2-2::after {
  -webkit-filter: brightness(0) saturate(100%) invert(34%) sepia(42%) saturate(657%) hue-rotate(139deg) brightness(94%) contrast(91%);
  filter: brightness(0) saturate(100%) invert(34%) sepia(42%) saturate(657%) hue-rotate(139deg) brightness(94%) contrast(91%);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../uploads/store/1606857/overviewTemplate.svg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;

  z-index: 10;

  pointer-events: none;
}

#idlky-3-2-2-2::after {
  -webkit-filter: brightness(0) saturate(100%) invert(35%) sepia(54%) saturate(449%) hue-rotate(76deg) brightness(92%) contrast(86%);
  filter: brightness(0) saturate(100%) invert(35%) sepia(54%) saturate(449%) hue-rotate(76deg) brightness(92%) contrast(86%);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../uploads/store/1606857/overviewTemplate.svg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
  pointer-events: none;
}




#iq9rc-4-2 {
  position: relative;
  z-index: 1;
}


body:not(.contrast--normal) #irut5-4,
body:not(.contrast--normal) #irut5-4-2,
body:not(.contrast--normal) #irut5-4-2-2 {
  border-color: var(--black);
}

body:not(.contrast--normal) #idlky-3::after,
body:not(.contrast--normal) #idlky-3-2::after,
body:not(.contrast--normal) #idlky-3-2-2::after,
body:not(.contrast--normal) #idlky-3-2-2-2::after {
  filter: brightness(0) saturate(100%) invert(8%) sepia(87%) saturate(5991%) hue-rotate(242deg) brightness(126%) contrast(135%);


}

body:not(.contrast--normal) .overview img {
  filter: brightness(0) saturate(100%) invert(92%) sepia(100%) saturate(7500%) hue-rotate(356deg) brightness(103%) contrast(103%) !important;
}



/** Übersicht -- ENDE **/


/** Media Queries LANDKARTE  -- START **/
@media only screen and (max-width: 768px) {

  .chart--page-builder.landkarte-dwa {
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    /* wichtig, falls vorher 100vh */
    background-position: top center;
  }

  .chart--page-builder.landkarte-dwa .link-btn {
    position: static !important;
    transform: none !important;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 90vw;
  }

  .chart--page-builder.landkarte-dwa .link-btn::before,
  .chart--page-builder.landkarte-dwa .link-btn::after {
    display: none;
  }

  .chart--page-builder.landkarte-dwa .link-btn.btn--unvisited {
    background-color: var(--tertiary-light) !important;

  }
}

/** Media Queries LANDKARTE -- END **/
/** PAGE BUILDER -- START **/

/** TUTORIAL -- START **/
.tutorial .grid-container {
  backdrop-filter: blur(10px);
}

.tutorial-content {
  display: flex !important;
  flex-wrap: wrap !important;
  /* Das ist der Zauberbefehl für 50/50 */
  flex-direction: row !important;
  justify-content: flex-start !important;
}

/* Jeder einzelne Eintrag darin */
.tutorial-content>div {
  flex: 0 0 50% !important;
  /* Nimmt genau die Hälfte der Breite ein */
  min-width: 300px !important;
  /* Damit es auf kleinen Schirmen nicht zu gequetscht wird */
  box-sizing: border-box !important;
}

@media only screen and (max-width: 450px) {
  .tutorial-content>div {
    min-width: 250px !important;
    flex: 0 0 100% !important;
  }
}

/** TUTORIAL -- END **/

/** BACKEND -- START **/

div[data-gjs-type="wrapper"] {
  overflow: overlay;
}

/** BACKEND -- END **/
/** IFRAME Youtube  -- START **/
.chart iframe {
  display: block;
  /* remove inline‐element whitespace */
  width: 100%;
  height: 100%;
  border: none;
  /* remove default border */
}

.chart .iframe-yt .gjs-widget-container {
  height: 100%;
}

/** IFRAME Youtube  -- START **/


/** LANDKARTE -- START **/

.landkarte .btn-icon-container {
  display: none !important;
}

.landkarte a.clicked .btn-icon-container {
  display: flex !important;
}


body:not(.font-size--normal) .landkarte .grid-container .landkarte .gjs-widget-container>div[data-widget-type=link-button-component] {
  height: auto !important;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

}

body:not(.font-size--normal) .landkarte .grid-container .landkarte .gjs-widget-container>div[data-element-type=gjs-flex-layout-widget] {
  min-width: fit-content;
}

body:not(.font-size--normal) .landkarte .grid-container .landkarte .gjs-widget-container .btn-title {
  hyphens: auto;
}

.landkarte .grid-container .landkarte .gjs-widget-container .gjs-widget-container {
  align-items: stretch !important;

}

.landkarte .grid-container .landkarte .gjs-widget-container>div[data-widget-type=link-button-component] {
  height: auto !important;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 15vh;
  min-width: 45%;

}



/** LANDKARTE -- END **/

.chart--page-builder div[data-widget-type="image-component"] div.gjs-widget-container {
  width: 100%;
  height: 100%;
}

.chart--page-builder div[data-widget-type="image-component"] img {
  object-fit: cover;
  display: block;
}

@media (min-height: 768px) {
  .chart--page-builder:not(.visualchart01) div[data-widget-type="image-component"] img {
    max-height: calc(100vh - var(--footer-height));
  }
}

/* icon for box */
.blueBox {
  background-color: var(--primary);
  color: var(--text-inverse);
  /*box-shadow: 0 .1875rem .375rem rgba(0, 0, 0, .16);*/
  border-radius: var(--border-radius-vc);
}

.whiteBox {
  background-color: var(--white);
  color: var(--text);
  border: 2px solid var(--primary);
  border-radius: var(--border-radius-vc);
}


.image-radius img {
  border-radius: var(--border-radius-vc);
}

.chart--page-builder .whiteBox,
.chart--page-builder .whiteBox.icon,
.chart--page-builder .blueBox.icon {
  position: relative;
  -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.chart--page-builder .icon:after {
  content: "";
  background-image: url('');
  background-size: contain;
  background-color: var(--white);
  background-repeat: no-repeat;
  border-radius: var(--border-radius-full);
  position: absolute;
  right: 0;
  top: 0;
  width: 3.5em;
  height: 3.5em;
  translate: 50% -50%;
  z-index: 2;
  -webkit-animation: bounce-top 0.9s both;
  animation: bounce-top 0.9s both;
}

body:not(.contrast--normal) .chart--page-builder .icon:after {
  background-image: url('');
}

/***************************************************/
/* .accordion   ACCORDION - START */
.accordion>div {
  gap: 1em;
}

.chart--page-builder .accordion summary {
  flex-direction: row-reverse !important;
}

.chart--page-builder details {
  border: none;
  /*background-color: var(--primary);*/
  background-color: var(--gray-100);
  border-radius: var(--border-radius-accordion);
  -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;
}

.chart--page-builder details:nth-child(1) {
  animation-delay: 0s;
}

.chart--page-builder details:nth-child(2) {
  animation-delay: 0.3s;
}

.chart--page-builder details:nth-child(3) {
  animation-delay: 0.6s;
}

.chart--page-builder details:nth-child(4) {
  animation-delay: 0.9s;
}

.chart--page-builder details:nth-child(5) {
  animation-delay: 1.2s;
}

.chart--page-builder details:nth-child(6) {
  animation-delay: 1.5s;
}

.chart--page-builder details:nth-child(7) {
  animation-delay: 1.8s;
}

.chart--page-builder details:nth-child(8) {
  animation-delay: 2.1s;
}

.chart--page-builder details:nth-child(9) {
  animation-delay: 2.4s;
}

.chart--page-builder details:nth-child(10) {
  animation-delay: 2.7s;
}


.accordion-p-wrapper {
  padding: 1rem 2rem 1rem;
}

.accordion-p-wrapper p,
.accordion-p-wrapper h3 {
  margin: 0;
  color: var(--accordion-header-color, var(--black));
}

details[open] .accordion-p-wrapper p,
details[open] .accordion-p-wrapper h3 {
  color: var(--accordion-open-header-color, var(--black));
}

.accordion-summary-icon {
  width: 3.5rem !important;
  padding: 1rem !important;
  padding-right: 1rem !important;
  font-size: var(--font-size-medium);
}

.accordion-summary-icon i {
  scale: 1.5;
}

.chart--page-builder div[data-widget-type="accordion-component"] .gjs-widget-container details[open] .accordion-summary-icon {
  -webkit-animation: rotate-center 0.6s ease-in-out both;
  animation: rotate-center 0.6s ease-in-out both;
}


.accordion .accordion-component-bod {
  padding: 0 1em 1em;
}

.chart--page-builder div[data-widget-type="accordion-component"] .gjs-widget-container details:not([open]) {
  border-radius: var(--border-radius-accordion);
}

.chart--page-builder div[data-widget-type="accordion-component"] .gjs-widget-container details:not([open]) .accordion-summary {
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius-accordion);
  color: var(--accordion-header-color, var(--black));
  background-color: var(--accordion-header-bg-color, var(--gray-100));
}

.chart--page-builder summary:hover,
.chart--page-builder summary:focus {
  background: inherit;
}

.chart--page-builder div[data-widget-type="accordion-component"] .gjs-widget-container details[open] {
  box-shadow: var(--box-shadow);
  /*border: 2px solid var(--primary); */

  border-radius: var(--border-radius-accordion);
  color: var(--accordion-body-color, var(--text));
  padding-bottom: 1rem;
  background-color: var(--accordion-body-bg-color, var(--gray-100));
}

.chart--page-builder div[data-widget-type="accordion-component"] .gjs-widget-container details[open] summary {
  background-color: var(--accordion-open-header-bg-color, var(--gray-100));
  color: var(--accordion-open-header-color, var(--primary-900));
  border-radius: var(--border-radius-accordion) var(--border-radius-accordion) 0 0;
}

.chart--page-builder div[data-widget-type="accordion-component"] .gjs-widget-container details[open] div[data-widget-type="accordion-component-body"] {
  min-height: 0;
  background-color: var(--accordion-body-bg-color, var(--gray-100));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-height: 160px;
  padding: 2rem !important;

}

.chart--page-builder div[data-widget-type="accordion-component"] .gjs-widget-container details[open] div[data-widget-type="accordion-component-body"] p:first-child {
  margin-top: 0;
}

.chart--page-builder div[data-widget-type="accordion-component"] .gjs-widget-container details[open] div[data-widget-type="accordion-component-body"] p:last-child {
  margin-bottom: 0;
}


/* .accordion   ACCORDION - END (without MQ) */
/***************************************************
/** FLIP CARDS -- START **/

.chart--page-builder .card-item .card__front h3 {
  margin: 0;
}

.chart--page-builder .card-item .card__turnaround * {
  hyphens: auto;
}

.chart--page-builder .card-item ul {
  list-style-type: disc;
}

/*
.card-item.card-item--flip .card__back.blue {
  background-color: var(--primary);
}

.card-item.card-item--flip .card__back.green {
  background-color: var(--secondary-600);
}*/
.card-item {
  min-height: 200px;
}

.card__back {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1em;
  border-radius: 10px !important;
}

.card__front {
  border-radius: 10px !important;
}

.revert-icon {
  position: absolute !important;
  top: 15px;
  right: 15px;
  width: var(--icon-size-l);
  height: var(--icon-size-l);
  margin: 0 !important;
  z-index: 10;
  transform: rotate(-15deg);
}

.card__back h3 {
  color: var(--black);
}

body:not(.font-size--normal, .gjs-dashed) .card__back h3 {
  margin-right: 50px;
}

.card__front h2 {
  color: var(--white);
}

body:not(.font-size--normal, .gjs-dashed) .card__back,
body:not(.font-size--normal, .gjs-dashed) .card__front {
  padding: 1.1em 0.5em 0.5em !important;
  line-height: 1;
}


body:not(.font-size--normal, .gjs-dashed) .card__back p,
body:not(.font-size--normal, .gjs-dashed) .card__front p {
  line-height: 1;
}

.card__back.margin--auto div[data-widget-type="text-component"] {
  margin-block: auto;
}


body:not(.animation--hidden) .cards-container .cards-list li {
  animation: slide-in-bottom 1s ease-in-out both;

}

body:not(.animation--hidden) .cards-container .cards-list li:nth-child(1) {
  animation-delay: 0s;
}

body:not(.animation--hidden) .cards-container .cards-list li:nth-child(2) {
  animation-delay: 0.3s;
}

body:not(.animation--hidden) .cards-container .cards-list li:nth-child(3) {
  animation-delay: 0.6s;
}

body:not(.animation--hidden) .cards-container .cards-list li:nth-child(4) {
  animation-delay: 0.9s;
}

body:not(.animation--hidden) .cards-container .cards-list li:nth-child(5) {
  animation-delay: 1.2s;
}

body:not(.animation--hidden) .cards-container .cards-list li:nth-child(6) {
  animation-delay: 1.5s;
}

body:not(.animation--hidden) .cards-container .cards-list li:nth-child(7) {
  animation-delay: 1.8s;
}

body:not(.animation--hidden) .cards-container .cards-list li:nth-child(8) {
  animation-delay: 2.1s;
}

body:not(.animation--hidden) .cards-container .cards-list li:nth-child(9) {
  animation-delay: 2.4s;
}

body:not(.animation--hidden) .cards-container .cards-list li:nth-child(10) {
  animation-delay: 2.7s;
}

body:not(.font-size--normal) .flipCards2 .cards-list {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 100ch;
}

body:not(.contrast--normal) .flipCards2 .font-size-card-title h3 {
  background-color: var(--primary);
}


body:not(.font-size--normal) .flipCards4 .cards-list {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 100ch;
}

body:not(.font-size--normal) .flipCards2 .cards-list .font-size-card-title,
body:not(.font-size--normal) .flipCards4 .cards-list .font-size-card-title {
  margin: 0 !important;
}


body:not(.font-size--normal) .flipCards3 .cards-list {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  min-height: 100ch;
  grid-auto-flow: row !important;
}


body:not(.contrast--normal, .gjs-dashed) .card-item .card__back,
body:not(.contrast--normal, .gjs-dashed) .card-item .card__back * {
  color: var(--white);
  background-color: var(--black);
}

body:not(.contrast--normal, .gjs-dashed) .card-item .card__front,
body:not(.contrast--normal, .gjs-dashed) .card-item .card__front * {
  color: var(--black);
  background-color: var(--white);
}

body:not(.contrast--normal, .gjs-dashed) .card-item .card__back,
body:not(.contrast--normal, .gjs-dashed) .card-item .card__front {
  border: 2px solid var(--black);
}


/** FLIP CARDS -- END **/
/** FLIP CARDS NEW -- START **/

.chart--page-builder .card {
  box-shadow: none;

}


/** FLIP CARDS NEW -- END **/
/** TABS Interaction in PB -- START **/


[data-widget-type="tabs-navigation-component"] button.tab[aria-selected="true"]:hover,
[data-widget-type="tabs-navigation-component"] button.tab[aria-selected="true"]:focus {
  color: var(--tab-active-color);
  z-index: 1;
  background-color: var(--tab-active-bg);
}

[data-widget-type="tabs-navigation-component"].tabs--indicator-underline .tab[aria-selected="true"] {
  box-shadow: inset 0 calc(-1 * var(--tab-indicator-size, 4px)) 0 0 var(--gray-100, #f1f2f3) !important;
}

[data-widget-type="tabs-navigation-component"] .tabpanel img {
  border-radius: var(--border-radius-vc);
}

/* Hide truly empty paragraphs */
[data-widget-type="tabs-navigation-component"] .tabpanel p:empty {
  display: none;
  margin: 0;
}

/* First non-empty paragraph */
[data-widget-type="tabs-navigation-component"] .tabpanel p:not(:empty):not(p:not(:empty) ~ p:not(:empty)) {
  margin-top: 0;
}

/* Last non-empty paragraph */
[data-widget-type="tabs-navigation-component"] .tabpanel p:not(:empty):not(:has(~ p:not(:empty))) {
  margin-bottom: 0;
}

/** TABS Interaction in PB -- END **/
/** PAGE BUILDER -- END **/
/**********************************************************************/

/** MEDIA QUERIES -- START **/



.chart--page-builder.visualchart01 #chart-container>div>div[data-element-type=gjs-flex-layout-widget],
.chart--page-builder.visualchart01 #chart-container .grid-container {
  padding: 0;



}

@media (max-width: 1200px),
(max-height: 810px) {


  .chart--page-builder .flipCards3 .cards-list,
  .chart--page-builder .flipCards4 .cards-list {
    min-height: 31ch;
  }

}

@media (max-height: 810px) {

  .chart--page-builder .flipCards2 .cards-list {
    min-height: 31ch;
  }

}

@media (max-width: 992px) {

  .chart-renderer:has(.visualchart01, .visualchart03, .visualchart04, .visualchart05, .visualchart06) .grid-container .content .gjs-widget-container,
  .chart-renderer:has(.visualchart03, .visualchart04, .visualchart05, .visualchart06) .grid-container .content .gjs-widget-container>div[data-element-type=gjs-flex-layout-widget] {
    overflow: visible !important;
  }


  .tutorial .grid-container .tutorial>div,
  .abschlussseiteBox .grid-container .content>div,
  .abschlussseiteBox .grid-container .content>div .gjs-widget-container>div:not(.whiteBox),
  .startseiteBox .grid-container .content>div,
  .startseiteBox .grid-container .content>div .gjs-widget-container>div:not(.whiteBox),
  .landkarte .grid-container .landkarte>div,
  .landkarte .grid-container .landkarte .gjs-widget-container>div[data-element-type=gjs-flex-layout-widget],
  .visualchart01 .grid-container .content .gjs-widget-container>div[data-widget-type=accordion-component],
  .chart-renderer:has(.visualchart01, .visualchart03, .visualchart04, .visualchart05, .visualchart06) .grid-container .content>div,
  .chart-renderer:has(.visualchart01, .visualchart03, .visualchart04, .visualchart05, .visualchart06) .grid-container .content .gjs-widget-container>div:not([data-element-type=gjs-plugin-widget], .box-paddings-reset) {
    padding: 0 !important;
  }


  .startseiteBox .grid-container .gjs-widget-container:has(.link-btn) {
    justify-content: center;
  }

  .landkarte .grid-container .landkarte .gjs-widget-container>div[data-element-type=gjs-flex-layout-widget] {
    width: fit-content !important;
    max-width: 500px;
    min-width: 50%;
  }


  .landkarte .grid-container .landkarte .gjs-widget-container .btn-title {
    hyphens: auto;
  }

}

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

  .chart.chart--multiple .multiple__answers .multiple__item .multiple__answer {
    width: 100% !important;
  }

  .chart--page-builder .flipCards2 .cards-list {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .chart--page-builder .flipCards3 .cards-list,
  .chart--page-builder .flipCards4 .cards-list {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    min-height: 50ch;
    grid-auto-flow: row !important;
  }

  .whiteBox {
    width: fit-content !important;
  }

  .cbook-container {
    --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 only screen and (min-width: 576px) {

  .app-menu .close-btn,
  .app-menu .close-btn:hover,
  .app-menu .close-btn:active,
  .app-menu .close-btn:focus {
    left: auto;
  }

}

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

  .chart__buttonbar {
    position: relative;
    width: fit-content;
  }

  .chart__buttonbar .chart__btn {
    width: 100%;
  }

  body:not(.font-size--normal) .flipCards3 .cards-list,
  .chart--page-builder .flipCards3 .cards-list {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);
    min-height: 100ch;
  }

  body:not(.font-size--normal) .flipCards4 .cards-list,
  .chart--page-builder .flipCards4 .cards-list {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 1fr);
    min-height: 100ch;
  }

  .chart--page-builder .cards-list .card-item {
    min-height: 20vh;
  }


  .app-footer .progress-display {
    pointer-events: none;
    visibility: hidden;
  }

}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/** MEDIA QUERIES -- END **/


/** BARRIEREFREIHEIT -- START **/
#cbook-html body#cbook-body:not(.contrast--normal),
body#extension-body:not(.contrast--normal),
#cbook-html body:not(.contrast--normal) .cbook-container,
body#cbook-body:not(.contrast--normal) .chart--dnd .dnd__draggables {
  --text: var(--black);
  --chart-bg-color: initial;
  --footer-bg: initial;
  --client-dark-gray: var(--black);

  --primary: var(--black);
  --primary-900: var(--black);
  --primary-800: var(--black);
  --primary-700: var(--black);
  --primary-600: var(--black);
  --primary-500: var(--primary);
  --primary-400: var(--black);
  --primary-300: var(--black);
  --primary-200: var(--black);
  --primary-100: var(--black);
  --primary-50: var(--black);

  --secondary: var(--black);
  --tertiary: var(--white);

  --media-player-color: var(--white);
  --header-color: var(--white);
  --button-chart-text--hover: var(--black);
  --button-border-hover: 1.5px solid var(--black);
  --button-background-hover: var(--white);
  --true: var(--black);
  --false: var(--black);
}


#cbook-html body:not(.contrast--normal) .cbook-container button {
  --secondary: var(--white);
}

#cbook-html body:not(.contrast--normal) .cbook-container button:hover {
  background-color: var(--white);
}

body:not(.contrast--normal) .app-menu__results .progress-display__svg * {
  stroke: var(--black) !important;
}

body:not(.contrast--normal) .social-app .social-app-header {
  background-color: var(--white);
}

body:not(.contrast--normal) .ui-switch__handler {
  background: var(--black);
}

body:not(.contrast--normal) .ui-switch.on:hover,
body:not(.contrast--normal) .ui-switch.on:focus {
  background: var(--white);
}

body:not(.contrast--normal) .chart--page-builder a.link-btn:hover {
  color: var(--black) !important;
  background: var(--white) !important;
  --button-border: var(--button-border-hover);
}

body:not(.contrast--normal) .chart--page-builder .card-item .card__front h3 {
  background: var(--white);
}

body:not(.contrast--normal) .chart--page-builder .whiteBox {
  background-color: var(--white) !important;
  border-color: var(--black) !important;
}

body:not(.contrast--normal) .chart--page-builder div[data-widget-type="accordion-component"] .gjs-widget-container details:not([open]) .accordion-summary {
  border: 1px solid var(--black);
}

body:not(.contrast--normal) .chart--mrfish .sidebar {
  background: var(--black);
}

body#cbook-body.bg--hidden *:not(.card__front, .card__back) {
  background-image: none;
}

body#cbook-body.bg--hidden *:has(.rte-container) .rte-container button span {
  background-image: initial;
}

body#cbook-body.bg--hidden .chart.chart--multiple .chart__background-image,
body#extension-body.bg--hidden .chart.chart--multiple .chart__background-image {
  display: block;
}

body#cbook-body.animation--hidden .card-item .card__front,
body#cbook-body.animation--hidden .card-item .card__back {
  transition: none;
}

body:not(.contrast--normal) .controls__progress .controls__progress-bg {
  border: 2px solid var(--white);
}




body:not(.contrast--normal) .controls__volume-slider {
  accent-color: var(--input-bg);
}

body:not(.contrast--normal) .media-player button.media-play__hero {
  background-color: var(--black);
}

/** BARRIEREFREIHEIT -- END **/



/** ANIMATIONS (BF unabhängig) + Keyframes -- START **/
.chart--page-builder .btn-attention {

  animation: pulse-animation-btn 7s linear infinite both;
}

@keyframes pulse-animation-btn {

  /* offsets trace a circle, blur (10px) and spread (10px) stay constant */
  0% {
    box-shadow: 10px 0 10px 10px var(--primary-500_30);
  }

  12.5% {
    box-shadow: 7px 7px 10px 10px var(--primary-500_30);
  }

  25% {
    box-shadow: 0 10px 10px 10px var(--primary-500_30);
  }

  37.5% {
    box-shadow: -7px 7px 10px 10px var(--primary-500_30);
  }

  50% {
    box-shadow: -10px 0 10px 10px var(--primary-500_30);
  }

  62.5% {
    box-shadow: -7px -7px 10px 10px var(--primary-500_30);
  }

  75% {
    box-shadow: 0 -10px 10px 10px var(--primary-500_30);
  }

  87.5% {
    box-shadow: 7px -7px 10px 10px var(--primary-500_30);
  }

  100% {
    box-shadow: 10px 0 10px 10px var(--primary-500_30);
  }
}

@keyframes wave-border {
  0% {
    transform: translate(-50%, -50%) scale(1);
    border-color: var(--primary);
    opacity: 0.7;
  }

  33% {
    border-color: var(--primary-200)
  }

  66% {
    border-color: var(--primary-700);
  }

  100% {
    transform: translate(-50%, -50%) scale(1.8);
    border-color: var(--primary);
    opacity: 0;
  }
}

.wave-layer .chart__background-image {
  position: absolute;
  width: 150%;
  height: 100%;
  object-position: 0 85%;
  animation: waveScroll 18s linear infinite;
  will-change: transform;
}

@keyframes waveScroll {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-25%);
  }

  100% {
    transform: translateX(0%);
  }
}

/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }

  24% {
    opacity: 1;
  }

  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }

  24% {
    opacity: 1;
  }

  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}



/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

.text-focus-in {
  -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}


/************************* FISH -- START ******************************************/
/**********************************************************************************/

/* =============================================================================
   Base / Typography / Media
   ========================================================================== */
.chart--mrfish .App,
.chart--mrfish .video-js {
  font-family: var(--font-paragraph);
}

.chart--mrfish .background-image {
  object-fit: cover;
  max-width: 100vw;
  height: 100%;
  min-width: 100vw;
  /* missing semicolon fixed */
}

.chart--mrfish .video-player {
  width: 100vw;
  object-fit: cover;
  max-width: 100vw;
  height: 100%;
  min-width: 100vw;
}

/* =============================================================================
   Interaction Sidebar – Buttons
   ========================================================================== */
.chart--mrfish .interaction-sidebar button {
  --button-border-radius: var(--border-radius-mc);
  --button-chart-text--hover: var(--primary-light);
  --button-background-hover: var(--primary);
  --button-border: 1.5px solid transparent;
  --button-border-hover: 1.5px solid var(--primary-light);
  --button-padding: var(--space-small);
  padding: var(--button-padding);
  --button-text: var(--black);
  -button-background: var(--white);
  background: var(--white);
}


.chart--mrfish .interaction-sidebar button .rich-text {
  color: var(--button-text);
  margin: 0;
}

.chart--mrfish .interaction-sidebar button:hover .rich-text {
  color: var(--button-chart-text--hover);
}

/* Draggable states in the sidebar */
.interaction-sidebar .draggable.dnd-answer--isDisabled,
.interaction-sidebar .draggable.dnd-answer--isDragging,
.interaction-sidebar .draggable.dnd-answer--isCurrentlyActive {
  background: var(--button-background-hover);
  color: var(--button-chart-text--hover);
  border: var(--button-border-hover);
}

.interaction-sidebar .draggable.dnd-answer--isDisabled .rich-text,
.interaction-sidebar .draggable.dnd-answer--isDragging .rich-text,
.interaction-sidebar .draggable.dnd-answer--isCurrentlyActive .rich-text {
  color: var(--button-chart-text--hover);
}

.draggable:after {
  border-bottom: var(--border-bottom);
  border-width: 5px;
}

/* =============================================================================
   Start / Continue / Try Again – Overlay Panels
   ========================================================================== */

/* Common overlay styles (+ animation) for start/weiter/tryAgain panels */
.chart--mrfish #safearea:has(:is(#start, #weiter, #tryAgain)) .scene-elements--safe-area {
  animation: fade-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

  /* Panel box */
  flex-direction: column;
  background-color: var(--white);
  height: 100%;
  width: 100%;
  margin-bottom: var(--chart-content-padding-block);
  padding: var(--space-x-large);
  border-bottom: var(--border-bottom);
  align-items: center;
  justify-content: end;

  /* Positioning */
  position: fixed;
  left: 0;
  right: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /* Background artwork
  background-image: ;*/
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Right-sidebar variant: override side + background image */
.chart--mrfish.sidebar-default--right #safearea:has(:is(#start, #weiter, #tryAgain)) .scene-elements--safe-area {
  right: 0;
  left: auto;
  /*background-image: */
}

.chart--mrfish.sidebar-default--left #safearea:has(:is(#start, #weiter, #tryAgain)) .scene-elements--safe-area {
  left: 0;
  right: auto;
  bottom: 5rem;
}

#safearea:has(:is(#start, #weiter, #tryAgain)) .scene-elements--safe-area>.rich-text.active {
  width: 60%;
}

#safearea:has(:is(#start, #weiter, #tryAgain)) .scene-elements--safe-area>.rich-text.active h2 {
  margin-bottom: var(--space-large);
}


/* =============================================================================
   New Start screen
   ========================================================================== */

.chart--mrfish.new-start-screen #player-container.scene-startS5 .scene-elements--safe-area,
.chart--mrfish.new-start-screen #player-container.scene-startS1 .scene-elements--safe-area {
  flex-direction: column;
  width: 50%;
  height: fit-content;
  padding: 2rem;
  background-color: var(--white);
  border-radius: var(--border-radius-vc);
  border: 2px solid var(--primary);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  animation-name: scale-in-center;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}

.chart--mrfish.new-start-screen #player-container.scene-startS1 .scene-elements--safe-area {
  width: 60%;
}

.chart--mrfish.new-start-screen #player-container.scene-startS5 .scene-elements--safe-area div,
.chart--mrfish.new-start-screen #player-container.scene-startS1 .scene-elements--safe-area div {
  text-align: center;
}

.chart--mrfish.new-start-screen #player-container.scene-startS5 .scene-elements--safe-area h1,
.chart--mrfish.new-start-screen #player-container.scene-startS1 .scene-elements--safe-area h1 {
  margin-bottom: 0;
}



/* =============================================================================
   Rich Text defaults inside chart
   ========================================================================== */
.chart--mrfish .rich-text {
  text-align: left;
}

/* =============================================================================
   Regular Question block
   ========================================================================== */
.regularQuestion p {
  color: var(--white);
}

.regularQuestion h3 {
  font-size: var(--font-size-xx-large);
  color: var(--primary);
}

/* Stack following buttons under a regular question with a 20px gap */
.regularQuestion+div>div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* High-contrast override */
body:not(.contrast--normal) .regularQuestion p {
  color: var(--black);
}

/* =============================================================================
   Scene – Buttons inside safe area
   ========================================================================== */
.chart--mrfish .scene-elements--safe-area .btn {
  font-size: var(--font-size-large);
}

/* =============================================================================
   Interaction Sidebar – Layout & Variants
   ========================================================================== */
.chart--mrfish .interaction-sidebar {
  top: auto;
  right: 0;
  left: auto;
  box-shadow: none !important;
  background: hsl(var(--gray-hue), var(--gray-sat), 100%, 0.25);
  padding: var(--space-x-large);
  min-width: 33%;
  margin: var(--chart-content-padding-block) var(--chart-content-padding-inline) var(--chart-content-padding-block);
  height: calc(100% - var(--chart-content-padding-block) - var(--footer-height));
  border-bottom: var(--border-bottom);
  gap: var(--space-small);
  max-width: 50% !important;
  align-self: anchor-center;
}

.chart--mrfish .interaction-sidebar.sidebar--left {
  right: auto;
  left: 0;
}

body:not(.font-size--normal) .chart--mrfish .interaction-sidebar {
  max-width: 40% !important;
}

body:not(.contrast--normal) .chart--mrfish .sidebar {
  background: var(--white);
}

.interaction-sidebar.interaction-sidebar--aside.active,
.interaction-sidebar.interaction-sidebar--aside.inactive {
  top: auto;
  bottom: 0;
}

.chart--mrfish .interaction-sidebar .scroll-snap-container {
  gap: var(--space-small);
  display: flex;
  flex-direction: column;
}

body:not(.font-size--x-large) .chart--mrfish .interaction-sidebar .scroll-snap-container {
  overflow: hidden;
}

/* Hide draggable icon visuals (if present) */
.draggable__icon {
  display: none;
}

/* =============================================================================
   Safe Area & Droppable Zone
   ========================================================================== */
.chart--mrfish .scene-elements--safe-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-large);
}

.chart--mrfish .scene-elements--safe-area .droppable-area,
.chart--mrfish:has(.sidebar--left) .scene-elements--safe-area .droppable-area,
.chart--mrfish:has(.sidebar--right) .scene-elements--safe-area .droppable-area {
  background: var(--white);
  --white: hsl(var(--gray-hue), var(--gray-sat), 100%, 0.25);
  height: 20%;
  min-height: calc(4 * var(--font-size-xx-large));
  width: 65%;
  min-width: 300px;
  top: auto;
  bottom: calc(1.5 * var(--footer-height));
  translate: -50% 0;
  backdrop-filter: blur(10px);
}

.chart--mrfish .scene-elements--safe-area .droppable-area:before {
  content: "";
  background-color: var(--white);
  --white: hsl(var(--gray-hue), var(--gray-sat), 100%);
  height: calc(100% - 2 * var(--font-size-xx-large));
  width: calc(100% - 2 * var(--font-size-xx-large));
  margin: var(--font-size-xx-large);
  border-radius: var(--border-radius-medium);
}


.chart--mrfish .questionDndQuestion h3,
.chart--mrfish .questionDndQuestion p {
  color: var(--black);
}

/* Question text inside DnD blocks */
.questionDndQuestion p {
  color: var(--white);
}

.chart--mrfish:has(.sidebar--left) .scene-elements--safe-area .droppable-area {
  left: 85%;
}

.chart--mrfish:has(.sidebar--right) .scene-elements--safe-area .droppable-area {
  left: 10%;
}

/* =============================================================================
   Player Controls – Base & Variants
   ========================================================================== */
.chart--mrfish .media-controls {
  height: var(--button-height);
  width: var(--button-width);
  box-shadow: none;
  opacity: 1;
}

.chart--mrfish .media-controls:hover {
  transform: none;
}

/* Sidebar-left placement */

/*
.chart--mrfish.sidebar--left:has(:not(.sidebar--right)) .media-controls,
.chart--mrfish.sidebar--left:has(:not(.sidebar--right)) .media-controls__playpause,
.chart--mrfish:has(.sidebar--left, :not(.sidebar--right)) .media-controls,
.chart--mrfish:has(.sidebar--left :not(.sidebar--right)) .media-controls__playpause { 
    right: 0;
    left:auto; }*/
/*

    .chart--mrfish:is(.sidebar--right :has(.sidebar--right))
            :not(:is(.sidebar--left, :has(.sidebar--left)))
            :is(.media-controls, .media-controls__playpause) {
  right: 0;
  left: auto; /* make the intent explicit */
/*
}

 .chart--mrfish:is(.sidebar--right, :has(.sidebar--right))
            :not(:is(.sidebar--left, :has(.sidebar--left)))
            :is(.media-controls__volume-area) {
  right: calc(var(--button-width) * 4 - 3px);
  left:auto;
}

 .chart--mrfish:is(.sidebar--right, :has(.sidebar--right))
            :not(:is(.sidebar--left, :has(.sidebar--left)))
            :is( .media-controls__subtitle-selector) {
  right: calc(var(--button-width) * 5 - 3px);
  left:auto;
}*/

/* Firefox nudges */
.browser-firefox .chart--mrfish.sidebar--left .media-controls__volume-area,
.browser-firefox .chart--mrfish:has(.sidebar--left) .media-controls__volume-area {
  right: calc(var(--button-width) * 5 + 3px);
  left: auto;
}

.browser-firefox .chart--mrfish.sidebar--left .media-controls__subtitle-selector,
.browser-firefox .chart--mrfish:has(.sidebar--left) .media-controls__subtitle-selector {
  right: calc(var(--button-width) * 6 + 3px);
  left: auto;
}

/* Sidebar-right placement */
/*
.chart--mrfish.sidebar--right .media-controls,
.chart--mrfish.sidebar--right .media-controls__playpause,
.chart--mrfish:has(.sidebar--right) .media-controls,
.chart--mrfish:has(.sidebar--right) .media-controls__playpause
*/
/*
.chart--mrfish:is(.sidebar--left :has(.sidebar--left))
            :not(:is(.sidebar--right, :has(.sidebar--right)))
            :is(.media-controls, .media-controls__playpause) { 
    left: 0;
    right:auto;
     }

.chart--mrfish.sidebar--right .media-controls__volume-area,
.chart--mrfish:has(.sidebar--right) .media-controls__volume-area {
  left: calc(var(--button-width) * 1);
}

.chart--mrfish.sidebar--right .media-controls__subtitle-selector,
.chart--mrfish:has(.sidebar--right) .media-controls__subtitle-selector {
  left: calc(var(--button-width) * 5 - 3px);
} */


/* 1) DEFAULT from the root — applies even if the inner sidebar lacks a side class */
.chart--mrfish.sidebar-default--left :is(.media-controls, .media-controls__playpause, .media-controls__volume-area, .media-controls__subtitle-selector) {
  right: 0;
  left: auto;
}

.chart--mrfish.sidebar-default--right :is(.media-controls, .media-controls__playpause, .media-controls__volume-area, .media-controls__subtitle-selector) {
  left: 0;
  right: auto;
}

/* 2) FLIP when an opposite-side child appears (progressive enhancement) */
@supports selector(:has(*)) {

  /* If default is left but a right-side child appears, flip to LEFT-aligned controls */
  .chart--mrfish.sidebar-default--left:has(.interaction-sidebar.sidebar--right) :is(.media-controls, .media-controls__playpause, .media-controls__volume-area, .media-controls__subtitle-selector) {
    left: 0;
    right: auto;
  }

  /* If default is right but a left-side child appears, flip to RIGHT-aligned controls */
  .chart--mrfish.sidebar-default--right:has(.interaction-sidebar.sidebar--left) :is(.media-controls, .media-controls__playpause, .media-controls__volume-area, .media-controls__subtitle-selector) {
    right: 0;
    left: auto;
  }
}

/* Optional: if you also need to move the offset clusters when flipping */
@supports selector(:has(*)) {

  /* Default-left offsets */
  .chart--mrfish.sidebar-default--left .media-controls__volume-area {
    right: calc(var(--button-width) * 4 - 3px);
    left: auto;
  }

  .chart--mrfish.sidebar-default--left .media-controls__subtitle-selector {
    right: calc(var(--button-width) * 5 - 3px);
    left: auto;
  }

  /* Flip those when right-side child appears */
  .chart--mrfish.sidebar-default--left:has(.interaction-sidebar.sidebar--right) .media-controls__volume-area {
    left: calc(var(--button-width) * 1);
    right: auto;
  }

  .chart--mrfish.sidebar-default--left:has(.interaction-sidebar.sidebar--right) .media-controls__subtitle-selector {
    left: calc(var(--button-width) * 5 - 3px);
    right: auto;
  }

  /* Mirror for default-right */
  .chart--mrfish.sidebar-default--right .media-controls__volume-area {
    left: calc(var(--button-width) * 1);
    right: auto;
  }

  .chart--mrfish.sidebar-default--right .media-controls__subtitle-selector {
    left: calc(var(--button-width) * 5 - 3px);
    right: auto;
  }

  .chart--mrfish.sidebar-default--right:has(.interaction-sidebar.sidebar--left) .media-controls__volume-area {
    right: calc(var(--button-width) * 4 - 3px);
    left: auto;
  }

  .chart--mrfish.sidebar-default--right:has(.interaction-sidebar.sidebar--left) .media-controls__subtitle-selector {
    right: calc(var(--button-width) * 5 - 3px);
    left: auto;
  }
}








/* Control tokens */
.chart--mrfish .media-controls,
.chart--mrfish .media-controls__volume-area,
.chart--mrfish .media-controls__subtitle-selector {
  --button-background: var(--footer-bg);
  --button-text: var(--primary-700);
  --button-border-radius: 0;
  --button-width: 55px;
  --button-height: 55px;
  --draggable-card-width: 100%;
  --button-padding: 14px;
}

/* Fixed position controls */
.chart--mrfish .media-controls__playpause,
.chart--mrfish .media-controls__volume-area,
.chart--mrfish .media-controls__subtitle-selector {
  position: fixed;
  bottom: var(--footer-height);
  top: auto;
  width: var(--button-width);
  height: var(--button-height);
  opacity: 1;
}

/* Volume panel */
.chart--mrfish .media-controls__volume-area .media-controls__volume-panel {
  background: var(--footer-bg);
  height: var(--button-height);
  display: flex;
  align-items: center;
  accent-color: var(--secondary);
  cursor: pointer;
  padding-right: 16.5px;
  /* duplicate selector collapsed */
}

.chart--mrfish .media-controls__volume-area input {
  width: fit-content;
  background: var(--button-background);
  max-width: 100%;
}

/* Subtitle selector button/popup */
.chart--mrfish .media-controls__subtitle-selector {
  display: flex;
  flex-direction: row;
}

.chart--mrfish .media-controls__subtitle-selector .subtitle-selector-popup {
  position: relative;
  height: fit-content;
  top: auto;
  background: var(--primary);
  right: auto;
  left: 0;
  translate: -100% 0;
}

/* .subtitle-selector-popup.subtitle-selector-popup--open {
  bottom: calc(var(--footer-height) * 2);
} */

/* =============================================================================
   Subtitles – Cross-browser positioning & sizing
   ========================================================================== */

/* Safari backdrop */
.browser-safari ::-webkit-media-text-track-display-backdrop {
  background-image: linear-gradient(var(--black), var(--black));
}

/* WebKit track bounds */
video::-webkit-media-text-track-container {
  max-width: 90%;
  margin: 0 5%;
}

/* Track display container */
.vjs-text-track-display {
  pointer-events: none;
}

/* When controls are hidden / user inactive */
.video-js.vjs-controls-disabled .vjs-text-track-display,
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
  position: absolute;
  inset: 0 !important;
  display: flex;
  padding: var(--space-small) var(--chart-content-padding-inline) calc(1.4 * var(--footer-height));
  flex-direction: column;
  justify-content: flex-end;
  line-height: 1.25;
  font-size: var(--font-size-x-large);
  transform: none;
}

/* Larger UI scale adjustments */
body:not(.font-size--normal) .video-js.vjs-controls-disabled .vjs-text-track-display,
body:not(.font-size--normal) .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
  padding: var(--space-small) var(--space-small) calc(1 * var(--footer-height));
}

.video-js.vjs-controls-disabled .vjs-text-track-display>div,
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display>div {
  position: relative !important;
  margin: 0 !important;
}

.chart--mrfish .vjs-text-track-display .vjs-text-track-cue {
  position: initial !important;
  height: auto !important;
  width: auto !important;
  font: inherit !important;
}

.vjs-text-track-display,
.vjs-text-track-display .vjs-text-track-cue {
  max-width: 100vw;
}

.chart--mrfish #safearea .vjs-text-track-display {
  font-size: var(--font-size-x-large);
}

/* Firefox cue sizing */
.browser-firefox video::cue {
  font-size: var(--font-size-x-large);
  line-height: 5;
}

/* Generic text-track fallback */
.video-js .vjs-text-track {
  font-size: var(--font-size-x-large);
  text-align: center;
  margin-bottom: 0.1em;
}

/* Default subtitle shift (WebKit) within chart */
.chart--mrfish .video-js-wrapper video::-webkit-media-text-track-display {
  word-wrap: break-word;
  /*transform: translateY(calc(-1.3 * var(--footer-height)))!important; */
  transform: none !important;
  padding: var(--space-small) var(--chart-content-padding-inline) calc(1.4 * var(--footer-height));
}

/* =============================================================================
   Accessibility – Non-default font size
   ========================================================================== */
body:not(.font-size--normal) .video-js-wrapper .chart--mrfish video::-webkit-media-text-track-display {
  /*transform: translateY(calc(-1 * var(--footer-height)))!important;*/
  transform: none !important;
  padding: var(--space-small) var(--chart-content-padding-inline) calc(1 * var(--footer-height))
}

body:not(.font-size--normal) .chart--mrfish .media-controls {
  padding: var(--space-large);
}

body:not(.font-size--normal) .chart--mrfish .media-controls__volume-area .media-controls__volume-panel {
  padding-right: 22px;
  max-width: 26ch;
}

body:not(.font-size--normal) .questionDndQuestion {
  max-height: 50%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body:not(.font-size--normal) .chart--mrfish .scene-elements--safe-area .btn {
  --button-padding: 0.55em 1.5em 0.6em;
}

/* =============================================================================
   Responsive
   ========================================================================== */

/* -------------------------------- DESKTOP / LANDSCAPE ≥ 1024 -------------------------------- */
@media only screen and (min-width: 1024px),
only screen and (max-width: 1024px) and (orientation: landscape) {

  /* Place subtitles in narrower column when sidebar is beside the player */
  .chart--mrfish .interaction-sidebar--aside.sidebar--left+#safearea video::-webkit-media-text-track-display,
  .chart--mrfish .interaction-sidebar--aside.sidebar--left+#safearea .vjs-text-track-display,
  .chart--mrfish .interaction-sidebar--aside.sidebar--right+#safearea video::-webkit-media-text-track-display,
  .chart--mrfish .interaction-sidebar--aside.sidebar--right+#safearea .vjs-text-track-display {
    /* fixed missing '+' */
    width: 60% !important;
    top: auto !important;
    left: auto !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  .chart--mrfish #safearea .vjs-text-track-display {
    bottom: calc(2 * var(--footer-height));
    line-height: 1.25;
  }

  .video-js.vjs-controls-disabled video::-webkit-media-text-track-display,
  .video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
    font-size: var(--font-size-x-large);
  }

  /*
  body.font-size--normal .chart--mrfish .interaction-sidebar button {
    max-width: 85%;
  }*/
}

/* -------------------------------- TABLET ≤ 1024 -------------------------------- */
@media only screen and (max-width: 1024px) {
  video::-webkit-media-text-track-display {
    /*transform: translateY(-3em) !important;*/
  }

  .chart--mrfish.demo .scene-elements--safe-area .droppable-area {
    bottom: auto;
    right: 0;
    height: 20%;
  }
}

/* -------------------------------- TABLET LANDSCAPE ≤ 1024 -------------------------------- */
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .chart--mrfish .safearea-wrapper {
    width: 100% !important;
    max-height: 100%;
  }

  .chart--mrfish #safearea:has(#start) .scene-elements--safe-area {
    max-height: 100%;
  }

  .chart--mrfish #safearea:has(#start) .scene-elements--safe-area .rich-text.active:has(h4, h3) {
    padding: var(--space-x-small);
  }

  .chart--mrfish #safearea:has(#start) .scene-elements--safe-area .rich-text.active h2 {
    margin: 0 0 var(--space-large);
  }

  .chart--mrfish .scene-elements--safe-area {
    gap: 0;
  }



  .chart--mrfish .interaction-sidebar.interaction-sidebar--inside {
    padding: var(--space-x-small);
    max-width: 40%;
    margin: 0;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .interaction-sidebar.interaction-sidebar--inside .hand-swipe-gif {
    display: none;
  }

  .chart--mrfish .interaction-sidebar .scroll-snap-container {
    padding-block: var(--space-x-small);
    padding-inline: 0;
  }

  .chart--mrfish .interaction-sidebar .questionDndQuestion {
    min-height: 5.5em;
    overflow-y: auto;
  }

  .interaction-sidebar.interaction-sidebar--inside .scroll-snap .scroll-snap-container .card {
    width: 100%;
  }

  .chart--mrfish:has(.sidebar--left) .scene-elements--safe-area .droppable-area {
    height: 35%;
    width: 40%;
    left: auto;
    right: 65px;
    translate: 0;
  }

  /* Common resets inside sidebar */
  .interaction-sidebar.interaction-sidebar--inside.active,
  .chart--mrfish .interaction-sidebar .questionDndQuestion p,
  .chart--mrfish .interaction-sidebar .questionDndQuestion h2,
  .interaction-sidebar .scroll-snap .scroll-snap-container .card p {
    margin: 0;
  }

  .interaction-sidebar.interaction-sidebar--inside .scroll-snap {
    min-height: fit-content;
  }

  .interaction-sidebar.interaction-sidebar--inside .scroll-snap .scroll-snap-container .scroll-snap-container,
  .interaction-sidebar.interaction-sidebar--bottom .scroll-snap .scroll-snap-container .scroll-snap-container,
  .interaction-sidebar.interaction-sidebar--inside .scroll-snap,
  .interaction-sidebar.interaction-sidebar--bottom .scroll-snap {
    padding: 0;
  }
}

/* -------------------------------- PORTRAIT ≤ 1024 -------------------------------- */
@media only screen and (max-width: 1024px) and (orientation: portrait) {

  /* New fish overlay placement */
  .chart--mrfish #safearea:has(#start) .scene-elements--safe-area {
    margin-top: 50vh;
    max-width: -webkit-fill-available;
    right: var(--chart-content-padding-inline);
  }

  .browser-safari .chart--mrfish .media-controls__subtitle-selector {
    right: 0;
    top: var(--header-height);
  }

  .player-wrapper:has(.sidebar--left) .player-container {
    flex-direction: column-reverse;
  }

  .chart--mrfish .interaction-sidebar .scroll-snap-container {
    padding: var(--space-small);
  }

  .chart--mrfish .interaction-sidebar .scroll-snap-container {
    flex-direction: row;
  }

  .chart--mrfish .interaction-sidebar {
    min-width: 100%;
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: auto;
    max-height: 50%;
    padding: var(--space-large);
    background-color: white;
  }

  .chart--mrfish .interaction-sidebar .scroll-snap .scroll-snap-container {
    padding-inline: 0;
  }

  .interaction-sidebar.interaction-sidebar--bottom.active,
  .interaction-sidebar.interaction-sidebar--inside {
    bottom: 0;
  }

  .chart--mrfish .interaction-sidebar .questionDndQuestion {
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .chart--mrfish .interaction-sidebar .questionDndQuestion h2 {
    width: 100%;
  }

  /* Common resets inside sidebar */
  .interaction-sidebar.interaction-sidebar--inside.active,
  .chart--mrfish .interaction-sidebar .questionDndQuestion p,
  .chart--mrfish .interaction-sidebar .questionDndQuestion h2,
  .interaction-sidebar .scroll-snap .scroll-snap-container .card p {
    margin: 0;
  }

  .interaction-sidebar.interaction-sidebar--inside .scroll-snap .scroll-snap-container .scroll-snap-container,
  .interaction-sidebar.interaction-sidebar--bottom .scroll-snap .scroll-snap-container .scroll-snap-container,
  .interaction-sidebar.interaction-sidebar--inside .scroll-snap,
  .interaction-sidebar.interaction-sidebar--bottom .scroll-snap {
    padding: 0;
    min-height: fit-content;
  }

  .chart--mrfish:has(.sidebar--right) .scene-elements--safe-area .droppable-area,
  .chart--mrfish:has(.sidebar--left) .scene-elements--safe-area .droppable-area {
    height: 15%;
    width: 70%;
    top: 45%;
    bottom: auto;
    left: 50%;
  }

  .chart--mrfish.demo .scene-elements--safe-area .droppable-area {
    bottom: auto;
    right: 0;
    height: 20%;
  }

  .safearea-wrapper {
    margin-top: 0;
  }

  .interaction-sidebar.interaction-sidebar--inside .scroll-snap .scroll-snap-container .card,
  .interaction-sidebar.interaction-sidebar--bottom .scroll-snap .scroll-snap-container .card {
    max-width: 50vw;
  }

  .chart--mrfish .media-controls__playpause,
  .chart--mrfish .media-controls__volume-area,
  .chart--mrfish .media-controls__subtitle-selector {
    top: 0;
    bottom: auto;
  }

  .chart--mrfish .media-controls__subtitle-selector {
    right: 0;
  }

  .chart--mrfish .interaction-sidebar--aside.sidebar--left+#safearea .vjs-text-track-display {
    width: 80%;
    left: auto !important;
    right: auto !important;
    top: 65px;
    bottom: auto;
  }

  .player-wrapper .interaction-sidebar.interaction-sidebar--bottom,
  .player-wrapper .player-container.interaction-sidebar--inside {
    display: flex;
    height: 100%;
  }

  .safearea-wrapper {
    max-height: 50%;
  }
}

/* -------------------------------- SMALL PORTRAIT ≤ 768 -------------------------------- */
@media only screen and (max-width: 768px) and (orientation: portrait) {

  .video-js.vjs-controls-disabled .vjs-text-track-display,
  .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
    max-width: calc(100vw - 4rem);
    top: 0 !important;
    font-size: var(--font-size-large);
    bottom: 0 !important;
  }

  .chart--mrfish #safearea .vjs-text-track-display {
    width: 100vw;
    left: 2rem !important;
    right: 2rem !important;
  }

  .chart--mrfish #safearea:has(:is(#start, #weiter, #tryAgain)) .scene-elements--safe-area {
    max-height: 44%;
  }

  .chart--mrfish:has(.sidebar--left) .scene-elements--safe-area .droppable-area {
    height: 38%;
  }

  .interaction-sidebar.interaction-sidebar--inside .scroll-snap .scroll-snap-container .card,
  .interaction-sidebar.interaction-sidebar--bottom .scroll-snap .scroll-snap-container .card {
    max-width: 70vw;
  }
}

#ibezt {
  justify-content: space-between;
}

/** RESPONSIVE -- END **/
/** FISH -- END ******************************************************************/
/**********************************************************************************/
/**********************************************************************************/