:root {
    /* Colors */
    --color-primary: #FF64A5;

    --text-primary: rgb(255, 255, 255);
    --text-secondary: rgb(0, 0, 10);
    --text-tertiary: rgb(190, 235, 255);


    --background: #FF64A5;
    --overlay: rgba(2, 35, 50, 0.5);

    --bg-filter: blur(60px);

    --space-ym: 6vh;
    --space-ys: 3vh;
    --space-xm: 8vw;
    --space-xs: 4vw;

    --font-slim: clamp(.80rem, calc(1vw + .5rem), 1rem);
    --line-slim: clamp(1.0rem, calc(1vw + .8rem), 1.4rem);

    --font-basic: clamp(1.2rem, calc(1vw), 1.4rem);
    --line-basic: clamp(1.8rem, calc(1vw + 0.4rem), 2rem);

    --font-head: clamp(1.0rem, calc(2vw + 0.8rem), 2rem);
    --line-head: clamp(1.2rem, calc(2vw + 1.2rem), 2.2rem);

    --font-loud: clamp(1.8rem, calc(3vw + 1.8rem), 4rem);
    --line-loud: clamp(2.2rem, calc(3vw + 2.0rem), 6rem);
}

@media only screen and (max-width: 1500px) {
    :root {
        --space-ym: 6vh;
        --space-ys: 4vh;
        --space-xm: 4vw;
        --space-xs: 4vw;
    }
}

@media only screen and (orientation: portrait) {
    :root {
        --space-ym: 3vh;
        --space-ys: 3vh;
        --space-xm: 4vw;
        --space-xs: 4vw;
    }
}

::selection {
    color: var(--text-primary);
    /* text color */
    background: var(--color-primary);
    /* highlight color */
}

@font-face {
    font-family: 'NHaasGrotesk';
    src: url('fonts/NHaasGroteskDSPro-45Lt.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NHaasGrotesk';
    src: url('fonts/NHaasGroteskDSPro-65Md.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

/* */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: "NHaasGrotesk", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: var(--background);
}

html,
body {
    width: 100vw;
    margin: 0px;
    float: left;
}

body {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

button {
    background: transparent !important;
    border: none;
    font-size: var(--font-basic);
    font-weight: bold;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

/* Font */

h1,
h2,
h3 {
    text-overflow: hidden;
    font-weight: regular;
    color: var(--text-tertiary);
    padding-bottom: var(--font-basic);
}

h1 {
    max-width: 90%;
    font-size: var(--font-loud);
    line-height: var(--line-loud);
    hyphens: none;
    letter-spacing: 0.01rem;
}

#welcome {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#welcome h1 {
    max-width: 1300px;
    color: var(--color-primary) !important;
}
#welcome h3 {
    width: 100% !important;
    max-width: none !important;
    color: var(--text-primary);
    text-align: center;
}

a.language-switch {
    position: absolute;
    z-index: 111;
    top: var(--space-xs);
    right: var(--space-xs);
    width: auto;
    text-align: right;
    color: var(--text-primary);
    font-size: var(--font-basic);
    text-decoration: none;
}
a.language-switch:hover {
    text-decoration: underline;
}

h2 {
    max-width: 900px;
    font-size: calc(var(--font-head) + 1.5rem);
    line-height: calc(var(--line-head) + 1.5rem);
    letter-spacing: 0.03rem;
}

h3 {
    max-width: 800px;
    font-size: var(--font-head);
    line-height: var(--line-head);
    padding: 8px 0 32px 0;
    letter-spacing: 0.03rem;
}

p {
    font-size: var(--font-basic);
    line-height: var(--line-basic);
    max-width: 750px;
    font-weight: 300;
    color: var(--text-primary);
    hyphens: auto;
    hyphenate-limit-chars: 4 3;
    hyphenate-limit-lines: 3;
    padding: 8px 0px;
    letter-spacing: 0.05rem;
}

button p,
button.slim {
    cursor: pointer;
    max-width: 800px;
    font-size: var(--font-slim);
    line-height: var(--line-slim);
}

img {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    background-color: darkslategrey;
}

img.slide,
a img {
    object-fit: contain !important;
    background-color: transparent !important;
    border-radius: none !important;
}

.clickable,
button img,
img[onclick="scrollToImage(this)"],
img.clickable {
    /* your styles here */
    cursor: pointer;
    border-radius: 8px;
    flex-direction: column;
    justify-content: space-between;
}

more {
    font-size: var(--font-slim);
    line-height: var(--line-slim);
    color: var(--text-primary);
    font-weight: bold;
}
more::after {
    content: ' →';
    text-decoration: none !important;
}
more::after:hover,
:hover more::after {
    text-decoration: none !important;
}

/* General */
.grid {
    /* refactor everything to .grid? */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 24px;
    padding-bottom: var(--space-ym) !important;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .grid {
        gap: 8px !important;
    }
}

.dual-layout {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--space-xm);
    overflow-x: none;
    align-items: flex-start;
}


.dual-layout *,
.dual-layout div * {
    width: 100%;
    flex-grow: 1fr;
}

.dual-layout p {
    padding: 8px 0px !important;
}

@media only screen and (orientation: portrait) {
    .dual-layout {
        flex-direction: column;
        gap: var(--space-xs);
    }
}

/* Sections */

#pink,
#trailer {
    background-color: transparent;
}

