.homepage {
    overflow: hidden;
    height: 100vh;
}

.im_wrapper {
	position:relative;
}

.image-gallery a {
  position: relative;
  display: inline-block;
}



.my_gallery .gallery_card .gallery_card_image {
  position: relative;
  display: inline-block;
}


.my_gallery .gallery_card:nth-child(1n) .gallery_card_image:before {
    content: 'Projektname'; /* Hier kannst du den Text anpassen */
    font-family: 'Avenir Next', sans-serif; /* Falls du eine andere Schriftart willst */
    font-weight: bold; /* Fettgedruckter Text */
    font-size: 1.6vw;
    line-height: 2.2vw;
    color: #fff; /* Du kannst die Farbe des Textes anpassen */
    position: absolute;
    top: 10px; /* Positioniert den Text oben */
    left: 10px; /* Positioniert den Text links */
    opacity: 0; /* Standardmäßig unsichtbar */
    visibility: hidden; /* Standardmäßig unsichtbar */
    transition: opacity 0.4s ease, visibility 0s 0.4s; /* Sanfter Übergang */
}
.my_gallery .gallery_card .gallery_card_video {
  position: relative;
  display: inline-block;
}



@media screen and (max-width: 770px) {
	.my_gallery .gallery_card:nth-child(1n) .gallery_card_image:before{
	opacity: 1;
}
}






/**
 * Content
 */

body {
	background-color: #fff;
	color: #000;
}

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: .4;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 1em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(127, 127, 127, 0.2);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: .5em;
}

.gallery_image_caption {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.3;	
}

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 2rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family:'Avenir Next', sans-serif;
	font-style: normal;
	line-height: 1.3;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] bodycopy a {
	color: rgb(0, 0, 0);
	padding-bottom: 0.1em;
	border-bottom: 0.0em solid rgba(127, 127, 127, 0.2);
	text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {

}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 3.4rem;
	line-height: 1.2;
	color: rgba(0, 0, 0, 0.85);
	}

[data-predefined-style="true"] h1 a {
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"] h2 {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: rgba(255, 255, 255, 1);
	font-size: 2.3rem;
	line-height: 1.2;
	}

[data-predefined-style="true"] h2 a {
	color: rgba(255, 255, 255, 1);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.3;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, 'Sans Serif', Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
}

[data-predefined-style="true"] small a {
	color: rgba(0, 0, 0, 1);
	border-bottom-width: 0em;
}

/**
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: 0 /*!content_left*/;
	margin-right: auto /*!content_left*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: rgb(255, 255, 255)/*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100% /*!content_left*/;
}

[data-css-preset] .content_padding {
	padding-top: 3.4rem /*!main_margin*/;
	padding-bottom: 3.4rem /*!main_margin*/;
	padding-left: 3.4rem /*!main_margin*/;
	padding-right: 3.4rem /*!main_margin*/;
}


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: rgba(0, 0, 0, 0)/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 1rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -2rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.5rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -1rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 0px solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: 1.2rem;
    margin-bottom: .3rem;
    font-size: 1.8rem;
	font-weight: normal;
	color: rgba(0, 0, 0, 0.85);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.1;
}

.thumbnails .tags {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.2;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 0rem;
}

/**
 * Site Menu
 */

[data-css-preset] #site_menu_button {
    color: rgba(0, 0, 0, 0.75);
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding: 6px;
    line-height: 1;
    background: rgba(33, 32, 46, 0);
    position: fixed;
    top: 2rem /*!site_menu_button*/;
	right: 2rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
    font-size: 34px;
}

#site_menu_button.custom_icon {
	width: 40px;
    height: auto;
}

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	background: rgba(20, 20, 20, 0.95);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/*
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 32px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 2rem /*!shop_button*/;
	right: 2rem /*!shop_button*/;
}

#shop_button.text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 2rem;
    padding: 0;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 36px;
}

/*
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 2rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-bottom: 1rem;
}

.shop_product .dropdown {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-size: 1.4rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 2.5rem .7rem 1rem;
}

.shop_product .button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem .9rem;
}

/*
 * Image Zoom
 */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(0, 0, 0, 0.85) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    font-weight: 400;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.5rem;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,.5);
    color: white;
}


