/*
Theme Name: Digitaler Geschäftsbericht
Text Domain: digitalbericht
Version: 0.8.2
Description: Theme für einen digitalen Geschäftsbericht. 
Author: Visualtech
Author URI: https://visualtech.de
Theme URI: https://visualtech.de/digitaler-geschaeftsbericht
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/



/* VARIABLES */

:root {
	
/* colors */
	--corporate-color-1: #123456;
	--corporate-color-1-rgb: 18,52,86;
	--corporate-color-2: #654321;
	--corporate-color-2-rgb: 101,67,33;
	--corporate-color-3: #112233;
	--corporate-color-3-rgb: 17,34,51;
	--corporate-color-4: #445566;
	--corporate-color-4-rgb: 68,85,102;
	
  --color: #333;
	
	--scrollbar-track-background-color: rgba(var(--corporate-color-1-rgb),.25);;
	--scrollbar-thumb-background-color: var(--corporate-color-1);
	
	--infobox-image-source-background-color: #282c34;
	--infobox-image-source-background-color-rgb: 40,44,52;
	
/* chapter color schemes */
	--number-of-ccs: 2;
	
/* ccs 1 */
	--ccs1-header-icons-background-color: rgba(255,255,255,.5);
	--ccs1-header-icons-color: var(--corporate-color-1);
	--ccs1-x-icon-color: var(--color);
	--ccs1-chapter-background-color: #fff;
	--ccs1-chapter-header-background-color: #fff;
	--ccs1-color: var(--color);
	--ccs1-h1-color: var(--corporate-color-1);
	--ccs1-h2-color: var(--corporate-color-2);
	--ccs1-h3-color: var(--corporate-color-3);
	--ccs1-h4-color: var(--corporate-color-4);
	--ccs1-button-background-color: var(--corporate-color-1);
	--ccs1-button-color: #fff;
	--ccs1-link-color: var(--corporate-color-2);
	--ccs1-link-text-decoration: none;
	--ccs1-link-text-underline-offset: auto;
	--ccs1-arrows-background-color: var(--corporate-color-1);
	--ccs1-dots-background-color: var(--corporate-color-1);
	--ccs1-dots-border-color: var(--corporate-color-1);
	--ccs1-dots-active-background-color: var(--corporate-color-2);
	--ccs1-image-headline-description-background-color: rgba(255,255,255,.8); /* chapter background-color in rgba with .8 opacity) */
	--ccs1-image-headline-color: var(--corporate-color-3);
	--ccs1-image-description-color: var(--color);
	--ccs1-testimonial-name-color: var(--corporate-color-1);
	--ccs1-testimonial-institution-color: var(--corporate-color-2);
	--ccs1-testimonial-function-profession-color: var(--ccs1-testimonial-institution-color);
	--ccs1-testimonial-quotation-marks-color: var(--corporate-color-2);
	--ccs1-testimonial-speech-bubble-background-color: var(--corporate-color-1);
	--ccs1-testimonial-speech-bubble-color: #fff;
	--ccs1-shortcode-person-name-color: var(--corporate-color-1);
	--ccs1-shortcode-person-info-color: var(--corporate-color-2);
	--ccs1-accentuation-background-color: var(--corporate-color-4);
	--ccs1-accentuation-color: #fff;
	--ccs1-blockquote-color: var(--corporate-color-1);
	
/* ccs 2 */
	--ccs2-header-icons-background-color: rgba(var(--corporate-color-2-rgb),.5);
	--ccs2-header-icons-color: #fff;
	--ccs2-x-icon-color: var(--corporate-color-1);
	--ccs2-chapter-background-color: var(--corporate-color-1);
	--ccs2-chapter-header-background-color: #fff;
	--ccs2-color: #fff;
	--ccs2-h1-color: var(--corporate-color-1);
	--ccs2-h2-color: var(--corporate-color-1);
	--ccs2-h3-color: var(--corporate-color-3);
	--ccs2-h4-color: var(--corporate-color-4);
	--ccs2-button-background-color: var(--corporate-color-1);
	--ccs2-button-color: #fff;
	--ccs2-link-color: var(--corporate-color-3);
	--ccs2-link-text-decoration: none;
	--ccs2-link-text-underline-offset: auto;
	--ccs2-arrows-background-color: #fff;
	--ccs2-dots-background-color: #fff;
	--ccs2-dots-border-color: #fff;
	--ccs2-dots-active-background-color: var(--corporate-color-2);
	--ccs2-image-headline-description-background-color: rgba(18,52,86,.8); /* chapter background-color in rgba with .8 opacity) */
	--ccs2-image-headline-color: var(--corporate-color-3);
	--ccs2-image-description-color: var(--color);
	--ccs2-testimonial-name-color: var(--corporate-color-1);
	--ccs2-testimonial-institution-color: var(--corporate-color-4);
	--ccs2-testimonial-function-profession-color: var(--ccs2-testimonial-institution-color);
	--ccs2-testimonial-quotation-marks-color: var(--corporate-color-1);
	--ccs2-testimonial-speech-bubble-background-color: #fff;
	--ccs2-testimonial-speech-bubble-color: var(--corporate-color-1);
	--ccs2-shortcode-person-name-color: var(--corporate-color-1);
	--ccs2-shortcode-person-info-color: #fff;
	--ccs2-accentuation-background-color: var(--corporate-color-4);
	--ccs2-accentuation-color: #fff;
	--ccs2-blockquote-color: var(--corporate-color-1);
	
/* Add further chapter color schemes here if needed and activate the corresponding styles below. Also, don't forget to change the "--number-of-ccs" variable in line 38! */
  
/* headlines */
	--h1-font-size: 40px;
	--h2-font-size: 26px;
	--h3-font-size: 40px;
	--h4-font-size: 20px;
	
	--general-h1-color: var(--corporate-color-2);
	
	--headline-text-transform: uppercase;
	
/* button(s) */
	--button-padding-top-bottom: .5em;
	--button-padding-right-left: .75em;
	--button-text-transform: none;
	
/* icons */
	--remixicons-display: flex;
	--materialicons-display: none;
	
/* shadow */
	--controls-shadow: 0 0 5px var(--color);
	
/* page measurements */
	--vh: 1vh;
	--100vh: 100vh;
	--page-padding-right-left: 150px;
	
/* header */
	--header-padding-left: calc(100% - var(--page-padding-right-left));
	
	--header-icon-width: 30px;
	--header-icon-height: var(--header-icon-width);
	--header-icon-max-width: 50px;
	--header-icon-max-height: var(--header-icon-max-width);
	
	--header-menu-width: 500px;
	--header-menu-background-color: #fff;
	--header-menu-padding-right-left: 100px;
	--header-menu-padding-top-bottom: calc(var(--header-menu-padding-right-left) * .75);
	--header-menu-shadow: none;
	--header-menu-color: var(--corporate-color-3);
	--header-menu-text-transform: none;
	
/* chapter header	*/
	--chapter-header-padding: 25px;
	--logo-width: 75px;
	--logo-height: var(--logo-width);
	
/* slider */
	--slider-arrow-width: calc(var(--page-padding-right-left) / 5);
	--slider-arrow-height: calc((var(--slider-arrow-width) / 3) * 5);
	--slider-arrow-background-width: calc(var(--slider-arrow-width) + var(--chapter-header-padding) * 2);
	--slider-arrow-background-height: var(--slider-arrow-background-width);
	--slider-arrow-background-max-width: var(--page-padding-right-left);
	--slider-arrow-background-max-height: var(--slider-arrow-background-max-width);
	
	--slider-dots-width: 10px;
	--slider-dots-max-width: unset;
	--slider-dots-height: 10px;
	--slider-dots-border-width: 0px;
	--slider-dots-border-radius: 0px;
	--slider-dots-gap: 50px;
	
/* slides */
	--slide-margin-bottom: 50px;
	--slide-content-container-width: calc(100vw - var(--page-padding-right-left) * 2);
	--slide-content-container-max-width: 900px;
	
/* testimonial */
	--testimonial-person-container-width: calc(var(--slide-content-container-width) * .25);
	--testimonial-person-photo-container-width: var(--testimonial-person-container-width);
	--testimonial-person-photo-container-height: var(--testimonial-person-photo-container-width);
	--testimonial-person-font-size: 18px;
	--testimonial-name-text-transform: none;
	--testimonial-quote-container-width: calc(var(--slide-content-container-width) * .7);
	--testimonial-quote-container-padding-top-bottom: 25px;
	--testimonial-quote-container-padding-right-left: 50px;
	--testimonial-quotation-marks-position-top-bottom: -30px;
	--testimonial-quotation-marks-position-right-left: -15px;
	--testimonial-quotation-marks-font-size: 100px;
	--testimonial-speech-bubble-padding: 30px;
	--testimonial-speech-bubble-font-size: 18px;
	
/* text-image - preview */
	--text-image-image-width-wide: 60vw;
	--text-image-image-width-narrow: 40vw;
	--text-image-image-height: 100vh;
	--text-image-image-source-background-color: rgba(var(--infobox-image-source-background-color-rgb),.5);
	--text-image-image-source-font-size: 14px;
	--text-image-image-source-color: #fff;
	--text-image-teaser-width-wide: calc(100% - var(--text-image-image-width-narrow));
	--text-image-teaser-width-narrow: calc(100% - var(--text-image-image-width-wide));
	--text-image-teaser-max-width: var(--slide-content-container-max-width);
	--text-image-teaser-font-size: 20px;
	
/* text-image - main view */
	--text-image-headline-teaser-button-container-width-main-view: min(calc(var(--slide-content-container-width) * .7), var(--text-image-teaser-max-width));
	--text-image-image-width-main-view: calc(var(--slide-content-container-width) - var(--text-image-headline-teaser-button-container-width-main-view));
	
/* shortcode - person */
	--shortcode-person-image-width: calc(var(--text-image-headline-teaser-button-container-width-main-view) * .25);
	--shortcode-person-image-max-width: 200px;
	--shortcode-person-image-height: var(--shortcode-person-image-width);
	--shortcode-person-image-max-height: var(--shortcode-person-image-max-width);
	--shortcode-person-font-size: 18px;
	--shortcode-person-name-text-transform: none;
	
/* progress indication */
	--progress-indication-bar-width: calc(var(--slider-dots-height) * .5);
	--progress-indication-bar-background-color: var(--corporate-color-4);
	
/* page */
	--page-button-background-color: var(--corporate-color-1);
	--page-button-color: #fff;
	--page-link-color: var(--corporate-color-3);
	--page-link-text-decoration: none;
	--page-link-text-underline-offset: auto;
	
  font-family: sans-serif;
  font-size: 16px;
	line-height: 1.25;
  color: var(--color);
	
}



