@charset "UTF-8";
/* CSS for E-EC Index 01 */


/* VARIABLES */
:root {
    --num-columns: 24.0; /* …24 */
    
    --scrollbar-width: 4px;
    
    --menu-width: 6.35rem;
    --menu-counter-height: 4.2rem;
    --menu-button-height: calc((100vh - var(--menu-width) - var(--menu-counter-height)) / 9.0);
    
    --height-divider: 4.65rem;
    
    /*--grid-width: 100vw;*/
    --grid-width: calc(var(--vw, 1vw) * 100 - var(--menu-width));
    /*--grid-width: calc(100vmax - var(--menu-width));*/
        
    --max-aspect: 0.818; /* fixed value from data */
    
    --min-film-length: 1.0;
    /* Film lengths will be mapped to this max value */
    /* Steps in the data: 55.0 (only 11 are longer), 90.0, 130.5 */
    --max-film-length: 55.0;
    /* Min width of entries when displayed as duration */
    /* > Maybe make same as small grid size */
    --min-film-length-entry-width: 65px;
    
    --gap-grid: 1px;
    
    --color-bg: #000;
    --color-grid-bg: #333;
    
    --color-scrollbar: #DDD;
    
    --color-thumb-bg: #AAA;
    --color-outline: #333;
    --color-outline-selected: #FFF;
    
    --color-entry-header-bg: #CCC;
    --color-entry-header-text: #000;
    
    --font-size-entry-header: 0.52rem; /* 0.55 / used in default small */
    --height-subject-marker: 4px; /* changes with zoom */
    
    --color-entry-missing-bg: #000;
    --color-entry-missing-header-bg: #222;
    --color-entry-missing-text: #888;
    
    --color-menu-default: #666;
    --color-menu-active: #DDD;
    --color-menu-inactive: #333;
    --color-menu-hover: #AAA;
    --color-menu-open-bg: #666;
    --color-menu-filter-active: #DDD; /*var(--color-logo-text);*/
    
    --color-menu-zoom-bg: #444;
    --color-menu-zoom: #000;
    --color-menu-zoom-active: #DDD;

    --color-menu-counter: #DDD;
    
    --font-size-menu-default: 0.875rem;
    
    --color-subject-bio: rgba(5,146,5,1.00);
    --color-subject-ethno: rgba(250,162,0,1.00);
    --color-subject-tech: rgba(47,151,230,1.00);
    
    --color-subject-bio-dim: rgba(5,146,5,0.6);
    --color-subject-ethno-dim: rgba(250,162,0,0.6);
    --color-subject-tech-dim: rgba(47,151,230,0.6);
    
    --color-subject-psychologie: rgba(170,95,212,1.00);
    --color-subject-medizin: rgba(226,110,95,1.00);
    --color-subject-physik: rgba(72,200,170,1.00);
    --color-subject-chemie: rgba(178,226,93,1.00);
    --color-subject-religion: rgba(247,222,96,1.00);
    --color-subject-geo: rgba(174,135,66,1.00);
    
    --color-logo-text: #dec13b;
    --color-logo-text-dim: #a7902e;
    --color-logo-bg: #0000FF;
    
    --preview-width: 35vw;
    --details-overlay-padding: 1.5rem;
    --details-overlay-height: calc(var(--max-aspect) * var(--preview-width) + 2 * var(--details-overlay-padding) + 2rem);
    
    --color-details-default: #DDD;
    --color-details-dim: #858585;
}

/* MAIN */
html {
    padding: 0;
    margin: 0;
    width: 100%;
    /*font-size: 100%;*/
    font-size: 16px;
    scroll-behavior: smooth;
    overscroll-behavior: none;
    background-color: var(--color-bg);
    
    overflow-y: scroll;
    
    /*scrollbar-color: #FF0 #00F; /* Works in Chrome */
}

body {
    margin: 0;
    padding: 0;
    font-family: "InterVariable", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-optical-sizing: auto;
    font-feature-settings: "ss03", "cv06", "cv11";
    
    background-color: var(--color-bg);
    background-color: var(--color-grid-bg);
    line-height: 1.0;
    
    /* Changes when zoom data attributes are updated */
    /*--column-width: calc(var(--grid-width) / var(--num-columns));*/
    --column-width: calc((var(--grid-width) - (var(--num-columns) + 1) * var(--gap-grid)) / var(--num-columns));
    --video-height: calc(var(--max-aspect) * var(--column-width));
}
/* Prevent text selection and tap highlights */
body.tablet {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    
    -webkit-tap-highlight-color: transparent;
}
/* Force scrollbars before data loaded? */
body {
    height: 200vh;
    min-height: 200vh;
}
body.loaded {
    height: auto;
    min-height: 100vh;
}
/* Scroll bar styling */
/**::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar);
}
*::-webkit-scrollbar-track {
    background-color: var(--color-bg);
}
*::-webkit-scrollbar {
    width: var(--scrollbar-width);
}*/
body::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar);
}
body::-webkit-scrollbar-track {
    background-color: var(--color-bg);
}
body::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

body[data-zoom="0"] {
    --num-columns: 8.0;
    --font-size-entry-header: 0.8rem;
    --gap-grid: 2px;
    --height-subject-marker: 6px;
}
body[data-zoom="1"] {
    --num-columns: 12.0;
    --font-size-entry-header: 0.65rem;
}
body[data-zoom="2"] {
    --num-columns: 18.0;
}
/* Duration view */
body[data-zoom="3"] {
    --num-columns: 28.0;
    --gap-grid: 2px;
}

