:root {
--Wight: #FFF;
--UNI-Blue: #68A6D7;
--UNI-Pink: #F65287;
--uni-pink-transparent: rgba(246, 82, 135, 0.15);
--background-w-8: rgba(255, 255, 255, 0.08);
--text-80: rgba(255, 255, 255, 0.80);
--Dark: #1E1E1E;
}
body.modal-reservierung-open{
overflow: hidden;
}
body.modal-reservierung-open header .et_builder_inner_content {
z-index: -1;
}
.spinner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8); display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid var(--uni-pink-transparent);
border-top: 5px solid rgba(246, 82, 135, 1);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} .kino-film-liste{
position: relative;
}
.kino-film-row{
display: flex;
gap: 56px;
padding: 70px 0;
position: relative;
}
.kino-film-row:before {
content: '';
display: flex;
position: absolute;
top: 0;
width: 100%;
height: 5px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: left center;
}
.kino-film-row.first {
padding-top: 0;
}
.kino-film-row.first:before {
display: none;
}
.kino-film-image {
width: 100%;
flex: 0 0 300px;
}
.kino-film-image-container{
line-height: 0;
position: relative;
} .kino-film-image img {
width: 300px;
height: 438px;
object-fit: cover;
border-radius: 8px;
border: 6px solid var(--Wight);
}
.kino-film-details{
position: relative;
}
.kino-film-erstezeile {
color: var(--UNI-Pink);
font-family: Lato;
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: normal;
display: inline-block;
padding-bottom: 8px;
position: relative;
top: -6px;
}
.kino-film-titel {
color: #FFF;
font-family: Lato;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 40px; padding-bottom: 14px;
}
.kino-film-metainfos {
color: #FFF;
font-family: Lato;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 35px;
display: flex;
flex-wrap: wrap;
column-gap: 22px;
row-gap: 8px;
padding-bottom: 10px;
align-items: center;
}
.kino-film-digital {
width: 31px;
height: 26px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
}
.kino-film-beschreibung {
color: var(--text-80);
font-family: Lato;
font-size: 22px;
font-style: normal;
font-weight: 300;
line-height: 35px; }
.kino-film-beschreibung-1 {
padding-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.3s ease;
}
.kino-film-beschreibung-mehr-link {
color: var(--Wight);
font-family: Lato;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 35px; text-decoration: none;
cursor: pointer;
padding-bottom: 6px;
display: inline-flex;
align-items: center;
}
.kino-film-beschreibung-mehr-link:after{
content: '';
display: block;
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
margin-left: 3px;
transition: transform 0.3s ease;
position: relative;
}
.kino-film-beschreibung.expanded .kino-film-beschreibung-mehr-link:after {
transform: rotate(180deg); top: 3px;
} .kino-film-beschreibung.expanded .kino-film-beschreibung-1 {
-webkit-line-clamp: unset; }
.kino-film-beschreibung-2 {
display: none;
padding-top: 4px;
}
.kino-film-beschreibung-2.expanded {
height: auto;
}
.kino-film-beschreibung-2 p {
padding-bottom: 6px;
}
.kino-film-beschreibung-2 p:last-of-type{
padding-bottom: 6px;
}
.kino-film-vorstellungen {
display: flex;
flex-direction: row;
flex-wrap: wrap; row-gap: 20px;
column-gap: 25px;
padding: 10px 0 25px 0;
}
.kino-film-vorstellung, .kino-film-vorstellung-outdated {
padding: 10px 20px 9px 20px;
justify-content: center;
display: flex;
align-items: center;
border-radius: 8px;
border: 5px solid var(--uni-pink-transparent);
background: var(--background-w-8);
color: #FFF;
font-family: Lato;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 38px; min-width: 300px;
box-sizing: border-box;
}
.kino-film-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-start;
}
.kino-film-button {
border-radius: 5px;
background: var(--UNI-Blue);
padding: 13px 25px 14px;
color: #FFF;
font-family: Lato;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.009px;
text-transform: uppercase;
display: flex;
text-transform: uppercase;
align-items: center;
cursor: pointer;
white-space: nowrap;
min-width: max-content;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.kino-film-button:hover {
background: var(--UNI-Pink);
}
.kino-film-button:before {
content: '';
display: block;
background-repeat: no-repeat;
padding-right: 10px;
}
.kino-film-button-trailer:before {
width: 10px;
height: 13px;
background-image: url('data:image/svg+xml,');
}
.kino-film-button-reservieren:before {
width: 16px;
height: 13px;
background-image: url('data:image/svg+xml,');
}
.kino-film-verlaengert {
position: absolute;
right: 0;
bottom: 0;
width: 202px;
height: 86px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
}
.kino-film-archiv-laden{
display: flex;
justify-content: center;
}
.kino-film-button-archiv:before {
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml,');
} .kino-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: flex-start; z-index: 1000;
}
.kino-modal {
height: 500px;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
width: 700px;
position: relative;
border-radius: 8px;
border: 6px solid var(--uni-pink-transparent);
background: var(--Dark);
box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.06);
max-height: 90vh; margin-top: 5vh; transition: height 0.3s ease-in-out;
}
.kino-modal-close {
position: absolute;
top: 25px;
right: 25px;
background: none;
border: none;
padding: 10px;
margin: 0;
cursor: pointer;
}
.kino-modal-close:before {
content: '';
width: 24px;
height: 25px;
display: block;
background-image: url('data:image/svg+xml,');
}
.kino-modal iframe {
width: 100%;
height: 100%;
border: none;
} @media (max-width: 1280px) {
.spielplan_row{
width: 90%;
}
.kino-film-row {
gap: 30px;
}
.kino-film-titel {
font-size: 32px;
line-height: 38px; }
.kino-film-metainfos, .kino-film-beschreibung-mehr-link {
font-size: 20px;
line-height: normal;
}
.kino-film-beschreibung{
font-size: 18px;
line-height: 29px;
}
}
@media (max-width: 768px) { .kino-film-row{
flex-direction: column;
}
.kino-film-image {
display: flex;
justify-content: center;
border-radius: 8px;
background: rgba(255, 255, 255, 0.10);
flex: auto;
}
.kino-film-image-container{
flex: 0 0 300px;
}
.kino-film-vorstellung {
font-size: 22px;
}
}
@media (max-width: 480px) {
.kino-film-image-container {
flex: 1;
}
.kino-film-image img {
width: 100%;
height: auto;
}
.kino-film-buttons > .kino-film-button {
flex: 1 1 auto;
}
} .latest_films_row {
max-width: 1354px !important;
}
.kino-latest-films {
display: flex;
gap: 40px;
flex-wrap: wrap;
justify-content: center;
}
.kino-latest-films-column {
flex: 1 1 calc((100% - 3 * 40px) / 4); max-width: 308px;
line-height: 0;
}
.kino-latest-films-image {
height: 100%;
transition: transform 300ms ease 0ms;
}
.kino-latest-films-image:hover {
transform: scaleX(0.99) scaleY(0.99) !important;
}
.kino-latest-films-image-container {
height: 100%;
}
.kino-latest-films-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
border: 6px solid var(--Wight);
} @media (max-width: 980px) {
.latest_films_row {
width: 90% !important;
}
.kino-latest-films-column {
flex: 1 1 calc((100% - 1 * 40px) / 2); }
}
@media (max-width: 480px) {
.kino-latest-films-column {
flex: 1 1 100%;
}
}
@keyframes slideUp {
from {
transform: translateY(30%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.slide-up {
animation: slideUp 850ms ease-in-out forwards;
}