/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
   stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}


/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}



/*
 * Audio Player
 */

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}

html {
    cursor: url("https://files.cargocollective.com/c2837971/Cursor_WHITE.png") 17 11, auto !important;
}

a, .back {
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFsAAAAWCAYAAACv8OArAAAEXUlEQVR4AeyY3VXcMBCFTTogJUAJUEIoIZQAJUAJUAKUACWEEqAEKAFK2NzPZy3ku2Nr7N2Tp+zRrOTR/F6NJds/uv+/f4bAXmBvNpsb0YMoandi3mQzkSzy6kbtLKvvcrJyLPoU1e3T5TLXMnAmItdX9d6exEjluQpsGe+BUaB3oitR1AgAORKekqn1HNivo6Ojt1pg4ZjYjk2HBTgx3uSl8gTkPxJ4FWHPYxS7+60/8pT4hpx1GbdFYMsazt9latao5utGwlT/Q80Mxp7IRyCTYilOAJhaYPcT2pQNcgTkX6FAzAT0p3iq69JgyzlBssrpyjCnV7JBAsbuOvGxyaLUc6uqWrawQxXWtuoxvurrnbFsoA/tzDUYX5p/FoUtBbacEyBAk0hoKMlk5bHl4iyk89ZWNgsa+RjsR76GORYefajwtgPiudXWVpr4F6KhKJi/0OR+YMsgW8C+QMtM37jF+0H1F4FD8JVIe6iiAMgIqFoZmfq6jKVPHFFFvwjEU9F9EdZA1/DPNYQP0APwYu22ZmUrAPYsaFd7HScL9mzgE64pCp96NMaJcpoqnGih3gQqFWxmvi81T8U3i6MJtkxOHTSaWtWiRL3aeBJpBl97F4AA5XYAOrqtXY7tg6qOcr2s/ewzzoB9yKomVpKir8mTXwo0NgG7tslhdStGZMv9Sax/hKOv6VFVG+nXMunxLNiqFoKKKjHtIBAcBb/14WJLtxD2WY/zXkANdwjA1z5YnPqaMbnS1/RSX+w7ngVbxqOgxJ5uiZlM4qMFmbOpxeIMgGqxDwHNoTXw3F4EbJSr6w32VvUtsL1aVjkxJa+W1UkKaOKjqs1Fd20MBy0CG1um1nlh+Pyi6xbYB3W2jczBjhLPbiPs075Y7LPuw8HmQIz8bkMsXUamCLcGLbB3gmwZbMxzezsQntCwz86aUlVzcAO2y/GmqunvJoFIzv1GC4wPqR+mzYKtfY8ADlndPB2UyAUHt65XZnaBo2fqYjsxcL/k6mosnJ8HRUbx99+K6AtzZjAL9lavPmi2rFXdsxbPn3k9YQxHScMvpOSo1Ei3yCQGXtk8k0eFxSdUPqQVf/LPixFnBR+q4CNDP+s2AzZBZKttyhlvYdHLgSeM/qwvEpUQiaorDZB4ndZ6xk2SyKgrbeRbWsxPFRYvO+/y3TdZ8C+fAD35tU/yfWuCvQ2C19VZEHpr8R8VzfeDaJYgnc/Hqj6p6E/C0fbBM3UrPr9jdr5tK1fAprjkZnF7Vrxsi5OKTbDRVBAkAmBLAkHnWrpRRWMWGlUXjAZRfX5ocegCUkO1c7CR3/GveHlshJjPEHb5CMWCE9+kTgpstBUETwkEcaprDjp/qhC7fy5l7lLy3NatxdlJFiMLCX8ZlQiI0L9i5/HxSEax7eeM2KM8zyUfYYHciNJgD1oy3FeSelZT3aj91BUrHAU4mCi9ZJFXl26RfNYXcbkjwCzx+EDC6FA4Go4acTCX8j3Y/QsAAP//wUQLKQAAAAZJREFUAwDlA9c8tJNLYgAAAABJRU5ErkJggg==") 18 11, auto !important;
}