/* GENERAL SETTINGS & STYLES */

* {
	scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-background-color) var(--scrollbar-track-background-color);
}

*::-webkit-scrollbar {
  width: 5px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track-background-color);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-background-color);
}

@-moz-document url-prefix() { /* Disable scrollbar Firefox */
	html {
		scrollbar-width: none;
	}
}

body:not(.page) {
  scrollbar-width: thin;
}

body:not(.page)::-webkit-scrollbar {
  display: none;
}

body:not(.page) {
	width: 100vw;
	height: 100vh;
	height: var(--100vh);
	max-width: 100vw;
  min-height: 100vh;
	min-height: var(--100vh);
	display: flex;
	flex-direction: column;
  position: relative;
  margin: 0;
	font: inherit;
  overflow: hidden;
	overflow-y: scroll;
}

body:not(.page) *,
body:not(.page) *::before,
body:not(.page) *::after {
  box-sizing: border-box;
	-webkit-text-size-adjust: none;
  text-size-adjust: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	line-height: 1.1;
	text-transform: var(--headline-text-transform);
	font-weight: normal;
}

h1 {
	font-size: var(--h1-font-size);
	color: var(--general-h1-color);
}

section.chapter:nth-of-type(1n) h1 {
	color: var(--ccs1-h1-color);
}