/*a:hover {
    text-decoration: none;
}*/

.grid-wrapper {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.entry-grid {
    width: var(--grid-width);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 0;
    flex-shrink: 0;
    gap: var(--gap-grid);
    background-color: var(--color-grid-bg);
    padding-bottom: var(--details-overlay-height);
    /* to see border around selected entries */
    padding-left: var(--gap-grid);
    padding-top: var(--gap-grid);
}

/****************************************/
/* ENTRIES */
.entry {
    --length-factor: 1;
    --order-duration: 9999;
    --order-year: 9999;
    --order-section: 3;
    
    width: var(--column-width);
    outline: 0px solid var(--color-outline);
    flex-grow: 0;
    flex-shrink: 0;
    cursor: pointer;
}

/* Duration view */
body[data-zoom="3"] .entry-grid {
    padding-right: var(--gap-grid);
}
body[data-zoom="3"] .entry {
    /*width: calc(var(--length-factor) * var(--column-width));*/
    
    /* Map max-film-length to width of grid, then film length proportionally to that, limit to min-entry-width and max the width of the grid */
    width: min(max(var(--min-film-length-entry-width), calc(var(--length-factor) * ((var(--grid-width) - 2 * var(--gap-grid)) / var(--max-film-length)))), calc(var(--grid-width) - 2 * var(--gap-grid)));
}

.entry.selected {
    outline: var(--gap-grid) solid var(--color-outline-selected);
    z-index: 99; /* below hover */
    box-shadow: 0 0 1rem #000;
}
.entry:hover {
    
}

/* ENTRY HEADER */
.entry-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: var(--font-size-entry-header);
    background-color: var(--color-entry-header-bg);
    color: var(--color-entry-header-text);
    font-feature-settings: "tnum";
}
.entry-header .subjects {
    width: 100%;
    flex-shrink: 0;
    height: var(--height-subject-marker);
    display: block;
    background-color: var(--color-outline);
}
.entry.section-bio .entry-header .subjects {
    background-color: var(--color-subject-bio);
}
.entry.section-tech .entry-header .subjects {
    background-color: var(--color-subject-tech);
}
.entry.section-ethno .entry-header .subjects {
    background-color: var(--color-subject-ethno);
}

.entry-header .entry-label {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 0.4em;
}

.entry-header .ec-label {
    white-space: nowrap;
    font-weight: 400;
    padding: 0.4em 0;
}

.entry-header .entry-label .entry-icons {
    display: flex;
    align-items: center;
    gap: 0em;
}
.entry-header .entry-label .entry-icons div {
    height: 1.4em;
    width: 1.4em;
    background-color: #000;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.entry-header .icon-online {
    mask-image: url("icons/tabler--eye.svg");
}
.entry-header .icon-cc {
    mask-image: url("icons/tabler--badge-cc-filled.svg");
}
.entry-header .icon-copyright {
    mask-image: url("icons/tabler--lock-filled.svg");
}

/* ENTRY CONTENT */
.entry-content {
    width: 100%;
    height: var(--video-height);
    background-color: var(--color-thumb-bg);
}
.entry-content .thumbnail {
    width: 100%;
    height: 100%;
    background-repeat: repeat-x;
    background-size: contain;
    background-position: top left;
}

/* Placeholder */
/*body:not(.loaded) .entry-content .thumbnail {
    background-image: url("media/ec-title.jpg");
}*/

/* ENTRIES NOT IN TIB */
.entry.not-in-tib .entry-header {
    background-color: var(--color-entry-missing-header-bg);
    color: var(--color-entry-missing-text);
}
.entry.not-in-tib .entry-content {
    background-color: var(--color-entry-missing-bg);
}

/* FADENSPIEL ENTRIES */
.entry.fadenspiele {
    /*outline: var(--gap-grid) solid var(--color-subject-ethno);*/    
}
.entry.fadenspiele .entry-header {
    background-color: var(--color-subject-ethno);
}
/*.entry.fadenspiele .entry-header .subjects {
    border-bottom: 0px solid rgba(0,0,0,0.3);
}*/
.entry.fadenspiele .entry-content {
    border: 3px solid var(--color-subject-ethno);
    outline-offset: -3px;
    border-top: none;
    background-color: var(--color-subject-ethno);
}

/****************************************/
/* MENU */
.menu {
    width: var(--menu-width);
    background-color: var(--color-bg);
    font-size: var(--font-size-menu-default);
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    color: #FFF;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    
    /*padding-right: 1px; /* gap to scrollbar */
}