iframe {
    width: 100%;
    height: 52vw;
}

iframe video {
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 1500px) {
    #welcome h1 {
        hyphens: auto;
        hyphenate-limit-chars: auto 3;
        hyphenate-limit-lines: 4;
        padding: var(--space-ym) var(--space-xm);
    }
}

#welcome {
    position: absolute;
    padding: var(--space-ym) var(--space-xm);
    min-height: 100dvh;
    /* color: var(--background); */
    color: var(--color-primary);
    z-index: 10;
}

#maskCanvas {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100dvh;
    pointer-events: none;
    z-index: 5;
}

section {
    width: 100vw;
    /* min-height: 100dvh; */
    padding: var(--space-ym) var(--space-xs);
    box-sizing: border-box;
    scroll-snap-align: start;
    background-size: cover;
    background-position: center;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-ys);
    float: left;
}

.blurry {
    background-color: var(--overlay);
    backdrop-filter: var(--bg-filter);
    -webkit-backdrop-filter: var(--bg-filter);
    float: left;
}

.container {
    width: 100%;
    max-width: 1920px;
    padding: 16px var(--space-xm);
    /* background-color: limegreen; */
    margin: 0px auto;
}

.min-height {
    min-height: 56vw;
}

.gaps {
    display: flex;
    flex-direction: column;
    gap: var(--space-ys);
}

#trailer {
    color: var(--text-primary);
}

#trailer img.iff-laurel {
    display: block;
    width: 100%;
    height: calc(var(--space-ym) * 3);
    /* or any fixed/relative value */
    max-height: 400px;
    margin-top: -20vh;
    margin-bottom: calc(var(--space-ym)*2);
    filter: drop-shadow(0 0 24px black);
    float: left;
}

.contained {
    object-fit: contain;
    background-color: transparent;
}

.subinfo {
    color: var(--text-primary);
    /* doubled? */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media only screen and (orientation: portrait) {
    .subinfo {
        flex-direction: column-reverse;
    }
}

#inhalt {
    color: var(--text-primary);
}

#termine {
    background-color: rgb(241, 139, 185);
    /* background-color: var(--background); */
    color: var(--text-secondary);
    justify-content: space-evenly;
    gap: var(--space-ys) !important;
}

#termine h2,
#termine h3,
#termine p {
    color: var(--text-secondary);
}

#termine div {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#termine div * {
    padding: 0px !important;
}

#termine div.screening {
    font-size: var(--font-basic);
    display: flex;
    align-items: flex-start;
    gap: 4px !important;
}

div.screening .table {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
}

.table p {
    font-weight: 800 !important;
}

.table> :nth-child(1) {
    white-space: nowrap;
}

.table> :nth-child(3) {
    text-align: right;
}

.screening .table div {
    display: flex !important;
    flex-direction: row !important;
    gap: 0px !important;
}

.table .date> :nth-child(2)::before {
    content: '\00a0 - \00a0';
    /* Unicode for non-breaking space */
}

.table .cinema> :nth-child(2)::before {
    content: ', \00a0';
    /* Unicode for non-breaking space */
}

@media only screen and (orientation: portrait) {
    .screening .table div {
        flex-direction: column !important;
    }

    .table .date> :nth-child(2)::before,
    .table .cinema> :nth-child(2)::before {
        content: none;
    }
}

.screening div {
    gap: 16px;
    font-size: var(--font-basic);
    list-style: none;
}