section.chapter:nth-of-type(2n) h1 {
	color: var(--ccs2-h1-color);
}

h2 {
	font-size: var(--h2-font-size);
	hyphens: auto;
}

section.chapter:nth-of-type(1n) h2 {
	color: var(--ccs1-h2-color);
}

section.chapter:nth-of-type(2n) h2 {
	color: var(--ccs2-h2-color);
}

h3 {
	font-size: var(--h3-font-size);
}

section.chapter:nth-of-type(1n) h3 {
	color: var(--ccs1-h3-color);
}

section.chapter:nth-of-type(2n) h3 {
	color: var(--ccs2-h3-color);
}

h4 {
	font-size: var(--h4-font-size);
}

section.chapter:nth-of-type(1n) h4 {
	color: var(--ccs1-h4-color);
}

section.chapter:nth-of-type(2n) h4 {
	color: var(--ccs2-h4-color);
}

a {
	text-decoration: none;
	color: inherit;
}

ul, li {
 	list-style-type: none;
	margin: 0;
	padding: 0;
}

button,
.button {
	width: fit-content;
	display: flex;
	position: relative;
	padding: var(--button-padding-top-bottom) var(--button-padding-right-left);
	text-transform: var(--button-text-transform);
	cursor: pointer;
}

section.chapter:nth-of-type(1n) *:not(li) > button,
section.chapter:nth-of-type(1n) *:not(li) > .button {
	background: var(--ccs1-button-background-color);
	color: var(--ccs1-button-color);
}