.menu .ec-logo {
    width: 100%;
    height: var(--menu-width);
    padding: 1rem 1.2rem;
    padding: 0;
    background-color: var(--color-logo-bg);
    color: var(--color-logo-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1;
    flex-grow: 0;
    flex-shrink: 0;
    cursor: pointer;
}
.menu .ec-logo .initials {
    /*width: 4.5rem;
    height: 3rem;
    border-radius: 100%;*/
    padding: 0.5em;
    border-radius: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.125em solid currentColor;
    font-size: 1rem;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.menu .ec-logo .label {
    margin-top: 0.5rem;
    font-size: var(--font-size-menu-default);
    font-weight: 400;
    letter-spacing: 0em;
}

.menu .button {
    height: var(--menu-button-height);
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-menu-default);
    cursor: pointer;
    border-bottom: 1px solid var(--color-menu-default);
}
.menu .button .icon {
    width: 2.0rem;
    height: 2.0rem;
    background-color: currentColor;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
}
.menu .button.no-border {
    /*border-bottom: none;*/
    border-bottom-color: transparent;
}
.menu .button:hover {
    color: var(--color-menu-hover);
}

.menu .button-sort {
    border-bottom-color: var(--color-bg);
}

.menu .button-zoom {
    background-color: var(--color-menu-zoom-bg);
    color: var(--color-menu-zoom);
    border-bottom-color: var(--color-bg);
}
.menu .button-zoom:hover {
    color: var(--color-menu-zoom-active);
}
body[data-zoom="0"] .button-zoom[data-zoom="0"] {
    color: var(--color-menu-zoom-active);
}
body[data-zoom="1"] .button-zoom[data-zoom="1"] {
    color: var(--color-menu-zoom-active);
}
body[data-zoom="2"] .button-zoom[data-zoom="2"] {
    color: var(--color-menu-zoom-active);
}
body[data-zoom="3"] .button-zoom[data-zoom="3"] {
    color: var(--color-menu-zoom-active);
}

body.show-info .menu .button-info {
    background-color: var(--color-menu-open-bg);
    color: var(--color-menu-active);
}
body.show-submenu-sort .menu .button-sort {
    background-color: var(--color-menu-open-bg);
    color: var(--color-bg);
}
body.show-submenu-filter .menu .button-filter {
    background-color: var(--color-menu-open-bg);
    color: var(--color-bg);
}
body.show-submenu-search .menu .button-search {
    background-color: var(--color-menu-open-bg);
    color: var(--color-bg);
}

/*Highlight sort button when a custom sort is active */
body:not([data-sort="e-number"]) .menu .button-sort {
    color: var(--color-menu-filter-active);
    /*outline: 4px solid var(--color-logo-text);
    outline-offset: -4px;*/
}

/*Highlight filter button when any filter-class on body */
body[class*="filter-"] .menu .button-filter {
    color: var(--color-menu-filter-active);
    /*outline: 4px solid var(--color-menu-active);
    outline-offset: -4px;*/
}

/*Highlight search button when a search is active */
body.search .menu .button-search {
    color: var(--color-menu-filter-active);
    /*outline: 4px solid var(--color-menu-active);
    outline-offset: -4px;*/
}

/*Button icons*/
.menu .button-info .icon {
    mask-image: url("icons/mingcute--question-fill.svg");
}
.menu .button-reset .icon {
    mask-image: url("icons/fluent--arrow-counterclockwise-16-filled.svg");
}
.menu .button-sort .icon {
    mask-image: url("icons/tabler--arrows-sort.svg");
}
.menu .button-filter .icon {
    /*mask-image: url("icons/mage--filter.svg");
    mask-image: url("icons/tabler--eye-off.svg");*/
    mask-image: url("icons/tabler--filter.svg");
}
.menu .button-search .icon {
    mask-image: url("icons/search.svg");
}
.menu .button-zoom[data-zoom="0"] .icon {
    mask-image: url("icons/f7--square-grid-2x2-fill.svg");
}
.menu .button-zoom[data-zoom="1"] .icon {
    mask-image: url("icons/f7--square-grid-3x2-fill.svg");
}
.menu .button-zoom[data-zoom="2"] .icon {
    mask-image: url("icons/f7--square-grid-4x3-fill.svg");
}
.menu .button-zoom[data-zoom="3"] .icon {
    mask-image: url("icons/material-symbols-light--dashboard-2-rounded.svg");
}

/*.menu .spacer {
    flex-grow: 1;
    border-bottom: 1px solid var(--color-menu-default);
}*/
.menu .counter {
    /*font-feature-settings: "tnum";*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-menu-default);
    /*padding: 1rem 0;*/
    line-height: 1;
    flex-grow: 1;
    flex-shrink: 0;
    color: var(--color-menu-counter);
    font-feature-settings: "tnum";
    /*height: var(--menu-counter-height);*/
}
.menu .counter .nums {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
}
.menu .counter .nums > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4em;
}
.menu .counter .nums > div:before {
    content: "";
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    width: 1.2em;
    height: 1.2em;
    display: block;
    background-color: currentColor;
}
.menu .counter .num-total {
    color: var(--color-menu-default);
}
.menu .counter .num-current:before {
    mask-image: url("icons/tabler--eye.svg");
    mask-image: url("icons/tabler--filter.svg");
}
.menu .counter .num-total:before {
    mask-image: url("icons/tabler--hash.svg");
}

/****************************************/
/* SUBMENUS */
.submenu {
    position: fixed;
    /*right: calc(var(--menu-width) + 1px);*/
    right: var(--menu-width);
    background-color: var(--color-bg);
    border-right: 1px solid var(--color-grid-bg);
    border-top: 1px solid var(--color-menu-open-bg);
    box-shadow: 0rem 0 2rem #000;
    color: var(--color-menu-default);
    z-index: 900;
    display: none;
}
.submenu > div {
    height: var(--menu-button-height);
}