#studio {
  position: fixed;
  top: 50px;
  right: 30px;
  display: flex;
  justify-content: right;
  width: 700px;
  height: 400px;
  z-index: 1000; /* Höher als die Bilder/Videos */
  pointer-events: none; /* Damit du trotzdem auf die Bilder klicken kannst */
}

#works {
  position: fixed;
  top: 50px;
  left: 30px;
  display: flex;
  justify-content: left;
  width: 700px;
  height: 400px;
  z-index: 1000; /* Höher als die Bilder/Videos */
  pointer-events: none; /* Damit du trotzdem auf die Bilder klicken kannst */
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline; width: 100%;
}

.studio-title {
  text-align: right;
  display: inline-block;
  font-size: 1.15em; /* Anpassen je nach gewünschter Größe */
}

.address-block {
  text-align: right;
  font-size: 0.8em;
  width: max-content; /* Passt sich an die Breite von .studio-title an */
  margin-left: auto; /* Rechtsbündig ausrichten */
}

/* Stil für den durchgestrichenen Text */
del {
  text-decoration: line-through;
}
/* Styling für die Projektliste */
.projectlist {
  display: grid;
  grid-template-columns: auto auto auto auto auto; /* Spaltenbreite an Inhalt anpassen */
  column-gap: px; /* Verringerten Abstand zwischen den Spalten */
  font-size: 2rem; /* Gleiche Schriftgröße für alle */
  color: #fff; /* Weißer Text */
  padding-left: 0;
  padding-right: 0;
  list-style: none;
  font-style: italic; /* Schrift kursiv setzen */
  max-width: 1200px; /* Maximale Breite der Tabelle (ändere je nach Bedarf) */
  text-align: left; /* Text innerhalb der gesamten Liste linksbündig */
}

/* Optional: Styling für jedes Projektitem */
.project-item {
  display: contents; /* Damit die inneren <span> als Grid-Elemente behandelt werden */
}

/* Styling für jede Zelle in der Liste */
.project-item span {
  padding: 5px 10px;
  text-align: left; /* Text in den einzelnen Zellen linksbündig */
  box-sizing: border-box; /* Verhindert, dass der Abstand das Layout verzerrt */
  color: white; /* Weißer Text */
}

/* Schriftart bleibt dieselbe */
.projectlist {
  font-family: 'Avenir Next', sans-serif; /* Beispielschriftart (ändere dies nach Bedarf) */
}

/* Optional: Styling für Jahr, Titel, Ort, Genre und Ongoing */
.project-item .year,
.project-item .project-title,
.project-item .location,
.project-item .genre,
.project-item .ongoing {
  color: white; /* Weißer Text für alle Spalten */
  display: inline-block; /* Sicherstellen, dass jedes Element inline bleibt */
}

body.no-scroll {
  overflow: hidden;
}

#hover-image {
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 9999;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    background: transparent;
    padding: 20px;
}

#hover-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}

#preview {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9999;
}

.image-preview {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: 33vh; /* 1/3 der Bildschirmhöhe */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 100;
    pointer-events: none;
}

.project-item:hover .image-preview {
  display: block;  /* Bild anzeigen, wenn mit der Maus über das Projekt gefahren wird */
  right: 20px;  /* Bild erscheint rechts neben dem Projekt */
}

.projectlist {
  position: relative;
}

.project-item {
  position: relative;
}

.project-item .image-preview {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 300px;
  height: auto;
  background-size: cover;
  background-position: center;
  display: none;
  z-index: 100;
  border: 1px solid #ccc;
}

.project-item:hover .image-preview {
  display: block;
}
 .hover-text {
    width: 550px;
    font-size: 0.3em;
	font-style: italic;
}

/* olac-menu-abstand: works/studio 40px sichtbarer Abstand zu oben, links bzw. rechts */
#works, #studio { top: calc(40px - .303em) !important; }
#works { left: 37.9px !important; }
#studio { right: 38.6px !important; }

/* olac-works-seite-abstand: works und back mit 40px sichtbarem Abstand zu oben, links bzw. rechts */
.header-container .works { position: relative !important; left: calc(40px - 3.4rem - 2.1px) !important; top: calc(40px - 3.4rem - .264em) !important; }
.header-container .back { position: relative !important; right: calc(40px - 3.4rem) !important; left: auto !important; top: calc(40px - 3.4rem - .17em) !important; }