section.chapter:nth-of-type(2n) *:not(li) > button,
section.chapter:nth-of-type(2n) *:not(li) > .button {
	background: var(--ccs2-button-background-color);
	color: var(--ccs2-button-color);
}



/* HEADER */

header {
	width: var(--page-padding-right-left);
	display: flex;
	justify-content: center;
	position: fixed;
	top: 0;
	right: 0;
	padding: var(--chapter-header-padding) 0 0;
	z-index: 9999;
}

.header-icons {
	display: flex;
	flex-direction: column;
	position: relative;
}

.header-icons-background {
	width: calc(var(--header-icon-width) + var(--chapter-header-padding));
	height: calc(var(--header-icon-height) * 2.5 /* change to 4 when filter-icon is displayed again */ + var(--chapter-header-padding) * 1.5);
	position: absolute;
	top: calc(var(--chapter-header-padding) * (-1));
	left: calc(var(--chapter-header-padding) * (-1));
	left: calc(var(--chapter-header-padding) * (-0.5));
	background: rgba(255,255,255,.5);
	z-index: -1;
}

.header-icon {
	width: var(--header-icon-width);
	height: var(--header-icon-height);
	display: flex;
	cursor: pointer;
	font-size: var(--header-icon-height);
	line-height: 1;
/* 	color: #fff; */
/* 	text-shadow: var(--controls-shadow); */
}

.header-icon:not(:nth-of-type(1), :nth-of-type(2), .x-icon) {
	margin-top: calc(var(--header-icon-width) * .5);
}

.header-icon.filter-icon {
	display: none; /* for as long as there is no filtering function (which needs to be added) */
}

.header-icon.x-icon {
	display: flex;
	position: absolute;
	top: var(--chapter-header-padding);
	opacity: 0;
	pointer-events: none;
	color: var(--color);
}

.header-icons:is(.burger-open, .filter-open) > .header-icon.x-icon {
	opacity: 1;
	z-index: 99999;
	pointer-events: auto;
	transition: all .75s .75s;
}

.header-menu {
	width: 0;
	height: 100vh;
	height: var(--100vh);
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	top: 0;
	right: -101vw;
 	padding: var(--header-menu-padding-top-bottom) var(--header-menu-padding-right-left);
	background: var(--header-menu-background-color);
	z-index: 9999;
	box-shadow: var(--header-menu-shadow);
	transition: all .75s;
}

.header-icons.burger-open ~ .header-menu.navigation,
.header-icons.filter-open ~ .header-menu.filter {
	width: var(--header-menu-width);
	max-width: 100vw;
	right: 0;
	transition: all .75s;
}

nav.menu-nav {
	height: 100%;
}

nav.menu-nav ul {
 	display: flex;
	flex-direction: column;
	gap: .75em;
 	padding: 1.25em 0;
	text-transform: var(--header-menu-text-transform);
	color: var(--header-menu-color);
}



/* MAIN */


/* chapters */

section.chapter {
  width: 100vw;
  height: 100vh;
	height: var(--100vh);
	flex-shrink: 0;
	display: flex;
	position: relative;
}

section.chapter:nth-of-type(1n) {
	background: var(--ccs1-chapter-background-color);
	color: var(--ccs1-color);
}

section.chapter:nth-of-type(2n) {
	background: var(--ccs2-chapter-background-color);
	color: var(--ccs2-color);
}

.chapter-header {
	max-width: calc(100% - 2 * var(--page-padding-right-left)/* menu-icons + margin not included yet, needs to be done!!! */); 
	display: flex;
	align-items: center;
	position: absolute;
	z-index: 9;
	left: var(--page-padding-right-left);
	padding: var(--chapter-header-padding);
	overflow: hidden;
}

section.chapter:nth-of-type(1n) .chapter-header {
	background: var(--ccs1-chapter-header-background-color);
}

section.chapter:nth-of-type(2n) .chapter-header{
	background: var(--ccs2-chapter-header-background-color);
}

.header-grid {
	max-width: 100%;
	display: none;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	-webkit-column-gap: calc(var(--chapter-header-padding) * 2);
	-moz-column-gap: calc(var(--chapter-header-padding) * 2);
	column-gap: calc(var(--chapter-header-padding) * 2);
}

.logo {
	width: var(--logo-width);
	height: var(--logo-height);
	flex-shrink: 0;
	background-repeat: no-repeat;
}

.chapter-headline {
	margin-left: calc(var(--chapter-header-padding) * 2);
}

.chapter-slider {
	width: 100%;
	height: 100%;
}


/* slides */

.slide {
	height: 100%;
	position: relative;
}