/* SEARCH SUBMENU */
.submenu-search {
    top: calc(var(--menu-width) + 1 * var(--menu-button-height) - 1px);
    width: calc(4 * var(--menu-width));
    /*height: calc(3 * var(--menu-button-height) + 0px);*/
    flex-direction: column;
    font-size: var(--font-size-menu-default);
    font-size: 1rem;
}
body.show-submenu-search .submenu-search {
    display: flex;
}

.submenu-search .button {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--color-menu-default);
    cursor: pointer;
}
.submenu-search .button:last-child {
    border-bottom: none;
}
.submenu-search .button:not(.button-header)::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    margin-bottom: 0.1em;
}
.submenu-search .button-header {
    background-color: var(--color-menu-open-bg);
    border-bottom-color: var(--color-menu-open-bg);
    color: var(--color-bg);
    font-size: 1.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 1.35rem;
    gap: 0.5rem;
}
.submenu-search .button-header div:first-child {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.submenu-search .button-header div:first-child::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    margin-bottom: 0.1em;
    width: 1.75rem;
    height: 1.75rem;
    mask-image: url("icons/tabler--chevron-right.svg");
}

.submenu-search .button-header div:last-child {
    font-size: var(--font-size-menu-default);
    padding-left: 2.35rem;
    color: #333;
    line-height: 1.2;
}

.submenu-search .search-field {
    border-bottom: 1px solid var(--color-menu-default);
    padding: 0em;
    display: flex;
}

.submenu-search #search-field {
    border: none;
    padding: 1em 1.35rem;;
    background-color: #222;
    flex-grow: 1;
    color: var(--color-menu-active);
    font-size: 120%;
    
    &:focus {
        outline: none;
        box-shadow: none;
    }
    
    &::-moz-selection {
        background-color: var(--color-bg);
    }
    &::selection {
        background-color: var(--color-bg);
    }
}

.submenu-search .button-clear {
    border-bottom: none;
    color: var(--color-menu-inactive);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.submenu-search .button-clear:hover {
    color: var(--color-menu-inactive) !important;
}
.submenu-search .button-clear::before {
    mask-image: url("icons/fluent--arrow-counterclockwise-16-filled.svg");
}
body.search .submenu-search .button-clear {
    color: var(--color-menu-default);
}
body.search .submenu-search .button-clear:hover {
    color: var(--color-menu-hover) !important;
}

/* SORT SUBMENU */
.submenu-sort {
    top: calc(var(--menu-width) + 3 * var(--menu-button-height) - 1px);
    width: calc(4 * var(--menu-width));
    /*height: calc(5 * var(--menu-button-height) + 0px);*/
    flex-direction: column;
    font-size: var(--font-size-menu-default);
    font-size: 1rem;
}
body.show-submenu-sort .submenu-sort {
    display: flex;
}

.submenu .button:not(.button-header):hover {
    color: var(--color-menu-hover);
}

.submenu-sort .button {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--color-menu-default);
    cursor: pointer;
}
.submenu-sort .button:last-child {
    border-bottom: none;
}
.submenu-sort .button::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    margin-bottom: 0.1em;
}
.submenu-sort .button-header {
    background-color: var(--color-menu-open-bg);
    border-bottom-color: var(--color-bg);
    color: var(--color-bg);
    font-size: 1.5rem;
    gap: 0.6rem;
    padding-left: 1.35rem;
}
.submenu-sort .button-header::before {
    width: 1.75rem;
    height: 1.75rem;
}

/* Icons */
.submenu .button-header::before {
    mask-image: url("icons/tabler--chevron-right.svg");
}

.submenu-sort .button[data-sort="e-number"]::before {
    mask-image: url("icons/tabler--hash.svg");
}
.submenu-sort .button[data-sort="section"]::before {
    mask-image: url("icons/tabler--tag.svg");
}
.submenu-sort .button[data-sort="duration"]::before {
    mask-image: url("icons/tabler--clock.svg");
}
.submenu-sort .button[data-sort="year"]::before {
    mask-image: url("icons/tabler--calendar-month.svg");
}

/* Highlight sort button when active */
body[data-sort="e-number"] .submenu-sort .button[data-sort="e-number"] {
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}
body[data-sort="section"] .submenu-sort .button[data-sort="section"] {
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}
body[data-sort="duration"] .submenu-sort .button[data-sort="duration"] {
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}
body[data-sort="year"] .submenu-sort .button[data-sort="year"] {
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}

/* FILTER SUBMENU */
.submenu-filter {
    top: calc(var(--menu-width) + 2 * var(--menu-button-height) - 1px);
    width: calc(4 * var(--menu-width));
    /*height: calc(6 * var(--menu-button-height) - 2px);*/
    flex-direction: column;
    font-size: var(--font-size-menu-default);
}
body.show-submenu-filter .submenu-filter {
    display: flex;
}

.submenu-filter > div {
    /*flex-grow: 1;
    flex-basis: 0;*/
    flex-shrink: 0;
}