.screening .event {
    font-weight: 100 !important;
}


.modal-link {
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.0);
    display: flex;
    justify-content: space-between;
}
#bewegung .modal-link {
    flex-direction: column;
    justify-content: baseline;
    gap: 8px;
}

.modal-link:hover {
    box-shadow: 0 16px 96px rgba(0, 25, 55, 0.5);
}

.modal-link * {
    transition: all 0.3s ease;
}

.modal-link:hover * {
    transform: translateY(-8px);
}

.modal-link:hover :after {
    text-decoration: underline;
}

.person {
    width: 100%;
    box-sizing: border-box;
    height: 26vw;
    padding: var(--space-ym) var(--space-xs);
    background-size: cover !important;
}

.konni {
    background-position: right center !important;
}

.jasmin {
    background-position: center top !important;
}

#inhalt,
#leads,
#team,
#bewegung {
    gap: var(--space-ym);
    color: var(--text-tertiary) !important;
}

#inhalt,
#leads {
    padding-bottom: 0px;
}

#team {
    padding-top: var(--space-xm);
}

#bewegung {
    padding: 0 !important;
    gap: 0px !important;
}

#bewegung h2,
#bewegung more {
    padding: 16px var(--space-xs);
    color: var(--text-tertiary);
}
#team div.hero {
    background-size: cover;
    min-height: 56vw;
    padding: var(--space-ym) var(--space-xs);
    color: var(--text-primary);
}

#bewegung div.hero {
    align-content: end;
    background-size: cover;
    min-height: 56vw;
    padding: var(--space-ys) 0;
}

#bewegung div.vereine {
    background-color: #F18BB9;
    display: flex;
    flex-direction: column;
    padding: var(--space-ym) var(--space-xs);
    gap: 24px !important;
}

#bewegung div.vereine div.container * {
    color: var(--text-secondary) !important;
}

.vereine a {
    font-size: var(--font-basic);
    line-height: var(--line-basic);
    font-weight: bold;
    color: var(--color-teriary) !important;
    text-decoration: none;
}

.vereine a i {
    width: 100%;
    font-size: var(--font-slim);
    font-weight: 100;
    float: left;
}

.vereine a:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 1500px) {
    .vereine a i {
        display: none;
    }
}

#credits,
#thanks {
    background-color: var(--overlay);
    overflow: hidden;
    padding-bottom: var(--space-ym);
}

#credits .grid {
    width: 100%;
    max-width: 100% !important;
    color: var(--text-primary) !important;
    font-size: var(--font-basic);
    line-height: var(--line-basic);
    list-style: none;
}

#credits .film-team {
    gap: var(--space-ys);
}

#credits p {
    color: var(--text-primary);
}

#credits p b {
    color: var(--color-primary);
    font-weight: 300;
    /* regular */
}

.footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-xs);
    background-color: var(--overlay);
    padding: var(--space-ys) calc(var(--space-xm) + var(--space-xs));
}

.footer div {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.footer a {
    cursor: pointer !important;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 300;
}

.footer a:hover {
    text-decoration: underline;
}

.slim b {
    width: 100%;
    float: left;
}

.kontakt {
    flex: 1;
    background-color: rgba(190, 235, 255, 0.25);
    color: var(--text-secondary) !important;
    padding: 8px 16px 24px 32px;
    margin-top: 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.kontakt p,
.kontakt a {
    color: var(--text-primary);
    font-size: var(--font-basic);
    line-height: var(--line-basic);
    float: left;
}

.kontakt img {
    max-width: 300px;
    margin: 32px 0 16px 0;
    aspect-ratio: auto;
    object-fit: cover;

}

/* Menu */

.menu button,
.modal-content button[onclick="closeModal()"] {
    width: 250px;
    font-size: var(--font-basic);
    font-size: var(--line-basic);
    font-weight: bold;
    text-decoration: none;
    text-overflow: ellipsis;
    border-radius: 8px;
    padding: 12px 16px;
}

.menu {
    position: fixed;
    top: calc(var(--space-ys) - 8px);
    right: calc(var(--space-ys) - 8px);
    border-radius: 16px;
    z-index: 10;
    cursor: pointer;
    padding: 8px;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-primary);
    background-color: transparent;
    z-index: 2;
}

.menu.expanded,
.menu:hover {
    background-color: rgba(190, 235, 255, 0.25);
    backdrop-filter: var(--bg-filter);
    -webkit-backdrop-filter: var(--bg-filter);
}

@media (hover: hover) {
  .menu:hover {
    height: auto;
  }
}

.menu button {
    display: none;
    color: var(--text-primary);
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-basic);
    line-height: var(--font-basic);
    transition: all 0.3s ease;
}