section.chapter:nth-of-type(1n) .slide {
	background: var(--ccs1-slide-background-color);
}

section.chapter:nth-of-type(2n) .slide {
	background: var(--ccs2-slide-background-color);
}

.slide-content-container {
	width: var(--slide-content-container-width);
	height:  calc(100vh - var(--chapter-header-height) - var(--chapter-header-padding) - var(--slide-margin-bottom) * 2 - var(--slider-dots-height));
	height:  calc(var(--100vh) - var(--chapter-header-height) - var(--chapter-header-padding) - var(--slide-margin-bottom) * 2 - var(--slider-dots-height));
	display: flex;
	margin: calc(var(--chapter-header-height) + var(--chapter-header-padding)) auto 0;
}

.slide-content-container ul,
.slide-content-container li {
	list-style-type: initial;
	list-style-type: square;
	margin: revert;
	padding: revert;
}

.slide-content-container ul {
/* 	margin-left: 1em; */
}

.slide-content-container p:empty {
	display: none;
}

section.chapter:nth-of-type(1n) .slide-content-container a {
	color: var(--ccs1-link-color);
	text-decoration: var(--ccs1-link-text-decoration);
	text-underline-offset: var(--ccs1-link-text-underline-offset);
}

section.chapter:nth-of-type(2n) .slide-content-container a {
	color: var(--ccs2-link-color);
	text-decoration: var(--ccs2-link-text-decoration);
	text-underline-offset: var(--ccs2-link-text-underline-offset);
}


/* slidetypes (in alphabetical order) */


/* chart */

.slide-content-container.chart {
	flex-direction: column;
}

.chart.canvas-container {
	flex-shrink: 1;
	height: 100%;
	max-height: calc(100% - var(--h2-font-size) * 1.25);
	display: flex;
	justify-content: center;
  background: #fff;
}

/* .chart.canvas-container canvas {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
} */


/* image */

.slide-content-container.image {
	flex-direction: column;
	justify-content: space-between;
	position: relative;
}

.image.headline {
	width: fit-content;
	position: relative;
	padding: .5em;
}

section.chapter:nth-of-type(1n) .image.headline {
/* 	background: var(--ccs1-image-headline-description-background-color); */
	color: var(--ccs1-image-headline-color);
}

section.chapter:nth-of-type(2n) .image.headline {
/* 	background: var(--ccs2-image-headline-description-background-color); */
	color: var(--ccs2-image-headline-color);
}

.image.image-container {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
}

.slide-content-container.image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.image.image-description {
	max-width: 80%;
	align-self: flex-end;
	position: relative;
	padding: 1em;
}

section.chapter:nth-of-type(1n) .image.image-description {
/* 	background: var(--ccs1-image-headline-description-background-color); */
	color: var(--ccs1-image-description-color);
}

section.chapter:nth-of-type(2n) .image.image-description {
/* 	background: var(--ccs2-image-headline-description-background-color); */
	color: var(--ccs2-image-description-color);
}


/* testimonial */

.slide-content-container.testimonial {
	flex-direction: column;
	justify-content: center;
}

.testimonial.content-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 2em;
}

.testimonial.content-container.person-quote {
	flex-direction: row;
}

.testimonial.content-container.quote-person {
	flex-direction: row-reverse;
}