.submenu-filter .button {
    border-bottom: 1px solid var(--color-menu-default);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.submenu-filter .button-header {
    background-color: var(--color-menu-open-bg);
    border-bottom-color: var(--color-menu-open-bg);
    color: var(--color-bg);
    font-size: 1.5rem;
    padding: 0 1.5rem;
    gap: 0.6rem;
    padding-left: 1.35rem;
}
.submenu-filter .button-header::before {
    content: "";
    width: 1.75rem;
    height: 1.75rem;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    margin-bottom: 0.1em;
}

.submenu-filter .button-group {
    display: flex;
}

.submenu-filter .button-group .button {
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-right: 1px solid var(--color-menu-default);
    line-height: 1.2;
}
.submenu-filter .button-group .button:last-child {
    border-right: none;
}
.submenu-filter .button-group-section {
    border-top: 1px solid var(--color-bg);
}
.submenu-filter .button-group-section .button {
    border-top: 6px solid #FFF;
    padding: 0 0.5em;
}
.submenu-filter .button[data-class="filter-section-bio"] {
    border-top-color: var(--color-subject-bio-dim);
}
.submenu-filter .button[data-class="filter-section-tech"] {
    border-top-color: var(--color-subject-tech-dim);
}
.submenu-filter .button[data-class="filter-section-ethno"] {
    border-top-color: var(--color-subject-ethno-dim);
}

.submenu-filter .button-group.split .button {
    flex-direction: row;
    padding: 0 0.5em 0 1.35em;
    text-align: left;
    justify-content: flex-start;
    gap: 1em;
}
.submenu-filter .button-group.split .button::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    margin-bottom: 0em;
    flex-shrink: 0;
}

.submenu-filter .button.wide {
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.submenu-filter .button.wide::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    margin-bottom: 0.1em;
}

.submenu-filter .button-clear {
    border-bottom: none;
    color: var(--color-menu-inactive);
}
.submenu-filter .button-clear:hover {
    color: var(--color-menu-inactive) !important;
}

/* Icons */
.submenu-filter .button[data-class="filter-cc-license"]::before {
    mask-image: url("icons/tabler--badge-cc-filled.svg");
}
.submenu-filter .button[data-class="filter-copyright"]::before {
    mask-image: url("icons/tabler--lock-filled.svg");
}
.submenu-filter .button[data-class="filter-is-online"]::before {
    mask-image: url("icons/tabler--eye.svg");
}
.submenu-filter .button[data-class="filter-not-online"]::before {
    mask-image: url("icons/tabler--eye-off.svg");
}
.submenu-filter .button[data-class="filter-has-thumbnail"]::before {
    mask-image: url("icons/tabler--photo.svg");
}
.submenu-filter .button[data-class="filter-no-thumbnail"]::before {
    mask-image: url("icons/tabler--photo-off.svg");
}
.submenu-filter .button[data-class="filter-fadenspiele"]::before {
    mask-image: url("icons/tabler--topology-full.svg");
}
.submenu-filter .button-clear::before {
    mask-image: url("icons/fluent--arrow-counterclockwise-16-filled.svg");
}

/* Filter Active States */
body.filter-section-bio .submenu-filter .button[data-class="filter-section-bio"] {
    border-top-color: var(--color-subject-bio);
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}
body.filter-section-tech .submenu-filter .button[data-class="filter-section-tech"] {
    border-top-color: var(--color-subject-tech);
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}
body.filter-section-ethno .submenu-filter .button[data-class="filter-section-ethno"] {
    border-top-color: var(--color-subject-ethno);
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}
body.filter-fadenspiele .submenu-filter .button[data-class="filter-fadenspiele"] {
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}
body.filter-cc-license .submenu-filter .button[data-class="filter-cc-license"] {
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}
body.filter-copyright .submenu-filter .button[data-class="filter-copyright"] {
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}
body.filter-is-online .submenu-filter .button[data-class="filter-is-online"] {
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}
body.filter-not-online .submenu-filter .button[data-class="filter-not-online"] {
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}
body.filter-has-thumbnail .submenu-filter .button[data-class="filter-has-thumbnail"] {
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}
body.filter-no-thumbnail .submenu-filter .button[data-class="filter-no-thumbnail"] {
    background-color: var(--color-menu-filter-active);
    color: var(--color-bg);
}
body[class*="filter-"] .submenu-filter .button-clear {
    /*color: var(--color-menu-filter-active);*/
    color: var(--color-menu-default);
}
body[class*="filter-"] .submenu-filter .button-clear:hover {
    color: var(--color-menu-hover) !important;
}

/****************************************/
/* DETAILS OVERLAY */
.details {
    position: fixed;
    bottom: 0;
    left: 0;
    right: var(--menu-width);
    color: #DDD;
    padding-top: var(--details-overlay-padding);
    z-index: 999;
    display: none;
    min-height: var(--details-overlay-height);
    align-items: flex-end;
    background: linear-gradient(to top, #000 10%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0));
    border-top: 0px solid red;
    
    --gap-icons: 0.5rem;
    --size-icons: 1.2em;
    
    pointer-events: none;
}
body.show-details .details {
    display: flex;
}
.details .column {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35rem;
    
    /* Only click on column contents should register */
    pointer-events: auto;
    cursor: pointer;
}

/* INFO COLUMN */
.details .column-info {
    flex-grow: 1;
    padding-right: 3rem;
    padding-left: var(--details-overlay-padding);
    padding-bottom: var(--details-overlay-padding);
}
.details .label-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 1rem;
}
.details .label-row > div {
    padding: 0.25em 0.5em;
    border-radius: 0.2em;
    background-color: #DDD;
    color: #000;
}
.details .e-number {
    font-feature-settings: "tnum";
}
.details .section-label {
    display: none;
}
.details .section-label.bio {
    background-color: var(--color-subject-bio);
}
.details .section-label.tech {
    background-color: var(--color-subject-tech);
}
.details .section-label.ethno {
    background-color: var(--color-subject-ethno);
}
.details.section-bio .section-label.bio {
    display: block;
}
.details.section-tech .section-label.tech {
    display: block;
}
.details.section-ethno .section-label.ethno {
    display: block;
}