.menu button:hover {
    background-color: var(--overlay) !important;
}

.menu.expanded button,
.menu:hover button {
    display: block;
}

.menu button.active {
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--text-tertiary) !important;
    color: var(--text-secondary);
}

.menu button.active::after {
    content: " ☰";
}

.menu:hover button::after {
    content: none;
}

.modal-content button[onclick="closeModal()"] {
    position: fixed !important;
    top: var(--space-ys);
    right: var(--space-ys);
    background-color: var(--color-primary) !important;
    color: var(--text-primary);
    font-size: var(--font-basic);
    line-height: var(--line-basic);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    float: left;
}

.modal-content button[onclick="closeModal()"]::after {
    content: '𐄂';
    font-size: var(--font-basic);
    line-height: var(--line-basic);
}

@media (max-width: 600px) {

    .menu,
    .modal-content button[onclick="closeModal()"] {
        left: auto;
        right: 20px;
    }

    .menu button {
        width: auto;
    }

    .menu button span {
        display: none;
    }

    .menu:hover button {
        width: 250px;
    }

    .menu:hover button span {
        display: block;
    }
}

/* Modal */

#modal {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100svh;
    overflow-y: scroll;
    overflow-x: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    background-color: var(--overlay);
    backdrop-filter: var(--bg-filter);
    -webkit-backdrop-filter: var(--bg-filter);
    z-index: 100;
    float: left;
}

#modal.show {
    opacity: 1;
    pointer-events: all;
    padding: var(--space-ym) 0px;
    cursor: pointer;
    float: left;
}

.modal-content {
    position: relative;
    /* Ensure it's not interfering */
    overflow: visible;
    /* Allow overflow if needed */
    display: none;
    transition: transform 0.3s ease;
    /* background-color: var(--overlay); */
    color: var(--color-teriary);
    cursor: default;
}

#modal-content-wrapper {
    width: 100%;
    padding: var(--space-ym) var(--space-xs);
}

#modal.show .modal-content.show {
    display: flex;
    width: 100%;
    flex-direction: column;
    border-radius: 16px;
    gap: var(--space-xs);
    /* transform: scale(1); */
    color: var(--text-primary);
    float: left;
}

.img-only {
    padding: 0px !important;
}

#modal img {
    width: 100%;
    border-radius: 8px;
}


#modal-content-thanks div.container {
    width: auto;
}

#modal-content-thanks div.container p {
    padding: 24px;
}

#modal-content-thanks img {
    height: var(--space-b);
    max-height: 200px;
    width: auto;
}

.logo-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.logo-view a {
    color: var(--text-primary);
    text-decoration: none;
    padding: 48px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.0);
    /* background-color: rgba(175, 182, 205, 0.1); */
    background-color: rgba(250, 200, 255, 0.5);
    border-radius: 24px;
}

@media only screen and (orientation: portrait) {
    .logo-view {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 1500px) { 
    .logo-view a { 
        padding: 24px;
    }
}

.logo-view a:hover {
    box-shadow: 0 16px 96px rgba(0, 25, 55, 0.5);
    background-color: rgba(205, 212, 225, 0.66);
}

.logo-view a * {
    transition: all 0.3s ease;
}

.logo-view a:hover * {
    transform: translateY(-8px);
}

@media only screen and (orientation: landscape) {
    #modal-content-imprint {
        flex-direction: row !important;
    }
}

#modal-content-imprint {
    padding: var(--space-ym);
}

#modal-content-imprint div {
    color: var(--text-primary) !important;
}

/* Slider */

.slide-track {
    display: flex;
    width: max-content;
    flex-direction: row !important;
    overflow: hidden;
    gap: var(--space-ym);
    margin-top: var(--space-xm);
    animation: scroll 60s linear infinite;
    float: left;
}

.slide {
    object-fit: contain;
    height: 132px;
    filter: brightness(0) invert(1);
    margin: 0px 24px;
    overflow: hidden;
}

@media only screen and (orientation: portrait) {
    .slide {
        height: 80px;
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* temporary */
.kill {
    color: darkred;
    text-decoration: line-through;
}