.testimonial.person-container {
	width: var(--testimonial-person-container-width);
/* 	height: 100%; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .75em;
	font-size: var(--testimonial-person-font-size);
}

.testimonial.person-photo-container {
	flex-shrink: 0;
	width: var(--testimonial-person-photo-container-width);
	height: var(--testimonial-person-photo-container-height);
}

.testimonial.person-photo-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.testimonial.person-info-container {
	flex-shrink: 1;
	display: flex;
	flex-direction: column;
	gap: .75em;
	padding-right: .75em;
}

.testimonial.name {
	text-transform: var(--testimonial-name-text-transform);
}

section.chapter:nth-of-type(1n) .testimonial.name {
	color: var(--ccs1-testimonial-name-color);
}

section.chapter:nth-of-type(2n) .testimonial.name {
	color: var(--ccs2-testimonial-name-color);
}

.testimonial.institution-function-profession-container {
	display: flex;
	flex-direction: column;
	gap: .25em;
}

section.chapter:nth-of-type(1n) .testimonial.institution {
	color: var(--ccs1-testimonial-institution-color);
}

section.chapter:nth-of-type(2n) .testimonial.institution {
	color: var(--ccs2-testimonial-institution-color);
}

section.chapter:nth-of-type(1n) .testimonial.function-profession {
	color: var(--ccs1-testimonial-function-profession-color);
}

section.chapter:nth-of-type(2n) .testimonial.function-profession {
	color: var(--ccs2-testimonial-function-profession-color);
}

.testimonial.quote-container {
	width: var(--testimonial-quote-container-width);
	height: max-content;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	padding: var(--testimonial-quote-container-padding-top-bottom) var(--testimonial-quote-container-padding-right-left);
}

.testimonial.quotation-marks {
	width: calc(var(--testimonial-quotation-marks-font-size) * .8);
	height: calc(var(--testimonial-quotation-marks-font-size) * .65);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	font-size: var(--testimonial-quotation-marks-font-size);
	overflow: hidden;
}

section.chapter:nth-of-type(1n) .testimonial.quotation-marks {
	color: var(--ccs1-testimonial-quotation-marks-color);
}

section.chapter:nth-of-type(2n) .testimonial.quotation-marks {
	color: var(--ccs2-testimonial-quotation-marks-color);
}

.testimonial.quotation-marks.left {
	top: var(--testimonial-quotation-marks-position-top-bottom);
	left: var(--testimonial-quotation-marks-position-right-left);
}

.testimonial.quotation-marks.right {
	right: var(--testimonial-quotation-marks-position-right-left);
	bottom: var(--testimonial-quotation-marks-position-top-bottom);
}

.testimonial.speech-bubble {
	padding: var(--testimonial-speech-bubble-padding);
	font-size: var(--testimonial-speech-bubble-font-size);
}

section.chapter:nth-of-type(1n) .testimonial.speech-bubble {
	background: var(--ccs1-testimonial-speech-bubble-background-color);
	color: var(--ccs1-testimonial-speech-bubble-color);
}

section.chapter:nth-of-type(2n) .testimonial.speech-bubble {
	background: var(--ccs2-testimonial-speech-bubble-background-color);
	color: var(--ccs2-testimonial-speech-bubble-color);
}


/* text-image - preview */

.slide-content-container.text-image {
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.text-image.image-source-container {
	height: var(--text-image-image-height);
	position: absolute;
	top: 0;
}

.text-image.image-source-container.wide-right {
	width: var(--text-image-image-width-wide);
	right: 0;
	transition: all .75s ease;
}

.text-image.image-source-container.wide-left {
	width: var(--text-image-image-width-wide);
	left: 0;
	transition: all .75s ease;
}

.text-image.image-source-container.narrow-right {
	width: var(--text-image-image-width-narrow);
	right: 0;
	transition: all .75s ease;
}

.text-image.image-source-container.narrow-left {
	width: var(--text-image-image-width-narrow);
	left: 0;
	transition: all .75s ease;
}

.text-image.image-source {
	width: 100%;
	height: 100%;
	position: relative;
}

img.text-image.image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.text-image.source {
	width: fit-content;
	position: absolute;
	bottom: 0;
	left: 100%;
	padding: .25em .5em;
	background: var(--text-image-image-source-background-color);
	font-size: var(--text-image-image-source-font-size);
	color: var(--text-image-image-source-color);
	white-space: nowrap;
	transform: rotate(-90deg);
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.text-image.image-source-container.wide-left .source,
.text-image.image-source-container.narrow-left .source {
	left: auto;
	right: 100%;
	padding-bottom: calc(.25em + var(--progress-indication-bar-width));
	transform: rotate(90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-ms-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.headline-teaser-button-container {
	width: 100%;
	max-width: var(--text-image-teaser-max-width);
	display: flex;
	flex-direction: column;
	font-size: var(--text-image-teaser-font-size);
	gap: 1em;
}

.text-image.image-source-container.wide-right + .headline-teaser-button-container,
.text-image.image-source-container.wide-left + .headline-teaser-button-container {
	width: var(--text-image-teaser-width-narrow);
	transition: all .75s ease;
}

.text-image.image-source-container.narrow-right + .headline-teaser-button-container,
.text-image.image-source-container.narrow-left + .headline-teaser-button-container {
	width: var(--text-image-teaser-width-wide);
	transition: all .75s ease;
}

.text-image.image-source-container.wide-right + .headline-teaser-button-container,
.text-image.image-source-container.narrow-right + .headline-teaser-button-container {
	align-self: flex-start;
}

.text-image.image-source-container.wide-left + .headline-teaser-button-container,
.text-image.image-source-container.narrow-left + .headline-teaser-button-container {
	align-self: flex-end;
}

.text-image.teaser > p:first-child {
	margin-top: 0;
}


/* text-image - main view */

.text-image.text-container {
	max-height: 100%;
	display: none;
  user-select: text;
	overflow: hidden;
  overflow-y: auto;
}

.text-image.text {
  padding: 0 .5em 0 0;
}

.text-image.button.back-to-preview {
	display: none;
}

.slide-content-container.text-image.main-view {
	justify-content: flex-end;
	gap: 2.5vw;
}

.slide-content-container.text-image.main-view > .text-image.image-source-container {
	flex-shrink: 0;
	width: var(--text-image-image-width-main-view);
	height: calc(100vh - var(--chapter-header-height) - var(--chapter-header-padding) - var(--slide-margin-bottom) * 2 - var(--slider-dots-height));
	height: calc(var(--100vh) - var(--chapter-header-height) - var(--chapter-header-padding) - var(--slide-margin-bottom) * 2 - var(--slider-dots-height));
	display: flex;
	align-items: center;
	margin: calc(var(--chapter-header-height) + var(--chapter-header-padding)) 0 0;
	transition: all .75s ease;
}

.slide-content-container.text-image.main-view > .text-image.image-source-container.wide-right,
.slide-content-container.text-image.main-view > .text-image.image-source-container.narrow-right {
	margin-right: var(--page-padding-right-left);
}

.slide-content-container.text-image.main-view > .text-image.image-source-container.wide-left,
.slide-content-container.text-image.main-view > .text-image.image-source-container.narrow-left {
	margin-left: var(--page-padding-right-left);
}

.slide-content-container.text-image.main-view .text-image.image-source {
	height: auto;
}

.slide-content-container.text-image.main-view img.text-image.image {
	object-fit: contain;
}

.slide-content-container.text-image.main-view .text-image.source {
	right: 0;
	left: auto;
	padding-bottom: .25em;
	transform: none;
	font-size: 8px;
}

.slide-content-container.text-image.main-view > .headline-teaser-button-container {
	width: var(--text-image-headline-teaser-button-container-width-main-view);
	height: 100%;
	justify-content: center;
	transition: all .75s ease;
}

.slide-content-container.text-image.main-view .text-image.teaser,
.slide-content-container.text-image.main-view .text-image.button.read-more {
	display: none;
}

.slide-content-container.text-image.main-view .text-image.text-container {
	display: block;
}

.slide-content-container.text-image.main-view .text-image.text > *:first-child {
	margin-top: 0;
}

.slide-content-container.text-image.main-view .text-image.text > *:last-child {
	margin-bottom: 0;
}

.slide-content-container.text-image.main-view .text-image.button.back-to-preview {
	display: flex;
}


/* video */

.slide-content-container.video  {
	max-width: var(--slide-content-container-max-width);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1em;
}

.video.headline {
	flex-shrink: 0;
}

.video.video-container {
	max-height: 100%;
	flex-shrink: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.video.video-container figure.wp-block-video,
.video.video-container figure {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin: 0;
}

.video.video-container figure.wp-block-video video,
.video.video-container video {
	width: auto;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	display: block;
	margin: 0 auto;
}

.video.video-container figure.wp-block-video figcaption,
.video.video-container figure.wp-block-embed-youtube figcaption {
	margin: 0;
}

.video.video-container .wp-block-embed__wrapper {
	height: calc(min(var(--slide-content-container-width), 900px) * .5625);
}

.video.video-container iframe {
	width: 100%;
	height: 100%;
}


/* wall */

.slide-content-container.wall {
	flex-direction: column;
	justify-content: center;
}

.wall.gallery {
	flex-shrink: 1;
	max-height: 100%;
	margin: 1em -5px -5px;
	overflow: hidden;
	overflow-y: auto;
}

.wall .mgl-tiles-container {
	max-height: 100%;
}

.wall .mgl-tiles {
	max-height: 100%;
}

.wall .mgl-tiles .mgl-row {
	max-height: 50%;
}

.wall .mgl-tiles .mgl-row .mgl-box {
	padding: 5px !important;
}

.wall .mgl-tiles .mgl-row:first-of-type .mgl-box {
	padding-top: 0 !important;
}

.wall .mgl-tiles .mgl-row:last-of-type .mgl-box {
	padding-bottom: 0 !important;
}

.wall .mgl-item {
  cursor: pointer;
}

.wall .mgl-item figcaption {
	background: rgba(255,255,255,.8);
}

.wall .mgl-item figcaption p {
  color: var(--color) !important;
}


/* wall - overlay andlLightbox */

#overlay {
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.9);
  z-index: 10000;
}

#lightbox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#lightbox-image-container {
	width: 100%;
	height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

#lightbox-image {
	width: fit-content;
	max-width: 100%;
	height: fit-content;
	max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

#lightbox-image > img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%; 
}

#lightbox-image > .lightbox-caption {
	width: 100%;
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1em;
	background: rgba(255,255,255,.8);
	color: var(--color);
}

#lightbox-left, 
#lightbox-right,
#lightbox-close {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: calc(50% - 22.5px);
	background: rgba(255,255,255,.8);
  color: var(--color);
  font-size: 30px;
  cursor: pointer;
}

#lightbox-left {
  left: 0;
	padding-right: 3px;
}