.details .title {
    font-size: 1.25rem;
    line-height: 1.3;
}
.details .title-alt {
    color: var(--color-details-dim);
}
.details .title:empty {
    display: none;
}

.details .authors {
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--color-details-dim);
    margin-top: 0.25rem;
    display: flex;
    gap: var(--gap-icons);
}
.details .authors:empty {
    display: none;
}
.details .authors::before {
    content: "";
    width: var(--size-icons);
    height: var(--size-icons);
    background-color: var(--color-details-dim);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-image: url("icons/tabler--users.svg");
    flex-shrink: 0;
}

.details .dates-row {
    display: flex;
    gap: 2rem;
    font-size: 0.9rem;
    margin-top: 0.25rem;
    font-feature-settings: "tnum";
}
.details .dates-row > div {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.details .dates-row .label {
    color: var(--color-details-dim);
    display: flex;
    align-items: center;
    gap: var(--gap-icons);
}
.details .dates-row .label::before {
    content: "";
    width: var(--size-icons);
    height: var(--size-icons);
    background-color: var(--color-details-dim);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}
.details .dates-row .duration .label::before {
    mask-image: url("icons/tabler--clock.svg");
}
.details .dates-row .produced .label::before {
    mask-image: url("icons/tabler--calendar-month.svg");
}
.details .dates-row .published .label::before {
    mask-image: url("icons/tabler--calendar-month.svg");
}
.details .dates-row .data:empty::before {
    content: "—";
}

.details .meta-row {
    display: flex;
    gap: 2rem;
    align-items: center;
    font-size: 0.9rem;
    white-space: nowrap;
    margin-top: 0.25rem;
    color: var(--color-details-dim);
}
.details .meta-row > div {
    align-items: center;
    gap: var(--gap-icons);
    display: none;
}
.details .meta-row > div::before {
    content: "";
    width: var(--size-icons);
    height: var(--size-icons);
    background-color: var(--color-details-dim);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}
.details .meta-row .no-license {
    color: var(--color-details-dim);
}
.details .meta-row .no-license::before {
    mask-image: url("icons/tabler--license.svg");
}
.details .meta-row .cc-license::before {
    mask-image: url("icons/tabler--badge-cc-filled.svg");
}
.details .meta-row .copyright::before {
    mask-image: url("icons/tabler--lock-filled.svg");
}
.details .meta-row .is-online::before {
    mask-image: url("icons/tabler--eye.svg");
}
.details .meta-row .not-online::before {
    mask-image: url("icons/tabler--eye-off.svg");
}

.details .meta-row .no-license {
    display: flex;
}
.details.has-cc-license .meta-row .no-license,
.details.has-copyright .meta-row .no-license {
    display: none;
}
.details.has-cc-license .meta-row .cc-license {
    display: flex;
}
.details.has-copyright .meta-row .copyright {
    display: flex;
}
.details.is-online .meta-row .is-online {
    display: flex;
}
.details.not-online .meta-row .not-online {
    display: flex;
}

/* PREVIEW COLUMN */
.details .column-preview {
    flex-grow: 0;
    flex-shrink: 0;
    width: var(--preview-width);
    gap: 0.5rem;
    align-items: flex-end;
    padding-right: var(--details-overlay-padding);
    padding-bottom: var(--details-overlay-padding);
}
.details .column-preview .thumbnail {
    width: 100%;
    height: auto;
    border: 1px solid var(--color-outline-selected);
    background-color: var(--color-thumb-bg);
    box-shadow: 0 0 2.5rem #000;
    background-position: top left;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: auto;
    color: #666;
    display: grid;
    justify-content: center;
    align-content: center;
    font-size: 0.8rem;
    
    justify-content: stretch;
    align-content: stretch;
    
    --last-height: calc(var(--max-aspect) * var(--preview-width));
}
.details .column-preview .thumbnail .thumbnail-img {
    width: 100%;
    height: auto;
    grid-area: 1 / 1 / 2 / 2;
}

/* Image loading state */
.details.has-thumbnail:not(.loaded) .column-preview .thumbnail {
    min-height: var(--last-height);
    opacity: 0.7;
}
.details.has-thumbnail:not(.loaded) .column-preview .thumbnail:before {
    content: "•••";
    grid-area: 1 / 1 / 2 / 2;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-outline-selected);
}
.details.has-thumbnail:not(.loaded) .column-preview .thumbnail-img {
    opacity: 0;   
}

