/* -------------------------------------------------- */
/* DEFAULT HTML ELEMENTS                              */
/* -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body     { margin: 0; font-family: var(--font_main); font-size: 1.2rem; font-weight: 400; line-height: 1.4; color: var(--color_text); background-color: var(--color_bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
h1, h2, h3, h4 { color: var(--color_main); font-family: var(--font_headline); }
h1       { margin: 0 0 max(0.5rem, min(1.5vw, 1rem)) 0; font-size: max(1.6rem, min(4vw, 2.5rem)); font-weight: 700; line-height: max(1.6rem + 1vw, min(4vw, 2.5rem)); }
h2       { margin: 0 0 max(0.5rem, min(1.5vw, 1rem)) 0; padding-bottom: max(0.05rem, min(1vw, 0.2rem)); width: 100%; font-size: max(1.4rem, min(3vw, 1.8rem)); font-weight: 700; line-height: max(1.3rem + 1vw, min(3vw, 2rem)); border-bottom: 1px solid var(--color_main); }
h3       { margin: 0; padding-top: max(0.8rem, min(1vw, 1rem)); padding-bottom: calc(var(--content_spacing) / 4); font-size: max(1.3rem, min(2vw, 1.5rem)); font-weight: 600; line-height: max(1.3rem + 0.5vw, min(3vw, 1.5rem)); }
h4       { margin: 0; padding: 0.5em 0; font-size: 1.1em; font-weight: 600; line-height: 1.3; }
h5       { margin: 0; padding: 0.3em 0; font-size: 1em; font-weight: 600; line-height: 1.1; }
p        { margin-top: 0; margin-bottom: calc(var(--content_spacing) / 2); }
sub, sup { font-size: 0.85em; } 
figure   { margin: 0; }
button   { margin: 0; padding: 0; font-family: "Semikolon";}
button * { -webkit-user-select: none; user-select: none; }
article, aside, footer, header, nav, section { display: block; }
sb-unit  { white-space: nowrap; }
sb-nobr  { white-space: nowrap; }
.sb_unit { margin-left: 0.167em; }
.clear   { clear: both; height: 0px; font-size: 0px; line-height: 0px; overflow: hidden; }
.no_select { -moz-user-select: none; -webkit-user-select: none; user-select: none; }
u        { text-decoration: none; border-bottom: solid 0.11em; }
.visually_hidden { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.mobile_only       { display: none; }
.mobile_grid_only  { display: none; }
.desktop_only      { display: block; }
.desktop_grid_only { display: grid; }

@media (max-width: 767px) {
   .mobile_only       { display: block; }
   .mobile_grid_only  { display: grid; }
   .desktop_only      { display: none; }
   .desktop_grid_only { display: none; }
}


/* -------------------------------------------------- */
/* VARIABLES                                          */
/* -------------------------------------------------- */
:root {
   --color_main:          #6E6E6E;
   --color_main_t70:      #6E6E6Eb3;
   --color_main_dark:     #585858;
   --color_main_darkest:  #2C2C2C;
   --color_main_light:    #a1a1a1;
   --color_main_lighter:  #E2E2E2;
   --color_main_lightest: #F2F2F2;
   --color_main_lightest_t90: #F2F2F2e6;
   --color_main_lightest_t45: #F2F2F273;
   --color_main_inv:      #FFF;
   --color_main_effect:   #c32bb6;

   --color_text:          #333;
   --color_bg:            #F7F6F5;
   --color_compl:         #F7D256;
   --color_hover_bg:      #F7D256;
   --color_hover_text:    #2699fb;
   --color_pm:            #272B2E;
   --color_button:        #225784;
   --color_correct:       #40752D;
   --color_correct_light: #7FBF7F;
   --color_wrong:         #f00;
   --color_wrong_light:   #dd9c9c;
   --color_badge:         #d14454;
   --color_feedback_badge:#EFCD4D;
   --color_feedback_badge_selected: #FFFCD9;
   --color_feedback_badge_disabled: var(--color_bg);
   --color_text1:         hsl(32, 66%, 37%); --color_text2: hsl(341, 36%, 49%); --color_text3: hsl(226, 64%, 53%); --color_text4: hsl(82, 32%, 36%); --color_text5: hsl(268, 42%, 50%);
   --color_bg1:           hsl(32, 66%, 81%); --color_bg2:   hsl(341, 36%, 86%); --color_bg3:   hsl(226, 64%, 85%); --color_bg4:   hsl(82, 32%, 80%); --color_bg5:   hsl(268, 42%, 84%);
   --color_gray:          hsl(0, 0%, 43%);
   --color_lightgray:     hsl(0, 0%, 86%);

   --color_system:          #52566A;
   --color_system_light:    #868997;
   --color_system_midlight: #CBCCD2;
   --color_system_lighter:  #EDEEF0;
   --color_system_lightest: #F6F6F7;

   --color_user1_light:   hsl(219, 100%, 81%);     --color_user1_light_t50: hsl(219, 100%, 81%, 50%);  --color_user1_dark: hsl(219, 50%, 30%);
   --color_user2_light:   hsla(52, 100%, 50%, 1);  --color_user2_light_t50: hsla(52, 100%, 50%, 50%);  --color_user2_dark: hsl(52, 50%, 30%);
   --color_user3_light:   hsla(35, 100%, 58%, 1);  --color_user3_light_t50: hsla(35, 100%, 58%, 50%);  --color_user3_dark: hsl(35, 50%, 30%);
   --color_user4_light:   hsla(300, 100%, 72%, 1); --color_user4_light_t50: hsla(300, 100%, 72%, 50%); --color_user4_dark: hsl(300, 50%, 30%);
   --color_user5_light:   hsla(178, 100%, 50%, 1); --color_user5_light_t50: hsla(178, 100%, 50%, 50%); --color_user5_dark: hsl(178, 50%, 30%);
   --color_user6_light:   hsla(71, 100%, 45%, 1);  --color_user6_light_t50: hsla(71, 100%, 45%, 50%);  --color_user6_dark: hsl(71, 50%, 30%);

   --color_title:         var(--color_button);
   --color_home_bg:       #F5F4EC;

   --font_main:           "Semikolon", sans-serif;
   --font_headline:       "Semikolon", sans-serif;
   --font_mono:           "Mono", monospace;
   --font_writing:        "Revena", cursive;

   --size_header:         3.5rem;
   --size_footer:         2.5rem;
   --content_width:       800px;
   --content_spacing:     max(0.8rem, min(2vw, 1.6rem));
   --br:                  5px;
}

body {
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #C0C0C0;
   --color_bc_chapter: #D3D3D3;
   --color_bc_page   : #E0E0E0;
}

.pm {
   --content_spacing: 0.8em;
}


/* -------------------------------------------------- */
/*  FONTS                                             */
/* -------------------------------------------------- */
/* SemikolonPlus - Regular */
@font-face {
   font-family: 'Semikolon';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   ascent-override: 92%;
   src: url('/fonts/SemikolonPlus-Regular.woff2') format('woff2'),
        url('/fonts/SemikolonPlus-Regular.woff') format('woff'),
        url('/fonts/SemikolonPlus-Regular.ttf') format('truetype');
}

/* SemikolonPlus - Bold */
@font-face {
   font-family: 'Semikolon';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   ascent-override: 92%;
   src: url('/fonts/SemikolonPlus-Bold.woff2') format('woff2'),
        url('/fonts/SemikolonPlus-Bold.woff') format('woff'),
        url('/fonts/SemikolonPlus-Bold.ttf') format('truetype');
}

/* Droid Sans Mono - Regular */
@font-face {
   font-family: "Mono";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('/fonts/Droid-Sans-Mono-V2.woff2') format('woff2'),
        url('/fonts/Droid-Sans-Mono-V2.woff') format('woff'),
        url('/fonts/Droid-Sans-Mono-V2.ttf') format('truetype');
 }

 /* Revena-Smooth - upscaled */
@font-face {
   font-family: "Revena";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('/fonts/Revena-Smooth.otf') format('opentype');
 }

/* --- ICONS --- */
@font-face {
   font-family: 'icons';
   src: url('/fonts/icons.eot');
   src: url('/fonts/icons.eot') format('embedded-opentype'),
        url('/fonts/icons.woff2') format('woff2'),
        url('/fonts/icons.woff') format('woff'),
        url('/fonts/icons.ttf') format('truetype'),
        url('/fonts/icons.svg') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

[data-icon]:before {
   font-family: "icons" !important;
   content: attr(data-icon);
   font-style: normal !important;
   font-weight: normal !important;
   font-variant: normal !important;
   display: inline-block;
   width: 1em;
   line-height: 1em;
   text-align: center;
   text-decoration: inherit;
   text-transform: none !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
   font-family: "icons" !important;
   font-style: normal !important;
   font-weight: normal !important;
   font-variant: normal !important;
   display: inline-block;
   width: 1em;
   line-height: 1em;
   text-align: center;
   text-decoration: inherit;
   text-transform: none !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}



.icon-refresh:before { content: '\21'; } /* '!' */
.icon-bold:before { content: '\22'; } /* '"' */
.icon-italic:before { content: '\23'; } /* '#' */
.icon-book:before { content: '\24'; } /* '$' */
.icon-picture:before { content: '\25'; } /* '%' */
.icon-resize-h:before { content: '\26'; } /* '&' */
.icon-menu-open:before { content: '\27'; } /* ''' */
.icon-menu-close:before { content: '\28'; } /* '(' */
.icon-zoom-in:before { content: '\29'; } /* ')' */
.icon-zoom-out:before { content: '\2a'; } /* '*' */
.icon-stop:before { content: '\2b'; } /* '+' */
.icon-view:before { content: '\2c'; } /* ',' */
.icon-chart:before { content: '\2d'; } /* '-' */
.icon-chart-pie:before { content: '\2e'; } /* '.' */
.icon-users:before { content: '\2f'; } /* '/' */
.icon-lines:before { content: '\30'; } /* '0' */
.icon-grid:before { content: '\31'; } /* '1' */
.icon-dash1:before { content: '\32'; } /* '2' */
.icon-dash2:before { content: '\33'; } /* '3' */
.icon-dash3:before { content: '\34'; } /* '4' */
.icon-rectangle:before { content: '\35'; } /* '5' */
.icon-dash0:before { content: '\36'; } /* '6' */
.icon-blank:before { content: '\37'; } /* '7' */
.icon-fill-color:before { content: '\38'; } /* '8' */
.icon-stroke-color:before { content: '\39'; } /* '9' */
.icon-chart-line:before { content: '\3a'; } /* ':' */
.icon-info:before { content: '\3b'; } /* ';' */
.icon-warn:before { content: '\3c'; } /* '<' */
.icon-globe:before { content: '\3d'; } /* '=' */
.icon-table:before { content: '\3e'; } /* '>' */
.icon-sound-off2:before { content: '\3f'; } /* '?' */
.icon-experiment:before { content: '\40'; } /* '@' */
.icon-mail:before { content: '\41'; } /* 'A' */
.icon-animation:before { content: '\42'; } /* 'B' */
.icon-nok:before { content: '\43'; } /* 'C' */
.icon-stats:before { content: '\44'; } /* 'D' */
.icon-ok:before { content: '\45'; } /* 'E' */
.icon-game:before { content: '\46'; } /* 'F' */
.icon-rotate:before { content: '\47'; } /* 'G' */
.icon-arrow-up:before { content: '\48'; } /* 'H' */
.icon-arrow-down:before { content: '\49'; } /* 'I' */
.icon-spinner:before { content: '\4a'; } /* 'J' */
.icon-play:before { content: '\4b'; } /* 'K' */
.icon-sound-on:before { content: '\4c'; } /* 'L' */
.icon-sound-off:before { content: '\4d'; } /* 'M' */
.icon-delete:before { content: '\4e'; } /* 'N' */
.icon-add:before { content: '\4f'; } /* 'O' */
.icon-copy:before { content: '\50'; } /* 'P' */
.icon-note:before { content: '\51'; } /* 'Q' */
.icon-pointer:before { content: '\52'; } /* 'R' */
.icon-circle:before { content: '\53'; } /* 'S' */
.icon-size:before { content: '\54'; } /* 'T' */
.icon-text:before { content: '\55'; } /* 'U' */
.icon-fullscreen-alt:before { content: '\56'; } /* 'V' */
.icon-fullscreen:before { content: '\57'; } /* 'W' */
.icon-snap:before { content: '\58'; } /* 'X' */
.icon-redo:before { content: '\59'; } /* 'Y' */
.icon-undo:before { content: '\5a'; } /* 'Z' */
.icon-worksheet-old:before { content: '\5b'; } /* '[' */
.icon-thumbup:before { content: '\5c'; } /* '\' */
.icon-unlock:before { content: '\5d'; } /* ']' */
.icon-hammer:before { content: '\5e'; } /* '^' */
.icon-waterdrop:before { content: '\5f'; } /* '_' */
.icon-bolt:before { content: '\60'; } /* '`' */
.icon-arrow-left:before { content: '\61'; } /* 'a' */
.icon-arrow-right:before { content: '\62'; } /* 'b' */
.icon-home:before { content: '\63'; } /* 'c' */
.icon-caret-down-two:before { content: '\64'; } /* 'd' */
.icon-angle-double-down:before { content: '\65'; } /* 'e' */
.icon-caret-left:before { content: '\66'; } /* 'f' */
.icon-caret-right:before { content: '\67'; } /* 'g' */
.icon-caret-up-two:before { content: '\68'; } /* 'h' */
.icon-hand-up:before { content: '\69'; } /* 'i' */
.icon-direction-move-1:before { content: '\6a'; } /* 'j' */
.icon-sound:before { content: '\6b'; } /* 'k' */
.icon-check-mark:before { content: '\6c'; } /* 'l' */
.icon-remove:before { content: '\6d'; } /* 'm' */
.icon-lock:before { content: '\6e'; } /* 'n' */
.icon-user:before { content: '\6f'; } /* 'o' */
.icon-logout:before { content: '\70'; } /* 'p' */
.icon-search:before { content: '\71'; } /* 'q' */
.icon-menu:before { content: '\72'; } /* 'r' */
.icon-pencil:before { content: '\73'; } /* 's' */
.icon-help:before { content: '\74'; } /* 't' */
.icon-contact:before { content: '\75'; } /* 'u' */
.icon-key:before { content: '\76'; } /* 'v' */
.icon-settings:before { content: '\77'; } /* 'w' */
.icon-female:before { content: '\78'; } /* 'x' */
.icon-male:before { content: '\79'; } /* 'y' */
.icon-phone:before { content: '\7a'; } /* 'z' */
.icon-smile:before { content: '\7c'; } /* '|' */
.icon-stopwatch:before { content: '\7d'; } /* '}' */
.icon-calculator:before { content: '\7e'; } /* '~' */
.icon-twitter:before { content: '\a1'; } /* '¡' */
.icon-whatsapp:before { content: '\a2'; } /* '¢' */
.icon-instagram:before { content: '\a3'; } /* '£' */
.icon-logo:before { content: '\a4'; } /* '¤' */
.icon-subject:before { content: '\a5'; } /* '¥' */
.icon-school:before { content: '\a6'; } /* '¦' */
.icon-student:before { content: '\a7'; } /* '§' */
.icon-teacher:before { content: '\a9'; } /* '©' */
.icon-worksheet:before { content: '\ab'; } /* '«' */
.icon-hub:before { content: '\ac'; } /* '¬' */
.icon-class:before { content: '\ae'; } /* '®' */
.icon-pause:before { content: '\af'; } /* '¯' */
.icon-diff-basic:before { content: '\b0'; } /* '°' */
.icon-diff-expert:before { content: '\b1'; } /* '±' */
.icon-facebook:before { content: '\0153'; } /* 'œ' */
.icon-tools:before { content: '\0192'; } /* 'ƒ' */
.icon-link:before { content: '\02c6'; } /* 'ˆ' */
.icon-note-s:before { content: '\0391'; } /* 'Α' */
.icon-presentation-close:before { content: '\0392'; } /* 'Β' */
.icon-tools-gruppieren:before { content: '\0393'; } /* 'Γ' */
.icon-tools-uhr:before { content: '\0394'; } /* 'Δ' */
.icon-tools-antworten:before { content: '\0395'; } /* 'Ε' */
.icon-tools-z-arrow:before { content: '\0396'; } /* 'Ζ' */
.icon-tools-z-circle:before { content: '\0397'; } /* 'Η' */
.icon-tools-z-eraser:before { content: '\0398'; } /* 'Θ' */
.icon-tools-z-mask:before { content: '\0399'; } /* 'Ι' */
.icon-tools-z-maskround:before { content: '\039a'; } /* 'Κ' */
.icon-tools-z-pen:before { content: '\039b'; } /* 'Λ' */
.icon-tools-z-pen2:before { content: '\039c'; } /* 'Μ' */
.icon-tools-z-square:before { content: '\039d'; } /* 'Ν' */
.icon-tools-rechnen:before { content: '\039e'; } /* 'Ξ' */
.icon-tools-countdown:before { content: '\039f'; } /* 'Ο' */
.icon-tools-zeichnen:before { content: '\03a0'; } /* 'Π' */
.icon-tools-zeit:before { content: '\03a1'; } /* 'Ρ' */
.icon-tools-zufall:before { content: '\03a3'; } /* 'Σ' */
.icon-windowscale-left:before { content: '\03a4'; } /* 'Τ' */
.icon-windowscale-right:before { content: '\03a5'; } /* 'Υ' */
.icon-wortschatz:before { content: '\03a6'; } /* 'Φ' */
.icon-wortschatz-s:before { content: '\03a7'; } /* 'Χ' */
.icon-delete-s:before { content: '\03a8'; } /* 'Ψ' */
.icon-pencil-s:before { content: '\03a9'; } /* 'Ω' */
.icon-diff-normal:before { content: '\03b1'; } /* 'α' */
.icon-ticket:before { content: '\03b2'; } /* 'β' */
.icon-import:before { content: '\03b3'; } /* 'γ' */
.icon-export:before { content: '\03b4'; } /* 'δ' */
.icon-hash:before { content: '\03b5'; } /* 'ε' */
.icon-sort:before { content: '\03b6'; } /* 'ζ' */
.icon-plus:before { content: '\03b7'; } /* 'η' */
.icon-plusplus:before { content: '\03b8'; } /* 'θ' */
.icon-plenum:before { content: '\03b9'; } /* 'ι' */
.icon-group:before { content: '\03ba'; } /* 'κ' */
.icon-individual:before { content: '\03bb'; } /* 'λ' */
.icon-partner:before { content: '\03bc'; } /* 'μ' */
.icon-headphones:before { content: '\03bd'; } /* 'ν' */
.icon-minus:before { content: '\03be'; } /* 'ξ' */
.icon-working:before { content: '\03bf'; } /* 'ο' */
.icon-faq:before { content: '\03c0'; } /* 'π' */
.icon-diamond:before { content: '\03c1'; } /* 'ρ' */
.icon-check-mark-slim:before { content: '\03c3'; } /* 'σ' */
.icon-close:before { content: '\03c4'; } /* 'τ' */
.icon-eval-s:before { content: '\03c5'; } /* 'υ' */
.icon-hand-drag:before { content: '\03c6'; } /* 'φ' */
.icon-speak:before { content: '\03c7'; } /* 'χ' */
.icon-links-s:before { content: '\03c8'; } /* 'ψ' */
.icon-landscape:before { content: '\03c9'; } /* 'ω' */
.icon-download:before { content: '\0410'; } /* 'А' */
.icon-sort-chrono:before { content: '\0411'; } /* 'Б' */
.icon-send:before { content: '\0412'; } /* 'В' */
.icon-spam:before { content: '\0413'; } /* 'Г' */
.icon-xok:before { content: '\0414'; } /* 'Д' */
.icon-tools-zu-fortune:before { content: '\0415'; } /* 'Е' */
.icon-tools-zu-chance:before { content: '\0416'; } /* 'Ж' */
.icon-tools-zu-dices:before { content: '\0417'; } /* 'З' */
.icon-tools-z-circle-fill:before { content: '\0418'; } /* 'И' */
.icon-tools-z-square-fill:before { content: '\0419'; } /* 'Й' */
.icon-pin-s:before { content: '\041a'; } /* 'К' */
.icon-tools-rechnen-s:before { content: '\041b'; } /* 'Л' */
.icon-elektronenpaarverschiebung:before { content: '\041c'; } /* 'М' */
.icon-elektronenverschiebung:before { content: '\041d'; } /* 'Н' */
.icon-gleichgewichtspfeil:before { content: '\041e'; } /* 'О' */
.icon-hin-rueck-reaktion:before { content: '\041f'; } /* 'П' */
.icon-reaktionsbed-temp:before { content: '\0420'; } /* 'Р' */
.icon-reaktionsbed-zeit:before { content: '\0421'; } /* 'С' */
.icon-reaktionspfeil-oben:before { content: '\0422'; } /* 'Т' */
.icon-reaktionspfeil-unten:before { content: '\0423'; } /* 'У' */
.icon-reaktionspfeil:before { content: '\0424'; } /* 'Ф' */
.icon-reaktionssequenz:before { content: '\0425'; } /* 'Х' */
.icon-retrosynthese:before { content: '\0426'; } /* 'Ц' */
.icon-folder:before { content: '\0427'; } /* 'Ч' */
.icon-source:before { content: '\0428'; } /* 'Ш' */
.icon-school-austria:before { content: '\0429'; } /* 'Щ' */
.icon-tools-quiz:before { content: '\042a'; } /* 'Ъ' */
.icon-star:before { content: '\042b'; } /* 'Ы' */
.icon-star-empty:before { content: '\042c'; } /* 'Ь' */
.icon-pageinfo:before { content: '\042d'; } /* 'Э' */
.icon-ki-box:before { content: '\042e'; } /* 'Ю' */
.icon-ki-head:before { content: '\042f'; } /* 'Я' */
.icon-eval:before { content: '\2020'; } /* '†' */
.icon-presentation:before { content: '\2021'; } /* '‡' */
.icon-printer:before { content: '\2030'; } /* '‰' */
.icon-reader:before { content: '\2039'; } /* '‹' */
.icon-lightbulb:before { content: '\20ac'; } /* '€' */
.icon-share:before { content: '\2122'; } /* '™' */
.icon-exercise:before { content: '\2200'; } /* '∀' */
.icon-gadgets:before { content: '\2208'; } /* '∈' */
.icon-reload:before { content: '\2211'; } /* '∑' */

.icon-working { display: inline-grid; margin-right: 10px; animation: working 2s infinite linear; }
@keyframes working { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } }


/* SPACING */
.cp_spacing_small { margin-bottom: calc(0.5 * var(--content_spacing)); }
.cp_spacing_medium, .cp_spacing { margin-bottom: var(--content_spacing); }
.cp_spacing_large { margin-bottom: calc(1.5 * var(--content_spacing)); }

/* --- BUTTON --- */
.button { padding: 0.5em 1.1em; color: var(--color_main_inv); font-family: var(--font_main); font-size: 1em; line-height: 1; background-color: var(--color_main_dark); border-radius: var(--br); border: 0.07em solid transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; transition: background 0.3s, border 0.3s, color 0.3s; }
.button:focus-visible { outline-color: var(--color_main_light); outline-offset: var(--br); }
.button:disabled { opacity: 0.5; pointer-events: none; }

.small_button { padding: 0.1em 0.5em; color: var(--color_main_inv); font-family: var(--font_main); font-size: 0.8em; line-height: 1; text-transform: uppercase; letter-spacing: 0.1em; background-color: var(--color_main); border-radius: 7px; border: 2px solid transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; transition: all 0.3s; }
.small_button:focus-visible { outline-color: var(--color_main_light); outline-offset: var(--br); }
.small_button:disabled { opacity: 0.5; pointer-events: none; }

.button_icon { display: grid; grid-template-columns: auto auto; grid-gap: 7px; align-items: center; padding: 0.6rem 1.4rem; width: max-content; color: var(--color_main_inv); background-color: var(--color_main_dark); border: 2px solid transparent; border-radius: 7px; cursor: pointer; transition: all 0.3s; }
.button_icon i, .button_icon em, .button_icon span { line-height: 0; pointer-events: none; }
.button_icon:focus-visible { outline-color: var(--color_main_light); outline-offset: var(--br); }

