/* Loader */

#app .loader {
    height: 100vh;
    cursor: url('/img/icon-busy.png'), pointer;
}

#app .loader img {
    animation: colorstorm 1s ease infinite;
    -webkit-animation: colorstorm 1s ease infinite;
}

.partner {
    display: flex;
    flex-direction: row;
}


.partner div {
    margin-top: auto;
    margin-bottom: auto;
    flex: 1 1 auto;
}

/* Header, Nav & Content */

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 900;
}

header .logo, header .postlogo {
    position: absolute;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

header .logo {
    height: var(--headerlogo-height);
    width: 100%;
    padding-top: 5px;
    z-index: 1;
    -webkit-transform: translate3d(0,0,0); /* Workaround für Darstellungsprobleme unter Safari */
}

header .logo img {
    height: calc(var(--headerlogo-height) + 1px); /* 100% -> ohne Überhang */
    width: auto;
}

header .navbar-toggler {
    top: calc(var(--headerlogo-height) / 5);
    position: absolute;
    right: 5px;
}

header .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='5' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

header .navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

header .postlogo {
    height: 15vh;
    width: 100%;
    pointer-events: none;
}

header .postlogo, nav.navbar {
    top: var(--headerlogo-height);
}

nav.navbar {
    width: 100%;
    position: fixed;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    padding: 1px 0 0 0; /* Workaround für Safari */
    z-index: 800;
}

nav.navbar .navbar-toggler:focus {
    box-shadow: none;
}

nav.navbar .nav-link {
    font-size: 12px;
    font-weight: 700;
    border-top: var(--nav-active-border-height) solid transparent;
    border-bottom: var(--nav-active-border-height) solid transparent;
}

nav.navbar a:hover:not(.navbar-brand) {
    color: #ffffff;
    text-shadow: none;
    border-color: transparent;
}

nav.navbar ul.nav {
    display: block;
    text-align: center;
}

nav.navbar a:hover {
    background-color: rgba(0, 0, 0, .4);
}

/* Intro */

section.intro {
    position: relative;
    z-index: 1100;
    background-size: cover;
    background-position: center top;
}

section.intro .container {
    min-height: 100vh;
}

section.intro h1 {
    color: var(--purple-main);
}

section.intro h1 span, section.intro p {
    color: #ffffff;
}

section.intro .partner {
    padding-top: 25px;
}

section.intro .partner div {
    padding-left: .25rem;
    padding-right: .25rem;
}

section.intro .coin, section#news .coin {
    animation: colorstorm 10s ease infinite, blinker 1s ease-in infinite;
    padding-bottom: 75px;
}

/* Content */

section .opener {
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
}

section:not(#sub) .opener {
    z-index: 800;
}

section .opener:not(.parallax) {
    padding-top: calc(var(--headerlogo-height) * 2);
    /*background-attachment: fixed;*/
}

section .opener.parallax {
    height: 100vh;
}

section .opener .title {
    top: var(--headerlogo-height);
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    /*z-index: 700;*/
    z-index: 850;
    text-align: center;
    transition: all .25s linear;
    margin-top: auto;
    margin-bottom: auto;
    --bs-gutter-x: 0;
}

section .opener .title i {
    font-size: 54px;
    margin-right: 2px;
}

section .opener.parallax .demo {
    position: absolute;
    width: 100%;
    bottom: 0;
    justify-content: center;
    overflow: hidden;
}

section .opener .title h1, section .opener .title h2 {
    color: #ffffff;
    margin-bottom: 0px;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.6);
}

section .content {
    position: relative;
}

section#development .opener {
    background-image: url("/img/backgrounds/section-softwareentwicklung-programmierung.jpg");
}
section#network .opener {
    background-image: url("/img/backgrounds/section-netzwerke-infrastruktur.webp");
}
section#sound .opener {
    background-image: url("/img/backgrounds/section-musik-sound-soundtrack.jpg");
}
section#text .opener {
    background-image: url("/img/backgrounds/section-text-lektorat-uebersetzung.jpg");
}

section#sub .opener {
    background-image: url("/img/backgrounds/section-sub.webp");
    background-position: center center;
}
section#sub.contact .opener {
    background-image: url("/img/backgrounds/section-sub-contact.webp");
}
section#sub.certifications .opener {
    background-image: url("/img/backgrounds/section-sub-certifications.webp");
}
section#sub.imprint .opener {
    background-image: url("/img/backgrounds/section-sub-imprint.webp");
}
section#sub.notfound .opener {
    background-image: url("/img/backgrounds/section-sub-notfound.webp");
}

section#sub .container, section#sub .container h3, section#sub .container h4 {
    margin-top: 50px;
}

main .technologies > div:nth-child(1) i {
    animation: colorswitch 3.5s ease-in 1s infinite;
    -webkit-animation: colorswitch 3.5s ease-in 1s infinite;
}
main .technologies > div:nth-child(2) i {
    animation: colorswitch 3.5s ease-in 1.5s infinite;
    -webkit-animation: colorswitch 3.5s ease-in 1.5s infinite;
}
main .technologies > div:nth-child(3) i {
    animation: colorswitch 3.5s ease-in 2s infinite;
    -webkit-animation: colorswitch 3.5s ease-in 2s infinite;
}
main .technologies > div:nth-child(4) i {
    animation: colorswitch 3.5s ease-in 2.5s infinite;
    -webkit-animation: colorswitch 3.5s ease-in 2.5s infinite;
}

section#sub.certifications .row div:nth-child(2) {
    border-left: none;
}

#playmusic, #pausemusic {
    transition: opacity .5s ease;
    cursor: url('/img/icon-select.png'), pointer;
    grid-area: 1 / 1 / 1 / 1;
}

#pausemusic {
    opacity: 0;
    z-index: -100;
    animation: spin 4s linear infinite;
    -webkit-animation: spin 4s linear infinite;
}

.modal-title i {
    margin-right: 5px;
}

.modal-backdrop.show {
    opacity: 1;
}

@supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
    .modal-backdrop {
        backdrop-filter: saturate(50%) blur(50px);
        -webkit-backdrop-filter: saturate(50%) blur(50px);
    }
}

/* Footer */

.prefooter, footer {
    background-size: cover;
}

.prefooter {
    padding-top: 350px;
    background-position: center bottom;
}

footer {
    background-position: center top;
}

footer {
/*    background: linear-gradient(-45deg, #ee775240, #e73c7e40, #23a6d540, #23d5ab40);
    background-size: 200% 200%;
    animation: backgroundgradient 20s ease infinite;*/
}

footer .row > div:last-child {
    border-top: 1px solid var(--grey-bright) !important;
}

footer .partner div {
    padding-left: .5rem;
    padding-right: .5rem;
}

footer .partner:not(:last-child) {
    padding-bottom: .75rem;
}

footer nav a {
    display: block;
}

footer a {
    font-size: 14px;
    margin-bottom: 10px;
}