/* No thumbnail */
.details.no-thumbnail .column-preview .thumbnail {
    height: calc(var(--max-aspect) * var(--preview-width));
}
.details.no-thumbnail .column-preview .thumbnail .thumbnail-img {
    display: none;
}
.details.no-thumbnail .column-preview .thumbnail:before {
    content: "No Preview Image";
    grid-area: 1 / 1 / 2 / 2;
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Not in AV-Portal */
.details.not-in-tib .column-preview .thumbnail {
    height: calc(var(--max-aspect) * var(--preview-width));
    background-color: var(--color-entry-missing-bg);
}
.details.not-in-tib .column-preview .thumbnail .thumbnail-img {
    display: none;
}
.details.not-in-tib .column-preview .thumbnail:before {
    content: "Not listed in the online\a AV-Portal of TIB";
    grid-area: 1 / 1 / 2 / 2;
    font-size: 1.2rem;
    line-height: 1.3;
    text-align: center;
    white-space: pre;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* QR Code */
.details .column-preview .thumbnail #qr-code {
    width: 100%;
    height: 100%;
    grid-area: 1 / 1 / 2 / 2;
    background-color: var(--color-details-dim);
    justify-content: center;
    align-items: center;
    display: none;
}
.details .column-preview .thumbnail #qr-code img {
    width: 12rem;
    height: auto;
}
.details.show-qr .column-preview .thumbnail #qr-code {
    display: flex;
}
.details .tib-link {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-details-dim);
    margin-bottom: -0.4rem;
    border-radius: 0.25em;
    height: 2rem;
    background-color: #000;
    overflow: hidden;
}
.details .url {
    font-size: 0.8rem;
    padding: 0 0.8em 0 0.4em;
    color: var(--color-details-dim);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-icons);
    cursor: pointer;
    border-right: 1px solid var(--color-details-dim);
}
.details .url::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-image: url("icons/f7--qrcode-viewfinder.svg");
}
.details .url:hover {
    color: var(--color-details-default);
}
.details .link {
    width: 2.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-details-dim);
    text-decoration: none;
}
.details .link::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-image: url("icons/arrow-up-right.svg");
}
.details .link:hover {
    background-color: var(--color-details-default);
    color: var(--color-bg);
}

.details.not-in-tib .tib-link {
    display: none;
}
.details.show-qr .url {
    background-color: var(--color-details-dim);
    color: #000;
}

.details .close-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    transform: translate(-50%, -50%);
    background-color: var(--color-bg);
    color: var(--color-details-default);
    border-radius: 4rem;
    border: 1.5px solid var(--color-details-default);
    display: none;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 1rem #000;
    pointer-events: none;
    background: none;
    border: none;
    backdrop-filter: blur(5px);
    box-shadow: none;
    background-color: rgba(255,255,255,0.2);
}
.details .close-indicator::before {
    content: "";
    width: 1.35rem;
    height: 1.35rem;
    background-color: currentColor;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-image: url("icons/x.svg");
}
.details:hover:not(:has(.tib-link:hover)) .close-indicator {
    display: flex;
}
.details > div {
    cursor: none !important;
}

/****************************************/
/* SEARCH DIVIDER */

.search-divider {
    height: var(--height-divider);
    width: 100%;
    font-size: 2.5rem;
    padding: 0 0.5em;
    background-color: var(--color-grid-bg);
    color: #CCC;
    display: none;
    align-items: center;
    gap: 0.25em;
    position: sticky;
    top: 0;
    z-index: 800;
}
.search-divider::before {
    content: "Results for: ";
    color: var(--color-menu-default);
}
body.search .search-divider {
    display: flex;
}

/* SEARCH MAGIC */
body.search .entry:not(.search) {
    display: none;
}

/****************************************/
/* SORT DIVIDERS */

.sort-divider {
    height: var(--height-divider);
    width: 100%;
    font-size: 2.5rem;
    padding: 0 0.5em;
    background-color: var(--color-grid-bg);
    color: #CCC;
    border-top: 1px solid #666;
    display: none;
    align-items: center;
    gap: 0.25em;
    font-feature-settings: "tnum";
    position: sticky;
    top: 0;
    z-index: 800;
}
body:not(.search) .sort-divider.first {
    border-top: none;
}
body.search .sort-divider {
    top: var(--height-divider);
}

.sort-divider::before {
    color: var(--color-menu-default);
}
.sort-divider[data-sort="duration"]::before {
    content: "Film Length: ";
}
.sort-divider[data-sort="year"]::before {
    content: "Production Year: ";
}
.sort-divider[data-sort="section"]::before {
    content: "Section: ";
}

body[data-sort="duration"] .sort-divider[data-sort="duration"] {
    display: flex;
}
body[data-sort="year"] .sort-divider[data-sort="year"] {
    display: flex;
}
body[data-sort="section"] .sort-divider[data-sort="section"] {
    display: flex;
}
/* When any section filter is set, only show dividers for selected sections */
body[class*="filter-section-"] .sort-divider[data-sort="section"] {
    display: none;
}
body[data-sort="section"].filter-section-bio .sort-divider[data-sort="section"].bio {
    display: flex;
}
body[data-sort="section"].filter-section-tech .sort-divider[data-sort="section"].tech {
    display: flex;
}
body[data-sort="section"].filter-section-ethno .sort-divider[data-sort="section"].ethno {
    display: flex;
}

/****************************************/
/* SORTING MAGIC */

body[data-sort="duration"] .entry {
    /*order: calc(var(--length-factor) * 10);*/
    order: var(--order-duration);
}
body[data-sort="year"] .entry {
    order: var(--order-year);
}
body[data-sort="section"] .entry {
    order: var(--order-section);
}

/****************************************/
/* FILTER MAGIC */