.button_close { position: absolute; right: -22px; top: -22px; width: 44px; height: 44px; line-height: 40px; text-align: center; border-radius: 50%; color: #fff; border: 2px solid #fff; background-color: var(--color_main_darkest); z-index: 101; cursor: pointer; transition: all 0.3s; }
.button_close::before { content: "τ"; font-size: 1em; font-family: "icons"; }

@media (hover: hover) {
   .button:hover       { color: var(--color_main_dark) !important; background-color: var(--color_compl) !important; }
   .button_icon:hover  { background-color: var(--color_compl); }
   .button_close:hover { background-color: var(--color_compl); }
}

/* --- BADGE --- */
.badge { width: max(1.2rem, min(2vw, 1.6rem)); height: max(1.2rem, min(2vw, 1.6rem)); line-height: max(1.25rem, min(2.1vw, 1.7rem)); font-size: max(0.9rem, min(1.5vw, 1.1rem)); color: #fff; text-align: center; background-color: var(--color_badge); border-radius: 50%; -webkit-user-select: none; user-select: none; }
.badge_header_user { position: absolute; top: 0.1rem; left: 3rem; padding: 0 0.4rem; height: 1rem; font-size: 0.8rem; line-height: 1rem; color: #fff; background-color: var(--color_badge); border-radius: 0.7rem; z-index: 1; }
.badge_hub_menu { top: 0.4rem; left: max(2.7rem, min(4.5vw, 4rem)); }
.badge_mobile_menu { position: relative; top: initial; left: initial !important; }

/* --- SUBJECTS --- */
.subject_mat {
   --color_main_t70: #2c807ccc;
   --color_main: #2C807C;
   --color_main_dark_t90: #174c49e6;
   --color_main_dark: #174C49;
   --color_main_darker: #13403A;
   --color_main_darkest: #0F3331;
   --color_main_light: #47B2AD;
   --color_main_lighter: #D5E6E5;
   --color_main_lightest: #EAF2F2;
   --color_main_lightest_t90: #EAF2F2e6;
   --color_main_lightest_t45: #EAF2F273;
   --color_main_effect: #EA8C73;
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #ADC4C3;
   --color_bc_chapter: #C7D7D6;
   --color_bc_page   : #E2EBEA;
   --color_footer    : #CFEBE9;
}
.subject_geo {
   --color_main_t70: #37609Ecc;
   --color_main: #37609E;
   --color_main_dark_t90: #1E3E6Ee6;
   --color_main_dark: #1E3E6E;
   --color_main_darker: #173157;
   --color_main_darkest: #132847;
   --color_main_light: #6B99DE;
   --color_main_lighter: #D7DFEC;
   --color_main_lightest: #EBEFF5;
   --color_main_lightest_t90: #EBEFF5e6;
   --color_main_lightest_t45: #EBEFF573;
   --color_main_effect: #DA9B31;
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #B8C0CC;
   --color_bc_chapter: #CAD0D9;
   --color_bc_page   : #DBDFE5;
   --color_footer    : #E2EBEA;
}
.subject_bio {
   --color_main_t70: #14824Bcc;
   --color_main: #14824B;
   --color_main_dark_t90: #0D422Ee6;
   --color_main_dark: #0D422E;
   --color_main_darker: #113828;
   --color_main_darkest: #132E25;
   --color_main_light: #1AB065;
   --color_main_lighter: #CEE6DC;
   --color_main_lightest: #E6F2ED;
   --color_main_lightest_t90: #E6F2EDe6;
   --color_main_lightest_t45: #E6F2ED73;
   --color_main_effect: #FFF716;
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #B4C0B6;
   --color_bc_chapter: #C7D0C9;
   --color_bc_page   : #D6DCD7;
   --color_footer   : #E2E7E3;
}
.subject_deu {
   --color_main_t70: #B85851cc;
   --color_main: #B85851;
   --color_main_dark_t90: #6B1F20e6;
   --color_main_dark: #6B1F20;
   --color_main_darker: #591A1B;
   --color_main_darkest: #4D1718;
   --color_main_light: #E68E73;
   --color_main_lighter: #EBE2E1;
   --color_main_lightest: #F2EDED;
   --color_main_lightest_t90: #F2EDEDe6;
   --color_main_lightest_t45: #F2EDED73;
   --color_main_effect: #D96D8D;
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #CFBBBA;
   --color_bc_chapter: #DED1D0;
   --color_bc_page   : #E7DDDC;
   --color_footer   : #EEE7E7;
}
.subject_fae {
   --color_main_t70: #587482cc;
   --color_main: #587482;
   --color_main_dark_t90: #34424ae6;
   --color_main_dark: #34424A;
   --color_main_darker: #2B373D;
   --color_main_darkest: #212B30;
   --color_main_light: #749DB2;
   --color_main_lighter: #DEE3E6;
   --color_main_lightest: #EBEEF0;
   --color_main_lightest_t90: #EBEEF0e6;
   --color_main_lightest_t45: #EBEEF073;
   --color_main_effect: #FFF716;
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #BDCBD3;
   --color_bc_chapter: #CCD7DD;
   --color_bc_page   : #D9E1E5;
   --color_footer   : #E5EAED;
}
.subject_feu {
   --color_main_t70: #587482cc;
   --color_main: #587482;
   --color_main_dark_t90: #34424ae6;
   --color_main_dark: #34424A;
   --color_main_darker: #2B373D;
   --color_main_darkest: #212B30;
   --color_main_light: #749DB2;
   --color_main_lighter: #DEE3E6;
   --color_main_lightest: #EBEEF0;
   --color_main_lightest_t90: #EBEEF0e6;
   --color_main_lightest_t45: #EBEEF073;
   --color_main_effect: #FFF716;
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #BDCBD3;
   --color_bc_chapter: #CCD7DD;
   --color_bc_page   : #D9E1E5;
   --color_footer   : #E5EAED;
}
.subject_mei {
   --color_main_t70: #587482cc;
   --color_main: #587482;
   --color_main_dark_t90: #34424ae6;
   --color_main_dark: #34424A;
   --color_main_darker: #2B373D;
   --color_main_darkest: #212B30;
   --color_main_light: #749DB2;
   --color_main_lighter: #DEE3E6;
   --color_main_lightest: #EBEEF0;
   --color_main_lightest_t90: #EBEEF0e6;
   --color_main_lightest_t45: #EBEEF073;
   --color_main_effect: #FFF716;
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #BDCBD3;
   --color_bc_chapter: #CCD7DD;
   --color_bc_page   : #D9E1E5;
   --color_footer   : #E5EAED;
}
.subject_phy {
   --color_main_t70: #8D5F9Ecc;
   --color_main: #8D5F9E;
   --color_main_dark_t90: #532B61e6;
   --color_main_dark: #532B61;
   --color_main_darker: #3F214A;
   --color_main_darkest: #251733;
   --color_main_light: #CC96E0;
   --color_main_lighter: #EADFEE;
   --color_main_lightest: #F3EDF5;
   --color_main_lightest_t90: #F3EDF5e6;
   --color_main_lightest_t45: #F3EDF573;
   --color_main_effect: #DB4DE9;
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #C7B9CC;
   --color_bc_chapter: #D5CBD9;
   --color_bc_page   : #DFD7E2;
   --color_footer   : #E9E3EB;
}
.subject_eng {
   --color_main_t70: #b25977cc;
   --color_main: #B25977;
   --color_main_dark_t90: #6b2b40e6;
   --color_main_dark: #6B2B40;
   --color_main_darker: #582335;
   --color_main_darkest: #45212D;
   --color_main_light: #E0799C;
   --color_main_lighter: #EDDCE2;
   --color_main_lightest: #F5EEF1;
   --color_main_lightest_t90: #F5EEF1e6;
   --color_main_lightest_t45: #F5EEF173;
   --color_main_effect: #966CD2;
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #CCC2C4;
   --color_bc_chapter: #DBD4D6;
   --color_bc_page   : #E5E0E2;
   --color_footer   : #EDEAEB;
}
.subject_ges {
   --color_main_t70: #807569cc;
   --color_main: #807569;
   --color_main_dark_t90: #423e37e6;
   --color_main_dark: #423E37;
   --color_main_darker: #33302A;
   --color_main_darkest: #211F1B;
   --color_main_light: #B39C7D;
   --color_main_lighter: #E3E1DE;
   --color_main_lightest: #F0EEED;
   --color_main_lightest_t90: #F0EEEDe6;
   --color_main_lightest_t45: #F0EEED73;
   --color_main_effect: #80C32B;
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #C8C0B5;
   --color_bc_chapter: #D5CFC7;
   --color_bc_page   : #E0DCD6;
   --color_footer   : #EAE6E2;
}
.subject_che {
   --color_main_t70: #7457adcc;
   --color_main: #7457AD;
   --color_main_dark_t90: #3d2b61e6;
   --color_main_dark: #3D2B61;
   --color_main_darker: #332452;
   --color_main_darkest: #2A1E42;
   --color_main_light: #9D7FDE;
   --color_main_lighter: #E3DDEF;
   --color_main_lightest: #F0ECF6;
   --color_main_lightest_t90: #F0ECF6e6;
   --color_main_lightest_t45: #F0ECF680;
   --color_main_effect: #E06A36;
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #BEB8CC;
   --color_bc_chapter: #D4D0DD;
   --color_bc_page   : #DFDBE5;
   --color_footer   : #E8E6ED;
}
.subject_dig {
   --color_main_t70: #327ea3cc;
   /* --color_main: #327EA3; */
   --color_main: #2e7497;
   --color_main_dark_t90: #22556ee6;
   --color_main_dark: #22556E;
   --color_main_darker: #1B4559;
   --color_main_darkest: #163747;
   --color_main_light: #69B5DB;
   --color_main_lighter: #D6E5ED;
   --color_main_lightest: #E8F1F5;
   --color_main_lightest_t90: #E8F1F5e6;
   --color_main_lightest_t45: #E8F1F573;
   --color_main_effect: #EA8C73;
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #B2CCD9;
   --color_bc_chapter: #C6D9E3;
   --color_bc_page   : #D7E5EB;
   --color_footer   : #E0EBF0;
}
.subject_ueb_old {
   --color_main_t70: #92375acc;
   --color_main: #92375a;
   --color_main_dark_t90: #4e2133e6;
   --color_main_dark: #4e2133;
   --color_main_darker: #40232e;
   --color_main_darkest: #322228;
   --color_main_light: #bf4976;
   --color_main_lighter: #dbbac6;
   --color_main_lightest: #f0e6e9;
   --color_main_lightest_t90: #f0e6e9e6;
   --color_main_lightest_t45: #f0e6e973;
   --color_main_effect: #86abf3;
   --color_bc_text   : var(--color_main_dark);
   --color_bc_logo   : var(--color_main);
   --color_bc_book   : #d6bbcb;
   --color_bc_chapter: #e6d2de;
   --color_bc_page   : #f1e3eb;
   --color_footer   : #f8eef4; 
}
.subject_ueb { 
   --color_main_t70: #736A5Ecc;
   --color_main: #736A5E;
   --color_main_dark_t90: #423e37e6;
   --color_main_dark: #423e37;
   --color_main_darker: #33302a;
   --color_main_darkest: #211f1b;
   --color_main_light: #b39c7d;
   --color_main_lighter: #e3e1de;
   --color_main_lightest: #f0eeed;
   --color_main_effect: #80c32b;
   --color_bc_text: var(--color_main_dark);
   --color_bc_logo: var(--color_main);
   --color_bc_book: #c8c0b5;
   --color_bc_chapter: #d5cfc7;
   --color_bc_page: #e0dcd6;
   --color_footer: #eae6e2;
}

/* --- HOME --- */
.home_logo { display: block; margin: max(80px, min(6vw, 100px)) 0 max(2rem, min(6vw, 5rem)) 0; height: max(5rem, min(9vw, 9rem)); text-align: center; }
.home_subject { width: min(160px, 36vw); margin: 0 min(10px,4vw); text-decoration: none; z-index: 1}
.home_subject svg text { fill: #FFFFFF; font-family: var(--font_main); font-size: 80px; font-weight: 700; }
.home_subject .top { fill: var(--color_main_light); }
.home_subject .bot { fill: var(--color_main); }

.home_box { display: flex; flex-direction: column; background-image: linear-gradient(to top, white 25%, var(--color_home_bg) 100%); background-color: var(--color_home_bg); user-select: none; }
.home_box h1 { margin: 0; }
.home_content { display: flex; margin: 0 auto; flex-direction: row; flex-wrap: wrap; gap: min(45px, 6vw); justify-content: center; }
.home_books_box { margin: auto; width: max-content; }
.home_books { display: grid; grid-auto-flow: column; grid-gap: min(30px, 4vw); margin-bottom: min(1.5rem, 4vw); width: max-content; }
.home_upcoming_text { margin: 1rem 0 0.5rem 0; text-align: center; font-weight: normal; color: var(--color_system); }
.home_books_slider_box { position: relative; display: grid; grid-auto-flow: column; grid-gap: min(12px, 1vw); align-items: center; transition: all 0.3s; z-index: 1; }
.b_scroll_upcoming { margin-bottom: 1vh; width: min(20px, 5vw); pointer-events: all; cursor: pointer; }
.home_books_slider { display: flex; flex-direction: row; width: min(270px, 45vw); overflow: hidden; scrollbar-width: none; }
.home_books_slider .home_book { min-width: min(110px, 18vw); margin-right: min(15px, 3vw); transform: translateX(0); }
.home_book { position: relative; margin-bottom: 1vh; width: min(140px, 14vw); min-width: 75px; text-decoration: none; z-index: 1; transition: all 0.3s;}
.home_book_coming { position: absolute; top: -20px; right: -20px; width: 50px; height: 50px; transform: rotate(7deg); }
.home_book_coming text tspan { font-family: var(--font_main); }
.home_book_new_curriculum { position: absolute; top: -16px; right: -20px; padding: 4px 8px; line-height: 12px; color: #333; font-size: 12px; text-align: center; background-color: #f7d256; border: 1px solid #fff; border-radius: 5px; transform: rotate(7deg); }
.home_book svg text { fill: #FFFFFF; font-family: var(--font_main); font-size: 26px; font-weight: 700; }
.home_book_name_small { font-size: 24px; }
.home_book_number { font-size: 124px; font-weight: normal; fill-opacity: 0.6; }
.book_second_line { font-size: 36px; font-weight: normal; }
.home_selected_books { display: grid; grid-auto-flow: column; grid-gap: min(20px, 2vw); margin: 0 auto; width: max-content; }
.home_selected_books .home_book { width: min(100px, 13vw); }
.home_selected_books .home_book svg text { font-size: 28px; }
.home_selected_books .home_book svg { transition: all 0.3s; }
.home_selected_books .home_book_hover svg:hover { transform: scale(1.2); }
.home_footer_box { padding: 0.8rem 0 1.6rem 0; background-color: var(--color_home_bg); }
.home_info { width: 100%; padding: 1rem 5vw 0 5vw; color:#333; text-align: center; }
.home_info a { color: #666; }
.home_footer { padding: 0; width: 100%; color:#666; text-align: center; font-size: 1rem; }
.home_footer a { color: #666; }

.home_guetesiegel_grid { display: grid; grid-template-columns: max-content max-content; gap: 2rem; place-items: center; margin: max(2rem, min(4vw + 1rem, 5rem) + var(--size_header)) auto 0 auto; width: max-content; }
.home_guetesiegel_text { line-height: 1.2; font-size: 1rem; text-align: center; }
.home_guetesiegel_text img { width: 200px; }

.home_coming { position: absolute; top: -3.6rem; left: 4rem; right: initial; padding: 0.6rem 1.5rem; line-height: 1.1; color: var(--color_main_dark); text-align: center; background-color: var(--color_compl); border-radius: var(--br); transform: rotate(4deg); z-index: 10; }
.home_book_new { position: absolute; width: 45px; height: 45px; top: -20px; right: -20px; z-index: 1; }
.home_new_chapter { position: absolute; top: -1.1rem; right: -1.2rem; padding: 0.2rem 0.4rem; line-height: 1.1; font-size: 1rem; color: var(--color_main_dark); text-align: center; background-color: var(--color_compl); border-radius: var(--br); transform: rotate(15deg); }

.home_awards { background-color: var(--color_home_bg); }
.home_awards_grid { display: grid; grid-template-columns: max-content max-content; gap: 2rem 4rem; margin: 0 auto; padding: 1rem 0; width: max-content; line-height: 1.3; font-size: 1rem; }
.home_award { display: grid; grid-template-columns: max-content max-content; gap: 0.7rem; align-items: center; }
.home_award .img_round { width: 70px; height: 70px; background-color: #fff; border-radius: 50%; border: 1px solid #ccc; }
.home_award .img_plain { width: 79px; height: 70px; }

@media (max-width: 1280px) {
   .home_awards_grid { gap: 1.5rem 2rem; font-size: 0.9rem; }
}

@media (max-width: 767px) {
   .home_guetesiegel_grid { grid-template-columns: max-content; gap: 1rem; }
   .home_coming { top: -2.6rem; left: 4rem; padding: 0.4rem 0.8rem; font-size: 14px; }
   .home_book_coming { top: -15px; right: -15px; width: 40px; height: 40px; }
   .home_awards_grid { grid-template-columns: max-content; gap: 0.6rem; font-size: 0.8rem; }
}

.particles-js-canvas-el { position: absolute; top: 0; left: 0; }

.home_tour_box { margin: 0 auto 2rem auto; width: max-content; }
.tour_container { display: flex; place-content: center; place-items: center; position: relative; margin-top: -0.9em; height: min(21vh, 21vw); }
#sights_start_button { width: min(150px,24vw); height: auto; text-decoration: none; overflow: visible; z-index: 1; pointer-events: none; cursor: pointer; }
#sights_start_button text { fill: #FFFFFF; font-family: var(--font_main); font-size: 120px; font-weight: 700; }
#sights_start_button .tour_subject text { font-size: 90px; }


.home_diamond_col  { display: grid; gap: 0 min(5rem, 7vw); place-items: center; margin: auto; width: max-content; }
.home_diamond_2col { grid-template-columns: max-content max-content; }
.home_diamond_3col { grid-template-columns: max-content max-content max-content; gap: 0 min(6.5rem, 10vw); }
.home_diamond_3col_loggedin { grid-template-columns: max-content max-content max-content; gap: 0 min(5.25rem, 6vw); }

.home_diamond { position: relative; display: block; width: min(160px, 15vw); height: min(160px, 15vw); text-decoration: none; user-select: none; }
.home_diamond_bg { width: 100%; height: 100%; transform: rotate(45deg); }
.home_diamond img { position: absolute; top: -25.2%; left: -20%; width: 140%; height: auto; opacity: 0.8; pointer-events: none; }
.home_diamond svg text { fill: #FFF; font-family: var(--font_main); font-weight: bold; }

.home_diamond_upcoming { margin-bottom: 1.5rem; text-align: center; font-weight: normal; color: var(--color_system); }
.home_diamond_selected { display: grid; grid-auto-flow: column; grid-gap: min(3rem, 5vw); margin: 0 auto; width: max-content; }
.home_diamond_selected > .home_diamond { width: min(100px, 10vw); height: min(100px, 10vw); }

@media (max-width: 767px) {
   #sights_start_button { display: none; }
   .home_diamond { width: 110px; height: 110px; }
   .home_diamond_col  { gap: 0 3rem; margin: 3rem auto; }
   .home_diamond_3col { grid-template-columns: max-content max-content; }
   .home_diamond_3col_loggedin { grid-template-columns: max-content max-content; }
   .home_diamond_selected { grid-gap: 2.5rem; }
   .home_diamond_selected > .home_diamond { width: 80px; height: 80px; }
}

@media (max-width: 480px) {
   .home_content { flex-direction: column; }
   .home_diamond_special { grid-template-columns: 1fr 1fr; grid-auto-flow: unset; }
}

/* --- SEARCH --- */
.search_form_home { display: grid; grid-template-columns: 10rem 3rem; margin: 0 auto; width: max-content; }
.search_form_home input { padding: 0.5rem; font-family: Semikolon; font-size: 1.2rem; border: 1px solid #bbb; border-radius: var(--br) 0 0 var(--br); outline: 0px none; }
.search_form_home button { line-height: 3rem; color: #fff; font-size: 1.4rem; text-align: center; background-color: var(--color_button); border: 0px none; border-radius: 0 var(--br) var(--br) 0; cursor: pointer; transition: all 0.3s; }
.search_form_home button:hover { color: var(--color_main); background-color: var(--color_compl); }
#search_form_home_mobile { display: none; }

.search_no_results { margin-bottom: 2rem; font-size: 1.3rem; font-weight: bold; text-align: center; }
.search_form { display: grid; grid-template-columns: min(80vw, 20rem) 2.5rem; margin: 0 auto 2rem auto; width: max-content; }
.search_form input { padding: 0.5rem; font-family: Semikolon; font-size: 1.2rem; border: 1px solid #bbb; border-radius: var(--br) 0 0 var(--br); outline: 0px none; }
.search_form div { line-height: 2.5rem; color: #fff; text-align: center; background-color: var(--color_button); border-radius: 0 var(--br) var(--br) 0; cursor: pointer; transition: all 0.3s; }
.search_form div:hover { color: var(--color_main); background-color: var(--color_compl); }
.search_item { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; margin: 0 auto 1rem auto; padding: 0.7rem; width: min( 96vw, 56rem); text-decoration: none; color: var(--color_text); border-radius: var(--br); cursor: pointer; transition: all 0.3s; }
.search_item:hover { background-color: var(--color_main_lighter); }
.search_item:hover img { transform: scale(1.06); }
.search_item img { width: 14rem; border: 1px solid #ccc; border-radius: var(--br); transition: all 0.3s; }
.search_item strong { font-size: 1.3rem; color: var(--color_main); }
.search_item b { color: var(--color_main); text-decoration: underline; }

@media (max-width: 767px) {
   .search_item { grid-template-columns: auto; background-color: var(--color_main_lighter); }
   .search_item img { width: 12rem; }
   #search_form_home { display: none; }
   #search_form_home_mobile { display: grid !important; }
}

/* --- NOT FOUND --- */
.not_found_top { padding: max(2rem, min(5vw, 7rem)) 3vw 0 3vw; line-height: calc(max(1.5rem, min(3vw, 2.8rem)) + 4px); font-size: max(1.5rem, min(3vw, 2.8rem)); font-weight: bold; text-align: center; }
.not_found_link { display: inline-block; line-height: calc(max(1.4rem, min(3vw, 1.8rem)) + 6px); font-size: max(1.4rem, min(3vw, 1.8rem)); font-weight: normal; color: var(--color_compl); }

/* --- HEADER --- */
#header_user_mobile { display: none; height: 100%; }

.cp_header { position: fixed; top: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; width: 100%; height: calc(var(--size_header) + 1px); font-size: calc(var(--size_header) / 2.8); color: var(--color_system); background-color: var(--color_bc_page); border-bottom: 1px solid #fff; transform-style: preserve-3d; z-index: 3002; }
.cp_header_home { position: absolute; background-color: transparent; }
.cp_header_home .cp_header_span { background-color: transparent; }
.cp_header_home .cp_header_menu { background-color: transparent; }
.cp_header_std { position: fixed; }

.cp_bc { display: grid; grid-template-columns: max-content auto auto auto; height: var(--size_header); color: var(--color_bc_text); }
.cp_bc a, .cp_bc .cp_bc_page { display: grid; grid-template-columns: auto 19px; height: var(--size_header); color: var(--color_bc_text); text-decoration: none; }
.cp_bc a span, .cp_bc .cp_bc_page span { margin-left: -1.1em; padding: 0 0.7em 0 2.1em; line-height: var(--size_header); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.cp_bc a svg { height: var(--size_header); overflow: visible; }

.cp_bc a span, .cp_bc a path, .cp_bc a em { transition: color 0.3s, background-color 0.3s, fill 0.3s; }
.cp_bc a:hover span, .cp_bc a:hover path, .cp_bc a:hover em { color: var(--color_main_dark); background-color: var(--color_hover_bg); fill: var(--color_hover_bg); }

.cp_bc .cp_bc_logo { color: var(--color_main_inv); z-index: 5; }
.cp_bc .cp_bc_logo span { display: grid; align-content: center; margin-left: 0; padding: 0 0.2em 0 0.4em; font-size: calc(var(--size_header) / 1.6); background-color: var(--color_bc_logo); }
.cp_bc .cp_bc_logo path { fill: var(--color_bc_logo); }

.cp_bc_logo_home { position: relative; display: grid; align-content: center; margin-left: 0; padding: 0 0.2em 0 0.4em; color: var(--color_system); font-size: calc(var(--size_header) / 1.6); text-decoration: none; z-index: 5; transition: all 0.3s; }
.cp_bc_logo_home:hover { color: var(--color_hover_bg); }

.cp_bc .cp_bc_book { z-index: 4; }
.cp_bc .cp_bc_book span { background-color: var(--color_bc_book); }
.cp_bc .cp_bc_book path { fill: var(--color_bc_book); }

.cp_bc .cp_bc_chapter { z-index: 3; }
.cp_bc .cp_bc_chapter span { background-color: var(--color_bc_chapter); }
.cp_bc .cp_bc_chapter path { fill: var(--color_bc_chapter); }

.cp_bc_pages_list { position: relative; outline: none; }
.cp_bc .cp_bc_page { position: relative; grid-template-columns: auto auto; align-items: center; padding-right: 1rem; background-color: var(--color_bc_page); z-index: 2; cursor: pointer; transition: background-color 0.3s; }
.cp_bc .cp_bc_page span { background-color: var(--color_bc_page); transition: background-color 0.3s; }
.cp_bc .cp_bc_page em { transform-origin: 50% 48%; transition: background-color 0.3s, transform 0.3s; }
.cp_bc .cp_bc_page:hover, .cp_bc_page:hover span, .cp_bc .cp_bc_page:hover path, .cp_bc .cp_bc_page:hover em { color: var(--color_main_dark); background-color: var(--color_hover_bg); fill: var(--color_hover_bg); }

.cp_bc_pages_dropdown { position: absolute; bottom: var(--size_header); z-index: 1; transition: all 0.5s; }
.cp_bc_pages_dropdown a { display: block; position: relative; left: -1em; padding: 0 2em; height: 2.8rem; line-height: 2.8rem; background-color: var(--color_bc_page); border-top: 1px solid #fff; white-space: nowrap; transition: color 0.3s, background-color 0.3s; }
.cp_bc_pages_dropdown a:hover { background-color: var(--color_hover_bg); }
.cp_bc_pages_dropdown a:last-child { border-radius: 0 0 var(--br) var(--br);}

.cp_header_span { height: var(--size_header); line-height: var(--size_header); background-color: var(--color_bc_page); z-index: 2; overflow: hidden; outline: none; }

.cp_header_menu { display: grid; grid-auto-flow: column; height: 100%; background-color: var(--color_bc_page); z-index: 2; }
.cp_header_menu_item { position: relative; display: grid; grid-auto-flow: column; grid-gap: 0.6rem; align-items: center; padding: 0 1.5rem; height: 100%; font-size: calc(var(--size_header) / 3.2); color: var(--color_system); text-decoration: none; text-transform: uppercase; user-select: none; outline: none; cursor: pointer; transition: background-color 0.3s; }
.cp_header_menu_item em { font-size: 1.6rem; }
.cp_header_menu_item:hover { background-color: var(--color_system_midlight); }
.cp_header_menu_tools { background-color: var(--color_system_lighter); }
.cp_header_menu_login { background-color: var(--color_system_lighter); }
.cp_bc .cp_header_menu_active { background-color: var(--color_hover_bg); }

.cp_header_title { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp_header_menu_mobile { display: none; align-content: center; height: 100%; cursor: pointer; transition: background-color 0.3s; }
.cp_header_menu_mobile > em { padding: 0 1rem; font-size: 1.8rem; }
.cp_header_menu_mobile:hover { background-color: #cbccd1; }

.cp_header_menu_mobile_dropdown { display: none; position: absolute; top: 100%; right: 0px; max-width: 100%; max-height: calc(100vh - 70px); background-color: #fff; border-bottom-left-radius: var(--br); z-index: -1; overflow-y: auto; }
.cp_header_menu_acc_item { padding: 7px 10px; font-size: 18px; white-space: nowrap; text-align: left; text-overflow: ellipsis; color: var(--color_main_inv); background-color: var(--color_main_lighter); border-bottom: 1px solid var(--color_main_inv); outline: none; cursor: pointer; overflow: hidden; }
.cp_header_menu_acc_content { display: inline-block; width: 100%; text-align: left; background-color: var(--color_main_lighter); }
.cp_header_menu_acc_content a { display: block; padding: 7px 10px; width: 100%; height: auto; line-height: unset; font-size: 16px; color: var(--color_text); text-decoration: none; background-color: unset; border-bottom: 1px solid #fff; }
.cp_header_menu_acc_icon { padding-right: 0.1rem; }
.cp_header_menu_acc_active { color: var(--color_main_dark) !important; background-color: var(--color_hover_bg) !important; }

.cp_header_menu_user_dropdown { display: none; position: absolute; top: 100%; right: 0px; border-bottom-left-radius: var(--br); z-index: -1; overflow-y: auto; }
.cp_header_menu_user_item { display: grid; grid-template-columns: auto 1fr auto; grid-gap: 10px; align-items: center; padding: 0px 1rem; height: 2.8rem; color: var(--color_system); text-decoration: none; text-transform: none; background-color: var(--color_system_midlight); border-top: 1px solid #fff; white-space: nowrap; transition: color 0.3s, background-color 0.3s; }
.cp_header_menu_user_item:hover { color: var(--color_system_lightest); background-color: var(--color_system_light); }
.cp_header_menu_user_item em { font-size: 1.5rem; }
.cp_header_menu_user_logout { background-color: var(--color_system_midlight); }
.cp_header_menu_user_arrow { transform-origin: 50% 45%; transition: transform 0.3s; }

.menu_arrow_rotate { transform: rotate(180deg); }

#header_country { cursor: pointer; }
#header_country img { width: 2rem; height: 2rem; transition: all 0.3s; }
.header_country_current { display: grid; grid-auto-flow: column; align-items: center; padding: 0 0.7rem; height: 100%; user-select: none; }
.header_country_dropdown { position: absolute; top: 100%; right: 0px; font-size: 1.2rem; background-color: var(--color_system_lighter); border-bottom-left-radius: var(--br); z-index: 1001; user-select: none; display: none; }
.header_country_grid { display: grid; grid-template-columns: max-content max-content; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; cursor: pointer; }
.header_country_grid:hover { background-color: var(--color_system_midlight); }
.header_country_grid:hover img { transform: scale(1.2); }


@media (max-width: 1280px) {
   .cp_bc_pages_dropdown a { height: 2.5rem; line-height: 2.5rem; }
}

@media (max-width: 767px) {
   .cp_bc a           { display: none; }
   .cp_bc .cp_bc_logo { display: grid; }
   .cp_bc             { grid-template-columns: max-content; }
   .cp_bc_pages_list  { display: none; }
   .cp_header_span    { margin-left: -1.1rem; padding-left: 1.9rem; }
   .cp_header_title   { display: block; }

   .cp_header_menu_mobile { display: grid; }
   .cp_header_menu_tools { display: none; }
   .cp_header_menu_about { display: none; }
   .cp_header_menu_hub { display: none; }
   .cp_header_menu_user { display: none; }
   .cp_header_login_hidden { display: none; }

   .tour_container { display: none; }
}

@media (min-width: 3840px) {
   :root {
      --size_header: 4.25rem;
   }
}


/* --- SCHUBU PLUS --- */
.schubu_plus_corner { position: absolute; top: 0; left: 0; width: 1.5rem; height: 1.5rem; }
.schubu_plus_corner polygon { fill: #F7D256; }
.schubu_plus_corner path { fill: #52566A; transform-origin: 7px 7px; transition: all 0.2s; }
.schubu_plus_corner_rotate { transform: rotate(90deg); }
.loggedin .schubu_plus_corner polygon { fill: #B6E19D; }

.schubu_plus_circle { position: relative; top: 1px; width: 16px; height: 16px; }
.schubu_plus_circle circle { fill: #F7D256; }
.schubu_plus_circle path { fill: #52566A; transform-origin: 10px 10px; transition: all 0.2s; }
.loggedin .schubu_plus_circle circle { fill: #B6E19D; }

/* --- SCHUBU KI --- */
.schubu_ki_corner { position: absolute; top: .1rem; left: .05rem; width: 1.2rem; height: 1.2rem; z-index: 10; }
.schubu_ki_corner path { fill: #F7D256; transform-origin: 7px 7px; transition: all 0.2s; }
.loggedin .schubu_ki_corner path { fill: #B6E19D; }
.cp_aside_link:hover > .schubu_ki_corner path { fill: var(--color_main); }




/* --- LOGIN --- */
.login_box        { display: none; position: absolute; top: 100%; right: 0px; padding: 1rem 2rem 1.4rem 2rem; width: 380px; max-height: calc(100vh - var(--size_header)); color: var(--color_text); text-align: center; text-transform: none; background-color: var(--color_system_midlight); border-bottom-left-radius: 7px; overflow-y: auto; z-index: 1000; }
.login_box label  { cursor: pointer; }
.login_pic        { display: inline-block; width: 248px; height: 200px; }
.login_welcome    { margin: 1rem 0 0.8rem 0; font-size: 1.8rem; color: var(--color_button); }
.login_info       { padding: 0.3rem 0.5rem; font-size: 1.25rem; line-height: 1.2; display: none; border-radius: var(--br); }
.login_info2      { display: none; margin-top: 1.25rem; font-size: 1.25rem; line-height: 1.2; }
.login_input_box  { position: relative; margin-top: 0.8rem; }
.login_input_name { width: 100%; height: 3.5rem; font-family: var(--font_main); font-size: 1.25rem; text-indent: 0.5rem; background-color: #f7f6f5; border: 1px solid #999; border-radius: var(--br); outline: none; -webkit-appearance: none; }
.login_input_name::-ms-reveal, .login_input_name::-ms-clear { display: none; }
.login_input_name::-webkit-textfield-decoration-container { visibility: hidden; pointer-events: none; }
.login_show_pwd   { position: absolute; top: 0.8rem; right: 0.7rem; color: #ccc; font-size: 1.25rem; cursor: pointer; transition: all 0.3s; }
.login_show_pwd:hover { color: var(--color_compl); }
.login_show_pwd_hide { color: #666; }
.login_save_session { margin-top: 0.3rem; display: none; }
.login_save_session input { margin-right: 0; cursor: pointer; }
.login_save_session label { padding-left: 0.3rem; cursor: pointer; }
.login_button     { margin-top: 1.5rem; width: 100%; height: 3.5rem; font-family: var(--font_main); font-size: 1.25rem; color: var(--color_main_inv); line-height: 3.5rem; text-align: center; background-color: var(--color_button); border: 0px none; border-radius: var(--br); cursor: pointer; transition: background-color 0.3s; -webkit-appearance: none; }
.login_button:hover { color: var(--color_button); background-color: var(--color_compl); }
.login_button_disabled { opacity: 0.5; background-color: #999; pointer-events: none; }
.login_pwd_reset { margin-top: 0.5rem; color: var(--color_button); font-size: 1.1rem; text-decoration: underline; text-align: center; cursor: pointer; transition: all 0.3s; }
.login_pwd_reset:hover { color: var(--color_main); }
.login_plus_info { margin-top: 1rem; color: var(--color_button); font-size: 1.2rem; text-decoration: underline; text-align: center; cursor: pointer; transition: all 0.3s; }
.login_plus_info:hover { color: var(--color_main); }

#pwd_reset_email { margin-top: 0.5rem; height: 3rem; }
.login_pwd_reset_user { margin-bottom: 0.3rem; width: 100%; background-color: var(--color_button); }

.login_box input[type="checkbox"] { cursor: pointer; transform: scale(1.3); }

.dialog_pwd_reset_content { display: grid; grid-template-columns: auto 1fr; gap: min(3vw, 2rem); }
.dialog_pwd_reset_content img { height: 27vw; max-height: 150px; }
.dialog_pwd_reset_text { margin-top: min(2vw, 1rem); }

.dialog_deadline { display: grid; grid-template-columns: auto 1fr; gap: 1rem; }
.dialog_deadline img { width: 140px; }
.dialog_deadline a { outline: none; }

.login_identities   { display: none; }
.login_identities_a { background-color: var(--color_compl) !important; }
.login_identities_d { background-color: var(--color_main_lighter) !important; }
.login_identities_d div { color: #999 !important; }
.login_schools { display: grid; grid-template-columns: auto 1fr; margin-top: 0.7rem; font-size: 1.4rem; color: var(--color_main_inv); line-height: 1.4rem; text-align: left; background-color: var(--color_main_light); border-radius: var(--br); overflow: hidden; cursor: pointer; }
.login_schools div:last-child { padding: 7px 10px; }
.login_schools span  { display: block; font-size: 1rem; }
.login_schools div:last-child { transition: background-color 0.3s; }
.login_schools:hover div:last-child { color: var(--color_text); background-color: var(--color_compl) !important; }
.login_schools_nr   { display: grid; place-items: center; width: 3rem; background-color: var(--color_main); }

/* --- REGISTRATION --- */
.register_grid { display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 40px; }
.register_grid h1 { margin: 1rem 0 0 0; color: var(--color_title); }
.register_grid h2 { margin-bottom: 1.3rem; border: 0px none; }
#register_data { width: 90vw; max-width: 430px; }
.register_grid .dialog_submit { margin: 15px 0 0 0; font-size: 1.1rem; font-weight: normal; }
.register_msg { margin: 15px 0; }

@media (max-width: 767px) {
   .register_grid { grid-template-columns: auto; justify-content: normal; justify-items: center; text-align: center; }
   .register_grid img { height: 200px; }
}

/* --- ÜBER SCHUBU --- */
.ueb_payment_offer { display: grid; grid-template-columns: 10rem 1fr; column-gap: 1.5rem; margin: var(--content_spacing) 0 var(--content_spacing) 0; padding: 1rem; width: 100%; max-width: 39rem; background-color: var(--color_bg1); border-radius: var(--br); }
.ueb_payment_offer img { width: 10rem;}
.ueb_payment_offer_text { padding-top: 0.6rem; font-size: 1.5rem; }
.ueb_payment_flex { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.ueb_payment_button { display: grid; grid-template-columns: auto 1fr; align-items: center; max-width: max-content; color: var(--color_main_inv); background-color: hsl(163, 71%, 30%); border-radius: var(--br); cursor: pointer; user-select: none; transition: all 0.3s; }
.ueb_payment_button_icon { padding: 0 1rem 0 1rem; font-size: 2rem; }
.ueb_payment_button_text { padding: 1rem 2rem 1rem 0; }
.ueb_payment_button:hover { color: var(--color_main_dark); background-color: var(--color_compl); }

.ueb_aut_grid { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; width: var(--content_width); max-width: fit-content; }
.ueb_aut_red { width: 60px; height: 14px; background-color: #f00; }
.ueb_aut_white { width: 60px; height: 14px; background-color: #fff; }

#ueb_dialog_contact { display: none; }
.ueb_dialog_contact { max-width: 700px; }
.ueb_dialog_contact .ui-dialog-titlebar { background-color: var(--color_main); }

#ueb_form_contact label { line-height: 1; }
#ueb_form_contact label span { font-size: 1rem; }
.ueb_form_contact_heading { padding: 1rem 1.4rem 0 1.4rem; text-align: center; }
.ueb_form_contact_grid { display: grid; grid-template-columns: 1fr auto; }
.ueb_form_users { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem 0.8rem;}
.ueb_form_contact_promo_box { display: grid; grid-template-rows: 1fr auto; margin: 1rem 1.4rem 1.4rem 0; padding: 1rem 1rem 1rem 1rem; min-width: 190px;; line-height: 1.2; background-color: var(--color_bg1); border-radius: var(--br); text-align: center; }
.ueb_form_contact_promo { font-size: 2.5rem; font-weight: bold; }
.ueb_form_contact_promo_price { display: inline-block; margin-top: 1.5rem; line-height: 3rem; font-size: 3rem; font-weight: bold; }
.ueb_form_contact_promo_ust { font-size: 1rem; }
.ueb_form_contact_bottom { padding: 0rem 1.4rem 1rem 1.4rem; text-align: center; }
.ueb_form_contact_invalid { background-color: #f99 !important; }

@media (max-width: 767px) {
   .ueb_form_contact_grid .dialog_fields { padding: 0.7rem; }
   .ueb_payment_offer { grid-template-columns: auto; }
   .ueb_payment_offer_text { font-size: 1.3rem; }
   .ueb_payment_button_text { padding: 0.7rem 2rem 0.7rem 0; }
   .ueb_form_contact_grid { grid-template-columns: auto; }
}

/* --- NEWS --- */
.news_grid { display: grid; grid-template-columns: 8rem 1fr; gap: 0 2rem; width: var(--content_width); }
.news_grid_date { grid-column: span 2; margin-top: 3rem; text-align: left; font-weight: bold; }
.news_grid_pic { margin-top: 1rem; padding: 0.5rem; color: #666; text-align: center; background-color: var(--color_main_lightest); border-radius: var(--br); }
.news_icon { margin-top: 1rem; width: 8rem; }
.news_grid .news_grid_date:first-child { margin-top: 1rem; }
.news_grid > div > a { display: inline-block; margin-top: 0.4rem; color: var(--color_main) ;}

.news_diamond { position: relative; display: block; top: 2rem; left: 1rem; width: 6rem; height: 6rem; text-decoration: none; user-select: none; }
.news_diamond img { position: absolute; top: -25.2%; left: -20%; width: 140%; height: auto; opacity: 0.8; pointer-events: none; }
.news_diamond svg text { fill: #FFF; font-family: var(--font_main); font-weight: bold; }

/* --- PAYMENT --- */
.payment_title { margin: max(30px, min(4vw, 70px)) auto max(5px, min(1vw, 10px)) auto !important; }
.payment_subtitle { margin: 0 auto 2.5rem auto; max-width: 700px; text-align: center; }
.payment_box { position: relative; margin: 0 auto 2rem auto; padding: 1rem 1.4rem 1.4rem 1.4rem; max-width: 550px; background-color: #fff; border-radius: var(--br); box-shadow: 0px 15px 25px #bbb; }
.payment_box label { cursor: pointer; }
.payment_box .dialog_title { padding: 0 0 0.5rem 0; font-size: 1.4rem; }
.payment_box .dialog_fields { padding: 0; }
.payment_box .dialog_fields label { line-height: 1.1; }
.payment_box .dialog_fields label span { font-size: 1rem; }
#data_label, #agb_label { color: var(--color_text); text-align: left; }
.payment_users_box { display: grid; grid-template-columns: max-content max-content max-content; align-items: center; gap: 1rem; }
.payment_minusers_mobile { display: none; }
.payment_minusers_desktop { display: block; }
#payment_users, .payment_users_spin { height: 40px; width: 80px; text-align: center; font-size: 22px; font-family: Semikolon; background-color: var(--color_main_lightest); border: 0px none; border-radius: var(--br); }
.payment_tip { font-size: 1rem; color: #999; }
.payment_tip2 { font-size: 1rem; color: #666; }
.payment_details { margin-top: 0.8rem; }
.payment_users_grid { display: grid; grid-template-columns: auto auto 0.3rem auto auto 0.3rem auto auto 0.3rem auto auto; gap: 1px; place-items: center; margin-top: 0.3rem; font-size: 14px; line-height: 24px; text-align: center; }
.payment_users_left { justify-self: stretch; background-color: #ddf; border-radius: var(--br) 0 0 var(--br); }
.payment_users_right { justify-self: stretch; background-color: #ddf; border-radius: 0 var(--br) var(--br) 0; }
.payment_users_active { background-color: #aaf; }
.payment_users_right.payment_users_active { font-weight: bold; }
.payment_price_box { margin-top: 1rem; padding: 1rem 0; text-align: center; background-color: var(--color_bg1); border-radius: var(--br); }
#payment_end_date { font-weight: bold; }
.price_lower { display: none; }
.payment_price { margin-top: 0.5rem; font-size: 2.5rem; font-weight: bold; }
#paypal_buttons { position: relative; margin: auto; max-width: 400px; background-color: #fff; z-index: 1002; }
.payment_progress { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1rem 1.4rem 1.4rem 1.4rem; z-index: 1001; background-color: #fff; display: none; }
.payment_progress_grid { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.5rem; align-items: center; margin: 1rem auto; width: max-content; font-size: 1.3rem; }
.payment_progress_grid span { margin: 0; height: max-content; }
.payment_progress_pending { color: #ccc; }
.payment_progress_ok { color: var(--color_correct); }
.payment_progress_nok { color: var(--color_wrong); }
.payment_progress_info { padding: 1rem; background-color: #fcc; border-radius: var(--br); display: none; }
.payment_progress_info div { margin-top: 0.5rem; display: inline-block; }
.payment_footer { display: flex; flex-direction: column; }
.payment_data_error { background-color: #faa !important; }

.payment_success_img { display: block; margin: min(5vw, 2rem) auto; width: 35vw; min-width: 125px; max-width: 194px; }

@media (max-width: 550px) {
   .payment_box { margin-bottom: 0.5rem; padding: 0.5rem 0.7rem 0.7rem 0.7rem; border-radius: 0; box-shadow: 0px 2px 5px #ccc; }
   .payment_minusers_mobile { display: block; }
   .payment_minusers_desktop { display: none; }
}

/* --- table of contents --- */
.toc_top { display: grid; grid-template-columns: auto auto; gap: min(3rem, 7vw); align-items: center; margin: max(2rem, min(4vw + 1rem, 5rem) + var(--size_header)) auto min(4rem, 5vw) auto; max-width: 90vw; min-height: 120px; width: max-content; }
.toc_top_search { display: grid; grid-template-columns: 1fr 3rem; }
.toc_top_search input { padding: 0.5rem; width: 100%; font-family: var(--font_main); font-size: 1.2rem; border: 1px solid #bbb; border-radius: var(--br) 0 0 var(--br); outline: 0px none; }
#toc_search_button { line-height: 3rem; color: #fff; text-align: center; background-color: var(--color_main); border-radius: 0 var(--br) var(--br) 0; }
.toc_content { position: relative; display: grid; grid-template-columns: 5rem 1fr min(5rem, 3vw); gap: min(4rem, 4vw); margin: 0 auto 4rem auto; width: fit-content; max-width: min(55rem, 96vw); }
.toc_content_books { position: sticky; top: calc(var(--size_header) + 2rem); }
.toc_book_inactive { filter: grayscale(0.4) opacity(40%); }
.home_book:hover { filter: grayscale(0) opacity(100%); }
#toc_search_results { display: none; grid-column: 2 / span 2; }

.toc_container     { margin: max(25px, min(5vw, 45px)) auto 60px auto; width: max-content; }
.toc_level_box     { margin-bottom: 1vw; border-radius: 10px; box-shadow: 0 0 3px #999; overflow: hidden; }
.toc_level_header  { padding: min(1vw, 7px); width: 100%; font-size: max(18px, min(1.5vw, 22px)); color: var(--color_main_inv); text-decoration: none; text-align: center; background-color: var(--color_main_dark); border-top: 1px solid #ccc; }

.toc_level         { display: block; padding: min(1vw, 7px); width: 100%; font-size: max(18px, min(1.5vw, 20px)); color: #333; text-decoration: none; text-align: center; background-color: #fff; border-top: 1px solid #ccc; transition: background-color 0.3s; }

.toc_level_a       { background-color: var(--color_hover_bg); }
.toc_level:hover   { background-color: var(--color_hover_bg); }
.toc_level_d       { color: #ccc; cursor: default; }
.toc_level_d:hover { color: #ccc; background-color: #fff; }

.toc_box           { position: relative; margin-bottom: max(25px, min(5vw, 45px)); width: 600px; height: max-content; background-color: #dadada; border-radius: var(--br); box-shadow: 0px 0px 3px #999; }
.toc_header        { display: grid; grid-template-columns: auto; height: 10vw; min-height: 40px; max-height: 50px; font-size: max(18px, min(4vw, 24px)); line-height: max(40px - 2px, min(10vw - 2px, 50px - 2px)); color: var(--color_main_inv); text-align: center; text-overflow: ellipsis; white-space: nowrap; background-color: var(--color_main); border-radius: var(--br) var(--br) 0px 0px; overflow: hidden; }
.toc_header_title  { padding: 0 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.toc_header_nr     { height: 100%; background-color: var(--color_main_dark); border-radius: var(--br) 0px 0px 0px; }
.toc_page          { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; margin-top: 1px; height: 15vw; min-height: 46px; max-height: 56px; text-decoration: none; transition: background-color 0.3s; }
.toc_page_bg0      { background-color: #f4f4f4; }
.toc_page_bg1      { background-color: #eee; }
.toc_page picture  { width: 95px; height: 45px; }
.toc_page img      { height: 100%; margin: 0 10px 0 5px; border-radius: 5px; background-color: white; }
.toc_page_name     { max-height: 56px; font-size: 18px; line-height: 1.2; color: #444; text-decoration: none; }
.toc_page_name_ia  { color: #bbb; }
.toc_page_type     { margin-right: 10px; font-size: 16px; color: var(--color_main); }
.toc_page_type em  { margin-left: 7px; }
.toc_page_type_not { color: #ddd; }
.toc_page:hover    { background-color: var(--color_compl); }
.toc_new           { position: absolute; width: 80px; height: 80px; top: -15px; right: -35px; z-index: 1; }
.toc_coming        { position: absolute; top: -1.5rem; right: -6rem; padding: 0.6rem 1.5rem; line-height: 1.1; color: var(--color_main_dark); text-align: center; background-color: var(--color_compl); border-radius: var(--br); transform: rotate(4deg); }

@media (max-width: 767px) {
   .toc_new    { top: -10px; right: -10px; width: 60px; height: 60px; }
   .toc_coming { top: -0.9rem; right: -1rem; padding: 0.4rem 0.8rem; font-size: 14px; transform: rotate(18deg); }
   .toc_content { grid-template-columns: 5rem calc(100% - 8rem); gap: 1rem 2rem; margin: 0 auto 2rem auto; }
   .toc_content .toc_box { width: 100%; }
   .toc_content_pages { max-width: inherit; }
   #toc_search_results { grid-column: 2; }
}

@media (max-width: 550px) {
   .toc_content { grid-template-columns: 1fr; width: 96vw; }
   .home_book { display: inline-block; margin: 0 0.2rem; }
   .toc_content_books { margin-top: 1rem; }
   #toc_search_results { grid-column: 1; }
   #toc_search_results .search_item { margin: 0 0 1rem 0; width: 96vw !important; }
}

/* --- TOC --- */
.cp_toc       { display: inline-block; margin-top: 0.6rem; border-radius: 5px; overflow: hidden; counter-reset: li_nr; }
#cp_toc_title { padding: max(0.3rem, min(1vw, 0.5rem)) 1.3em; color: var(--color_main_dark); font-size: max(1.1rem, min(2vw, 1.2rem)); letter-spacing: 0.1em; text-align: center; text-transform: uppercase; background-color: var(--color_bc_chapter); transition: all 0.3s; }
.cp_toc ul    { margin: 0; padding: 0.6rem 1.3em; list-style: none; font-size: max(1.1rem, min(1.4vw, 1.2rem)); background-color: #fff; }
.cp_toc a     { color: var(--color_main); text-decoration: underline; }
.cp_toc a:hover { color: var(--color_hover_text); }
.cp_toc ul { padding-right: 3em; }
.cp_toc li { position: relative; counter-increment: li_nr; padding: .15em 0; }
.cp_toc li::before { content: counter(li_nr, upper-alpha); position: absolute; right: -2em; color: var(--color_main); width: 1.3em; height: 1.3em; line-height: 1.2em; text-align: center; border: solid 1px var(--color_main_lighter); border-radius: .3em; }

/* --- MAIN --- */
.cp_main       { margin-top: calc(max(2rem, min(4vw, 4rem)) + 60px); counter-reset: h2_label; }
.cp_article    { position: relative; margin: 0 5vw 3rem 15vw; }
.cp_intro      { background-color: var(--color_main_lightest); padding: max(0.7rem, min(1.5vw, 2rem)) max(1rem, min(2.5vw, 3rem)); border-radius: 7px; }
.cp_intro p    { max-width: var(--content_width); }
.cp_section    { position: relative; clear: both; margin-top: max(1.5rem, min(3vw, 3rem)); padding: max(0.7rem, min(1.5vw, 2rem)) max(1rem, min(2.5vw, 3rem)); background-color: #fff; border-radius: 7px; }
.cp_section p  { max-width: var(--content_width); }
.cp_section .schubu_plus_corner { width: calc(var(--section_padding) * 1.5); height: calc(var(--section_padding) * 1.5); }
.cp_section .cp_interactive .schubu_plus_corner { width: 1.5rem; height: 1.5rem; }

/* --- LISTS --- */
.cp_section ul, ul.bullet_list { max-width: var(--content_width); margin-top: 0.5rem; padding-left: 2rem; list-style: none; }
.cp_section ul li, ul.bullet_list li { position: relative; margin-bottom: 0.5rem; }
.cp_section ul > li::before, ul.bullet_list > li::before { content: '\03c1'; font-family: "icons"; color: var(--color_main_t70); position: absolute; top: 0; left: -1.3em; }

.cp_section ol, ol.number_list { max-width: var(--content_width); padding-left: 2rem; list-style: none; counter-reset: li; }
.cp_section ol > li, ol.number_list > li { position: relative; margin-bottom: 1rem; }
.cp_section2 ol > li::before, ol.number_list > li::before { content: counter(li); counter-increment: li; position: absolute; left: -2.3rem; top: 0; width: 1.5em; height: 1.5em; line-height: 1; display: flex; justify-content: center; align-items: center; border-radius: 7px; font-weight: bold; color: white; background: var(--color_main_dark); }
.cp_section ol > li::before, ol.number_list > li::before { content: counter(li); counter-increment: li; position: absolute; left: -2.3rem; top: 0; width: 1.5em; height: 1.5em; line-height: 1; display: flex; justify-content: center; align-items: center; font-size: 1.1rem; font-weight: normal; color: var(--color_text); background: var(--color_main_lighter); border: 1px solid var(--color_main_light); border-radius: var(--br); }

ol.abc_list, ol.capital_abc_list, ol.cp_lower_alpha_list, ol.cp_upper_alpha_list { counter-reset: li; list-style: none; }
ol.abc_list > li, ol.capital_abc_list > li, ol.cp_lower_alpha_list > li, ol.cp_upper_alpha_list > li  { position: relative; }
ol.abc_list > li::before, ol.capital_abc_list > li::before, ol.cp_lower_alpha_list > li::before, ol.cp_upper_alpha_list > li::before { counter-increment: li; position: absolute; top: -0.13rem; left: -1.9rem; font-size: 1em; width: 1.5em; height: 1.5em; line-height: 1; display: flex; justify-content: center; align-items: center; font-weight: bold; color: var(--color_main); background: unset; border: 0px none; }
ol.capital_abc_list > li::before, ol.cp_upper_alpha_list > li::before { content: counter(li, upper-alpha) ")"; }
ol.abc_list > li::before, ol.cp_lower_alpha_list > li::before { content: counter(li, lower-alpha) ")"; }
/* LISTS IN EXPERT-BOX */
.cp_expert_box ol.abc_list, .cp_expert_box ol.cp_lower_alpha_list { padding-left: 1.6rem; margin: 0.3rem 0; }
.cp_expert_box ol.abc_list > li, .cp_expert_box ol.cp_lower_alpha_list > li { margin: 0; }
.cp_expert_box ol { max-width: var(--content_width); padding-left: 2rem; list-style: none; counter-reset: li; }
.cp_expert_box ol > li  { position: relative; margin-bottom: 1rem; }

/* --- PICTURES --- */
.cp_fig { position: relative; margin: 0 0 2vw 0; cursor: zoom-in; }
.cp_fig img { display: block; width: 100%; height: auto; background-color: var(--color_bg); border-radius: var(--br); }
.cp_fig figure { margin-bottom: 2vw; }
.cp_fig figcaption { display: grid; grid-template-columns: auto 1fr; margin-top: 0.3rem; transition: all 0.3s; }
.cp_fig_no_zoom { cursor: default; }
.cp_fig_zoom    { display: grid; grid-template-columns: auto auto; place-items: center; padding: 0.4rem 0.5rem; background-color: var(--color_main_lighter); font-size: 0.8rem; border-radius: var(--br) 0 0 var(--br); }
.cp_fig_zoom em { padding-right: 0.3rem; }
.cp_fig_caption { padding: 0.4rem 0.5rem; line-height: 1.1rem; font-size: 1rem; background-color: var(--color_main_lightest); border-radius: 0 var(--br) var(--br) 0; }
.cp_fig_multi { display: flex; flex-wrap: wrap; align-items: flex-start; }
.cp_fig_multi .cp_fig { margin-right: 2vw; }
.cp_fig_svg { overflow: visible; position: absolute; width: 100%; max-height: 100%; z-index: 1; }
.cp_fig_overlay { overflow: visible; position: absolute; width: 100%; max-height: 100%; z-index: 1; }
.cp_fig_overlay > * { width: 100%; height: 100%; }
[data-source-ai] { position: relative; display: block; }
[data-source-ai]::after { content: 'KI generiert'; color: black; text-shadow: 0 0 3px var(--color_main_t70); box-shadow: inset 0 0 5px var(--color_main_t70); position: absolute; bottom: 0.5em; right: 0.5em; background-color: rgba(255,255,255,0.5); padding: 0.1em 0.4em; font-size: 0.7em; border-radius: var(--br); -moz-backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cc_item [data-source-ai]::after { font-size: 0.5em; }

.cp_fig_zoomed_bg  { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #fff; z-index: 4000; }
.cp_fig_zoomed { display: none; place-content: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 20px; cursor: pointer; z-index: 4001; }
.cp_fig_zoomed_box { display: grid; grid-template-rows: 1fr auto auto auto auto 1fr; gap: 5px; justify-items: center; margin: auto; width: calc(100vw - 2 * var(--br)); height: 100vh; height: 100dvh; }
.cp_fig_zoomed .button_close { position: unset; width: var(--zoom_fig_width, 100%); height: 44px; color: var(--color_main_dark); border: none; background-color: transparent; font-size: 30px; line-height: 1; text-align: right; transition: color 0.3s ease-in-out; }
.cp_fig_zoomed .button_close:hover { color: var(--color_compl); }
.cp_fig_zoomed_fig { position: relative; justify-self: stretch; }
.cp_fig_zoomed.sized picture { display: block; width: var(--zoom_fig_width, 100%); height: var(--zoom_fig_height, 100%); margin: 0 auto; justify-self: center; }
.cp_fig_zoomed.sized .cp_fig_svg { display: block; width: var(--zoom_fig_width, 100%); left: 50%; transform: translateX(-50%); }
.cp_fig_zoomed.sized .cp_fig_overlay { display: block; width: var(--zoom_fig_width, 100%); left: 50%; transform: translateX(-50%); }
.cp_fig_zoomed.sized img { display: block; width: 100%; height: 100%; }
.cp_fig_zoomed_fig img { border-radius: var(--br); }
.cp_fig_zoomed figcaption { display: grid; margin: 5px auto 0 auto; grid-template-columns: auto 1fr; border-radius: var(--br); width: max-content; min-width: min(90vw, 400px); max-width: calc(100vw - 2 * var(--br)); }
/* .pic_zoom_caption_nr { display: grid; grid-template-columns: auto; place-items: center; padding: 0.4rem 0.5rem; background-color: var(--color_main); font-size: 0.8rem; border-radius: var(--br) 0 0 var(--br); }
.pic_zoom_caption_text { padding: 0.4rem 0.5rem; line-height: 1.1rem; font-size: 1rem; background-color: #e6f2ed; border-radius: 0 5px 5px 0; } */
.cp_fig_zoomed_credits { margin-top: 10px; font-size: 14px; color: var(--color_main_dark); text-align: center; }
.cp_fig_zoomed_credits_txt { padding: 0.3rem 0; font-size: 14px; color: var(--color_text); }
.cp_fig_zoomed_credits_txt a { color: var(--color_system); text-decoration: underline; font-weight: normal; }

/**
* .pic_zoom_grid   = .cp_fig_zoomed_box
* .pic_zoom_close  = 
* .pic_zoom_img    = .cp_fig_zoomed_fig
* .pic_zoom_caption
*/

/*
.cp_fig_zoomed_box { position: relative; margin: auto; width: 100%; max-width: calc((min(calc(1 / var(--zoom_w_to_h, 1)), var(--zoom_w_to_h, 1)) *  70vh * (1 - var(--zoom_is_landscape, 1))) + min(calc(960px * var(--zoom_is_landscape, 1)), 80vh)); }
.cp_fig_zoomed_fig { width: auto; cursor: unset; overflow: hidden; position: relative; }
.cp_fig_zoomed img { display: block; width: 100%; border-radius: var(--br); background-color: var(--color_bg); }
.cp_fig_zoomed figcaption { display: grid; grid-template-columns: auto 1fr; margin-top: 0.3rem; border-radius: var(--br); overflow: hidden; transition: all 0.3s; }
.cp_fig_zoomed .button_close {  }
.cp_fig_zoomed .button_close:hover { color: var(--color_compl); }
*/

.cp_caption { display: grid; grid-template-columns: auto 1fr; margin-top: 0.3rem; background-color: var(--color_main); border-radius: var(--br); overflow: hidden; transition: all 0.3s; }

/* --- INTERACTIVE BUTTON --- */
.cp_interactive { position: relative; margin: 0; margin-bottom: var(--content_spacing); font-family: var(--font_main); font-size: 1.1rem; line-height: 1.4rem; text-align: left; background-color: var(--color_main); border: 0 none; border-radius: var(--br); outline: none; overflow: hidden; cursor: pointer; transition: all 0.3s; }
p > .cp_interactive { margin: var(--content_spacing) 0; }
.cp_interactive_text  { display: inline-block; position: relative; padding: 0.2rem 0.8rem 0.2rem 3.8rem; font-weight: 600; background-color: var(--color_main_lighter); color: var(--color_text); }
.cp_interactive_text::before { position: absolute; left: 0; top: 0; height: 100%; width: 3rem; line-height: 3rem !important; font-size: 2rem; color: var(--color_main_inv); text-align: center; background-color: var(--color_main); display: flex; align-items: center; justify-content: center; }
.cp_interactive_text span { font-size: 0.9rem; font-weight: 400; line-height: 1rem; transition: all 0.3s; }
.cp_interactive span::before { transition: all 0.3s; width: 3rem; }
.cp_interactive:hover span::before { color: var(--color_main_dark); background-color: var(--color_hover_bg); }
.cp_ani_control { line-height: 3rem; }
.cp_interactive:disabled { cursor: unset; }
.cp_interactive:disabled span { background-color: var(--color_system_lighter); }
.cp_interactive:disabled span::before { color: var(--color_main_dark); background-color: var(--color_system_midlight); }
.cp_interactive_msg { display: block; font-size: 0.85em; line-height: 1.2; margin-bottom: 0.4em; padding-left: 0.2em; color: #333; }

/* --- POPUP BUTTON --- */
.cp_popup { display: grid; grid-template-columns: auto 1fr; margin: 2.5rem 0 1rem 0; max-width: var(--content_width); background-color: var(--color_main_lightest); border: 2px solid var(--color_main_lighter); border-radius: var(--br); cursor: pointer; transition: all 0.3s; }
.cp_popup:hover { border-color: var(--color_compl); }
.cp_popup_left { display: grid; place-content: center; position: relative; line-height: 0; border-radius: var(--br); overflow: hidden; }
.cp_popup_left img { width: 100%; max-width: 238px; height: 11.25rem; object-fit: cover; filter: blur(2px); }
.cp_popup_right { padding: 0.8rem 1.5rem; }
.cp_popup_right h3 { padding-top: 0; color: var(--color_main_dark); }
.cp_popup .schubu_plus_corner { width: 4rem; height: 4rem; }
.cp_popup .schubu_ki_corner { width: 2.5rem; height: 2.5rem; }
.cp_popup:hover .schubu_ki_corner { animation: shake_dice .15s 2 linear, jump_dice .5s ease-in-out; }
@keyframes shake_dice { 0% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-10deg); } 100% { transform: rotate(0deg); } }
/* .cp_popup .schubu_ki_corner path { stroke: #ae933c; stroke-width: 2; }
.loggedin .cp_popup .schubu_ki_corner path { stroke: #718b62; stroke-width: 2; } */
.cp_popup .schubu_ki_corner circle { fill: #ae933c; }
.loggedin .cp_popup .schubu_ki_corner circle { fill: #718b62; }
.cp_teacher_info_wrapper ~ .cp_popup { margin-top: 0; }


@media (max-width: 767px) {
   .cp_popup { grid-template-columns: auto; }
}

.cp_tour_button {display: flex;}

/* --- INFO-BOX --- */
.cp_info_box { max-width: var(--content_width); margin-bottom: var(--content_spacing); padding: 0.3em 0.6em; background-color: var(--color_main_lightest); border: 2px solid var(--color_main_lighter); border-radius: var(--br); }
.cp_info_box > :last-child { padding-bottom: 0; margin-bottom: 0; }

/* --- LABEL --- */
.cp_section { --section_padding: max(1rem, min(2.5vw, 3rem)); }
.cp_label { position: relative; margin-top: calc(var(--content_spacing) * 1.7); }
.cp_label::before { display: grid; place-items: center; position: absolute; top: -0.5rem; left: calc(-1 * var(--section_padding)); transform: translateX(-50%); box-sizing: content-box; width: max(1.8rem, min(3.7vw, 3rem)) !important; height: max(1.8rem, min(3.7vw, 3rem)) !important; padding: 0 2px 2px 0; font-size: max(1.5rem, min(3vw, 2.5rem)); color: var(--color_main); background: var(--color_main_lightest); border: 1px solid var(--color_main_lighter); border-radius: 50%; }
h3.cp_label, h4.cp_label { padding-top: calc(var(--content_spacing) / 8); margin-top: calc(2 * var(--content_spacing)); }

@media (max-width: 767px) {
   .cp_label::before { display: none; }
}

/* section label */
.cp_section h2 { position: relative; padding-right: 1.3em; counter-increment: h2_label; }
.cp_section h2::before { content: counter(h2_label, upper-alpha); position: absolute; right: 0; box-sizing: content-box; height: 1.05em; width: 1.1em; display: grid; border: solid 1px var(--color_main); font-weight: normal; border-radius: var(--br); font-size: .9em; place-items: center; line-height: 1; bottom: .2em; padding-top: .05em; }

.favorit { position: absolute; right: 1.3em; font-family: icons; font-size: 1em; line-height: 1; bottom: .2em; cursor: pointer; transition: all 0.3s; }
.favorit:hover { color: var(--color_compl); }
.favorit_plus { color: #F7D256; }
.favorites_grid { display: grid; grid-template-columns: max-content auto max-content; gap: 0.5rem 0; place-items: center; margin: auto; max-width: max-content; cursor: pointer; }
.favorites_pic { display: grid; place-self: stretch; place-items: center; padding: 5px; line-height: 0; background-color: var(--color_main_lighter); border-radius: var(--br) 0  0 var(--br); }
.favorites_pic img { width: 80px; height: 45px; border-radius: var(--br); }
.favorites_text { place-self: stretch; padding: 5px 1rem 5px 0.5rem; line-height: 1.2; background-color: var(--color_main_lighter); }
.favorites_small { font-size: 1rem; color: #666; }
.favorites_del { display: grid; place-self: stretch; place-items: center; padding: 0 1rem; line-height: 55px; font-size: 1.4rem; background-color: var(--color_main); color: #fff; border-radius: 0 var(--br) var(--br) 0; transition: all 0.3s; }
.favorites_del:hover { color: var(--color_text); background-color: var(--color_compl) }

/* license info */
.license_bg { display: grid; place-content: center; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 3000; }
.license_dialog_window { position: relative; width: 500px; margin: auto; line-height: 2.1rem; font-size: 1.9rem; font-weight: bold; color: var(--color_main); text-align: center; background-color: #fff; border: 1px solid white; border-radius: var(--br); }
.license_dialog_window img { height: max(150px, min(250px, 30vh)); }
.license_dialog_window h2 {width: 100%; padding-top: 0.5rem; background-color: var(--color_main); text-align: center; color: white; border-radius: var(--br) var(--br) 0 0 }
.license_dialog_window p { padding: 1rem; font-size: max(24px, min(30px, 3vh));  background-color: #fff }
.license_dialog_window a, .exercises_no_user a { display: block; max-width: max-content; margin: 1rem auto 2rem auto; padding: 0.4em 1em; border-radius: var(--br); background-color: var(--color_button); color: white; text-decoration: none; transition: 0.3s background ease; }
.license_dialog_window a:hover, .exercises_no_user a:hover { background-color: var(--color_hover_bg); }

/* schubu+ dialog - popup */
.sp_dialog_bg { display: grid; place-content: center; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); opacity: 0; z-index: 4000; }
.sp_dialog_box { position: relative; margin: auto; max-width: 52rem; width: 96vw; background-color: #fff; border: 1px solid white; border-radius: var(--br); box-shadow: 0px 15px 25px #555; }
.sp_dialog_title { position: relative; height: 5rem; text-align: center; background-color: var(--color_main); border-top-right-radius: var(--br); cursor: move; }
.sp_dialog_title_small { position: relative; height: 3.3rem; font-size: 1.5rem; font-weight: bold; line-height: 3.3rem; text-align: center; color: #fff; background-color: var(--color_main); border-radius: var(--br) var(--br) 0 0; cursor: move; }
.sp_dialog_title svg { margin: 0.75rem auto; height: calc(100% - 1.5rem); }
.sp_dialog_title > .schubu_plus_corner { margin: 0; width: 5rem; height: 5rem; }
.sp_dialog_text { display: grid; grid-template-columns: auto 1fr; gap: 2rem; padding: 2rem; }
.sp_dialog_text img { max-width: 15rem; border: 1px solid var(--color_main_lighter); border-radius: var(--br); }
.sp_dialog_text h3:first-child { padding-top: 0; }
.sp_dialog_text a { color: var(--color_main); white-space: nowrap; }
.sp_dialog_text .ueb_payment_flex { margin-top: 1.5rem; justify-content: space-between; }
.sp_dialog_buttons { margin-top: 1.5rem; display: flex; justify-content: space-between; }
.sp_dialog_close { position: absolute; top: 0; right: 1.5rem; font-size: 2.5rem; line-height: 5rem; color: #fff; cursor: pointer; transition: all 0.3s; }
.sp_dialog_title_small .sp_dialog_close { right: 0.6rem; line-height: 3.3rem; }
.sp_dialog_close:hover { color: var(--color_compl); }

@media (max-width: 767px) {
   .sp_dialog_title { height: 4rem; }
   .sp_dialog_title > .schubu_plus_corner { width: 4rem; height: 4rem; }
   .sp_dialog_text { grid-template-columns: auto; padding: 1rem; gap: 0 }
   .sp_dialog_text img { display: none; }
   .sp_dialog_close { right: 1rem; font-size: 2rem; line-height: 4rem; }
}

/* annotation */
.annotation_dialog_window { display: none; position: absolute; width: min(95vw, 400px); background-color: #fff; border-radius: var(--br); box-shadow: 0 0 5px #999; z-index: 2000; }
.annotation_dialog_window .button_close { position: absolute; right: 0; top: 0; width: 40px; height: 40px; font-size: 30px; line-height: 1; display: flex; justify-content: center; align-items: center; color: #fff; border: none; background-color: transparent; z-index: 101; cursor: pointer; transition: color 0.3s; }
.annotation_dialog_window .button_close::before { content: "τ"; font-size: 1em; font-family: "icons"; }
.annotation_title { display: grid; grid-template-columns: 1fr auto; width: 100%; padding: 0.2rem; line-height: 1; align-items: center; font-size: 0.8rem; border-radius: 0.3rem 0.3rem 0 0; }
/* .annotation_icon { display: grid; place-items: center; position: absolute; width: 1.7rem; height: 1.7rem; color: var(--color_main_inv); font-size: 1rem; background-color: var(--color_button); border-radius: 0.3rem; cursor: pointer; transition: all 0.3s; } */
.annotation_icon em { line-height: 0; }
.annotation_link { display: flex; align-items: center; max-width: max-content; border: 0; cursor: pointer;}
.annotation_link div {color: white; background-color: var(--color_gray); border-radius: 0.2rem 0 0 0.2rem; transition: all 0.3s; }
.annotation_link .annotation_link_title {padding: 0.0rem 0.2rem; color:unset; background-color: #ddd; border-radius: 0 0.2rem 0.2rem 0; transition: all 0.3s; }
.annotation_link:hover > div:first-child { background-color: var(--color_compl); }
.annotation_link:hover div::before { color: var(--color_text); }
#annotations_area_hint::before { content: "ANMERKUNGEN"; }
.duden_link {position:absolute; right:0px; bottom:0px; height:2em; width:2em; background-color: #ffd008; cursor: pointer; border-left: 1px solid var(--color_main_dark); border-top: 1px solid var(--color_main_dark); border-radius: var(--br) 0 var(--br) 0;}
.wiktionary_link {position:absolute; right:0px; bottom:0px; height:1em; width: 4.67em; cursor: pointer; border-left: 1px solid var(--color_main_dark); border-top: 1px solid var(--color_main_dark); border-radius: var(--br) 0 var(--br) 0; overflow: hidden;}

#annotation_dialog > div:first-of-type { min-height: 5rem; }
#annotation_dialog .icon-working { display: block; position: absolute; top: calc(50% - 1.5rem); left: calc(50% - 1.5rem); font-size: 3rem; text-align: center; }
.annotation_language .icon-working { top: 7.3rem !important; left: calc(50% - 1.5rem) !important; z-index: 1; }
.annotation_content { padding: 0.3rem; line-height: 1.2rem; }
.annotation_content p { margin-top: 0.6rem; max-height: 3.6rem; overflow: auto; }
.annotation_language { display: flex; justify-content: space-between; align-items: flex-end; font-size: 0.8rem; }
.ai_meaning_language_select { display: inline-block; font-family: inherit; font-size: inherit; background-color: var(--color_main_lighter); padding: 0.1em 0.3em; border-radius: var(--br); margin-bottom: 0.1em; }
.annotation_textarea, .annotation_input { position: relative; display: inline-block; padding: 0.25rem; width: 100%; min-height: 5.2em; max-height: 9rem; overflow-y: auto; white-space: pre-wrap; -webkit-user-select: text; user-select: text; font-family: var(--font_main); font-size: 1rem; background-color: var(--color_main_lightest); border: 1px solid var(--color_main_lighter); border-radius: var(--br); outline: none; -moz-appearance: none; resize: none; }
.annotation_content .annotation_textarea { min-height: 4.2rem; max-height: 4.2rem; font-size: 1rem; position: relative; }
.annotation_meaning_wrapper { position: relative; }
.annotation_meaning_wrapper .annotation_textarea { padding: 0.5rem; padding-right: 1.7rem; }
.annotation_meaning_wrapper schubuki-mascot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.5rem; transition: top 0.3s ease-in-out, left 0.3s ease-in-out, transform 0.3s ease-in-out; }
.annotation_meaning_wrapper schubuki-mascot.inactive { top: 100%; left: 100%; transform: translate(-90%, -90%); }
.ws_b_add_word { position: relative; }
.ws_b_add_word .icon-check-mark-slim { position: absolute; top: 50%; left: 0.5em; animation: mark_intro 0.5s forwards; transform-origin: top; z-index: 1; }
.ws_b_add_word .icon-check-mark-slim::before { display: flex; justify-content: center; align-items: center; width: 1.3em; height: 1.3em; color: white; background: var(--color_main_dark); border-radius: 50%; transform: translate(0%, -50%); }
@keyframes mark_intro {
   0%   { transform: scale(0.1); }
   70%  { transform: scale(1.1); }
   84%  { transform: scale(0.9); }
   94%  { transform: scale(1.05); }
   100% { transform: scale(1); }
}

.annotation_button { margin: 0; padding: 0.2rem; text-align: center; background-color: var(--color_button); }
/* .js_delete_button { border-color: var(--color_main_light) !important; } */
.annotation_indicator { border: 1px solid var(--color_text); transition: all 0.3s;}

.annotation_window {display: none; position: absolute; width: 23vw; font-size: 0.75rem; background-color: white; border-radius: var(--br); -webkit-user-select: none; user-select: none; transition: all 0.3s; }
.annotation_icon { display: none; position: absolute; padding: 0; width: 1.7rem; height: 1.7rem; max-width: 1.7rem; max-height: 1.7rem; line-height: 1.6rem; font-size: 1.1rem; text-align: center; background-color: var(--color_user1_light); border-radius: var(--br); border: 1px solid white; box-shadow: 0px 0px 2px #999; cursor: pointer; transition: all 0.3s; }
.annotation_icon_wiggle {animation: pm_handle_wiggle 4s ease 0s infinite;}
.markup_menu {display: none; position: absolute; top: 5vh; left: 2vw; width: 4.5rem; height: 1.5rem; z-index: 2000;}
.colored_square {position: absolute; width:50%; height: 50%; top: calc(25% + 1px); left: calc(25% + 1px); background-color: var(--color_user2_light); pointer-events:none;}
.user_temp_selected {background-color: #aaa8;}
.user_selected { position: relative; background-color: var(--color_user1_light_t50); border-radius: 0.2rem; cursor: pointer; }
/* .markup_menu_button {fill:var(--color_user1_dark);  stroke:white; pointer-events: visiblePainted; cursor: pointer;} */

.small_hint {display: none; position: absolute; padding: 2px; background-color: #333; border-radius: 4px; color: white; z-index: 2001;}
.round_button { position: absolute; display:  inline-grid; box-sizing: border-box; place-items: center; width: 1.7rem; height: 1.7rem; font-size: 1rem; color: white; background: var(--color_main_light); border: 2px solid var(--color_main_inv); border-radius: 50%; cursor: pointer; }
.mini_round_icon { position: absolute; display: inline-grid; box-sizing: border-box; place-items: center; width: 0.8rem; height: 0.8rem; font-size: 0.5rem; color: var(--color_text); border-radius: 50%; }
.round_button2::before { content: ""; display: inline-grid; place-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 0px 0px 0; color: var(--color_main_inv); background: var(--color_user1_dark); border: 1px solid var(--color_main_inv); border-radius: 50%; cursor: pointer;}
.depiction__caption {font-size: 0.5em;}

.dict_entry {position: relative; padding: 0.25rem; width: 100%; background-color: white; border: 1px solid var(--color_main); border-radius: var(--br); }

.ws_special_word { padding: 0.1em; background-color: hsl(60deg 100% 80% / 50%); border-radius: 0.2rem; }

/* SchuBuKI Mascot */
schubuki-mascot svg { display: block; overflow: visible; }

/* --- Point of Interest (POI) --- */
.poi_svg { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 2002; }
.tutorial_box { position: absolute; padding: 0.8rem 0.5rem 0.2rem 0.75rem; width: auto; color: var(--color_button); font-size: 1.5rem; line-height: 1.5; font-weight: bold; text-align: left; text-decoration: none !important; border: 2px solid var(--color_button); border-radius: var(--br); background-color: #fff; box-shadow: 0 0 5px #999; user-select: none; z-index: 10001; }
.tutorial_box .owl { position: absolute; top: -80px; right: 10px; width: 100px; height: 100px; background-color: unset; }

/* --- TIP-BOX --- */
.cp_tip_box { margin: calc(var(--content_spacing) / 2) 0 var(--content_spacing) 0; }
.cp_tip_box_title { padding: 0.4rem 1rem calc(0.4rem - 2px) 1rem; width: max-content; max-width: calc(100% - 1.5rem); font-weight: bold; background: var(--color_main_lighter); border-radius: 7px 7px 0 0; }
.cp_tip_box_content { width: 100%; max-width: var(--content_width); border: 2px solid var(--color_main_lighter); border-radius: 0 7px 7px 7px; padding: 0.4em; }
.cp_tip_box_content > :last-child { padding-bottom: 0; margin-bottom: 0; }

/* --- ASIDE --- */
.cp_aside              { position: fixed; top: calc(max(2rem, min(4vw, 4rem)) + 60px); left: 0; width: 15vw; text-align: center; }
.cp_aside_mobile       { margin-top: 1rem; display: none; }
.cp_aside_link         { position: relative; display: grid; grid-template-rows: 1fr 1.3rem; grid-gap: 0.3rem; justify-items: center; margin: 0 auto 0.7rem auto; width: 4.9rem; height: 4.9rem; color: var(--color_main_inv); text-decoration: none; background-color: var(--color_main); border-radius: 7px; cursor: pointer; transition: background-color 0.3s; }
.cp_aside_link_icon    { align-self: end; line-height: 0; font-size: 45px; }
.cp_aside_link_text    { line-height: 1; font-size: 12px; text-transform: uppercase; }
.cp_aside_link:hover   { color: var(--color_main) !important; background-color: var(--color_compl) !important; }
.cp_aside_link_disabled { color: var(--color_system); background-color: var(--color_main_lighter); }
.cp_aside_special a:last-child { margin-bottom: 1.325rem; }
.cp_aside_special div:last-child { margin-bottom: 1.325rem; }
.cp_aside_link_special { position: relative; display: block; margin: 0 auto 0.7rem auto; width: 5.75rem; height: 5.75rem; text-decoration: none; }
.cp_aside_link_special path { fill: var(--color_main); }
.cp_aside_link_special circle { transition: all 0.3s; }
.cp_aside_link_special .disc { fill: #fff; stroke: var(--color_main); transition: all 0.3s; }
.cp_aside_link_special:hover circle { fill: var(--color_hover_bg); }
.cp_aside_link_special:hover .disc { fill: var(--color_hover_bg); }
.cp_aside_link_sol     { position: relative; margin-bottom: -12px; top: calc(-0.7rem - 12px); height: 2.5rem; color: var(--color_main_dark); border-radius: 0 0 7px 7px; padding: 19px 0 8px 0; background-color: var(--color_bc_chapter); z-index: -1; }
.cp_aside_link_sol:hover { top: calc(-0.7rem - 7px); padding: 18px 0 10px 0; background-color: var(--color_compl); transition: all 0.3s; }
.cp_aside_link_sol_border { border-bottom: 1px solid #ddd; }
.cp_aside_mobile .cp_aside_link { position: relative; float: left; margin-right: 1rem; z-index: 1; }
.cp_aside_mobile .cp_aside_link_sol { position: absolute; float: none; top: 67px; z-index: 0; }
.cp_aside_mobile .cp_aside_link_sol:hover { top: 72px; }
.cp_aside_mobile .cp_aside_link_special { position: relative; float: left; margin: 0 0.5em 0 0; top: -0.42rem; }
.cp_aside_mobile_title { padding-bottom: max(0.3rem, min(1vw, 0.5rem)); font-size: 1.2rem; font-weight: 600; }

/* --- PAGE NAVI --- */
.cp_page_navi       { clear: both; position: -webkit-sticky; position: sticky; bottom: 0; border-top: 1px solid #fff; z-index: 100; }
.cp_page_navi nav   { display: grid; grid-template-columns: 1fr auto 1fr; width: 100%; height: var(--size_footer); line-height: var(--size_footer); background-color: var(--color_footer); cursor: pointer; }
.cp_page_navi_text  { display: grid; grid-template-columns: auto 1fr; color: var(--color_main_dark); text-decoration: none; transition: color 0.3s, background-color 0.3s; }
.cp_page_navi_text em { padding: 0 0.5rem; font-size: 2rem; }
.cp_page_navi_text span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.cp_page_navi_text:hover { background-color: var(--color_hover_bg); }

/* --- PRESENTATION MODE HANDLE --- */
.cp_page_navi_pm { position: relative; top: -8px; transition: top 0.3s, transform 0.3s; }
.cp_page_navi_pm:hover { top: -18px; }
.cp_page_navi_pm:hover + .cp_page_navi_pm_bar { bottom: 0px; }
.cp_page_navi_pm_up { top: -18px; }
.cp_page_navi_pm_left { position: absolute; top: 0; left: -16px; }
.cp_page_navi_pm_left path { fill: var(--color_main); }
.cp_page_navi_pm_right { position: absolute; top: 0; right: -16px; }
.cp_page_navi_pm_right path { fill: var(--color_main); }
.cp_page_navi_pm_icon { display: grid; grid-template-rows: 30px 16px; justify-items: center; padding: 0; height: 50px; color: #fff; background-color: var(--color_main); }
.cp_page_navi_pm_icon_icon { line-height: 32px; font-size: 30px; }
.cp_page_navi_pm_icon_text { font-size: 14px; line-height: 16px; }
.loggedin .cp_page_navi_pm_icon svg rect { fill: #B6E19D; }
.cp_page_navi_pm_bar { position: absolute; bottom: -10px; width: 100%; height: 10px; background-color: var(--color_main); transition: bottom 0.3s, height 0.3s; }
.cp_page_navi_pm_bar_up { bottom: 0px; }
.cp_page_navi_pm .schubu_plus_corner { left: -1rem; height: 46px; }

/* --- FOOTER --- */
.cp_footer      { position: sticky; padding: .5rem 0; color: #fff; font-size: 1rem; text-align: center; background-color: var(--color_text); z-index: 101; }
.cp_footer span { padding-right: 0.4rem; text-decoration: underline; cursor: pointer;}
.cp_footer a    { padding: 0px 0.4rem; color: var(--color_main_inv); text-decoration: underline; }

/* --- EXPERT KNOWLEDGE --- */
.cp_expert_icon { color: var(--color_main_darkest); border-bottom: 1px dashed var(--color_main_dark); cursor: pointer; white-space: nowrap; }
.cp_expert_icon::before { position: relative; display: inline-block; padding-right: 3px; top: -1px; font-family: "icons"; font-size: 16px; font-weight: normal; content: "\60"; line-height: 1; }
.cp_expert_icon:hover { border-bottom: 2px solid var(--color_main_dark); }
.cp_expert_box  { margin-right: 15px; width: 340px; line-height: 1.3; font-size: 1.1rem; background-color: var(--color_bg); border: 1px solid #ccc; border-radius: 7px; box-shadow: 10px 10px 30px #999; overflow: hidden; }
.cp_expert_box figure { position: relative; }
.cp_expert_box img { display: block; }
.cp_expert_box_info { padding-right: 0.2rem; font-size: 0.8rem; text-align: right; }
.cp_expert_box_text { padding: 0.4rem 0.6rem; background-color: var(--color_main_lightest); }
.cp_expert_pic_label { position: absolute; bottom: 0.5em; left: 0.5em; padding: 0.2em 0.5em; border-radius: var(--br); background-color: var(--color_main_t70); color: white; }

.ui-helper-hidden-accessible { position: absolute; margin: -1px; padding: 0; width: 1px; height: 1px; border: 0; clip-path: inset(0 0 0 0); overflow: hidden; }
.ui-tooltip { position: absolute; z-index: 9999; }

/* SOURCE INFO  */
.cp_source_icon { color: var(--color_system); border-bottom: 1px dashed var(--color_system); cursor: pointer; white-space: nowrap; }
.cp_source_icon::before { position: relative; display: inline-block; padding-right: 3px; top: -1px; font-family: "icons"; font-size: 16px; font-weight: normal; content: "\0428"; line-height: 1; }
.cp_source_icon:hover { border-bottom: 2px solid var(--color_system); }

/* TEACHER-INFO  */
.cp_teacher_info_wrapper { position: relative; display: block; margin: calc(var(--content_spacing) / 2) 0; max-width: var(--content_width); }
.loggedin .cp_teacher_info_link:hover .schubu_plus_circle path { transform: rotate(90deg); }
.cp_expert_icon.cp_teacher_info_link::before { display: none; }
.cp_teacher_info_link em { padding-right: 0.3rem; }
.cp_teacher_info_link em { padding-right: 0.3rem; }
.ti_slidebox_header { color: var(--color_main_darker); cursor: pointer; }
.ti_slidebox_header:hover { color: var(--color_main); }
.loggedin .ti_slidebox_header.ti_box_open .schubu_plus_circle path { transform: rotate(90deg); }
.ti_slidebox_header::after { content: "\64"; font-family: "icons"; margin-left: 0.3em; display: inline-block; line-height: 1; transition: transform .3s; transform-origin: 50% 50%; }
.ti_slidebox_header.ti_box_open::after { transform: rotate(180deg); }
.ti_slidebox_content { width: max-content; max-width: 100%; padding: .3em; border: solid 2px var(--color_main_light); background-color: var(--color_main_lightest); border-radius: var(--br); }
.ti_slidebox_content > :last-child { margin-bottom: 0; }

/* TEACHER INFO SECTION */
.cp_teacher_info_section h2 { counter-increment: none; }
.cp_teacher_info_section h2::before { content: none; }
.cp_teacher_info_section .toggle_teacher_info { display: inline-block; font-size: 0.9em; margin-left: 0.2em; line-height: 1; transition: transform .3s; transform-origin: 50% 53%; }
.cp_teacher_info_section .toggle_teacher_info.ti_toggled { transform: rotate(-180deg); }

/* --- PAGE INFO --- */
.box_bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; place-items: center; background-color: rgba(0,0,0,0.5); z-index: 2000; display: none; }
.cp ~ .page_info_short { position: fixed; display: flex; flex-direction: column; top: calc(var(--size_header) + 10px); right: 10px; padding: 0.1em; border-radius: 2.5rem; background: white; cursor: pointer; z-index: 80; }
.pu .page_info_short { display: inline-block; margin-left: 0.3em; }
.pu .page_info_short .icon-info { font-size: 1em; cursor: pointer; }
.pu .page_info_short .icon-info::before { color: var(--color_main); font-size: .8em; }
.pm_slide_footer .page_info_short { cursor: pointer; position: initial !important; }
.page_info_short .icon-info { font-size: 2rem; line-height: 1; color: var(--color_main); transition: all 0.3s; }
.page_info_short .icon-pageinfo { font-size: 2rem; line-height: 1; color: var(--color_main); transition: all 0.3s; }
.pm .page_info_short .icon-pageinfo { font-size: 1em; color: white; }
.pm_slide_footer .page_info_short .icon-info { font-size: 1em; color: white; }
.page_info_short:hover .icon-info { color: var(--color_compl); }
.page_info_short:hover .icon-pageinfo { color: var(--color_compl); }
@media (max-width: 767px) {
   .page_info_short { position: absolute; border-radius: 2rem; }
   .page_info_short .icon-info { font-size: 2rem; }
}
.page_badges { display: flex; flex-direction: column; align-items: center; }
.page_badges .award_badge { width: 1.2em; aspect-ratio: 64 / 70; display: none; }
.page_badges .award_badge.awarded { display: block; }

/* --- Page Badges and Feedback Box --- */
/* Page info */
.page_info_box { position: fixed; top: var(--size_header); right: 0; width: calc(98vw); max-width: 600px; height: calc(100vh - (var(--size_header) + var(--size_footer))); background-color: #fff; box-shadow: 1px 1px 5px #666; z-index: 90; display: none; flex-direction: column; opacity: 0; pointer-events: none; transform: translateX(100%); transition: 0.5s opacity ease, 0.6s transform ease-in-out; }
.page_info_box.display { display: flex; }
.page_info_box.shown { opacity: 1; pointer-events: all; transform: translateX(0%); }
.pm .page_info_box { height: calc(100% - (var(--size_header) + var(--size_footer))); z-index: 1999; display: flex; flex-direction: column; color: var(--color_text); transform: translateX(120%); }
.pm .page_info_box.shown { opacity: 1; transform: translateX(0%); pointer-events: all; }
.pu .page_info_box { position: absolute; top: unset; bottom: 0; right: unset; left: 0; width: calc(98vw); max-width: 600px; height: 100%; transform: translateY(-100%); z-index: 9999; }
.pu .page_info_box.shown { opacity: 1; transform: translateY(0%); pointer-events: all; }
.page_info_header { flex: 0 0 max-content; }
.page_info_scroll { flex: 1 1 100%; overflow: auto; }
.pm .page_info_header { font-size: 1.2rem; }
.pm .page_info_scroll { font-size: 1.2rem; }

/* header */
.page_info_header { padding: calc(var(--content_spacing) / 2); padding-left: var(--content_spacing); display: flex; }
.page_info_header h2 { flex: 1 1 100%; margin: 0; padding: 0; border: none; font-size: 1.3em; }
.page_info_close { flex: 0 0 max-content; position: initial; width: unset; height: unset; border: none; background: transparent; color: var(--color_main); display: flex; justify-content: center; align-items: center; font-size: 1.5em; line-height: 1; }
.page_info_close:hover { border: none; background: none; color: var(--color_compl); }

/* page info sections */
.page_info_details { margin-bottom: calc(var(--content_spacing) / 2); background-color: white; }
.page_info_details .summary { padding: calc(var(--content_spacing) / 4); padding-left: var(--content_spacing); background-color: var(--color_main_lighter); font-size: 1.2em; position: relative; }
.page_info_intro { padding: var(--content_spacing); padding-top: calc(var(--content_spacing) / 4); }
.page_info_details a { text-decoration: none; }
.feedback_summary { position: relative; }
.feedback_summary img { position: absolute; top: 0; right: 0; transform: translate(63%, -50%) scale(0.7) rotate(15deg); display: block; width: 13ch; font-size: 0.7em; margin: 0; padding: 0.5em; background-color: var(--color_main_dark); border-radius: var(--br); }

.feedback_form { position: relative; padding: var(--content_spacing); padding-top: calc(var(--content_spacing) / 4); }
.feedback_form fieldset { display: flex; flex-wrap: wrap; gap: 1.3rem; margin: 10px 0 10px 0; padding: 0; border: 0px none; }
.feedback_type  { font-size: 1.1rem; cursor: pointer; }
.feedback_type label { padding-left: 5px; transition: all 0.3s; cursor: pointer; }
.feedback_type:hover label { color: var(--color_compl); }
.feedback_type input { margin: 0; cursor: pointer; }
.feedback_label { display: block; font-size: 0.9em; }
#feedback_text   { margin-bottom: 1rem; font-size: 1em; width: 100%; min-width: 100%; max-width: 100%; height: 4.5em; padding: 5px 10px; font-family: var(--font-family); background-color: var(--color_main_lightest); border: 1px solid var(--color_main_lighter); border-radius: var(--br); outline: none; }
.feedback_button_box { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: 1rem; }
.feedback_button_box .button.disabled { background-color: var(--color_feedback_badge_disabled); opacity: 0.5; color: var(--color_gray); border: 1px dashed var(--color_gray); }
.feedback_info  { font-size: 0.8em; }
#feedback_send { position: relative; }
#feedback_send .schubu_plus_corner { top: -1px; left: -1px; }
.send_button_wrapper { position: relative; width: max-content; }
.feedback_thank_you { position: absolute; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; flex-direction: column; background-color: white; display: none; }
.feedback_thank_you p { padding: var(--content_spacing); font-size: 1.3em; }
.feedback_thank_you.shown { display: flex; }

/* Page Info Content */
.badges_grid { position: relative; padding: 0.3em; width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.3em; }
.feedback_badge { position: relative; flex: 1 0 100%; width: 100%; display: flex; flex-direction: column; column-gap: 5px; align-items: center; border-radius: var(--br); overflow: hidden; background-color: var(--color_bg); cursor: pointer; transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s; }
.feedback_badge.awarded { box-shadow: 0 0 0 2px var(--color_feedback_badge); }
.feedback_badge.selected { background-color: var(--color_feedback_badge_selected); }
@media (hover: hover) {
   .feedback_badge:hover .info { color: var(--color_compl); }
}
.feedback_badge picture { display: block; margin: 8% auto; width: 85%; }
.feedback_badge img { display: block; width: 100%; height: auto; }
/* Linear badge status */
.badge_status { --value: 0; --max: 0.5; position: relative; left: 0; width: 100%; height: 10px; background-color: #E7E7EA; }
.badge_status::before { content: ""; position: absolute; top: 0; right: 50%; transform: translateX(-50%); width: 2px; height: 10px; background-color: #9a9ca0; z-index: 1; }
.badge_status::after { content: ""; position: absolute; top: 0; left: 0; width: min(100%, max(0%, var(--value) / var(--max) * 100%)); height: 100%; background-color: var(--color_feedback_badge);  }

/* Feedback Badge Overview */
.loading_badges { grid-area: 1 / 1 / 5 / 3; display: flex; justify-content: center; align-items: center; }
.badge_backside { display: none; position: absolute; top: 0.2em; left: calc(0.15em + var(--badge_column) * 16% + var(--badge_column)*0.1em); width: calc(50% - 0.2em); background-color: white; border: 1px solid #C1C3C9; border-radius: var(--br); font-size: max(0.5em, min(3vw, 0.95em)); z-index: 2; overflow: auto; }
.badge_backside.shown { display: block; }
.badge_backside.selected { background-color: var(--color_feedback_badge_selected); }
.badge_backside .content { position: relative; }
.badge_backside .button_close { top: 0.1em; right: 0.1em; width: 1.2em; height: 1.2em; background-color: transparent; border-color: transparent; color: var(--color_text); font-size: 1.3em; display: flex; justify-content: center; align-items: center; }
.badge_backside .button_wrapper { position: relative; width: max-content; margin: 0 auto; }
.badge_backside .button_wrapper img { display: block; position: absolute; top: 0; right: 0; width: 13ch; font-size: 0.7em; margin: 0; padding: 0.5em; background-color: var(--color_badge); border-radius: var(--br); transform: translate(45%, -50%) scale(0.7) rotate(13deg); }
.badge_backside picture { display: block; width: 45%; margin: 1em auto 0.5em auto; }
.badge_backside img { display: block; width: 100%; height: auto; }
.badge_backside .description { text-align: center; }
.badge_backside .select_badge_button { position: relative; display: block; margin: 1em auto; padding: 0.5em 1.1em; width: max-content; font-size: 1em; }
.badge_backside .select_badge_button .schubu_plus_corner { top: -1px; left: -1px; }
.badge_backside .select_badge_button.deselecting { color: var(--color_text); background-color: var(--color_main_lighter); }
.badge_backside .badge_status_container { position: relative; margin: 0 auto; padding-top: 1.7em; width: 80%; border-radius: 0 0 var(--br) var(--br); overflow: hidden; }
.badge_backside .badge_status { width: calc(100% - 2px); margin: 0 auto; }
.badge_backside .badge_status.transition::after { transition: width 0.2s ease; }
.badge_backside > .badge_status_container > span { position: absolute; top: 1em; width: max-content; padding-right: 0.7em; transform: translate(-100%, -50%); font-size: 0.6em; color: #717376; }
.badge_backside > .badge_status_container > span::after { content: ""; display: block; position: absolute; top: 1.5em; right: 0; width: 0; height: 2em; border-left: 2px dotted #717376; transform: translate(-50%, -50%); }
.badge_backside .ex { left:  50%; }
.badge_backside .bp { left: 100%; }

/* Page Info SchuBu Credits */
.page_info_credits { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: max(0.3rem, min(1vw, 0.6rem)); padding: var(--content_spacing); margin-bottom: calc(var(--content_spacing) / 2); }
.page_info_credits_label { font-size: 1.0rem; line-height: 1.2; color: #666; text-align: right; }
.page_info_credits_user  { font-size: 1.1rem; line-height: 1.0; color: var(--color_text); }
.page_info_credits_label_small { font-size: 1.0rem; color: #666; text-align: right; }
.page_info_credits_user_small  { font-size: 1.1rem; color: var(--color_text); }
.page_info_credits #contrib_title_1, .page_info_credits #contrib_title_2, .page_info_credits #contrib_title_3, .page_info_credits #contrib_title_4 { display: none; }
.page_info_credits #contrib_1, .page_info_credits #contrib_2, .page_info_credits #contrib_3, .page_info_credits #contrib_4 { display: none; }

/* Page info credits & sources */
.page_info_cc { padding: var(--content_spacing); padding-top: calc(var(--content_spacing) / 2); }
.page_info_cc h4 { margin: 0; margin-bottom: calc(var(--content_spacing) / 2); font-size: 1rem; }
.page_cc_sources p { font-size: 1rem; }
.pm .page_cc_sources p { font-size: 1rem; }
.cc_item { margin-bottom: calc(var(--content_spacing) / 2); display: flex; align-items: center; }
.cc_item img { display: block; width: 7ch; height: auto; max-height: 14ch; margin-right: calc(var(--content_spacing) / 2); border-radius: var(--br); transition: transform 0.5s ease; transform-origin: left top; background-color: var(--color_bg); }
.cc_item video { display: block; width: 7ch; height: auto; max-height: 14ch; margin-right: calc(var(--content_spacing) / 2); border-radius: var(--br); transition: transform 0.5s ease; transform-origin: left top; background-color: var(--color_bg); }
.cc_item audio-player { margin-right: var(--content_spacing); }
.cc_item p { margin-bottom: 0; }
.cc_item a { color: var(--color_system); font-weight: normal; text-decoration: underline; }
.credits_ai_prompt { font-family: var(--font_writing); display: block; }
.credits_ai_prompt::before { content: '['; font-family: 'icons'; margin-right: 0.3em; }
@media (max-width: 767px) {
   .feedback_button_box { grid-template-columns: auto; }
   .feedback_button_box button { grid-row: 1; }
}


/* --- TOOLS --- */
.tools_dropdown { display: none; position: absolute; top: 100%; right: 0; padding: 0.3em; background-color: var(--color_system_midlight); border-radius: 0 0 var(--br) var(--br); overflow-y: auto; }
@media screen and (max-width: 768px) {
   .tools_dropdown .hide_on_mobile { display: none; }
}
/* mobile */
.cp_mobile_tools_list .tools_dropdown { display: block; position: static; top: 0; right: 0; transform: none; border-radius: 0; }
.cp_mobile_tools_list .tools_grid { width: 100%; grid-template-columns: 1fr 1fr; grid-gap: 0.4em; }
.cp_mobile_tools_list .tools_item { width: 100%; padding: 0.1em 0.3em; grid-template-columns: 2em 1fr;  justify-items: start; align-items: center; }
.cp_mobile_tools_list .tools_item em { font-size: 2em; }
.tools_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0.4em; width: max-content; }
.tools_item { position: relative; display: grid; justify-items: center; padding: 0.8em; min-width: 10ch; font-size: 1em; color: var(--color_system); background-color: var(--color_system_lightest); border-radius: var(--br); white-space: nowrap; transition: color 0.3s, background-color 0.3s; cursor: pointer; overflow: hidden; }
.tools_item:hover { color: var(--color_system_lightest); background-color: var(--color_system_light); }
.tools_item em { font-size: 3.5em; line-height: 1; }
.tools_selected { background-color: var(--color_system_midlight); }
.tools_arrow { transform-origin: 50% 45%; transition: transform 0.3s; }
.pupils_answer_tool_helper { position: absolute; top: 0; left: 30%; width: 70%; height: 30%; background-color: red; opacity: 0; cursor: default; }
.pupils_answer_tool { position: absolute; top: 0; right: 0; width: 100%; height: 100%; display: block; background-color: var(--color_system); color: white; border-radius: var(--br); clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 100% 30%, 0% 0%); transition: clip-path 0.5s; pointer-events: none; }
.pupils_answer_tool_helper:hover + .pupils_answer_tool { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%); }
.pupils_answer_tool small { font-size: 0.5em; position: absolute; top: 0.5em; right: 0.5em; }
.pupils_answer_tool .tools_item { background-color: var(--color_system); color: white; }
.pm .tools_item { font-size: 0.8em; }

/* --- EXERCISES --- */
.exercises_bg          { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 4000; display: none; }
.exercises_box         { position: absolute; display: grid; grid-template-rows: auto auto 1fr auto; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 48rem; height: 80vh; background-color: #fff; border-radius: 7px; box-shadow: 0px 15px 25px #555; }
.exercises_title       { padding: 0.6rem 1rem; font-size: 1.5rem; font-weight: bold; color: var(--color_main_inv); text-align: center; border-radius: 5px 5px 0px 0px; background-color: var(--color_main); user-select: none; }
#form_exercise         { display: grid; grid-template-columns: 12rem 1fr 9rem; column-gap: 10px; padding: 6px 10px 10px 10px; background-color: var(--color_main_lighter); border-radius: 0 0 var(--br) var(--br); }
.exercises_details_label { margin-bottom: 3px; font-size: 13px; color: #444; text-transform: uppercase; pointer-events: none; }
.exercises_class       { width: 100%; height: 36px; line-height: 36px; font-family: var(--font_main); font-size: 18px; text-indent: 5px; border: 0px none; border-radius: var(--br); cursor: pointer; }
.exercises_class option { font-family: var(--font_main); font-size: 16px; }
.exercises_date_box    { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 10px; }
.exercises_date        { width: 100%; height: 36px; line-height: 36px; font-family: var(--font_main); font-size: 18px; text-align: center; background-color: #fff; border: 0px none; border-radius: var(--br); cursor: pointer; }
.exercises_date_till   { font-size: 16px; align-self: center; }
.exercises_bg .button_close { position: absolute; right: 7px; top: 4px; width: 44px; height: 44px; font-size: 30px; line-height: 1; display: flex; justify-content: center; align-items: center; color: #fff; border: none; background-color: transparent; z-index: 101; cursor: pointer; transition: color 0.3s; }
.exercises_bg .button_close::before { content: "τ"; font-size: 1em; font-family: "icons"; }

.exercises_info        { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; grid-column: 3; grid-row: 2 / span 2; height: 100%; font-size: 16px; background-color: #fff; border-radius: var(--br); }
.exercises_info_left   { padding: 6px 0 0 7px; }
.exercises_info_right  { padding: 6px 7px 0 9px; color: var(--color_main); font-weight: bold; }
.exercises_save        { grid-column: 1 / span 2; height: 100%; line-height: 36px; font-size: 18px; color: #fff; text-align: center; background-color: var(--color_main_dark); border-radius: var(--br); cursor: pointer; transition: all 0.3s; }
.exercises_save:hover  { color: var(--color_main_dark); background-color: var(--color_compl); }

.exercises_top        { padding: 10px 10px 7px 10px; background-color: #fff; border-bottom: 1px solid var(--color_main_lighter); }
.exercises_text_box   { display: grid; grid-template-columns: 1fr auto; grid-gap: 10px; margin-top: 10px; width: 100% }
.exercises_text       { display: block; margin-top: 10px; padding: 5px 10px; width: 100%; height: 50px; font-family: var(--font_main); font-size: 16px; border: 0px none; border-radius: var(--br); resize: none; }
.exercises_text_icons { padding-top: 10px; font-size: 20px; line-height: 30px; color: var(--color_main); }
.exercises_text_right { padding-top: 3px; font-size: 17px; line-height: 28px; color: var(--color_main); }
.exercises_text_right i { font-size: 20px; line-height: 25px; }

.exercises_navi_box     { display: table; margin-bottom: 7px; height: 50px; }
.exercises_navi_buttons { display: table-cell; width: 50px; vertical-align: top; }
.exercises_navi_button  { width: 50px; height: 50px; font-size: 26px; line-height: 52px; color: var(--color_main_inv); text-align: center; background-color: var(--color_main); border-radius: 7px; cursor: pointer; transition: all, 0.3s; }
.exercises_navi_button:hover { background-color: var(--color_compl); }
.exercises_navi_text    { display: table-cell; padding: 0px 15px; vertical-align: top; }
.exercises_navi_cat     { margin-top: 3px; height: 18px; font-size: 14px; line-height: 18px; }
.exercises_navi_page    { margin-top: 3px; height: 26px; font-size: 24px; line-height: 26px; color: var(--color_main); }
.exercises_navi_tipp    { font-size: 1rem; color: var(--color_text2); }

.exercises             { margin-bottom: 2px; padding: 20px 20px 0px 20px; line-height: 26px; -webkit-user-select: none; user-select: none; overflow: auto; }
.exercises_loading     { margin-top: 10px; text-align: center; display: none; }
.exercise              { margin-bottom: 20px; }
.exercise img          { border-radius: 7px; }
.exercise_title        { font-size: 1.3rem; color: var(--color_main); }
.exercise_subtitle     { font-size: 1.1rem; }
.exercise_table        { display: table; float: left; margin-right: 20px; }

.exercise_item          { display: grid; grid-template-columns: auto auto 1fr auto; margin: 5px 0 5px 10px; padding-right: 10px; font-size: 16px; line-height: 24px; background-color: var(--color_main_lightest); border-radius: var(--br); cursor: pointer; transition: all 0.3s; }
.exercise_item:hover    { background-color: var(--color_main_lighter); }
.exercise_item:hover .exercise_item_selected { background-color: var(--color_main); }
.exercise_item.exercise_selected .exercise_item_selected { background-color: var(--color_main_light); }
.exercise_item_selected { display: grid; place-items: center; width: 34px; height: 100%; color: #fff; background-color: var(--color_main_lighter); border-radius: var(--br) 0 0 var(--br); transition: all 0.3s; }
.exercise_item_selected div { width: 18px; height: 18px; line-height: 16px; background-color: #fff; border: 1px solid #aaa; border-radius: 3px; }
.exercise_item_selected_hide { width: 0; visibility: hidden; }
.exercise_item_nr       { display: inline-block; padding: 2px 3px 0 7px; font-size: 1.1rem; }
.exercise_item_text     { position: relative; padding: 5px 20px 5px 10px; white-space: pre-line; }
.exercise_item_practice { margin-top: 7px; color: var(--color_main); cursor: pointer; transition: all 0.3s; }
.exercise_item_practice em { position: relative; top: 1px; padding-right: 3px; }
.exercise_item_practice span { text-decoration: underline; }
.exercise_item_practice:hover { color: var(--color_compl); }

.exercise_option_2     { float: left; margin-right: 25px; font-size: 16px; }
.exercise_option_3     { display: grid; grid-template-columns: auto 1fr; grid-gap: 5px; padding: 2px 0px; font-size: 16px; line-height: 22px; }
.exercise_option_4     { float: left; margin-right: 25px; font-size: 16px; }
.exercise_option_5     { display: grid; grid-template-columns: auto 1fr; grid-gap: 5px; padding: 2px 0px; font-size: 16px; line-height: 22px; }
.exercise_option_2 em, .exercise_option_4 em { top: -1px; padding-right: 5px; }
.exercise_bullet       { position: relative; top: 1px; font-size: 9px; color: #777; }

.exercise_correct      { color: #292; }
.exercise_gap          { color: #292; }
.exercise_selected     { background-color: var(--color_main_lightest); }
.exercise_selected .exercise_item_selected { background-color: var(--color_main_light); color: var(--color_main); }

.exercises_legend      { height: 31px; padding: 1px 10px 0 0; font-size: 16px; line-height: 30px; color: var(--color_main); text-align: center; background-color: var(--color_main_lightest); border-bottom: 1px solid #bbb; }
.exercises_legend span { display: inline-block; margin: 0 3px; padding: 0 0.8rem; color: var(--color_main_dark); cursor: pointer; transition: all 0.3s; }
.exercises_legend span:hover { background-color: var(--color_compl); }
.exercises_legend_label { font-size: 13px; color: #666; text-transform: uppercase; pointer-events: none; }
.exercises_legend_filter { color: var(--color_main_inv) !important; background-color: var(--color_main_light); }
.exercises_no_user   { position: absolute; padding: max(75px, min(125px, 13vh)) 30px 0 30px; top: 0; height: 100%; font-size: 30px; font-weight: bold; line-height: 34px; color: var(--color_main); text-align: center; background-color: rgba(255,255,255,0.9); border-radius: 7px; }
.exercises_no_user p { margin-bottom: 20px; }
.exercises_no_user .pic_sorry_login { height: max(150px, min(250px, 30vh)); }

.exercises_table_running   { display: table-cell; padding: 3px 10px; width: 22px; font-size: 16px; color: #2c2; vertical-align: middle; background-color: #eee; border-radius: 7px 0px 0px 7px; cursor: help; }
.exercises_table_noremarks { color: var(--color_main_lighter); }
.exercises_table_state     { font-size: 1rem; }
.exercises_table_state_0   { color: #c22; }
.exercises_table_state_1   { color: #2C2; }
.exercises_table_state_2   { color: #99F; }
.exercises_table_no_data   { font-size: 18px; color: var(--color_main_light); text-align: center; }

.exercise_pyramid_svg   { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.exercise_pyramid_row   { position: relative; z-index: 2; }
.exercise_pyramid_item  { float: left; margin: 7px 5px; padding: 0; width: 60px; height: 28px; font-size: 16px; line-height: 28px; text-align: center; background-color: #feb; border: 1px solid #999; border-radius: 7px; box-sizing: content-box; }
.exercise_pyramid_input { float: left; margin: 7px 5px; padding: 0; width: 60px; height: 28px; font-size: 16px; line-height: 28px; text-align: center; background-color: #fff; border: 1px solid #999; border-radius: 7px; box-sizing: content-box; }
.exercise_pyramid_empty { color: #9c9; background-color: #fff; }
.exercise_pyramid_sign  { position: absolute; width: 22px; height: 22px; font-size: 20px; line-height: 28px; color: #fff; text-align: center; background-color: #999; border-radius: 20px; z-index: 1; }

.exercise_sort_item { float: left; margin: 5px 10px 5px 0px; padding: 5px 15px; font-size: 18px; line-height: 24px; color: var(--color_main_inv); background-color: var(--color_main_light); border: 1px solid var(--color_main); border-radius: 7px; cursor: ew-resize; -webkit-user-select: none; user-select: none; }

.exercise_label_box { position: relative; width: max-content; }
.exercise_label_pic { max-height: 300px; border-radius: 7px; }
.exercise_label_marker { position: absolute; font-size: 100%; color: var(--color_main_inv); text-align: center; background-color: var(--color_main); border: 1px solid var(--color_main); border-radius: 7px; box-shadow: 2px 2px 5px #999; box-sizing: content-box; }
.exercise_label_markers { position: relative; margin-bottom: 0.3rem; max-width: max-content; line-height: 0; }
.exercise_label_markers img { width: 100%; border-radius: var(--br); }
.exercise_label_droppable { position: absolute; height: 34px; background-color: var(--color_main_dark); border: 1px solid var(--color_main); border-radius: 7px; overflow: hidden; user-select: none; }
.exercise_label_drop_left { position: absolute; top: 0; left: 0; width: 16px; height: 100%; background-color: var(--color_main); }
.exercise_label_drop_right { position: absolute; top: 0; right: 0; width: 16px; height: 100%; background-color: var(--color_main); }
.exercise_label_drop_middle { position: relative; width: 32px; height: 100%; line-height: 32px; color: #fff; text-align: center; transition: width 0.3s; }
.exercise_label_draggable { display: inline-block; margin: 0.3rem; padding: 0 0.8rem; height: 32px; line-height: 34px; font-size: 1.1rem; color: var(--color_main_inv); background-color: var(--color_main); border-radius: 7px; cursor: grab; }
.exercise_label_drop_hover .exercise_label_drop_left { background-color: var(--color_main_light); }
.exercise_label_drop_hover .exercise_label_drop_right { background-color: var(--color_main_light); }
.exercise_label_fixed { margin: 0; color: var(--color_text); background-color: #fff; transition: color 0.3s, background-color 0.3s; border-radius: 0px; }
.exercise_label_to_top { z-index: 1; }
.exercise_label_words { position: relative; background-color: var(--color_main_lightest_t90); border-radius: 7px; z-index: 1; }

.exercise_type_audio { display: grid; grid-template-columns: 3rem auto 3rem; margin: 0.5rem 0; width: max-content; height: 3rem; cursor: pointer; }
.exercise_type_audio:hover .exercise_type_audio_play { background-color: var(--color_compl); }
.exercise_type_audio:hover .exercise_type_audio_pb { background-color: var(--color_compl); }
.exercise_type_audio:hover .exercise_type_audio_title { border-color: var(--color_compl); }
.exercise_type_audio_play { display: grid; place-content: center; font-size: 1.8rem; color: var(--color_main_inv); background-color: var(--color_main_light); border-radius: 7px 0 0 7px; transition: all 0.3s; }
.exercise_type_audio_title { position: relative; display: grid; place-content: center; padding: 0 1rem; line-height: 1.2rem; font-size: 1.1rem; font-weight: normal; background-color: var(--color_main_lightest); border: 1px solid var(--color_main_light); border-left: 0px none; border-radius: 0 7px 7px 0; overflow: hidden; -webkit-user-select: none; user-select: none; }
.exercise_type_audio_title span { display: inline-block; line-height: 1rem; font-size: 0.8rem; font-weight: bold; }
.exercise_type_audio_pb { position: absolute; height: 4px; bottom: 0; left: 0; background-color: var(--color_main_light); }
.exercise_type_audio_replay { display: none; place-content: center; font-size: 1.6rem; color: #666; transition: all 0.3s; }
.exercise_type_audio_replay:hover { color: var(--color_compl); }


.exercise_gramma_grid3 {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto; gap: 5px 5px; align-items: stretch; justify-items: stretch; justify-content: stretch; align-content: space-around;
  grid-template-areas: ". head head head" "sidebar main main main"; width: 100%;}

.exercise_gramma_grid {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto; gap: 5px 5px; align-items: stretch; justify-items: stretch; justify-content: stretch; align-content: space-around;
  grid-template-areas: ". head head head head" "sidebar main main main main"; width: 100%;}
.exercise_gramma_grid > div, .exercise_gramma_grid3 > div { text-align: center; border-radius: 7px;}
.exercise_gramma_grid .hl, .exercise_gramma_grid3 .hl {font-weight: bold; color: red;}
.exercise_gramma_grid > div:nth-child(-n+5) {color: white; background-color: var(--color_main_dark);}
.exercise_gramma_grid > div:nth-child(n+6) {background-color: white;}

.exercise_gramma_grid3 > div:nth-child(-n+4) {color: white; background-color: var(--color_main_dark);}
.exercise_gramma_grid3 > div:nth-child(n+5) {background-color: white;}

.exercise_grid {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto; gap: 5px 5px; align-items: stretch; justify-items: stretch; justify-content: stretch; align-content: space-around; width: 100%;}
.exercise_grid > div { text-align: center; border-radius: var(--br);background-color: white;}
.exercise_grid .hl {font-weight: bold; color: red;}
/* .exercise_grid > div:nth-child(-n+4) {color: white; background-color: var(--color_main_dark);}
.exercise_grid > div:nth-child(n+6) {background-color: white;} */


.exercise_textfield_optic { display: inline-block; min-width: 3em; padding: 0 0.5rem; line-height: 1.4; text-align: center; color: #292; border: 1px solid var(--color_main_light); border-radius: 5px; background-color: var(--color_main_lighter);}
.exercise_textfield { padding: 2px 5px; max-width: 100%; font-size: 0.9em; border: 1px solid #999; border-radius: 5px; }
.exercise_do_item_text .exercise { position: relative; line-height: 2; padding: 1em; border: solid .14em var(--color_main_light); font-size: 1.2em; cursor: default; width: 90%; margin: 0 auto; border-radius: .3em; }
.exercise_do_item_text #mistakes_svg { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
.mistake_dialog { position: absolute; display: flex; height: 2em; z-index: 4001;}
.mistake_dialog button {height: calc(1.5em + 3px); padding: 0 0.2em; background-color: var(--color_main); color: white; border: 0; border-radius: 0 0.2em 0.2em 0; }
.invisible_button { border-radius: 4px; }
input#better_word { font-size: 0.8em; height: 1.5em; }
.mistakes_text_div { position: relative; margin: 0.5em 0 0 -0.3em; padding: 0.3em; line-height: 2; background-color: var(--color_main_lightest);}

/* type 14: click on text */
.exercise_selectable {cursor: pointer;}
.exercise_selectable.clicked {background-color: var(--color_user2_light); border-radius: 0.2rem; }

/* radio button for inlinne multiple choise */
.exercise_do_item .exercise_inline_choice input[type="radio"] + label::before {display: none;}
.exercise_do_item .exercise_inline_choice label {background-color: var(--color_main); color: white; }
.exercise_inline_choice input { display: none; }
.exercise_inline_choice label, .exercise_button_lookalike { display: inline-block; margin: 0px 0.1em; background: var(--color_main_lighter); border: 2px solid var(--color_main_lighter); border-radius: 0.3em; cursor: pointer; padding: 0em 0.2em; margin-bottom: 0.2em; user-select: none; transition: all 0.3s; }
.exercise_inline_choice label:hover { border: 2px solid var(--color_main_light); transition: all 0.3s; }
.exercise_inline_choice input:checked + label { border: 2px solid white; background-color: var(--color_main_darkest);}

/* type 15: categories */
.exercise_category_title { margin-bottom: 0.5rem; }
.exercise_category { float: left; margin: 0 1rem 1rem 0; padding: 1rem 1.2rem; color: #fff; background-color: var(--color_main); border-radius: var(--br); }
.ex_do_cat_container {overflow: hidden; }
.ex_do_cat_grid { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.ex_do_cat { flex-grow: 1; flex-basis: 1rem; border: 1px solid var(--color_main); background-color: #fff; border-radius: var(--br); cursor: pointer; transition: all 0.3s; }
.ex_do_cat_title { padding: 0.2rem 1rem; color: #fff; text-align: center; background-color: var(--color_main); border-radius: var(--br) var(--br) 0 0; }
.ex_do_cat_drop { min-height: 3rem; }
.ex_do_cat_drag { display: none; grid-template-columns: auto 1fr; width: fit-content; background-color: #fff; border: 1px solid var(--color_correct_light); border-radius: var(--br); opacity: 0; cursor: pointer; overflow: hidden; }
.ex_do_cat_drag_icon { display: grid; align-content: center; padding: 0.3rem 0.5rem; font-size: 1.5rem; color: #fff; background-color: var(--color_correct_light); }
.ex_do_cat_drag_text { align-self: center; padding: 0.3rem 1rem; }
.ex_do_cat_drag_text img { cursor: unset !important; }
.ex_do_cat_hover { background-color: var(--color_compl); }
.ex_do_cat_dropped { position: unset !important; margin: 0.2rem; font-size: 1.1rem; background-color: var(--color_main_lighter); border: 0 none; }
.ex_do_cat_dropped .ex_do_cat_drag_icon { display: none; }
.ex_do_cat_wrong { background-color: var(--color_wrong_light); }

.exercise_users_button { position: relative; float: right; margin-left: 4px; padding: 0px; width: 36px; height: 36px; }
.exercise_users_badge { position: absolute; top: -10px; right: -7px; padding: 2px 4px; font-size: 0.8rem; background-color: var(--color_badge); border-radius: var(--br); display: none; }
#exercise_users_popover { padding: 0; background-color: #fff; border: 0px none; border-radius: var(--br); box-shadow: 0 15px 25px #666; user-select: none; }
#exercise_users_popover::backdrop { backdrop-filter: blur(3px); }
.exercise_users_popover_header { padding: 0.6rem 1rem; text-align: center; color: #fff;  background-color: var(--color_main); }
.exercise_users_popover_content { max-height: 90vh; overflow-y: auto; }
.exercise_users_popover_user { display: grid; grid-template-columns: max-content 1fr; align-items: center; padding: 0 0.5rem; border-bottom: 1px solid var(--color_main_lighter); cursor: pointer; transition: all 0.3s; }
.exercise_users_popover_user label, .exercise_users_popover_user input { padding: 0.3rem; cursor: pointer; }
.exercise_users_popover_user:hover { background-color: var(--color_main_lighter); }

/* exercise feedback */
.ef_answer { padding: 0.8rem 1rem !important; font-family: var(--font_main) !important; font-size: 1.2rem !important; background-color: #fff; border-radius: var(--br) !important; }
.ef_answer .ql-editor { padding: 0 !important; min-height: 6.25rem !important; font-family: var(--font_main) !important; font-size: 1.2rem !important; background-color: #fff; border-radius: var(--br) !important; }
.ef_answer ins, .feedback_answer del { padding: 2px 3px; text-decoration: none; }
.ef_answer ins { color: #406619; text-decoration: underline; background: #eaf2c2; border-radius: 0 3px 3px 0; }
.ef_answer del { color: #b30000; text-decoration: line-through; font-style: italic; background: #fadad7; border-radius: 3px 0 0 3px; }
.ef_title { margin-top: 1.7rem; font-size: 1.4rem; font-weight: bold; color: var(--color_main); }
.ef_text { width: 100%; font-family: var(--font_main) !important; font-size: 1.1rem !important; border: 0px none; outline: none; }
.ef_text .ql-editor { min-height: 6.25rem !important; }

.ef_slider_box { position: relative; display: grid; grid-template-columns: 15% 35% 35% 15%; align-content: center; margin-top: 0.3rem; height: 2rem; font-size: 1rem; background: linear-gradient(90deg,rgba(224, 128, 128, 1) 0%, rgba(224, 224, 128, 1) 32%, rgba(128, 224, 224, 1) 68%, rgba(128, 224, 128, 1) 100%); border-radius: var(--br); user-select: none; }
.ef_slider_box div { text-align: center; z-index: 2; }
.ef_slider_pane { position: absolute; width: 100%; height: 2rem; top: 0; left: 0; cursor: pointer; }

.ef_slider_arrow { position: absolute; top: -2.7rem; font-size: 2rem; color: var(--color_main); transition: all 0.5s; }
.ef_slider_arrow_left_move { margin-left: calc(50% - 3.5rem) !important; }
.ef_slider_arrow_right_move { margin-left: calc(50% + 1.5rem) !important; }

.ef_slider_handle { position: relative; margin-left: -1.2rem; width: 2.4rem; height: 2.4rem; top: -2.6rem; font-size: 1rem; text-align: center; line-height: 2.1rem; border: 3px solid var(--color_main) !important; border-radius: 50%; outline: none; }
.ef_slider_handle::after { content: ""; position: relative; display: block; top: 0; left: calc(1.2rem - 6px); width: 0; height: 2.4rem; border: 2px solid var(--color_main); z-index: 1; }

.ef_slider_box_disabled { background: #ccc; }
.ef_slider_box_disabled .slider_handle { border: 3px solid #999; }
.ef_slider_box_disabled .slider_handle:after { border: 2px solid #999; }


/* --- DATEPICKER --- */
.ui-datepicker { display: none; position: absolute; margin-top: 5px; padding: 5px 5px 0px 5px; font-size: 16px; border: 1px solid var(--color_main_light); border-radius: 5px; background-color: #fff; }
.ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; color: var(--color_main_inv); font-weight: bold; border: 1px solid var(--color_main); border-radius: 5px; background-color: var(--color_main); }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; width: 30px; height: 30px; }
.ui-datepicker .ui-datepicker-prev { left: 10px; cursor: pointer; }
.ui-datepicker .ui-datepicker-next { right: 10px; text-align: right; cursor: pointer; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; line-height: 30px; }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; }
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%; }
.ui-datepicker table { width: 100%; font-size: 14px; border-collapse: collapse; margin: 0 0 .4em; }
.ui-datepicker th { text-align: center; font-weight: bold; border: 0; }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: 3px 10px; text-align: center; text-decoration: none; }
.ui-datepicker-today .ui-state-default { background-color: var(--color_main_lighter); }

.ui-state-default { color: #777777; border: 1px solid #cccccc; background-color: #ffffff; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #777777; text-decoration: none; }
.ui-state-active  { color: var(--color_main_inv); border: 1px solid #cccccc; background-color: var(--color_main) !important; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; text-decoration: none; }
.ui-state-hover { border-color: var(--color_main_light); }

/* --- POPUP --- */
.popup_box { --size_header: min(max(6vmin, 2rem), 3.5rem); --size_header: max(2rem, min(6vmin, 3.5rem)); display: flex; flex-direction: column; }
.popup_box > .pu_header { flex: 0 0 var(--size_header); flex: 0 0 max-content; height: var(--size_header); padding: 0 calc(2 * var(--br)); display: flex; justify-content: space-between; align-items: center; }
.popup_title { flex: 1 0 min-content; margin: 0; background-color: transparent; color: white; font-weight: bold; color: var(--color_main); font-size: calc(0.6 * var(--size_header)); }
.popup_box .button_close { flex: 0 0 min(max(4.5vmin, 1.5rem), 2.8rem); position: inherit; width: unset; height: min(max(4.5vmin, 1.5rem), 2.8rem); transform: none; display: flex; justify-content: flex-end; align-items: center; color: var(--color_main); z-index: 101; font-size: min(max(4.5vmin, 1.5rem), 2.8rem); line-height: 1; background-color: transparent; transition: color 0.2s ease; border: none; cursor: pointer; }
.popup_box .button_close:hover { background-color: transparent; color: var(--color_compl); }
.popup_content { position: relative; height: 100%; background-color: white; overflow: hidden; box-shadow: 1vmin 1vmin 2vmin rgba(0, 0, 0, .2); }
.popup_box .popup_content { border-radius: var(--br) var(--br) 0 0; }
.fixed_ratio .popup_content { border-radius: 0; }
.popup_box { width: 100%; height: 100%; max-width: var(--max_width); max-height: var(--max_height); }
.popup_box.fixed_ratio {
   width: min(var(--width_constained, 800px), (var(--height_constained, 600px) - var(--size_header)) * var(--w_to_h));
   /* height: min(1 / var(--w_to_h) * var(--width_constained) + var(--size_header), var(--height_constained)); */
   height: var(--height_constained);
}
@media (orientation: landscape) and (max-width: 767px) { /* Mobile Landscape */
   .popup_box { --size_header: 0px; }
   .popup_title { display: none; }
   .popup_box .button_close { position: fixed; right: .5rem; top: .5rem; z-index: 1000; }
}
@media (min-width: 767px) { /* Desktop */
   .popup_box .popup_content { border-radius: var(--br); }
}

/* --- PRESENTATION MODE --- */

.pm {
   --font_size: calc(3.5 * min(var(--vh, 1vh), calc(1vw * 9 / 16)));

   --slide_width: min(100vw, calc(100 * var(--vh, 1vh) * 16 / 9));
   --slide_height: calc(var(--slide_width) * 9 / 16);
   --slide_padding: 0.7em 1.4em;

   --color_pm_block:   var(--color_main_dark_t90);
   --color_pm_overlay: var(--color_main_dark_t90);
   --color_pm_text:    var(--color_main_inv);

   --size_header:   2.1em;
   --size_footer:   1.8em;
   --size_overview: calc(var(--font_size) * 3);
   --content_width: 100%;
   --br:            0.2em;

   --overview_scale: 0.09;
}
.pm h3 { font-size: 1.18em; font-weight: normal; color: white; line-height: 1.3; }
.pm h4 { font-size: 1.1em; font-weight: normal; line-height: 1.3; }
.pm p { font-size: 1em; }
.pm ul, .pm ol { margin: 0; padding: 0; list-style: none; }

body.pm_bg { width: 100vw; height: 100vh; height: calc(var(--vh) * 100); display: flex; justify-content: center; align-items: center; background-color: black; overflow: hidden; }
.pm { position: relative; width: var(--slide_width); height: var(--slide_height); color: white; font-size: var(--font_size); contain: strict; transition: transform 0.5s ease, opacity 0.5s ease, background-color 0.5s ease; overflow: hidden; }
.pm.exit { transform: translate(0%, 100%); opacity: 0; }
.pm_slide { position: absolute; bottom: 0; left: 0; width: var(--slide_width); height: var(--slide_height); background-color: var(--color_main_dark); contain: strict; transition: transform 0.5s ease-in-out, opacity 0.5s; transform-origin: bottom left; transform: translateX(150%); opacity: 0; }
.pm_slide.visible, .pm_slide.overview { transform: translateX(0); opacity: 1; }
.pm_slide.visible:not(.on_screen) { width: 0; }

/* Overview mode */
.pm_slide.overview, .overview_mode .pm_slide_overview_current, .pm_dots_overview_left, .pm_dots_overview_right {
   z-index: 2000;
   --font_size: calc(3.5 * min(1vh, calc(1vw * 9 / 16)) * var(--overview_scale));
   --slide_width: calc(min(100vw, calc(100 * 1vh * 16 / 9)) * var(--overview_scale));
   --slide_height: calc(var(--slide_width) * 9 / 16);
   --spacing: calc(1em / var(--overview_scale));
}
.pm_slide.no_transition { transition: none; }
.overview_mode .pm_slide:not(.current_slide) { bottom: calc(var(--size_footer) / var(--overview_scale) + 0.2 * var(--spacing)); left: calc(0.5 * var(--spacing) + (var(--start_column) + var(--column) - 1) * (var(--slide_width) + 0.5 * var(--spacing))); font-size: var(--font_size); z-index: 2001 !important; -webkit-user-select: none; user-select: none; cursor: pointer; }
.overview_mode .pm_slide.left_transition { transition: left 0.3s ease; }
.overview_mode .pm_slide:not(.current_slide):hover { box-shadow: 0 0 2em 0.5em var(--color_compl); }
.overview_mode .pm_slide * { pointer-events: none; }
.pm_slide_header.overview, .pm_slide_footer.overview { opacity: 0; pointer-events: none; }
.overview_mode .pm_slide_overview_current { --column: 1; opacity: 1; display: flex; bottom: calc(var(--size_footer) / var(--overview_scale) + 0.2 * var(--spacing)); left: calc(0.5 * var(--spacing) + (var(--start_column) + var(--column) - 1) * (var(--slide_width) + 0.5 * var(--spacing))); font-size: var(--font_size); z-index: 2001 !important; }
.overview_mode .pm_slide_overview_current.left_transition { transition: left 0.3s ease; }

/* Presentation classes */
.slide_block { transition: filter 0.3s, opacity 0.3s; }
.block_blur { -webkit-user-select: none; user-select: none; }
.block_blur { filter: blur(0.2em) opacity(50%); }
.block_blur.block_fade { opacity: 0; pointer-events: none; }

/* PM Slide Header and Footer buttons */
.pm_slide_header { height: var(--size_header); position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; background-color: transparent; -webkit-user-select: none; user-select: none; transition: opacity 0.3s ease; z-index: 2000; }
.pm_slide_header .icon-logo { position: absolute; top: 50%; left: 0.45em; transform: translateY(-45%); font-size: 1.2em; color: white; }
.pm_slide_header .button_close { position: absolute; top: 50%; right: 0.5em; line-height: 1; width: 1.8em; border: none; height: 1.8em; font-size: 1em; transform: translateY(-50%); border-width: 0.1em; background-color: transparent; color: white; }
.pm_slide_header .button_close::before { font-size: 1.2em; }
.pm_slide_header .button_close:hover { color: var(--color_compl); }
.pm_slide_header .button_close:focus-visible { outline-color: var(--color_compl); outline-offset: var(--br); }

.pm_slide_footer { height: var(--size_footer); position: absolute; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; background-color: var(--color_main_darkest); -webkit-user-select: none; user-select: none; transition: opacity 0.3s ease; z-index: 2000; }
.pm_header_tools { position: absolute; top: 50%; right: 4em; transform: translateY(-50%); font-size: 1em; color: white; }
.pm_header_tools .pm_gadgets_icon { display: flex; justify-content: center; align-items: center; width: var(--size_header); height: var(--size_header); cursor: pointer; transition: background 0.3s ease; }
.pm_header_tools:hover .pm_gadgets_icon { background-color: var(--color_main); }
.pm_overview_tool { position: absolute; top: 50%; left: 1em; transform: translateY(-50%); font-size: 0.8em; color: white; }
.pm_overview_tool .pm_overview_icon { cursor: pointer; }
.pm_info_tool { position: absolute; top: 50%; right: 1em; transform: translateY(-50%); font-size: 1em; color: white; }
.pm_info_tool .pm_info_icon { cursor: pointer; }

/* PM Slide */
.pm_slide > header { height: var(--size_header); width: 100%; display: flex; justify-content: center; align-items: center; background-color: var(--color_main_darkest); -webkit-user-select: none; user-select: none; z-index: 200; }
.pm_slide > footer { height: var(--size_footer); width: 100%; display: flex; justify-content: center; align-items: center; background-color: var(--color_main_darkest); -webkit-user-select: none; user-select: none; z-index: 200; }
.pm_slide > main { 
   font-size: 1.5em;
   --size_header:   calc(2.1em / 1.5);
   --size_footer:   calc(1.8em / 1.5);
   height: calc(var(--slide_height) - var(--size_header) - var(--size_footer)); 
}
.pm_slide main { position: relative; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; }
.pm_slide main.content_padding { padding: var(--slide_padding); }
.pm_slide header h2 { width: max-content; padding: 0; margin: 0; border: none; color: white; text-align: center; font-size: 1.3em; font-weight: normal; }
.pm_slide .button_close { transition: background 0.3s ease; }
.pm_nav_arrow { background: transparent; border: none; font-size: 1.7em; color: white; padding: 0 1.5em; cursor: pointer; outline: none; transition: opacity 0.3s ease; }
.pm_left_arrow:focus, .pm_right_arrow:focus { color: var(--color_compl); }
.pm_left_arrow:focus, .pm_right_arrow:focus { color: var(--color_compl); }
.pm_left_arrow:disabled, .pm_right_arrow:disabled { opacity: 0.2; cursor: initial; }
.pm_nav_arrow.hidden { opacity: 0; pointer-events: none; }
.pm_dots { display: flex; align-items: center; border: 0.08em solid var(--color_gray); border-radius: 0.2em; padding: 0.32em; cursor: pointer; }
.pm_dot { position: relative; display: inline-block; width: 0.6em; height: 0.3375em; margin: 0 0.2em; border-radius: 0.05em; background-color: var(--color_gray); cursor: pointer; }
.pm_dot::before { content: ""; display: block; width: 100%; height: 100%; background-color: white; border-radius: 0.05em; transform: scale(0); transition: transform 0.6s ease; }
.pm_dot.selected::before { transform: scale(1); }
.pm_dot::after { content: attr(data-slide); position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; font-size: 0.35em; font-weight: bold; display: flex; justify-content: center; align-items: center; transform: scale(0); transition: transform 0.6s ease; }
.pm_dot.selected::after { color: var(--color_gray); transform: scale(1); }
/* .pm_dot .pm_dot_label { position: absolute; top: -1.9em; left: 50%; transform: translate(-50%, -20%); min-width: 5ch; width: max-content; height: 1.9em; font-size: 0.9em; line-height: 1; padding: 0.4em 0.6em; background-color: rgba(0,0,0,0.8); border-radius: var(--br); opacity: 0; pointer-events: none; transition: transform 0.3s ease, opacity 0.3s ease; }
.pm_dot .pm_dot_label::after { position: absolute; bottom: -0.7em; left: 50%; transform: translateX(-50%); content: ""; display: block; width: calc(100% - 2 * var(--br)); max-width: 2ch; height: 0.8em; background-color: rgba(0,0,0,0.8); clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 0% 0%); }
.pm_dot:hover .pm_dot_label { opacity: 1; transform: translate(-50%, -50%); pointer-events: all; } */
.pm_licence p { position: absolute; top: calc(var(--size_header) + 1em); left: 0; width: 100%; padding: 0.4em 0.6em; padding-right: 20em; line-height: 1.3; background-color: var(--color_main_lightest_t90); color: #9A5857; font-size: 0.7em !important; }
.pm_licence a { position: absolute; top: calc(var(--size_header) + 0.25em); right: 0.25em; display: block; padding: 0.3em 0.6em; border-radius: var(--br); background-color: #9A5857; color: white; text-decoration: none; font-weight: bold; transition: 0.3s background ease; }
.pm_licence a:hover { background-color: hsl(1, 48%, 37%); }
.pm_licence .schubu_plus_logo { font-size: 0.98em; }

.pm_dots_overview { position: absolute; left: 0; bottom: var(--size_footer); width: 100%; height: var(--size_overview); background-color: rgba(255,255,255,0.5); background-color: var(--color_main_lighter); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 1500; }
.pm_dots_overview.active { opacity: 1; }
.pm_dots_overview:focus { outline: none; }
.pm_dots_overview_left, .pm_dots_overview_right { position: absolute; bottom: var(--size_footer); width: calc(var(--size_overview) * 0.8); height: var(--size_overview); display: flex; justify-content: center; align-items: center; background: var(--color_main_lighter); border: none; font-size: 1em; transition: opacity 0.3s ease, color 0.3s ease, background 0.3s ease; cursor: pointer; z-index: 3000; }
.pm_dots_overview_left.hidden, .pm_dots_overview_right.hidden { opacity: 0; pointer-events: none; }
.pm_dots_overview_left::before, .pm_dots_overview_right::before { font-size: 2em; }
.pm_dots_overview_left:hover, .pm_dots_overview_right:hover { background: var(--color_main_lighter); color: var(--color_compl); }
.pm_dots_overview_left  { left:  0; }
.pm_dots_overview_right { right: 0; }

.pm_slide_overview_current { pointer-events: none; opacity: 0; position: absolute; width: var(--slide_width); height: var(--slide_height); transform-origin: bottom left; display: flex; justify-content: center; align-items: center; background-color: white; border-radius: 1em; border: 1px solid var(--color_main); /*transition: opacity 0.3s ease;*/ }
.pm_slide_overview_current > .current_slide_marker { font-size: 9em; line-height: 1.2; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--color_main); }

/* Slide Layout */
.slide_content { margin: auto; width: min(var(--slide_width), (var(--slide_height) - var(--size_header) - var(--size_footer)) * var(--w_to_h)); height: 100%; }
.slide_content { padding: 0; }

.pm .slide_layout { display: flex; justify-content: space-evenly; align-items: center; width: 100%; }
.pm .slide_layout.wrap           { flex-wrap: wrap; }
.pm .slide_layout.full_height    { height: 100%; }
.pm .slide_layout.left           { justify-content: flex-start; }
.pm .slide_layout.right          { justify-content: flex-end; }
.pm .slide_layout.center         { justify-content: center; align-items: center; }
.pm .slide_layout.top            { align-items: flex-start; }
.pm .slide_layout.bottom         { align-items: flex-end; height: 100%; }
.pm .slide_layout.column         { flex-direction: column; height: 100%; }

/* Title slide */
.pm_title { position: absolute; color: white; font-size: 2.5em; line-height: 1; font-weight: bold; z-index: 1; text-shadow: 0 0 0.1em rgba(0,0,0,0.4); letter-spacing: 0.02em; }

/* ? Blocks */
.pm .light_theme { --color_pm_block: var(--color_main_lightest); --color_pm_overlay: var(--color_main_lightest); --color_pm_text: var(--color_main_darkest); }
.pm .dark_theme { --color_pm_block: var(--color_main_darkest); --color_pm_overlay: var(--color_main_darkest); --color_pm_text: var(--color_main_inv); }

/* Slide Overlay */
.slide_overlay { border-radius: 0.2em; margin: 0.66em 1.33em 0.66em 0.75em; padding-left: 1.4em; }
.slide_overlay.background { margin: 0.66em 1.33em 0.66em 0.75em; padding: 0.4em 0.7em 0.4em 1.2em; background-color: var(--color_pm_block); }
.slide_overlay { position: relative; }
.slide_overlay[class*=icon]::before { position: absolute; left: -0.5em; background-color: white; color: var(--color_main_darkest); border-radius: 50%; width: 1.4em; height: 1.4em; line-height: 1em; display: flex; justify-content: center; align-items: center; }
.slide_overlay.background[class*=icon]::before { left: -0.7em; }

/* Slide Blocks */
.pm .slide_blocks { width: 100%; max-width: var(--width_pm_blocks); padding-left: 1.8em; padding-right: 1.33em; }
.slide_blocks > * { position: relative; padding: 0.2em 0.4em; line-height: 1.4; z-index: 2; color: var(--color_pm_text); }
.slide_blocks > .slide_block { border-radius: 0.2em; margin: 0.33em 0; padding: 0.2em 0.4em; }
.slide_blocks.background { padding: 0; }
.slide_blocks.background > * { background: var(--color_pm_block); border-radius: 0.2em; margin: 0.66em 1.33em 0.66em 0.75em; padding: 0.4em 0.7em 0.4em 1.2em; }

/* indent block */
.slide_blocks > .slide_block.block_indent { margin-left: calc(0.5em + var(--indent, 1) * 1.3em); padding-left: 0.1em; }
.slide_blocks > .slide_block.block_indent::before { content: "g"; }
.slide_blocks .block_indent { max-width: calc(min(var(--content_width), 100%) - var(--indent, 1) * 1em); margin-top: 0; }
.slide_blocks > .block_indent { margin-top: -0.6em; }

/* list of blocks */
ul.slide_blocks > li::before { content: '\03c1'; font-family: "icons"; color: var(--color_pm_text); position: absolute; left: -0.9em; top: 0.3em; font-size: 0.9em; }
ol.slide_blocks { counter-reset: li; list-style: none; padding-left: 2.5em; }
ol.slide_blocks > li::before { content: counter(li); counter-increment: li; position: absolute; left: -0.4em; top: 0.2em; width: 1.2em; height: 1.2em; line-height: 1; font-size: 1em; font-weight: bold; border-radius: 0.2em; font-family: var(--font_main); display: flex; justify-content: center; align-items: center;  transform: translateX(-80%); background: var(--color_pm_text); color: var(--color_pm_block); }
ul.slide_blocks.background > li::before { display: none; }
ol.slide_blocks.background > li::before { top: 50%; transform: translate(-130%, -58%); }

.pm ol.abc_list > li, .pm ol.capital_abc_list > li { padding-left: 1.2em; margin-bottom: .2em; }
.pm ol.abc_list > li:before, .pm ol.capital_abc_list > li:before { left: -0.3em; color: white; }
.pm ol.abc_list.more_space > li, .pm ol.capital_abc_list.more_space > li { margin-bottom: .6em; }

/* custom block symbols */
/* ul.slide_blocks > li[class*=icon]::before { left: -0.3em; top: 45%; border-radius: 0.2em; width: 1.2em; height: 1.2em; display: flex; justify-content: center; align-items: center; transform: translate(-130%, -46%); background: var(--color_pm_text); color: var(--color_pm_block); } */
ul.slide_blocks > li[data-char]::before { content: attr(data-char); font-family: var(--font_main); line-height: 1.1; font-weight: bold; left: -0.3em; top: 45%; border-radius: 0.15em; width: 1em; height: 1em; font-size: 1.2em; display: flex; justify-content: center; align-items: center; transform: translate(-130%, -46%); background: var(--color_pm_text); color: var(--color_pm_block); }
ul.slide_blocks > li[data-icon]::before { content: attr(data-icon); font-family: "icons"; line-height: 2; left: -0.3em; top: 45%; border-radius: 0.2em; width: 1.2em; height: 1.2em; display: flex; justify-content: center; align-items: center; transform: translate(-130%, -46%); background: var(--color_pm_text); color: var(--color_pm_block); }

.pm_label { width: 1.4em; height: 1.4em; display: inline-flex; justify-content: center; align-items: center; background-color: white; color: var(--color_main_darkest); border-radius: 50%; line-height: 1.1; }

/* PM Pics */
.pm_fig { position: relative; }
.pm_pic { position: relative; }
.pm_pic img { display: block; width: 100%; height: auto; border-radius: 0.3em; }
.pm_pic_label { position: absolute; bottom: 0.2em; left: 50%; transform: translateX(-50%); padding: 0.2em 0.5em; border-radius: var(--br); color: black; background-color: rgba(255,255,255,0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 0.6em; }
.pm_fig .cp_fig_overlay { width: 100%; height: 100%; }
.pm_fig .cp_fig_overlay svg { object-fit: cover; }


/* imagestack - stacks picture elements */
.imagestack { position: relative; width: 100%; height: 100%; }
.imagestack figure { width: 100%; height: 100%; }
.imagestack picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; place-items: center; grid-template-rows: 100%; }
.imagestack > picture { position: relative; }
.imagestack source { display: none; }
.imagestack img { display: block; width: 100%; height: auto; object-fit: cover; }
.imagestack > * { display: block; position: absolute; top: 0; left: 0; }
.imagestack > *:first-child,
.imagestack > .pm_fig:first-child picture { position: relative; }
/* imagestack and switch_bg */
.pm .imagestack.switch_bg { position: fixed; top: 0; left: 0; max-width: 100vw; z-index: -1; }
.pm .imagestack.switch_bg img { width: 100vw; height: 100vh; border-radius: 0; object-fit: cover; object-position: center center; }
.pm .imagestack.switch_bg { margin: 0; }
.imagestack .pm_fig { position: unset; height: 100%; display: flex; align-items: center; }
.imagestack .pm_pic { display: block; height: 100%; display: flex; align-items: center; }

.clipped_left, .clipped_right { width: 100%; height: 100%; }
.clipped_left { clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%); }
.clipped_right  { clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%); }
.clipped_left .pm_fig, .clipped_right .pm_fig,
.clipped_left picture, .clipped_right picture,
.clipped_left .pm_pic, .clipped_right .pm_pic { width: 100%; height: 100%; }
.clipped_left img, .clipped_right img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; }

/* objectstack – stacks all contents, with the first item dictating the size */
.objectstack { position: relative; width: 100%; display: grid; }
.objectstack > * { position: absolute; top: 50%; left: 50%; width: 100%; grid-area: 1 / 1; transform: translate(-50%, -50%); }
.objectstack img { display: block; width: 100%; height: 100%; }
/* objectstack and pm_pic */
.objectstack .pm_pic { width: 100%; height: 100%; display: flex; align-items: center; }
.objectstack .pm_pic img { object-fit: cover; }
/* color gradient background */
.gradient_box { background: linear-gradient(90deg, var(--color_main_dark_t90), transparent); }



/* ---------- DIALOG ---------- */
.ui-front                 { z-index: 100; }
.ui-widget-overlay        { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: #000000; opacity: 0.5; z-index: 3002; }

.ui-dialog                { position: absolute; top: 0; left: 0; box-shadow: 0px 15px 25px #555 !important; outline: 0; }
.ui-dialog-titlebar       { padding: 0.6rem 1rem; font-size: 1.5rem; font-weight: bold; color: var(--color_main_inv); text-align: center; border-radius: 5px 5px 0px 0px; background-color: var(--color_button); cursor: move; }
.ui-dialog-titlebar-close { display: none; }
.ui-dialog-buttonset      { padding: 0 1.2rem 1.2rem 1.2rem; text-align: right; }
.ui-button                { margin-left: 1.2rem; padding: 0.6rem 1rem; font-size: 1.1rem; text-decoration: none; color: var(--color_main_inv); border: 0px none; border-radius: 5px; background-color: var(--color_button); cursor: pointer; transition: background-color 0.3s; outline: 0px none; }
.ui-button:first-child    { background-color: var(--color_main); }
.ui-button:hover          { color: var(--color_button); background-color: var(--color_compl); }

.dialog_box { border-radius: var(--br); background-color: #fff; box-shadow: 0px 15px 25px #bbb; z-index: 3003 !important; }
.dialog_box label { cursor: pointer; }
.dialog_box label:hover { color: var(--color_compl); }
.dialog_box input[type=checkbox] { cursor: pointer; }
.dialog_box input[type=checkbox]:hover + label { color: var(--color_compl); }

.dialog_content_scrolling {height: 100%; overflow-y: scroll; }
.wiktionary_ui-dialog {padding: 0.5em; background: var(--color_main_lighter); border-radius:  var(--br); border: 2px solid var(--color_main_dark); box-shadow: 2px 2px 5px #999999; }
.wiktionary_ui-dialog .ui-dialog-titlebar {display:block; margin: -0.5em -0.5em 0px -0.5em; background: var(--color_main_dark); color: white; border-radius:  var(--br) var(--br) 0 0; }


.dialog_title { padding: 1rem 0 0 1.4rem; font-size: 1.3rem; font-weight: bold; }

.dialog_fields { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.8rem; align-items: center; padding: 1rem 1.4rem 1.4rem 1.4rem; font-size: 1.1rem; }
.dialog_fields label { color: var(--color_system_light); text-align: right; -webkit-user-select: none; user-select: none; }
.dialog_fields input { outline: 0px none; }
.dialog_fields input[type=text], .dialog_fields input[type=password], .dialog_fields textarea { padding: 0.6rem 0.8rem; font-family: var(--font_main); font-size: 1.1rem; border: 0px none; border-radius: 5px; background-color: var(--color_main_lightest); outline: none; transition: all 0.3s; }
.dialog_fields input[type=text], .dialog_fields input[type=password] { min-width: 0; overflow: hidden; }
.dialog_fields input[type=checkbox] { justify-self: left; }
.dialog_fields input[type=radio] { margin-right: 0; }
.dialog_fields input:hover { background-color: var(--color_main_lighter); }
.dialog_fields input:focus { background-color: var(--color_main_lighter); }
.dialog_fields select { height: 39px; font-family: var(--font_main); font-size: 1rem; text-indent: 5px; border: 0px none; border-radius: 5px; background-color: var(--color_main_lightest); transition: all 0.3s; }
.dialog_fields select optgroup { color: var(--color_main_inv); background-color:var(--color_main); }
.dialog_fields select option { color: var(--color_text); background-color: #fff; }
.dialog_fields .dialog_info { font-size: 1rem; line-height: 1.2rem; color: var(--color_main_light); }
.dialog_submit { display: block; margin: 2rem auto 6rem auto; padding: 0.8rem 2rem; width: max-content; font-family: var(--font_main); font-size: 1.2rem; font-weight: bold; color: var(--color_main_inv); background-color: var(--color_button); border: 0px none; border-radius: 7px; box-shadow: 2px 2px 5px #999; cursor: pointer; transition: all 0.3s; outline: none; -webkit-appearance: none; }
.dialog_submit:hover { color: var(--color_main_dark); background-color: var(--color_compl); }

.dialog_confirm { max-width: 33rem; z-index: 4000 !important; }
#dialog_confirm_msg { padding: 20px; }
.dialog_confirm .email_infos { display: grid; grid-template-columns: 15ch 1fr; row-gap: 0.5rem; align-items: center; }
.dialog_confirm .email_infos input { font-family: inherit; font-size: 1em; padding: 0.5em; background-color: var(--color_main_lightest); border-radius: var(--br); border: 0 none; }
.dialog_confirm .email_infos input:valid { border-color: var(--color_correct_light); outline-color: var(--color_correct_light); }
.dialog_confirm .email_infos input:invalid { border-color: var(--color_wrong_light); outline-color: var(--color_wrong_light); }
.dialog_confirm .email_infos .full_width_label { grid-column: span 2; }
.dialog_confirm button[disabled] { opacity: 0.5; pointer-events: none; }
.no-close .ui-dialog-titlebar-close { display: none; }


/* ---------- HUB ---------- */
.hub_menu { position: relative; display: grid; grid-auto-flow: column; justify-content: center; align-items: center; margin-top: var(--size_header); height: var(--size_header); background-color: #fff; }
.hub_menu_item { position: relative; display: grid; grid-auto-flow: column; grid-gap: max(0.5rem, min(1vw, 0.8rem)); align-items: center; height: 100%; padding: 0 max(1rem, min(2vw, 1.8rem)); text-decoration: none; text-transform: uppercase; color: var(--color_title); transition: color 0.3s, background-color 0.3s; }
.hub_menu_item em { font-size: max(2rem, min(3vw, 2.4rem)); }
.hub_menu_item:hover { color: var(--color_title); background-color: var(--color_hover_bg); }
.hub_menu_active { color: #fff; background-color: var(--color_button); }
.hub_menu_school { margin-top: 0.5rem; font-size: 1.1rem; color: var(--color_system); font-weight: bold; text-align: center; }
.hub_menu_school span span { font-weight: normal; }
.hub_menu_item_close { position: absolute; top: 0; right: 0; padding: 0 0.5rem; font-size: 2rem; line-height: var(--size_header); cursor: pointer; transition: all 0.3s; }
.hub_menu_item_close:hover { color: var(--color_title); background-color: var(--color_hover_bg); }

.hub_box { position: relative; margin: 0px auto; padding-top: max(1rem, min(3vw, 3rem)); width: 90vw; max-width: 900px; }
.hub_title { text-align: center; }
.hub_title h1 { color: var(--color_title); }
.hub_title .button { margin: 10px auto 10px auto; width: max-content; background-color: var(--color_button); box-shadow: 2px 2px 5px #999; }

.hub_profile_data .dialog_fields #email { width: 100%; padding-right: 2.4rem; }
.hub_profile_data .dialog_fields div { position: relative; }
.hub_profile_data .dialog_fields div div { position: absolute; top: 0; right: 0; padding: 0.5rem 0.7rem 0.3rem 0.7rem; }
.hub_profile_data .dialog_fields .icon-warn { cursor: pointer; transition: all 0.3s; }
.hub_profile_data .dialog_fields .icon-warn:hover { transform: scale(1.4); }

.exercise_stu_box { float: left; position: relative; margin: 10px; padding-top: 33px; width: 130px; height: 100px; line-height: 18px; font-size: 16px; color: var(--color_main_inv); text-align: center; background-color: var(--color_main_light); border: 2px solid var(--color_main_light); border-radius: 7px; cursor: pointer; overflow: hidden; transition: transform 0.3s; }
.exercise_stu_box:hover { transform: scale(1.2); }
.exercise_stu_date { position: absolute; top: 0; left: 0; width: 100%; height: 30px; line-height: 30px; font-size: 18px; font-weight: normal; color: var(--color_text); text-align: center; background-color: var(--color_main_lighter); }
.exercise_stu_duration { position: absolute; bottom: 0; right: 0; height: 24px; padding: 0 10px; line-height: 24px; font-size: 16px; font-weight: normal; color: var(--color_text); background-color: var(--color_main_lighter); border-top-left-radius: 7px; }
.exercise_stu_rate_bg  { position: absolute; bottom: 0; left: 0; width: 100%; height: 24px; background-color: var(--color_main_lighter); }
.exercise_stu_rate     { position: absolute; bottom: 0; left: 0; height: 24px; background-color: var(--color_main); border-bottom-right-radius: 5px; }
.exercise_stu_rate_txt { position: absolute; bottom: 0; left: 0; width: 100%; height: 24px; line-height: 24px; font-size: 18px; font-weight: normal; color: var(--color_main_inv); text-shadow: 0 0 1px #000; }

/* ---------- HUB PERSONS ---------- */
.persons_box { display: grid; grid-template-columns: max-content 0.5rem 1fr; column-gap: 0.25rem; margin-top: 1rem; overflow-x: hidden; }
.persons_classes_box { margin-left: 1rem; width: 200px; user-select: none; }
.persons_classes_box button { margin-bottom: 0.7rem; width: 100%; height: 2.8rem; background-color: var(--color_button); }
.persons_classes_box_classes { overflow-y: auto; }
.persons_classes_accordion h4 { position: relative; }
.persons_classes_add { position: absolute; right: 0; top: 14px; line-height: 0; font-size: 1.2rem; }
.persons_class { position: relative; padding: 2px 1.6rem 2px 2rem; text-overflow: ellipsis; white-space: nowrap; border-radius: 5px; overflow: hidden; cursor: pointer; transition: all 0.3s; }
.persons_class_context { position: absolute; right: 5px; bottom: 6px; line-height: 0; color: #999; opacity: 0; transition: all 0.3s; }
.persons_class_active { background-color: #ddd; }
.persons_class_active .persons_class_context { color: #666; opacity: 1; }
.persons_grid_resize { cursor: col-resize; border-radius: 5px; transition: all 0.3s; }
.persons_main { margin-right: 1rem; }
.persons_header { display: grid; grid-template-columns: auto 0 1fr auto auto; margin-bottom: 0.7rem; }
.persons_header button { margin-left: 1rem; }
.persons_search { min-width: 120px; max-width: 330px; height: 2.8rem; font-family: var(--font_text); font-size: 20px; text-indent: 0.7rem; border: 1px solid #ccc; border-radius: 7px; outline: none; -webkit-appearance: none; }
.persons_search_del { position: relative; top: 2px; left: -35px; line-height: 2.8rem; font-size: 1.8rem; cursor: pointer; visibility: hidden; }
.persons_people { padding: 0 1rem; min-height: 300px; background-color: var(--color_main_lightest); border: 1px solid var(--color_main_lighter); border-radius: 7px; user-select: none; overflow-y: auto; }
.persons_info { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 1rem 0; padding: 0.3rem 0.5rem; background-color: var(--color_main_lightest); border: 1px solid var(--color_main_lighter); border-radius: var(--br); }
.persons_info_users { width: max-content; }
.persons_info_selected { flex-grow: 1; }
.persons_info_current, .persons_info_max { font-weight: bold; }
.persons_tolerance { font-size: 70%; color: var(--color_badge); }
.persons_info_count_warning { color: var(--color_badge); }
.persons_info_add_warning { color: #fff !important; background-color: var(--color_badge); }
#persons_info_add_button { transform: scale(1); transition: all 0.3s ease-in-out; }

.persons_sort_box { float: left; display: grid; grid-template-columns: auto auto auto auto; column-gap: 1rem; margin-top: 0.7rem; width: max-content; }
.persons_sort_box label { display: none; }
.persons_sort { display: grid; grid-template-columns: auto auto; column-gap: 0.5rem; align-items: center; margin: 0 2rem 0 0.6rem; width: max-content; cursor: pointer; visibility: hidden; }
.persons_sort em { line-height: 0; font-size: 24px; }
.persons_person { position: relative; float: left; margin: 0.3rem 0.5rem 0 0.5rem; width: 115px; border: 2px solid var(--color_main_lightest); border-radius: 7px; cursor: pointer; box-sizing: content-box; transition: border-color 0.3s; }
.persons_person img { display: block; width: 100%; background-color: #ccc; border-radius: 5px; }
.persons_person_add { width: 115px; height: 115px; border-radius: 5px; background-color: var(--color_main_lighter); line-height: 115px; font-size: 100px; font-weight: bold; color: #999; text-align: center; }
.persons_admin img { background-color: var(--color_bg1); }
.persons_self img { background-color: var(--color_bg4); }
.persons_name { margin-top: 2px; height: 40px; font-size: 18px; line-height: 18px; color: #666; text-shadow: 1px 1px 1px var(--color_main_lightest); overflow: hidden; }
.persons_teacher { position: absolute; top: 0; right: 0; padding: 0 0.3rem; line-height: 1.8rem; font-size: 1.4rem; font-weight: bold; color: var(--color_main_inv); background-color: var(--color_compl); border-radius: 0 5px 0 5px; }
.persons_labels { position: absolute; bottom: 47px; left: 0; width: 100%; line-height: 1rem; font-size: 0.8rem; }
.persons_labels div { margin-top: 2px; padding: 0 0.2rem; width: max-content; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; background-color: #fff; border-radius: 0 5px 5px 0; overflow: hidden;  opacity: 0.5; }
.persons_overlay { position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; background-color: rgb(38, 153, 251, 0.3); border-radius: 7px; border: 2px solid var(--color_compl); box-sizing: content-box; display: none; }
.persons_inactive { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; border-radius: 7px; opacity: 0.5; }
.persons_selected .persons_overlay { display: block; }
.persons_selected .persons_contextmenu { display: block; }
.persons_hover { border-color: var(--color_compl); }
.persons_selectable { cursor: grab; }
.persons_selected_count { display: none; text-align: right; cursor: pointer; transition: all 0.3s; }
.persons_selected_count em { line-height: 0; font-size: 1.4rem; }
.persons_drag_count { position: absolute; top: -20px; right: -15px; padding: 0 8px; background-color: #fff; border: 1px solid var(--color_main); border-radius: 5px; }
.persons_class_hover { background-color: var(--color_compl); }
.persons_classes { position: relative; }
#persons_class_edit { position: absolute; font-family: var(--font_text); font-size: 1.2rem; background-color: #fff; border: 1px solid #999; border-radius: 5px; outline: none; }

.persons_divider { display: grid; grid-template-columns: 1fr auto 9fr; column-gap: 1rem; align-items: center; margin: 1.5rem 0.6rem 0.5rem 0.6rem; color: var(--color_button); cursor: pointer; }
.persons_divider_bar { height: 2px; background-color: var(--color_button); }
.persons_divider_count { font-size: 1rem; color: #999; }

.persons_add_box { margin: 0.8rem 1.2rem 1.2rem 1.2rem }
#persons_add_names {  margin-top: 0.7rem; padding: 2px 5px; width: 100%; height: 230px; font-family: var(--font_main); font-size: 16px; line-height: 18px; background-color: var(--color_main_lightest); border: 1px solid #ccc; border-radius: 5px; outline: none; resize: none; }
.persons_add_info { margin-top: 0.5rem; font-size: 1.1rem; }
.persons_add_warning { font-size: 1rem; color: #999; }
.persons_add_button { width: 100%; height: 4rem; padding: 0 1.5rem; line-height: 4rem; text-align: center; background-color: var(--color_button); }
#persons_add_cla_id { width: 100%; height: 2.5rem; margin-top: 0.5rem; font-family: var(--font_main); font-size: 1.1rem; text-indent: 0.3rem; background-color: var(--color_main_lightest); border: 1px solid var(--color_main_lighter); border-radius: 7px; cursor: pointer; }
.persons_add_msg_link { margin: 10px 0px; font-size: 24px; color: var(--color_button); }
.persons_add_msg_info { font-size: 16px; color: #999; }

.persons_contextmenu { position: absolute; top: 2px; left: 3px; line-height: 0; font-size: 1.3rem; color: #666; cursor: pointer; z-index: 1; transition: all 0.3s; display: none; }
.persons_contextmenu_box { position: absolute; background-color: #fff; border: 1px solid #fff; border-radius: 7px; box-shadow: 2px 2px 5px #999; overflow: hidden; z-index: 1000; display: none; }
.persons_contextmenu_item { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.5rem; margin-bottom: 1px; padding: 0.5rem 1rem 0.5rem 0.7rem; width: 100%; color: var(--color_main_inv); background-color: var(--color_button); cursor: pointer; transition: all 0.3s; }
.persons_contextmenu_item span { line-height: 0; font-size: 1.4rem; }
.persons_contextmenu_item:last-child { margin-bottom: 0; }

.persons_acc_header { margin: 2px 0 0 0; padding: 0.7rem 0 0 0; font-size: 1.3rem; font-weight: bold; color: #666; border: 0 none; outline: none; cursor: pointer; transition: all 0.3s; }
.persons_acc_header_active { color: var(--color_title); background-color: transparent !important; }
.persons_acc_icon { position: relative; margin-right: 4px; }

@media (hover: hover) {
   .persons_class:hover { background-color: var(--color_compl); }
   .persons_class:hover .persons_class_context { opacity: 1; }
   .persons_class_context:hover { color: var(--color_compl) !important; }
   .persons_grid_resize:hover { background-color: #999; }
   .persons_search_del:hover { color: var(--color_compl); }
   .persons_person:hover { border-color: var(--color_compl); z-index: 1; }
   .persons_person:hover .persons_contextmenu { display: block; }
   .persons_person:hover .persons_name { overflow: visible; }
   .persons_selected_count:hover { color: var(--color_compl); }
   .persons_contextmenu:hover { color: var(--color_compl); }
   .persons_contextmenu_item:hover { background-color: var(--color_compl); }
   .persons_acc_header:hover { color: var(--color_compl); }
}

/* ---------- HUB MESSAGES ---------- */
:root {
   --color_msg_item_user_bg: #d9fdd3;
   --color_msg_item_user_text: #444;
   --color_msg_item_other_bg: #fff;
   --color_msg_item_other_text: #333;
}

.msg_container    { display: grid; grid-template-columns: 35% auto; margin: max(1rem, min(3vw, 1.5rem)) auto 0 auto; width: 100vw; max-width: 75rem; background-color: #f0ece6; background-image: url(/images/messages_bg.png); border-radius: var(--br); box-shadow: 2px 2px 15px #bbb; }
.msg_search_box   { position: relative; background-color: #fff; border-bottom: 1px solid #eee; border-top-left-radius: var(--br); }
.msg_search_icon  { position: absolute; top: 0.5rem; left: 1.2rem; height: 2.6rem; line-height: 2.6rem; font-size: 1.3rem; color: #777; }
.msg_close_icon   { position: absolute; top: 0.5rem; right: 1.2rem; height: 2.6rem; line-height: 2.6rem; font-size: 1.3rem; color: #777; cursor: pointer; display: none; }
.msg_search_input { width: calc(100% - 1rem); margin: 0.5rem; padding: 0 2rem 0 2.5rem; height: 2.6rem; line-height: 2.6rem; font-size: 1rem; background-color: #eee; border: 0px none; border-radius: var(--br); outline: none; }
.msg_user_box     { height: inherit; background-color: #fff; border-radius: var(--br) 0 0 var(--br); overflow-y: auto; transition: all 0.3s; }
.msg_search_category { margin: 1.4rem 0 0.3rem 0.9rem; color: #008069; }
.msg_user         { display: grid; grid-template-columns: auto 1fr; gap: 0 0.5rem; padding: 0.7rem; border-bottom: 1px solid #eee; cursor: pointer; transition: background-color 0.3s; }
.msg_user_img     { width: 3rem; height: 3rem; background-color: #ddd; border-radius: 50%; }
.msg_user_img_1   { background-color: var(--color_bg1); }
.msg_user_img_2   { background-color: #2283ad; }
.msg_user_img_todo { background-color: #36b9a0; }
.msg_user_info    { line-height: 1.5rem; }
.msg_unread       { font-weight: bold; }
.msg_user_line    { display: grid; grid-template-columns: 1fr auto; gap: 0 0.3rem; }
.msg_user_name    { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.msg_user_time    { font-size: 0.9rem; color: #999; }
.msg_user_msg     { font-size: 0.9rem; color: #666; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.msg_user_unread  { width: 1.3rem; height: 1.3rem; line-height: 1.3rem; font-size: 0.9rem; color: #fff; text-align: center; background-color: #2a5; border-radius: 50%; transition: all 0.3s; }
.msg_user:hover   { background-color: var(--color_compl); }
.msg_user_unread_big { transform: scale(2); }
.msg_user_a       { background-color: var(--color_compl); }

.msg_messages_container { display: grid; grid-template-rows: max-content 1fr max-content; height: inherit; }
.msg_names { position: sticky; top: 0; display: grid; grid-template-columns: max-content auto auto; margin: 1.3rem 1rem 0 1rem; z-index: 1; visibility: hidden; }
.msg_messages { position: relative; margin: 0 1rem 0.4rem 1rem; overflow-y: auto; scrollbar-width: thin; }
.msg_feedback { margin-bottom: 0.3rem; font-weight: bold; border-bottom: 1px solid #666; }
.msg_send_grid { display: none; grid-template-columns: 1fr max-content; gap: 0 0.2rem; padding: 0.7rem; background-color: #ddd; }
.msg_send_text { min-height: 1.3rem; max-height: 6.7rem; padding: 0.7rem; line-height: 1.3rem; font-size: 1.1rem; background-color: #fff; border: 0 px none; border-radius: var(--br); overflow-y: auto; outline: none; user-select: text; white-space: pre-wrap; }
.msg_send_button { align-self: center; width: 2.7rem; height: 2.7rem; line-height: 2.8rem; font-size: 1.5rem; color: var(--color_button); text-align: center; border-radius: var(--br); cursor: pointer; transition: 0.3s; }
.msg_send_button:hover { color: #fff; background-color: var(--color_button); }

.msg_spacer { height: 2rem; }
.msg_item_box { position: relative; max-width: 70%; margin-bottom: 10px; padding: 0.6rem 0.7rem; line-height: 1.2; font-size: 1rem; white-space: pre-wrap; overflow-wrap: break-word; border-radius: var(--br); transition: all 0.3s; }
.msg_name_user { justify-self: right; margin-right: 4px; padding: 0.2rem 0.8rem; width: max-content; color: #fff; background-color: #96c68e; border-radius: var(--br) var(--br) 0 var(--br); }
.msg_item_from_user { clear: both; float: right; margin-right: 28px; color: var(--color_msg_item_user_text); background-color: var(--color_msg_item_user_bg); border-top-right-radius: 0; box-shadow: 0 1px 1px #ddd; }
.msg_item_from_user::before { content: ""; position: absolute; top: -5.5px; right: -28px; width: 11px; height: 11px; background-color: #96c68e; border: 2px solid #eee; border-radius: 50%; }
.msg_item_from_user::after { content: ""; position: absolute; top: 0; right: -12px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 12px; border-color: transparent transparent transparent var(--color_msg_item_user_bg); }
.msg_item_line_user { position: absolute; right: 4px; width: 3px; height: 98%; background-color: #96c68e; }
.msg_name_other { position: relative; margin-left: 4px; padding: 0.2rem 0.8rem; width: max-content; color: #fff; background-color: var(--color_main_light); border-radius: var(--br) var(--br) var(--br) 0; }
.msg_back { display: none; }
.msg_name_dearchive { display: grid; grid-template-columns: auto 1fr; gap: 0 0.4rem; align-content: center; margin-left: 1rem; font-size: 1rem; color: #666; cursor: pointer; user-select: none; transition: all 0.3s; }
.msg_name_dearchive:hover { color: var(--color_button); }

.msg_item_from_other { clear: both; float: left; margin-left: 28px; color: var(--color_msg_item_other_text); background-color: var(--color_msg_item_other_bg); border-top-left-radius: 0; box-shadow: 0 1px 1px #ddd; }
.msg_item_from_other::before { content: ""; position: absolute; top: -5.5px; left: -28px; width: 11px; height: 11px; background-color: var(--color_main_light); border: 2px solid #eee; border-radius: 50%; }
.msg_item_from_other::after { content: ""; position: absolute; top: 0; left: -12px; width: 0; height: 0; border-style: solid; border-width: 0 12px 10px 0; border-color: transparent var(--color_msg_item_other_bg) transparent transparent; }
.msg_item_from_other:hover .msg_item_archive { color: var(--color_button); }
.msg_item_line_other { position: absolute; left: 4px; width: 3px; height: 98%; background-color: var(--color_main_light); }
.msg_item_time { float: right; position: relative; bottom: -6px; margin-left: 20px; color: #999; font-size: 0.8rem; }
.msg_item_time span { padding-left: 0.2rem; font-size: 1rem; color: #ccc; }
.msg_item_read { color: #53bdeb !important; }
.msg_item_date { margin: 5px 0 3px 0; font-size: 0.9rem; text-align: center; color: #333; }
.msg_item_archive { position: absolute; top: 0.4rem; right: -1.8rem; padding-left: 0.6rem; font-size: 1.2rem; color: #ccc; cursor: pointer; transition: color 0.3s; }

.msg_item_box_archived { background-color: var(--color_wrong_light); }
.msg_item_box_archived::before { background-color: var(--color_wrong_light); }
.msg_item_box_archived::after { border-color: transparent var(--color_wrong_light) transparent transparent; }

.msg_item_box_archived_hidden { padding: 0; height: 0; font-size: 0; color: transparent; white-space: nowrap; user-select: none; }
.msg_item_box_archived_hidden .msg_item_time { display: none; }
.msg_item_box_archived_hidden .msg_item_archive { display: none; }
.msg_item_box_archived_hidden::before { background-color: var(--color_wrong_light); }
.msg_item_box_archived_hidden::after { border-style: none; }



@media (max-width: 767px) {
   .msg_container { grid-template-columns: min-content 100vw; }
   .msg_user_box { width: 100vw; }
   .msg_back { display: block; position: absolute; top: 0; left: calc(-1rem - 3px); width: 2rem; height: 100%; padding: 3px 0; text-align: center; background-color: var(--color_main); border-radius: var(--br); cursor: pointer; }
   .msg_name_other { padding-left: 1.3rem; }
}

/* ---------- EXERCISE_DO ---------- */
.exercise_do_box     { position: relative; padding-top: max(1rem, min(3vw, 3rem)); }
.exercise_do_remarks { margin-bottom: max(1rem, min(3vw, 2rem)); text-align: center; }
.exercise_do_nrs     { position: relative; display: table; margin: 0px auto; }
.exercise_do_current { position: absolute; top: 0px; left: 0px; width: 60px; height: 60px; background-color: var(--color_compl); border-radius: 50%; z-index: 1; transition: all, 0.5s; }
.exercise_do_nr      { position: relative; float: left; margin: 5px; width: 50px; height: 50px; font-size: 22px; line-height: 50px; text-align: center; background: url(/images/exercise_current_0.svg); background-size: contain; cursor: pointer; z-index: 2; }
.exercise_done       { cursor: default; }

.exercise_do_item_box      { position: relative; margin: max(0.8rem, min(2vw, 1.25rem)) auto 70px auto; padding: 0; max-width: 53rem; }
.exercise_do_item_nr       { display: inline-block; position: relative; top: 5px; padding: 0px 15px 4px 15px; font-size: 18px; line-height: 26px; color: var(--color_main_inv); background-color: var(--color_main); border-radius: 7px 7px 0px 0px; z-index: 1; }
.exercise_do_item_nr span  { position: relative; margin-left: 5px; }
.exercise_do_item          { position: relative; padding: 1rem 1.25rem; width:100%; font-size: 1.2rem; background-color: var(--color_main_lighter); border: 2px solid var(--color_main); border-radius: 7px; z-index: 2; }
.exercise_do_item img      { border-radius: var(--br); cursor: zoom-in; }
.exercise_do_item .exercise_label_markers img { cursor: default; }
.exercise_do_item_title    { padding-bottom: 0.5rem; font-size: 1.3rem; line-height: 26px; color: var(--color_main); }
.exercise_do_item_subtitle { padding-bottom: 0.5rem; margin-left: max(0.8rem, min(2vw, 1.4rem)); }
.exercise_do_item_text     { position: relative; margin-left: max(0.8rem, min(2vw, 1.4rem)); white-space: pre-line; }
.exercise_do_item_tips     { float: left; margin-bottom: 2rem; }
.exercise_do_item_tip      { float: left; margin: 15px 10px 0px 0px; padding: 6px 20px 6px 20px; font-size: 20px; line-height: 26px; color: var(--color_main_lighter); background-color: var(--color_main_lightest); border-radius: 7px; transition: all, 0.3s; pointer-events: none; }
.exercise_do_item_tip_used { color: #fff; background-color: #c66; cursor: pointer; pointer-events: auto; }
.exercise_do_item_tip_new  { color: #fff; background-color: #4b4; cursor: pointer; pointer-events: auto; }
.exercise_do_item_button   { float: right; position: relative; margin-left: 1px; top: -5px; right: 0px; padding: 9px 20px 7px 20px; font-size: 20px; line-height: 28px; color: var(--color_main_inv); background-color: var(--color_button); border-radius: 0px 0px 7px 7px; z-index: 1; cursor: pointer; transition: all, 0.3s; }
.exercise_do_item_button:hover { background-color: var(--color_compl) !important; }
#exercise_later            { background-color: var(--color_main_light); }
.exercise_do_item_text .cp_interactive { margin: max(0.2rem, min(1vw, 0.6rem)) 0; }
.exercise_do_item_text .cp_interactive_text { background-color: var(--color_main_lightest); }
.exercise_do_item_link { margin: 1rem 0 0 0; line-height: 1.2; }
.exercise_do_item_link span { display: inline-block; font-size: 1rem; line-height: 1.2; }
.exercise_do_item_link input { padding: 10px 0; width: 100%; font-family: var(--font_main); font-size: 1.1rem; text-indent: 10px; border: 0px none; border-radius: 7px; -webkit-appearance: none; }
.exercise_do_item_link textarea { padding: 7px 10px; width: 100%; height: 200px; font-family: var(--font_main); font-size: 1.1rem; border: 1px solid #ccc; border-radius: 7px; resize: none; -webkit-appearance: none; }
.exercise_count_words { font-size: 1rem; color: #666; }
.exercise_do_item_box .button_close { position: absolute; right: 10px; top: 2px; width: 30px; height: 30px; font-size: 30px; line-height: 1; display: flex; justify-content: center; align-items: center; color: var(--color_main); border: none; background-color: transparent; z-index: 101; cursor: pointer; transition: color 0.3s; }
.exercise_do_item_box .button_close::before { content: "τ"; font-size: 1em; font-family: "icons"; }

.exercise_do_item input[type="checkbox"], .exercise_do_item input[type="radio"] { display: none; }
.exercise_do_item input[type="checkbox"] + label, .exercise_do_item input[type="radio"] + label { cursor: pointer; }
.exercise_do_item input[type="checkbox"] + label::before, .exercise_do_item input[type="radio"] + label::before { position: relative; display: inline-block; content: ""; margin-right: 5px; top: 2px; width: 15px; height: 15px; background-color: #fff; border: 1px solid #666; border-radius: 4px; }
.exercise_do_item input[type="checkbox"]:checked + label::before, .exercise_do_item input[type="radio"]:checked + label::before { box-shadow: inset 0px 0px 0px 2px #fff; background-color: #6c6; }

.exercise_do_item .ql-toolbar   { background-color: #eee; border-radius: var(--br) var(--br) 0 0; }
.exercise_do_item .ql-formats   { margin-right: 0.5rem !important; padding-right: 0.5rem; border-right: 1px solid #bbb; }
.exercise_do_item .ql-formats button, .exercise_do_item .ql-formats .ql-picker-label { border-radius: var(--br); transition: all 0.3s; }
.exercise_do_item .ql-formats button:hover, .exercise_do_item .ql-formats .ql-picker-label:hover { background-color: var(--color_compl); }
.exercise_do_item .ql-active    { background-color: var(--color_compl) !important; }
.exercise_do_item .ql-container { font-size: 1rem; border-radius: 0 0 var(--br) var(--br); }
.exercise_do_item .ql-editor    { min-height: 12rem; background-color: #fff; border-radius: 0 0 var(--br) var(--br); }
.exercise_do_item #ql_counter   { font-size: 1rem; text-align: right; }

.exercise_do_solution_title   { float: right; margin-right: 10px; font-size: 20px; line-height: 40px; color: var(--color_main); }
.exercise_do_solution_postfix { float: right; margin-left: 10px; font-size: 20px; line-height: 40px; }
.exercise_do_solution_prefix  { float: right; margin-right: 10px; font-size: 20px; line-height: 40px; }
.exercise_do_solution         { float: right; width: 120px; height: 40px; font-family: var(--font_main); font-size: 22px; text-align: center; background-color: #fff; border: 1px solid var(--color_main_light); border-radius: 7px; outline: none; }

.exercise_do_check_bg    { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #0000007F; z-index: 9; display: none; }
.exercise_do_check_box   { margin: auto; padding: max(1rem, min(3vw, 2rem)); width: 90%; max-width: 550px; height: max-content; max-height: 90vh; background-color: #fff; border: 4px solid var(--color_main); border-radius: 7px; box-shadow: 0 15px 25px var(--color_text); z-index: 10; overflow-y: auto ; animation: 0.3s zoom_in forwards; display: none; }
.exercise_do_check_table { display: table; width: 100%; }
.exercise_do_check_pic   { display: table-cell; padding-right: max(0.7rem, min(3vw, 2rem)); width: max(6.5rem, min(9vw, 10rem)); vertical-align: top; }
.exercise_do_check_pic img { width: 100%; }
.exercise_do_check_text  { display: table-cell; font-size: 20px; vertical-align: top; }
.exercise_do_check_text_title { margin: 7px 0px 5px 0px; color: var(--color_main); font-size: max(1.7rem, min(4vw, 2rem)); font-weight: bold; line-height: max(2rem, min(4vw, 2.5rem)); }
.exercise_do_check_next  { float: right; margin-top: 20px; padding: 8px 25px; font-size: 20px; color: #fff; background-color: var(--color_main); border-radius: 7px; cursor: pointer; transition: all, 0.3s; }
.exercise_do_check_next:hover { background-color: var(--color_compl); }
.exercise_do_check_again { float: right; margin-top: max(0.8rem, min(2vw, 1.4rem)); padding: 8px max(1rem, min(3vw, 1.5rem)); font-size: 20px; line-height: 30px; color: #fff; background-color: var(--color_main); border-radius: 7px; cursor: pointer; transition: all, 0.3s; }
.exercise_do_check_again:hover { background-color: var(--color_compl); }
.exercise_do_check_ok { float: right; margin-top: 20px; padding: 8px 25px; font-size: 20px; color: #fff; background-color: var(--color_main); border-radius: 7px; cursor: pointer; transition: all, 0.3s; }
.exercise_do_check_ok:hover { background-color: var(--color_compl); }
.exercise_do_finish { float: right; margin-top: 20px; padding: 8px 25px; font-size: 20px; color: #fff; background-color: var(--color_main); border-radius: 7px; cursor: pointer; transition: all, 0.3s; }
.exercise_do_finish:hover { background-color: var(--color_compl); }

.exercise_do_tip_title { margin-top: 1rem; font-size: 1.3rem; font-weight: bold; color: var(--color_main); }
.exercise_do_tip_title:first-child { margin-top: 0px; }
.exercise_do_tip_text  { font-size: 1.2rem; white-space: pre-line; }

.exercise_do_submit { margin-bottom: 0.5rem; width: max-content; background-color: var(--color_main_light); }

.exercise_do_result_box  { margin-top: 5px; width: 100%; height: 40px; background-color: #f99; border-radius: 7px; }
.exercise_do_result_bar  { width: 100%; height: 40px; background-color: #6c6; border-radius: 7px; }
.exercise_do_result_text { padding-left: 15px; line-height: 40px; font-size: 20px; }

.exercise_do_gap { display: inline-block; margin: 3px 0; padding: 0 10px; width: 50px; line-height: 28px; font-size: 18px; background-color: var(--color_main_lightest); border: 1px solid var(--color_main_light); border-radius: 5px; cursor: pointer; transition: background 0.3s; }
.exercise_do_gap:hover { background-color: var(--color_main_lighter); }
.exercise_do_gap_set { width: auto; background-color: var(--color_main_lighter); }
.exercise_do_gap_words { position: sticky; margin-top: 15px; bottom: 0; padding: 5px; background-color: var(--color_main_lightest); border-radius: 7px; }
.exercise_do_gap_word { float: left; margin: 5px; padding: 0 10px; line-height: 24px; font-size: 18px; color: var(--color_main_inv); background-color: var(--color_main_light); border: 1px solid var(--color_main); border-radius: 5px; cursor: grab; user-select: none; transition: background 0.3s; }
.exercise_do_gap_word:hover { background-color: var(--color_compl); }
.exercise_do_gap_hover { background-color: var(--color_main_light); }
.exercise_do_gap_ok { background-color: #9d9; }
.exercise_do_gap_nok { background-color: #d99; }

#exercise_practice { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #fff; overflow-y: scroll; z-index: 4001; display: none; }
#exercise_practice .exercise_do_item_box { margin: 0 auto; margin-top: 1rem; align-self: center; padding: 0 10px; }

@media (max-width: 767px) {
   .exercise_do_item_box { width: 98%; }
}


/* ---------- EXERCISE_STATS ---------- */
.exercise_stats      { text-align: center; }
.exercise_stats_info { margin-top: max(20px, min(5vw, 40px)); font-size: 18px; line-height: 24px; color: #666; text-align: center; }
.exercise_stats_date { font-size: 22px; line-height: 28px; text-align: center; }
.exercise_stats_time { font-size: 22px; line-height: 28px; text-align: center; }
.exercise_stats_box  { margin: 30px auto max(40px, min(7vw, 60px)) auto; width: max(300px, min(85vw, 500px)); height: 40px; background-color: var(--color_main_lighter); border-radius: 7px; }
.exercise_stats_bar  { height: 40px; text-align: left; background-color: var(--color_main_light); border-radius: 7px; }
.exercise_stats_text { padding-left: 15px; line-height: 40px; font-size: 20px; color: var(--color_main_inv); }

.ae_stats_class       { position: relative; top: -10px; margin-bottom: 0.5rem; font-size: 18px; color: #666; }
.ae_stats_class span  { font-size: 24px; font-weight: bold; color: var(--color_main); }
.ae_stats_class_reset { font-size: 22px !important; cursor: pointer; }
.ae_stats_table       { display: grid; gap: 0.4rem 0.2rem; margin: 0 auto; width: max-content; }
.ae_stats_col         { padding: 0.5rem 0; background-color: var(--color_main_lighter); border-radius: var(--br); }
.ae_stats_hide        { text-align: center; background-color: var(--color_main_lighter); border-radius: var(--br); cursor: pointer; transition: all 0.3s; }
.ae_stats_hide:hover  { background-color: var(--color_compl); }
.ae_stats_nr          { font-size: 16px; writing-mode: vertical-lr; cursor: help; transition: all, 0.3s; }
.ae_stats_nr:hover    { color: var(--color_compl); }
.ae_stats_check       { margin: 0.1rem 0.4rem 0 0; height: 40px; line-height: 47px; font-size: 30px; color: #ccc; }
.ae_stats_check_completed { color: #6c6; }
.ae_stats_score       { padding: 5px 3px 0 3px; height: 45px; font-size: 12px; line-height: 1; text-align: center; border: 1px solid #999; border-radius: 7px; }
.ae_stats_score span  { font-size: 20px; }
.ae_stats_name_box    { height: 45px; background-color: var(--color_main_lightest); border: 1px solid #999; border-radius: 7px; overflow: hidden; }
.ae_stats_name_box_completed { background-color: var(--color_main_lighter) }
.ae_stats_name        { width: 0px; height: 45px; font-size: 20px; line-height: 45px; text-shadow: 0px 0px 5px #fff; text-indent: 10px; background-color: var(--color_main_lighter); border-radius: 0px 5px 5px 0px; white-space: nowrap; }
.ae_stats_name_completed { background-color: var(--color_main_light); }
.ae_stats_item_top    { width: 20px; height: 15px; background-color: #ccc; border: 1px solid #999; border-radius: 5px 5px 0px 0px; }
.ae_stats_item_middle { width: 20px; height: 15px; background-color: #ccc; border: 1px solid #999; border-width: 0px 1px 0px 1px ; }
.ae_stats_item_bottom { width: 20px; height: 15px; background-color: #ccc; border: 1px solid #999; border-radius: 0px 0px 5px 5px; }
.ae_stats_duration    { width: 80px; height: 45px; font-size: 16px; line-height: 45px; text-align: center; border: 1px solid #999; border-radius: 7px; white-space: nowrap; overflow: hidden; }
.ae_stats_details     { margin-left: 5px; font-size: 26px; color: #666; cursor: pointer; transition: all 0.3s; }
.ae_stats_details.icon-delete-s { font-size: 22px; }
.ae_stats_details:hover { color: var(--color_compl); }

.ae_details_grid { display: grid; grid-template-columns: auto auto; gap: 0 2rem; margin: auto; width: max-content; }
.ae_details_grid h1 { grid-column-start: span 2; margin-bottom: 0.5rem; color: var(--color_main); }
.ae_details_back { display: block; margin: auto; padding: 1rem 1.4rem; background-color: var(--color_button); }
.ae_details_duration { position: absolute; right: 0; top: 0; padding: 2px 5px; font-size: 14px; background-color: #fff; border: 1px solid var(--color_main); border-top: 0px none; border-right: 0px none; border-bottom-left-radius: 5px; }
.ae_details_tips { position: absolute; right: 0; bottom: 0; }
.ae_details_tip { width: 23px; height: 20px; border: 1px solid var(--color_main); border-right: 0px none; }
.ae_details_answer { margin: 20px 10px 10px max(0.8rem, min(2vw, 1.4rem)); }
.ae_details_answer_title { color: var(--color_main); }
.ae_details_answer_text { padding: 10px; white-space: pre-line; background-color: #fff; border-radius: 7px; }
.ae_details_answer_text a { color: var(--color_main); }
.ae_details_answer_text a em { margin-right: 5px; }
.ae_details_finished { margin-top: 1rem; font-size: 18px; color: #666; }

.ae_stats_tip_used    { background-color: #f99; }
.ae_stats_notip_used  { background-color: #6c6; }
.ae_stats_undeftip_used { background-color: #ccc; }
.ae_stats_feedback_needed { line-height: 15px; font-size: 14px; text-align: center; background-color: #fff; user-select: none; }
.ae_stats_button      { margin: 10px 0 50px 0; text-align: center; }

.ae_stats_exercise {	width: 2.5rem; line-height: 1.1rem; font-size: 16px; writing-mode: vertical-rl; }
.ae_stats_hidden { color: #aaa; background-color: transparent !important; }
.ae_stats_rating { line-height: 2.5rem; text-align: center; background-color: #D6DCD7; border-radius: var(--br); cursor: pointer; }


/* ---------- HUB TABLE ---------- */
.hub_table { width: 100%; font-size: 1.1rem; border: 1px solid #ddd; border-collapse: separate; border-spacing: 1px; border-radius: 5px; box-shadow: 0 5px 25px #bbb; }
.hub_table caption { margin-bottom: 20px; font-size: 30px; font-weight: bold; color: var(--color_main); }
.hub_table th { padding: 9px 15px; color: var(--color_system_lightest); background-color: var(--color_system); }
.hub_table th.sortable { padding-right: 8px; white-space: nowrap; cursor: pointer; transition: all 0.3s; }
.hub_table th.sortable span { display: inline-block; color: var(--color_system_light); transform-origin: 50% 52%; transition: transform 0.3s; }
.hub_table th.sortable:hover { color: var(--color_system); background-color: var(--color_compl); }
.hub_table th.sorted { color: var(--color_system); background-color: var(--color_compl); }
.hub_table th:first-child { border-radius: 4px 0 0 0; }
.hub_table th:last-child { border-radius: 0 4px 0 0; }
.hub_table tbody tr td { transition: all 0.5s; }
.hub_table tbody tr:nth-child(odd) td { background-color: var(--color_main_inv); }
.hub_table tbody tr:nth-child(even) td { background-color: var(--color_system_lightest); }
.hub_table tbody tr:hover td { background-color: var(--color_system_midlight); }
.hub_table tbody tr:last-child td:first-child { border-radius: 0 0 0 4px; }
.hub_table tbody tr:last-child td:last-child { border-radius: 0 0 4px 0; }
.hub_table tbody td { padding: 7px 15px; }
.hub_table tbody td a { color: var(--color_button); text-decoration: none; transition: all 0.5s; }
.hub_table tbody td a:hover { text-decoration: underline; }
.hub_table tfoot { color: var(--color_main_inv); background-color: var(--color_system); text-align: center; }
.hub_table tfoot td { padding: 5px 10px; }
.hub_table tfoot td:first-child { border-radius: 0 0 0 4px; }
.hub_table tfoot td:last-child { border-radius: 0 0 4px 0; }
.hub_table_small { width: 1px; text-align: center; }
.hub_table_icon  { line-height: 0; }
.hub_table_click { background-color: var(--color_system_lighter) !important; cursor: pointer; }
.hub_table_click:hover { background-color: var(--color_compl) !important; transition: all 0.5s; }
.hub_table_clickable { cursor: pointer; }


/* ---------- SIMPLY STRONG ---------- */
.ss_wurm { position: absolute; right: 1rem; bottom: 4rem; width: 44px; height: 70px; cursor: pointer; }

#ss_header { position: absolute; top: -7rem; left: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%; height: max(3.7rem, min(7vw, 7rem)); padding: 0 1rem; color: #fff; font-weight: bold; z-index: 1; transition: top 1s; }
#ss_type { font-size: 13px; }
#ss_title { font-size: max(1.4rem, min(3.6vw, 2.5rem)); line-height: 1; }
#ss_title span { display: inline-block; margin-left: 1.5rem; font-size: 18px; }
.ss_close { width: 50px; height: 50px; line-height: 50px; font-size: 30px; font-weight: normal; text-align: center; background-color: var(--color_text); border: 2px solid #fff; border-radius: 50%; cursor: pointer; transition: all 0.3s; }
.ss_close:hover { background-color: var(--color_compl); }
#ss_video_box { position: relative; display: grid; width: 100%; height: 100%; background-color: #000; overflow: hidden; }
#ss_video { width: 100%; height: 100%; }
#ss_video iframe { width: 100%; height: 100%; }
#ss_overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: 0.5; display: none; }
#ss_buttons_box { position: absolute; top: 0; left: 0; display: grid; grid-auto-flow: column; grid-auto-columns: auto; column-gap: 4vw; width: calc(100% - 100px - 3rem); height: 100%; place-content: center; pointer-events: none; }
.ss_buttons_button { position: relative; width: 11vw; max-width: 198px; min-width: 100px; cursor: pointer; transition: transform 0.3s; display: none; pointer-events: all; }
.ss_buttons_button svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ss_buttons_button img { position: relative; width: 100%; }
.ss_buttons_button:hover { transform: scale(1.1); }
.ss_buttons_button:hover .ss_button_bg { fill: var(--color_compl) !important; }
.ss_button_bg { transition: all 0.3s; }

.ss_preview_container { position: absolute; display: grid; align-content: space-evenly; top: max(3.7rem, min(7vw, 7rem)); right: -300px; height: calc(100% - max(3.7rem, min(7vw, 7rem)) - 10px); transition: right 1s; }
.ss_preview_box { width: 15vw; max-width: 256px; cursor: pointer; transition: transform 0.3s; }
.ss_preview_box:hover { transform: scale(1.1); }
.ss_preview_top { display: grid; grid-template-columns: auto auto; align-items: end; line-height: 1.15; text-shadow: 0 0 25px var(--color_text); }
.ss_preview_desc { font-size: max(1rem, min(1.5vw, 1.5rem)); color: var(--ss_color_type); }
.ss_preview_type { font-size: max(0.8rem, min(1.3vw, 1.25rem)); color: #fff; text-align: right; }
.ss_preview_type span { color: var(--ss_color_type); }
.ss_preview_bottom { position: relative; background-color: var(--ss_color_type); border-style: solid; border-width: max(2px, min(0.5vw, 10px)); border-bottom-width: max(1px, min(0.4vw, 8px)); border-color: var(--ss_color_type); border-radius: 7px; }
.ss_preview_bottom img { display: block; width: 100%; }
.ss_preview_more { position: absolute; top: 0px; left: -60px; line-height: 158px; font-size: 70px; color: var(--ss_color_type); display: none; }
.ss_preview_info { display: grid; grid-template-columns: auto auto; column-gap: 10px; padding-top: max(3px, min(0.4vw, 8px)); line-height: 1.2; font-size: max(12px, min(1.2vw, 16px)); color: #fff; background-color: var(--ss_color_type); }
.ss_preview_title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.ss_preview_time { text-align: right; }

.ss_info_button { display: grid; grid-template-columns: auto auto; padding: 0.5rem; line-height: 1.2; font-size: max(0.8rem, min(1.5vw, 1.2rem)); color: var(--color_main_inv); background-color: var(--color_button); border-radius: 7px; z-index: 1; cursor: pointer; transition: all 0.3s; }
.ss_info_button em { padding-right: 7px; font-size: max(2rem, min(3.89vw, 3rem)); line-height: 0; }
.ss_info_button:hover { background-color: var(--color_main); transform: scale(1.1); }
.ss_info_container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 1; overflow-y: auto; display: none; }
.ss_info_container_title { margin: 2vw 0 max(0.7rem, min(1.9vw, 2rem)) 0; font-family: var(--font_headline); font-size: max(1.6rem, min(4vw, 2.5rem)); font-weight: 700; line-height: max(1.6rem + 1vw, min(4vw, 2.5rem)); color: var(--color_main); text-align: center; }
.ss_info_main { display: grid; grid-template-columns: auto 1fr; column-gap: 2rem; row-gap: 2rem; margin: 0 max(1rem, min(5vw, 8rem)); }
.ss_info_left { font-size: 16px; line-height: 20px; text-align: center; }
.ss_info_left img { width: 130px; border: 1px solid #ccc; border-radius: 15px; }
.ss_info_grid { display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 0.7rem; row-gap: 0.2rem; align-items: center; margin: 0.5rem 0 2rem 0; }
.ss_info_grid img { width: 36px; }
.ss_info_type { font-size: 1.5rem; }


/* -------------------------------------------------- */
/*  MOBILE (SMALL DISPLAYS)                           */
/* -------------------------------------------------- */
@media (max-width: 1000px) {
   .toc_container { grid-template-columns: max(140px, min(13vw, 170px)) max-content 0; }
   .toc_box       { width: 550px; }
}

@media (max-width: 767px) {
   .mobile_invisible {display: none;}
   .mobile_no_gap {column-gap: 0; gap: 0}
   
   .login_box     { width: 100vw; height: 800px; }
   .login_welcome { margin: 15px 0 5px 0; font-size: 22px; }
   .login_info    { font-size: 20px; }
   .login_info2   { font-size: 20px; }
   .login_schools div { font-size: 20px; }
   .login_input_name  { height: 50px; }
   .login_button      { height: 50px; line-height: 50px; }

   .cp_main      { margin-top: calc(max(0.5rem, min(2vw, 2rem)) + 60px); }
   .cp_article   { margin: 0; }
   .cp_intro     { background-color: transparent; border: 0 none; border-radius: 0; }
   .cp_toc ul li { padding: 0.2rem 0; }
   .cp_section   { border-radius: 0; }
   .cp_fig       { margin: 0 0 4vw 0; }
   .cp_fig_multi .cp_fig { margin-right: 0; }

   .cp_aside        { display: none; }
   .cp_aside_mobile { display: block; }

   .cp_page_navi_pm { visibility: hidden; width: 1rem; }
   .cp_tour_button { display: none; }

   .license_dialog_window { width: 90%; font-size: 1.5rem; }

   .sb_box { display: none; }

   .exercise_do_current { width: 52px; height: 52px; }
   .exercise_do_nr      { width: 42px; height: 42px; font-size: 20px; line-height: 42px; }
   .exercise_do_check_again {font-size: 19px; }
   .exercise_do_tip_text { line-height: 1.2; font-size: 1.1rem; }

   .toc_container { grid-template-columns: auto; }
   .toc_level_box { margin: 0 0 1rem 0; }
   .toc_box       { width: 95vw; }

   .ss_preview_desc { display: none; }
}



/* -------------------------------------------------- */
/*  PRINT                                             */
/* -------------------------------------------------- */
@media print {
   body { background-color: transparent; }
   .cp_header { display: none; }
   .sb_box { display: none; }
   .cp_page_navi { display: none; }
   .cp_aside { display: none; }
   .cp_aside_mobile { display: none; }
   .site_info_short { display: none !important; }
   .page_info_short { display: none; }
   #toc_arrow { display: none; }
   .cp_main { margin: 0; }
   .cp_article { margin: 0; }
   .cp_intro { background-color: transparent; border-color: #666; }
   .cp_section { background-color: transparent; border-color: #666; }
   .cp_fig { width: max(20rem, min(50vw, 30rem)); }
   cp_label::before { display: none; }
}


/* -------------------------------------------------- */
/*  GEO MAP                                           */
/* -------------------------------------------------- */
.geo_map_box   { position: fixed; margin: 0; padding: 0; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-color: var(--color_bg); z-index: 3004; display: none; }
/* .geo_map_table { display: flex; flex-direction: column; width: 100%; height: 100%; } */
.geo_map_top   { padding: 10px 20px; }
.geo_map_title { font-size: 28px; font-weight: bold; color: var(--color_main); }
.geo_map_desc  { font-size: 18px; }
.geo_map_body  { display: grid; grid-template-columns: 1fr auto; grid-gap: 10px; height: calc(100vh - 120px); padding: 0px 20px; }
.geo_map_right { overflow: auto; max-width: 250px; max-height: 100%; }
.geo_map_left  { position: relative; min-height: 200px; height: 100%; background-color: var(--color_system_lighter); }
.geo_map       { float: none; width: 100%; height: 100%; border: 1px solid #ccc; border-radius: 7px; }
.geo_map_ask   { position: absolute; top: 0; right: 0; border: 0; width: 100%; height: 100%; text-align: center; }
.geo_map_info  { padding: 3vh; font-size: 1.2rem; color: var(--color_main); }
.geo_map_yes2  { margin-top: 10px; background: #666; }
.geo_map_hint  { padding: 3vh; font-size: 1rem; color: #999; }
.geo_map_hint span { color: var(--color_main); }
.geo_map_load  { display: none; }
.geo_map_close { position: absolute; padding: 5px 10px; top: 20px; right: 20px; font-size: 28px; color: #fff; background-color: #f99; border: none; border-radius: 5px; box-shadow: 1px 1px 3px #777; cursor: pointer; transition: all 0.3s; }

.geo_map_location     { position: relative; min-width: 200px; margin-bottom: 10px; padding: 10px 58px 10px 10px; font-size: 18px; color: var(--color_main_inv); background-color: var(--color_main); border-radius: 5px; box-shadow: 1px 1px 3px #777; overflow: hidden; cursor: pointer; transition: all, 0.4s; }
.geo_map_location div { background-color: var(--color_main_light); }
.geo_map_location_a { color: var(--color_main); background-color: var(--color_hover_bg); }
.pm .geo_map_location_a { color: var(--color_main_light); }
.geo_map_location_disabled { background-color: #666; }
.geo_map_zoom  { position: absolute; top: 0px; right: 0px; padding: 10px 15px; height: 100%; color: var(--color_main_inv); background-color: var(--color_main); transition: all, 0.4s; }

.geo_map_show { cursor: pointer; }
.geo_map_location:hover  { color: var(--color_main); background-color: var(--color_hover_bg); }
.geo_map_location:hover div { background-color: var(--color_compl); }
.geo_map_zoom:hover { background-color: var(--color_compl); }
.geo_map_close:hover { background-color: var(--color_compl); }

.geo_loc         { color: var(--color_main_dark); border-bottom: 1px dashed var(--color_main); cursor: pointer; white-space: nowrap; }
.geo_loc::before { position: relative; display: inline-block; top: -1px; font-family: "icons"; font-size: 16px; font-weight: normal; content: "\41a"; line-height: 1; }
.geo_loc:hover   { border-bottom: 2px solid var(--color_main_dark); }

@media (orientation: portrait) {
   .geo_map_body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
   .geo_map_right { grid-row: 1; max-width: none; max-height: 200px; }
   .geo_map_left { min-height: 400px; }
}

/* -------------------------------------------------- */
/*  GEO PLANET FACT BOX + 3D VIEW                     */
/* -------------------------------------------------- */
.geo_fb_box    { font-size: 16px; color: var(--color_text); display: none; }
.geo_fb_title  { position: relative; margin: 1px; height: 50px; background-color: #dccbad; border-radius: 10px 10px 0px 0px; overflow: hidden; }
.geo_fb_pic    { float: left; position: relative; top: -30px; left: -40px; width: 110px !important; height: 110px !important; }
.geo_fb_planet { float: left; margin-left: -30px; font-size: 28px; line-height: 52px; color: #604927; }
.geo_fb_earth  { float: right; position: relative; right: 3px; top: 28px; font-size: 14px; line-height: 21px; color: #604927; }
.geo_fb_table  { display: table; width: 100%; }
.geo_fb_row    { display: table-row; height: 32px; line-height: 32px; }
.geo_fb_field  { padding: 0px 7px; background: linear-gradient(to bottom, #fff 0%, #eee 100%); border: 1px solid; border-color: #fff transparent #ddd #fff; }
.geo_fb_label  { display: table-cell; color: #666; }
.geo_fb_value  { display: table-cell; text-align: center; }
.geo_fb_factor { display: table-cell; text-align: center; }

.geo_planet_3d { width: 480px; height: 400px; border: 0px none; border-radius: 7px; }
.geo_planeet_3d_caption { width: 480px; }

@media (max-width: 767px) {
   .geo_planet_3d { width: 100%; max-width: 480px; height: 95vw; max-height: 400px; }
   .geo_planeet_3d_caption { margin: 0; width: 100%; max-width: 480px; }
}


/* -------------------------------------------------- */
/* Screen Reader Only                                 */
/* -------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(0 0 0 0); border: 0; }


/* -------------------------------------------------- */
/* SchuBu UI Elements                                 */
/* -------------------------------------------------- */
.draggable { box-shadow: 0 0 10px rgba(0,0,0,0.3); cursor: grab; }
.droppable { box-shadow: inset 0 0 10px rgba(0,0,0,0.3); }
.droppable--hover { background-color: var(--color_main_t70) !important; }

.pointer    { cursor: pointer; }
.no_pointer { pointer-events: none; }
.drag       { cursor: grab; }
.dragging   { cursor: grabbing; }

.ia_icon { position: absolute; width: 7em; height: 7em; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.ia_icon svg { display: block; width: 100%; height: auto; filter: invert(0%); transition: transform 0.3s ease, opacity 0.3s ease; background: transparent !important; border: none !important; }

.blend_mode_multiply { mix-blend-mode: multiply; }
.blend_mode_overlay { mix-blend-mode: overlay; }
.blend_mode_hard_light { mix-blend-mode: hard-light; }

/* SchuBu+ logo */
.schubu_plus_logo { display: inline-block; margin: 0 0.1ch; height: 0.75em; }

.table_row  { display: table-row; }
.table_cell { display: table-cell; vertical-align: top; }

/* ----- SVG grid ----- */
/* .svg_cartesian text   { transform: scaleY(-1); }  */
.svg_grid_coordinates { position: absolute; top: 0; left: 0; padding: 0px 3px; line-height: 1.2; font-size: 14px; background-color: #fff; border: 1px solid #666; border-radius: 3px; }
.svg_grid_helper_line { position: absolute; bottom: -10px; left: 0; padding: 0px 3px; line-height: 1.2; font-size: 14px; background-color: #fff; border: 1px solid #666; border-radius: 3px; }

/* ----- schubu check box ----- */
.sb_checkbox input[type="checkbox"] { display: none; }
.sb_checkbox input[type="checkbox"] + label { cursor: pointer; transition: all 0.3s; }
.sb_checkbox input[type="checkbox"] + label:hover { color: var(--color_compl); }
.sb_checkbox input[type="checkbox"] + label:hover::before { border-color: var(--color_compl); }
.sb_checkbox input[type="checkbox"] + label::before { position: relative; display: inline-block; content: ""; margin-right: 5px; top: 2px; width: 15px; height: 15px; background-color: #fff; border: 1px solid #aaa; border-radius: 4px; transition: all 0.3s; }
.sb_checkbox input[type="checkbox"]:checked + label::before { box-shadow: inset 0px 0px 0px 2px #fff; background-color: #6c6; }

/* ----- schubu audio player ----- */
.sap_progress_grid   { display: grid; height: 100%; border: 1px solid #bbb; border-radius: 5px; overflow: hidden; }
.sap_progress_marker { position: absolute; top: -8px; width: 14px; height: 40px; background-color: #ff9646; border-radius: 5px; transition: all 0.3s; }
.sap_progress_part_0 { background-color: #bbb; }
.sap_progress_part_1 { background-color: #ddd; }
.sap_progress_part_hover { cursor: pointer; transition: all 0.3s; }
.sap_progress_part_hover:hover { background-color: #69f; }
.sap_play_indicator { display: grid; place-items: center; padding: 5px; width: 100%; height: 100%; line-height: 0; }

/* Audio Player and Audio Snippet */
audio-player { max-width: max-content; display: grid; grid-template-columns: auto auto; margin: calc(var(--content_spacing) / 2) 0; place-items: center; }
.audio_player { position: relative; display: grid; grid-template-columns: 3em auto; min-width: 11em; min-height: 3.5em; }
.audio_player .hidden { opacity: 0; pointer-events: none; }
.audio_player_button { all: unset; display: grid; place-items: center; font-size: 1.1em; color: var(--color_main_inv); background-color: var(--color_main_light); border-radius: var(--br) 0 0 var(--br); transition: all 0.3s; cursor: pointer; }
.audio_player_button:hover { background-color: var(--color_compl); }
.audio_player_title { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; line-height: 1.2em; font-size: 1em; font-weight: normal; background-color: var(--color_main_lightest); border: 1px solid var(--color_main_light); border-left: 0px none; border-radius: 0 var(--br) var(--br) 0; -webkit-user-select: none; user-select: none; color: black; }
.audio_player_title .audio_audio { display: inline-block; line-height: 1em; padding: 0 1em; font-size: 0.8em; }
.audio_player_title strong { padding: 0 0.8em; }
.audio_player_time { position: absolute; top: 0.3em; right: 1em; font-size: 0.8em; }
.audio_player_progress { position: relative; width: 100%; height: 0.8em; bottom: 0; left: 0; background-color: transparent; cursor: pointer; }
.audio_player_progress .strip { position: absolute; height: 0.4em; width: var(--audio_progress); opacity: var(--opacity); bottom: 0; left: 0; background-color: var(--color_main_light); transition: width 0.1s ease; cursor: pointer; }
.audio_player_progress .virtual_strip { position: absolute; height: 0.4em; width: var(--virtual_progress); opacity: var(--opacity); bottom: 0; left: 0; background-color: var(--color_main_t70); /*transition: width 0.1s ease;*/ cursor: pointer; }
.audio_player_progress .virtual_strip::before { content: attr(data-progress); display: block; position: absolute; left: 100%; transform: translate(-50%, -100%); font-size: 0.6em; padding: 0.2em 0.4em; border-radius: var(--br); background: white; pointer-events: none; }
.audio_player_progress .audio_stop { display: block; position: absolute; bottom: 0; left: var(--audio_progress); width: 0.2em; height: 1em; transform: translate(-50%, 0%); font-size: 0.6em; background: var(--color_main); pointer-events: none; }
.audio_player_reload { margin-left: .4em; font-size: 1.5em; cursor: pointer; display: none; color: var(--color_main_light); }

.audio_snippet_button { font-size: 1em; padding: 0.42em 0.83em; display: grid; grid-template-rows: auto 1fr; border: 0.16em solid var(--color_main_lightest); background-color: var(--color_main_lightest); border-radius: 0.6em; transition: border 0.3s ease; color: var(--color_text); cursor: pointer; font-weight: bold; margin-bottom: var(--content_spacing); }
.audio_snippet_button:hover { border-color: var(--color_main_light); }
.audio_snippet_button:focus-visible { outline-color: var(--color_main_light); outline-offset: var(--br); }
.audio_snippet_button .audio_snippet_button_icon { font-size: 1.67em; transition: color 0.3s ease; }
.audio_snippet_button .audio_snippet_button_icon.playing { color: var(--color_compl); }
.audio_snippet_button span { font-size: 0.83em; }

/* Responsive Table */
.table { width: 100%; max-width: 100%; background-color: transparent; border-collapse: separate; border-spacing: 0.05em; border-radius: var(--br) var(--br) 0 0; /*border: 1px solid #ddd; box-shadow: 0 5px 25px #bbb;*/ display: block; overflow-x: auto; min-height: 0.01%; -webkit-overflow-scrolling: touch; font-size: 0.9em; }
.cp .table { margin-bottom: var(--content_spacing); border-spacing: 2px; }
.table caption { margin-bottom: 1em; font-size: 1.5em; font-weight: bold; color: var(--color_main); }
.table th { padding: 0.5em 0.75em; color: var(--color_main_dark); background-color: var(--color_main_lightest); border-color: transparent; border-bottom: var(--color_main) 2px solid; text-transform: uppercase; font-weight: bold;  font-size: 0.9em; letter-spacing: 0.03em; }
.table th:first-child { border-radius: var(--br) 0 0 0; }
.table th:last-child { border-radius: 0 var(--br) 0 0; }
.table tbody tr td { transition: background-color ease 0.5s; }
.table tbody tr:nth-child(odd) td { background-color: var(--color_main_lightest_t45); }
.table tbody tr:nth-child(even) td { background-color: var(--color_main_lightest); }
.table tbody tr:hover td { background-color: var(--color_main_lighter); }
.table tbody tr:last-child td:first-child { border-radius: 0 0 0 var(--br); }
.table tbody tr:last-child td:last-child { border-radius: 0 0 var(--br) 0; }
.table tbody td { padding: 0.5em 0.75em; }
.table.centered tr { text-align: center; }
.table.row_header td:first-child { text-align: left; color: var(--color_main); background-color: var(--color_main_lightest); border-color: transparent; border-right: var(--color_main) 2px solid; text-transform: uppercase; font-weight: bold;  font-size: 0.9em; letter-spacing: 0.03em; }
@media (max-width: 767px) {
   .table { margin-bottom: 0.75em; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; }
}

/* Range slider */
.slider { -webkit-appearance: none; width: 100%; background: var(--color_main_t70); border: 0.05em solid black; height: 0.4em; border-radius: var(--br); font-size: 1em; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; }
.slider:focus-visible { outline-color: var(--color_main_light); outline-offset: var(--br); }
.slider::-ms-track { width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; border: 0.05em solid #000000; height: 2em; width: 1.2em; border-radius: var(--br); background-image: url("/images/various/ui/slider_handle_streifen.svg"); background-color: var(--color_main); cursor: pointer; margin-top: -0; box-shadow: 0.05em 0.05em 0.15em #00000033, 0 0 0.05em #0d0d0d; }
.slider::-moz-range-thumb { box-shadow: 0.05em 0.05em 0.15em #00000033, 0 0 0.05em #0d0d0d; border: 0.05em solid #000000; height: 2em; width: 1.5em; margin-top: -0; border-radius: var(--br); background-image: url("/images/various/ui/slider_handle_streifen.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; background-color: var(--color_main); cursor: pointer; }
.slider::-ms-thumb { box-shadow: 0.05em 0.05em 0.15em #00000033, 0 0 0.05em #0d0d0d; border: 0.05em solid #000000; height: 2em; width: 1.5em; border-radius: var(--br); background-image: url("/images/various/ui/slider_handle_streifen.svg"); background-color: var(--color_main); cursor: pointer; }

/* -------------------------------------------------- */
/* Content Page Elements                              */
/* -------------------------------------------------- */
.cp_text_link { text-decoration: none; color: var(--color_main_darker); /*border-bottom: 1px solid var(--color_text);*/ }
.cp_text_link:hover, .cp_text_link:focus { border-bottom: 2px solid var(--color_main_darker); }
.cp_text_link::before { display: inline-block; position: relative; width: 25px; top: 2px; font-family: "icons"; font-size: 22px; color: var(--color_main_darker); font-weight: normal; content: "\02c6"; line-height: 1; text-decoration: none; }

/* hidden answer */
.cp_hidden_answer { position: relative; max-width: var(--content_width); margin-bottom: max(0.8rem, min(2vw, 1.6rem)); border-radius: 7px; background-color: white; padding: 0.5rem; transition: filter 0.3s ease; }
.cp_hidden_answer > *:last-child { margin-bottom: 0; }
.cp_hidden_answer.hidden:after { position: absolute; top: -0.1rem; left: 0; content: attr(data-hidden-text); display: flex; justify-content: center; align-items: center; width: calc(100% - 0.8rem); height: calc(100% + 0.2rem); border-radius: 7px; background-color: rgba(255,255,255,0.95); background-color: var(--color_main_lightest); opacity: 0.95; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: 0.5s ease; cursor: pointer; font-weight: bold; border: solid var(--color_main); border-width: 0.1rem 0.4rem; }
.cp_hidden_answer.hidden:hover:after { background-color: rgba(255,255,255,0.9); background-color: var(--color_main_lightest); opacity: 0.90; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }


/* ANIMATIONS */
.shake_animation { animation: schubu_shake 0.5s; animation-iteration-count: 1; }

@keyframes schubu_shake {
   0% { transform: translate(1px, 1px) rotate(0deg); }
   10% { transform: translate(-1px, -2px) rotate(-1deg); }
   20% { transform: translate(-3px, 0px) rotate(1deg); }
   30% { transform: translate(3px, 2px) rotate(0deg); }
   40% { transform: translate(1px, -1px) rotate(1deg); }
   50% { transform: translate(-1px, 2px) rotate(-1deg); }
   60% { transform: translate(-3px, 1px) rotate(0deg); }
   70% { transform: translate(3px, 1px) rotate(-1deg); }
   80% { transform: translate(-1px, -1px) rotate(1deg); }
   90% { transform: translate(1px, 2px) rotate(0deg); }
   100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes zoom_in {
   0%   { opacity: 0; transform: scale(0.3); }
   100% { opacity: 1; transform: scale(1);   }
}


/* DESKTOP - MOBILE */
.mobile_only       { display: none; }
.mobile_grid_only  { display: none; }
.desktop_only      { display: block; }
.desktop_grid_only { display: grid; }

@media (max-width: 767px) {
   .mobile_only       { display: block; }
   .mobile_grid_only  { display: grid; }
   .desktop_only      { display: none; }
   .desktop_grid_only { display: none; }
}