:root {
    --showcase-bg-color: rgb(190, 114, 235);
    --left-bg-color: rgb(230, 166, 82);
    --right-bg-color: rgb(133, 202, 212);
    --gallery-bg-color: rgb(15, 15, 15);
    --hover-width: 100%;
    --other-width: 0%;
    --hover-height: 100%;
    --other-height: 0%;
    --speed: 800ms;
}

html, body {
    padding: 0;
    margin: 0;
    font-family: GillSans, Calibri, Trebuchet, sans-serif;
    width: 100%;
    height: 100%;
}

.slider .slides li:first-child .caption {
    display: flex;
    justify-content: center;
}

.nav-wrapper {
    height: 10%;
}

.brand-logo {
    white-space: nowrap;
}

.lighten {
    background-color: rgba(0, 0, 0, 0.5);
}

.showcase {
    position: relative;
    width: 100vw;
    height: 92vh;
    background: var(--gallery-bg-color);
}

.showtop {
    height: 100%;
    background-image: var(--showcase-bg-color);
}

.caption-background {
    width: max-content;
    padding: 0rem 6rem 1rem 6rem;
    background-color: rgba(0, 0, 0, 0.8);
}

.caption-background .left {
    float: left;
}

.caption-background .middle {
    float: center;
}

.caption-background .right {
    float: right;   
}

.showmid {
    height: 0%;
}

.split {
    position: absolute;
    height: 0%;
    overflow: hidden;
}

.split.showleft {
    left: 0;
    width: 0%;
    background: var(--left-bg-color);
}

.split.showright {
    right: 0;
    width: 100%;
    background: var(--right-bg-color);
}

.split.showleft, .split.showright, .showtop, .showmid, .showbottom, .slider, .left-button, .right-button, .bottom-area {
    transition: var(--speed) all ease-in-out;
}

.hover-left .showleft, .hover-right .showright, .hover-top .showtop{
    overflow-y: visible;
}

.hover-left .showleft {
    width: var(--hover-width);
}

.hover-left .showright {
    width: var(--other-width);
}

.hover-left .showtop {
    height: var(--other-height);
}

.hover-left .showmid {
    height: var(--hover-height);
}

.hover-right .showleft {
    width: var(--other-width);
}

.hover-right .showright {
    width: var(--hover-width);
}

.hover-right .showtop {
    height: var(--other-height);
}

.hover-right .showmid {
    height: var(--hover-height);
}

.hover-top .showtop {
    height: var(--hover-height);
}

.hover-top .showmid {
    height: var(--other-height);
}

.hover-top .split {
    height: var(--other-height);
}

.hover-mid .slider {
    height: var(--other-height);
}

.hover-mid .showtop {
    height: var(--other-height);
}

.hover-mid .showmid {
    height: var(--hover-height);
}

.hover-mid .split {
    height: var(--hover-height);
}

.row {
    width: 70vw;
}

.showcase{
    overflow-x: hidden;
}

h1 {
    margin: 0rem;
    font-size: 2rem;
    color: #fff;
    white-space: nowrap;
}

.textarea {
    padding: 1.5rem 2rem;
    color: white;
    margin: 6% 5%;
}

.showright .textarea {
    background-color: rgb(243, 163, 59);
}

.showleft .textarea {
    background-color: rgba(255, 255, 255, 0.2);
}

.card {
    margin: 6% 5%;
}

.card-subline {
    padding: 4rem 1rem;
    font-size: 1.5rem;
}

.fixed-action-btn {
    bottom: 5rem;
    visibility: hidden;
}

.page-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0;
    width: 100%;
    z-index: 2;
}

.impressum {
    margin: 0px 20px 0px 30px;
    text-decoration-line: underline;
}

.bottom-content {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    float: left;
}

.bottom-open .bottom-content {
    visibility: visible;
    margin: 0 5% 2% 5%;
    height: 100%;
}

h2 {
    font-size: 2rem;
    margin: 0;
}

.card .card-content .card-title {
    margin: 0;
}

.flow-text {
    margin: 2rem 0 0 0;
}

.container .card-content, .container .textarea{
    background-color: rgb(26, 26, 26);
    color: rgb(173, 173, 173);
}

/* .container .material-icons {
    visibility: hidden;
} */

body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.no-margin {
    margin: 0;
}

.btn {
    width: 100%;
    text-transform: none;
    background-color: peru;
}

.btn:hover {
    background-color: darksalmon;
}

.timestamp-btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.timestamp-btn.active {
    background-color: coral;
}

.timestamp-btn .progress-fill {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3); /* or your preferred color */
    width: 0%;
    z-index: 0;
    transition: width 0.2s linear;
}

.indicators {
    padding-bottom: 4rem;
}


@media(max-width: 992px) {
    .row {
        width: 80vw;
    }

    h1 {
        font-size: 2rem;
    }

    .fixed-action-btn {
        visibility: visible;
    }
}

@media(max-width: 600px) {
    .row {
        width: 90vw;
        padding: 1rem 0; 
    }
}

.video-wrapper {
    padding: 0.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: black;
}

/* Do NOT apply margin/padding/border to .video-container directly */