#lightbox-right {
  right: 0;
	padding-left: 3px;
}

#lightbox-close {
  top: 0;
  right: 0;
}


/* custom post type - person */

.shortcode-person {
	display: flex;
	align-items: center;
	gap: 2.5%;
	margin: 1.5em 0;
	font-size: var(--shortcode-person-font-size);
}

* > .shortcode-person:first-child {
	margin-top: 0;
}

* > .shortcode-person:last-child {
	margin-bottom: 0;
}

.shortcode-person-image {
	width: var(--shortcode-person-image-width);
	height: var(--shortcode-person-image-height);
	max-width: var(--shortcode-person-image-max-width);
	max-height: var(--shortcode-person-image-max-height);
}

.shortcode-person-info {
	width: 100%;
	display: flex;
	flex-direction: column;
}

section.chapter:nth-of-type(1n) .shortcode-person-info {
	color: var(--ccs1-shortcode-person-info-color);
}

section.chapter:nth-of-type(2n) .shortcode-person-info {
	color: var(--ccs2-shortcode-person-info-color);
}

.shortcode-person-name {
	margin-bottom: .25em;
	text-transform: var(--shortcode-person-name-text-transform);
}

section.chapter:nth-of-type(1n) .shortcode-person-name {
	color: var(--ccs1-shortcode-person-name-color);
}