/* olac-genre-klein: Works-Liste, 4. Spalte (Art) klein geschrieben */
.projectlist .genre, .projectlist .genre a { text-transform: lowercase; }
/* olac-works-schrift: works/back auf der Works-Seite wie auf der Index-Seite (31.17px, kursiv); works halbfett */
.header-container .works, .header-container .back { font-size: 1.15em !important; font-style: italic !important; }
.header-container .works { font-weight: 600 !important; }
.header-container .back { font-weight: 400 !important; }

/* olac-projektseite: Rahmen-Layout (Pilot Runway Rain): oben Art / Titel / back, unten Jahr / Ort / Team, jeweils 40px Rand */
.olac-frame > * { position: fixed; z-index: 5; margin: 0; padding: 0; line-height: 1.2 !important; white-space: nowrap; }
.olac-frame > *, .olac-frame h1, .olac-frame h1 b, .olac-frame h1 i, .olac-frame a { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; color: #fff !important; font-size: 22px !important; font-style: italic !important; font-weight: 400; text-decoration: none !important; }
.olac-frame h1, .olac-frame h1 b, .olac-frame h1 i { font-size: 31.1659px !important; }
.olac-frame h1, .olac-frame h1 b, .olac-frame h1 i { font-weight: 700 !important; }
.olac-frame .olac-tl { top: calc(40px - .303em); left: 40px; }
.olac-frame .olac-tc { top: calc(40px - .303em); left: 50%; transform: translateX(-50%); }
.olac-frame .olac-tr { top: calc(40px - .303em); right: 40px; }
.olac-frame .olac-bl { bottom: calc(40px - .23em); left: 40px; }
.olac-frame .olac-bc { bottom: calc(40px - .23em); left: 50%; transform: translateX(-50%); }
.olac-frame .olac-br { bottom: calc(40px - .23em); right: 40px; text-align: right; white-space: nowrap; }
.olac-frame > .hover-text { position: fixed; top: 110px; left: 40px; width: 30vw; max-width: 520px; white-space: normal; opacity: 0; transition: opacity .4s ease; pointer-events: none; background: transparent; }
.olac-frame > .hover-text, .olac-frame > .hover-text small { font-size: 18.9706px !important; font-style: normal !important; line-height: 1.3 !important; }
.olac-frame .olac-tc:hover ~ .hover-text { opacity: 1; }

/* olac-textcard: Beschreibungstext als Slide im Bilder-Slider (Projektseiten) */
.olac-textcard { color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-style: normal; font-weight: 600; font-size: 3.8vh; line-height: 1.3; width: min(58vw, 1000px); margin-left: calc(50vw - 78.6px - min(29vw, 500px)); height: calc(100vh - 157px); display: flex; align-items: center; justify-content: center; text-align: justify; text-align-last: left; hyphens: none; }

/* olac-sound-farbe: Sound-Schalter weiss und in der Schrift des Rahmens */
.olac-sound { color: #fff !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; font-size: 22px !important; font-style: italic !important; }

/* olac-index-handy: Index-Seite nur auf dem Handy (bis 700 px Breite). Computer bleibt unveraendert. */
@media (max-width: 700px) {
  #studio, #works {
    position: fixed !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important;
    justify-content: center !important; text-align: center !important; z-index: 1000 !important;
    pointer-events: none; text-shadow: 0 0 10px rgba(0,0,0,.65), 0 0 3px rgba(0,0,0,.5);
  }
  #studio { top: 2px !important; bottom: auto !important; }
  #works { top: auto !important; bottom: 2px !important; }
  #studio h2, #works h2 { margin: 0 !important; font-size: 26.2px !important; line-height: 1.1 !important; color: #fff !important; white-space: nowrap !important; }
  #studio a, #works a { pointer-events: auto; padding: 10px 14px; color: #fff !important; white-space: nowrap !important; }
  /* oben statt "studio" das Wort OLAC in fett (Link zur Studio-Seite bleibt) */
  #studio a { font-size: 0 !important; }
  #studio a::before { content: "OLAC"; font-size: 26.2px; font-weight: 700; white-space: nowrap; }
  .my_gallery .image-gallery { flex-direction: column !important; margin: 0 !important; padding: 0 !important; height: auto !important; }
  .my_gallery .image-gallery > div { width: 100% !important; max-width: 100% !important; flex: none !important; }
  .my_gallery .image-gallery .gallery_card { padding: 18px 24px !important; }
}

/* olac-studio-kopfzeile: Computer, About-Seite: Titel auf gleicher Hoehe wie back */
@media (min-width: 701px) {
  .studio-title { position: relative; top: -14.3px; left: 7.5px; }
}

/* olac-works-titel-em: Works-Titel (steckt in b und i, 1.2fach) auf gleiche Grösse wie Index */
.header-container .works { font-size: 0.9583em !important; }

/* olac-works-normal: Works-Titel nicht fett */
.header-container .works { font-weight: 400 !important; }

/* olac-kopfzeile-gleich: back/works auf Computer exakt wie Index (Schriftart) */
@media (min-width: 701px) {
  .header-container .back, .header-container .works { font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; }
}

/* olac-kopfzeile-position: back/works/studio-OLAC exakt an der Position der Index-Woerter, bei jeder Fenstergroesse (em-basiert) */
@media (min-width: 701px) {
  .header-container .works { top: calc(39.2px - 1.78em) !important; }
  .header-container > i .back { left: calc(1.475em - 38.5px) !important; top: calc(39.2px - 1.78em) !important; }
  .header-container h2:first-child .back { left: calc(37.9px - 1.475em) !important; top: calc(40.08px - 1.745em) !important; }
  .studio-title { top: calc(40.08px - 1.745em) !important; left: calc(1.475em - 38.5px) !important; }
}

/* olac-projekt-handy: Projektseiten nur auf dem Handy: Ecktexte (oben links/rechts, unten links/rechts) ausblenden */
@media (max-width: 700px) {
  .olac-tl, .olac-tr, .olac-bl, .olac-br { display: none !important; }
}

/* olac-projekt-slideshow: Projektseiten nur auf dem Handy: ein Bild pro Folie, zentriert mit Rand */
@media (max-width: 700px) {
  .image-gallery.slick { margin-top: -14px !important; height: var(--olac-h, 100vh) !important; }
  .image-gallery.slick .slick-list, .image-gallery.slick .slick-track { height: var(--olac-h, 100vh) !important; }
  .image-gallery.slick .gallery_card { height: var(--olac-h, 100vh) !important; align-items: center !important; justify-content: center !important; padding: 0 10px !important; box-sizing: border-box !important; }
  .image-gallery.slick .gallery_card_image { width: 100% !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .image-gallery.slick .gallery_card_image img, .image-gallery.slick .gallery_card_image video { width: auto !important; height: auto !important; max-width: 100% !important; max-height: calc(var(--olac-h, 100vh) - 190px) !important; object-fit: contain !important; margin: 0 auto !important; transform: none !important; }
  .image-gallery.slick .gallery_card > div:not(.gallery_card_image) { max-height: calc(var(--olac-h, 100vh) - 190px); overflow: auto; }
}

/* olac-textcard-handy: Textfolie auf dem Handy: lesbare Schriftgroesse, volle Breite, zentriert */
@media (max-width: 700px) {
  .olac-textcard { font-size: 18px !important; line-height: 1.3 !important; width: 100% !important; margin: 0 !important; text-align: center !important; max-height: calc(var(--olac-h, 100vh) - 190px) !important; overflow-y: auto !important; }
}

/* olac-projekt-vertikal: TEST nur Runway-Rain, nur Handy: Bilder vertikal (von unten hoch), Tipp auf Ortstext blendet Infos ein */
@media (max-width: 700px) {
  body.olac-proj .image-gallery.slick { touch-action: none !important; }
  body.olac-proj .image-gallery.slick .slick-current { animation: olacup 0.45s ease-out; }
  body[data-olac-dir="prev"].olac-proj .image-gallery.slick .slick-current { animation-name: olacdown; }
  body.olac-proj.olac-open .olac-frame { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 6; display: flex !important; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; padding: 16px 24px 28px; }
  body.olac-proj.olac-open .olac-frame .olac-tl, body.olac-proj.olac-open .olac-frame .olac-bl, body.olac-proj.olac-open .olac-frame .olac-bc, body.olac-proj.olac-open .olac-frame .olac-br { position: static !important; display: block !important; width: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 0 !important; text-align: center !important; text-shadow: 0 0 10px rgba(0,0,0,.65), 0 0 3px rgba(0,0,0,.5); }
  body.olac-proj.olac-open .olac-frame .olac-tl, body.olac-proj.olac-open .olac-frame .olac-bl, body.olac-proj.olac-open .olac-frame .olac-br { font-size: 16px !important; animation: olacin 0.3s ease-out; }
  body.olac-proj.olac-open .olac-frame .olac-bc, body.olac-proj.olac-open .olac-frame .olac-br { flex: 0 0 100%; max-width: 100%; box-sizing: border-box; }
  body.olac-proj .olac-frame .olac-br .olac-nm { white-space: nowrap; }
  body.olac-proj.olac-open .olac-frame .olac-bc { order: 1; transform: none; }
  body.olac-proj.olac-open .olac-frame .olac-tl { order: 2; }
  body.olac-proj.olac-open .olac-frame .olac-bl { order: 3; }
  body.olac-proj.olac-open .olac-frame .olac-br { order: 4; white-space: normal !important; }
}
@media (max-width: 700px) {
  body.olac-proj .olac-bc, body.olac-proj .olac-tc { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  body.olac-proj .olac-bc::after { content: ""; position: absolute; left: -40px; right: -40px; top: -16px; bottom: -34px; }
  body.olac-proj.olac-open .olac-bc::after { display: none; }
  body.olac-proj .olac-tc::after { content: ""; position: absolute; left: -30px; right: -30px; top: -16px; bottom: -16px; }
}
@keyframes olacup { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes olacdown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (max-width: 700px) {
  body.olac-proj .image-gallery.slick .olac-leave { position: absolute !important; left: 0 !important; top: 0 !important; margin: 0 !important; opacity: 1 !important; z-index: 1001 !important; pointer-events: none !important; animation: olacleaveup 0.45s ease-out forwards; }
  body[data-olac-dir="prev"].olac-proj .image-gallery.slick .olac-leave { animation-name: olacleavedown; }
}
@keyframes olacleaveup { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes olacleavedown { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes olacin { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* olac-works-scroll: Handy, Works-Liste in beide Richtungen scrollbar (Kopf bleibt stehen), Zoomen per Pinch */
@media (max-width: 700px) {
  .projectlist {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: calc(var(--olac-h, 100vh) - 100px);
    padding-bottom: 30px;
    box-sizing: border-box;
  }
}


/* olac-hintergrund-voll: Handy, schwarzer Hintergrund immer bildschirmhoch (kein weisser Streifen unten) */
@media (max-width: 700px) {
  .page_background {
    min-height: var(--olac-h, 100vh) !important;
  }
}


/* olac-works-kopf-handy: Handy, Works-Seite - "works" in der Mitte, "back" ausgeblendet (Tippen auf "works" geht zurueck, siehe Skript) */
@media (max-width: 700px) {
  .header-container > i .back {
    display: none !important;
  }
  .header-container .works {
    position: fixed !important;
    left: 50% !important;
    top: 15px !important;
    transform: translateX(-50%) !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .header-container .works::after {
    content: "";
    position: absolute;
    left: -34px;
    right: -34px;
    top: -14px;
    bottom: -14px;
  }
}


/* olac-works-start-raus: Handy, Works-Seite startet rausgezoomt; Hintergrund ganz schwarz (kein weisser Streifen) */
@media (max-width: 700px) {
  html.olac-works,
  html.olac-works body {
    background: #000 !important;
  }
  html.olac-wz .projectlist {
    opacity: 0;
  }
}


/* olac-works-overscroll: Handy, Works-Seite - kein Mitziehen/Gummiband der Seite */
@media (max-width: 700px) {
  html.olac-works,
  html.olac-works body {
    overscroll-behavior: none;
  }
}