body[class*="filter-"] .entry:not(.filter) {
    display: none;
}

/****************************************/
/* INFO OVERLAY */
.info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: var(--menu-width);
    bottom: 0;
    background-color: var(--color-bg);
    border-right: 1px solid var(--color-grid-bg);
    color: var(--color-menu-default);
    z-index: 1999;
    display: none;
    flex-direction: column;
}
body.show-info .info-overlay {
    display: flex;
}

.info-overlay .header {
    width: 100%;
    height: var(--menu-width);
    font-size: 2.5rem;
    display: flex;
    color: var(--color-bg);
    flex-shrink: 0;
}
.info-overlay .header > div {
    display: flex;
    align-items: center;
    padding-left: 2.0rem;
    flex-grow: 1;
    flex-basis: 0;
    background-color: var(--color-logo-text);
}
.info-overlay .header .en {
    border-right: 1px solid var(--color-bg);
    /* Compensate scrollbar and border */
    width: calc(50% - 0.5 * var(--scrollbar-width) + 0.5px);
    flex-grow: 0;
    flex-basis: auto;
}
.info-overlay .header .de {
    background-color: var(--color-logo-text-dim);
}
.info-overlay .button-close {
    width: calc(var(--menu-width) + 1px);
    height: calc(var(--menu-width) + 1px);
    border-left: 1px solid var(--color-grid-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: calc(-1 * var(--menu-width) - 1px);
    top: 0;
    border-bottom: 1px solid var(--color-bg);
    background-color: var(--color-menu-open-bg);
    color: var(--color-bg);
    cursor: pointer;
}
.info-overlay .button-close::before {
    content: "";
    width: 1.75rem;
    height: 1.75rem;
    background-color: currentColor;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-image: url("icons/icon-park-outline--close.svg");
}
.info-overlay .button-close:hover {
    color: var(--color-menu-active);
}

.info-overlay .content {
    width: 100%;
    overflow-y: scroll;
    flex-grow: 1;
    overscroll-behavior-y: none;
    font-size: 1.1rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
}
/* Scroll bar styling */
.info-overlay .content::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar);
}
.info-overlay .content::-webkit-scrollbar-track {
    background-color: var(--color-bg);
}
.info-overlay .content::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

.info-overlay .content div {
    flex-grow: 1;
    flex-basis: 0;
    color: var(--color-logo-text);
    padding: 2rem 2.0rem;
}
.info-overlay .content .en {
    /*border-right: 1px solid var(--color-grid-bg);*/
}
.info-overlay .content .de {
    /*color: var(--color-menu-open-bg);*/
    border-left: 1px solid var(--color-grid-bg);
    color: var(--color-logo-text-dim);
}

.info-overlay .content p {
    margin-bottom: 1em;
}
.info-overlay .content p:last-child {
    margin-bottom: 0;
}
.info-overlay .content h2 {
    margin: 0;
    margin-top: 0.35em; 
    margin-bottom: 0.35em;   
    font-size: 125%;
    font-weight: normal;
    border-top: 1px solid hsl(from currentColor h s l / 0.3);
    padding-top: 0.5em;
}
.info-overlay .content span {
    white-space: nowrap;
}

/****************************************/
/* BUSY OVERLAY */
.busy-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: var(--menu-width);
    bottom: 0;
    z-index: 8999;
    background-color: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    display: none;
}
.busy-overlay div {
    width: 4rem;
    height: 4rem;
    background-color: #DDD;
    mask-image: url("icons/tabler--dots.svg");
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}
body.busy .busy-overlay {
    display: flex;
}

/****************************************/
/* LOADING OVERLAY */
.loading-message {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    padding-right: var(--menu-width);
    color: var(--color-menu-default);
    font-size: 2rem;
    line-height: 1.2;
}
.loading-message div {
    background-color: var(--color-bg);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
body.error .loading-message div {
    border: 8px solid orangered;
}
body.error .loading-message div:after {
    content: "Data cannot be loaded.";
    color: orangered;
}
body.loaded .loading-message {
    display: none;
}

/****************************************/
/* ORIENTATION WARNING OVERLAY */
.orientation-warning {
    position: fixed;
    top: 0;
    left: 0;
    /*right: 0;
    bottom: 0;*/
    height: 100vmax;
    width: 100vmin;
    background-color: var(--color-bg);
    color: #EEE;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    line-height: 1;
    z-index: 9999;
    display: none;
}

.orientation-warning .icon {
    width: 7rem;
    height: 7rem;
    background-color: currentColor;
    mask-image: url("icons/dashicons--image-rotate-left.svg");
    mask-image: url("icons/gravity-ui--arrows-rotate-right.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    margin-bottom: 2rem;
}
.orientation-warning .label {
    font-size: 2rem;
    text-align: center;
}
.orientation-warning .label.de {
    color: #999;
}

/* Test orientation lock */
@media screen and (orientation: portrait) {

    /*html {
        transform: rotate(90deg);
        transform-origin: top right;
        width: 100vh;
        height: 100vw;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        right: 0;
    }*/
    
    .orientation-warning {
        display: flex;
    }
    /* Prevent scroll and hide scrollbar */
    html {
        overflow: hidden;
    }
    /* Color scrollbar just in case */
    body::-webkit-scrollbar-thumb {
        background-color: var(--color-bg);
    }
}