section.chapter:nth-of-type(2n) .shortcode-person-name {
	color: var(--ccs2-shortcode-person-name-color);
}

.shortcode-person-email {
	margin-top: .1em;
}



/* OVERARCHING FEATURES */


/* accentuation */

.accentuation {
	margin: 1em;
	padding: 1.5em;
}

section.chapter:nth-of-type(1n) .accentuation {
	background: var(--ccs1-accentuation-background-color);
	color: var(--ccs1-accentuation-color);
}

section.chapter:nth-of-type(2n) .accentuation {
	background: var(--ccs2-accentuation-background-color);
	color: var(--ccs2-accentuation-color);
}


/* quote */

blockquote.wp-block-quote {
	margin: 1.5em 2em;
	font-size: 1.25em;
	text-align: center;
}

section.chapter:nth-of-type(1n) .wp-block-quote {
	color: var(--ccs1-blockquote-color);
}

section.chapter:nth-of-type(2n) .wp-block-quote {
	color: var(--ccs2-blockquote-color);
}

blockquote.wp-block-quote cite {
	font-size: var(--text-image-teaser-font-size);
}


/* progress indication */

.progress-indication-bar {
	width: var(--progress-indication-bar-width);
	height: calc(var(--100vh) / var(--number-of-chapters) * var(--chapter-ordinal-number));
	display: flex;
	position: fixed;
	top: 0;
	background: var(--progress-indication-bar-background-color);
	transition: all .75s ease;
	z-index: 9;
}



/* PAGE */

body.page {
  display: block;
	margin: 0;
  padding: 0 var(--page-padding-right-left);
}

.page-header {
	display: flex;
	align-items: center;
	padding: var(--chapter-header-padding) 0;
	overflow: hidden;
}

.page-logo {
	width: var(--logo-width);
	height: var(--logo-height);
	flex-shrink: 0;
	background-repeat: no-repeat;
}

.page-headline {
	margin-left: calc(var(--chapter-header-padding) * 2);
  position: relative;
	margin-bottom: calc(-1em * .25);
	line-height: 1.15;
}

.page-button {
  background: var(--page-button-background-color);
  color: var(--page-button-color);
  margin: calc(var(--chapter-header-padding) * 1.5) 0;
}

.page-content {
  max-width: var(--text-image-teaser-max-width);
}

.page h2,
.page h3,
.page h4,
.page h5,
.page h6 {
  color: var(--general-h1-color);
}

.page h2 {
  font-size: calc((var(--h1-font-size) + var(--h3-font-size)) * .5);
}

.page a:not(.button) {
	color: var(--page-link-color);
	text-decoration: var(--page-link-text-decoration);
	text-underline-offset: var(--page-link-text-underline-offset);
}