/* 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 .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;
}
/* Retro-Effekt (CRT) */

/* Die Effekte gehören im dunklen Schema zum Standard (siehe style.schemes.css), lassen sich
   aber über den Kickstart-Easteregg auch im hellen Schema einschalten. Auf mobilen Geräten
   bleiben sie aus, weil sie sehr viel Akku und Performance kosten. */
@media (min-width: 992px) {
    .retro {
        top: 0;
        left: 0;
        position: fixed;
        pointer-events: none;
        display: none;
    }

    .retro.noise {
        z-index: 2200;
        animation: grain 8s steps(10) infinite;
        background-image: url("/img/decoration/noise.png");
        height: 400%;
        left: -50%;
        top: -150%;
        width: 300%;
        background-size: auto;
        opacity: 0.2;
    }

    .retro.flicker, .retro.scanlines, .retro.scanline {
        height: 100%;
        width: 100%;
    }

    .retro.scanlines {
        z-index: 2300;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.03), rgba(0, 0, 255, 0.06));
        background-size: 100% 2px, 3px 100%;
    }

    .retro.flicker {
        z-index: 2400;
        background: rgba(9, 8, 8, 0.05);
        animation: flicker 0.05s infinite;
        animation-timing-function: linear;
    }

    .retro.scanline {
        z-index: 2500;
        animation: scanline 15s linear infinite;
    }

    .retro.scanline::after {
        height: 5px;
        width: 100%;
        background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.05) 100%);
        opacity: 0.5;
        pointer-events: none;
        content: '';
    }

    /* Vom Kickstart-Easteregg gesetzt und im localStorage gemerkt */
    html.retro-on .retro {
        display: flex;
    }

    html.retro-off .retro {
        display: none;
    }
}

/* Ladebalken */

.scrollprogress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 950;
    pointer-events: none;
}

.scrollprogress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(130deg, var(--pink-main), var(--purple-main) 30%, var(--turquoise-main) 65%, var(--turquoise-bright) 85%);
    box-shadow: 0 0 12px rgba(201, 33, 130, 0.8);
    transition: width .1s linear;
}

/* Intro */

/* Die beiden Schlagworte der Headline laufen im Markenverlauf */
section.intro h1 em {
    font-style: normal;
    background: linear-gradient(130deg, var(--pink-main), var(--purple-main) 25%, var(--turquoise-main) 60%, var(--turquoise-bright) 85%, var(--pink-main));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientflow 12s ease infinite;
    -webkit-animation: gradientflow 12s ease infinite;
}

/* Partner-Laufband: zwei identische Spuren wandern nahtlos ineinander */
.logomarquee {
    display: flex;
    overflow: hidden;
    padding-top: 25px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000000 6%, #000000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000000 6%, #000000 94%, transparent);
}

.logomarquee-track {
    display: flex;
    flex: 0 0 auto;
    animation: marquee 45s linear infinite;
    -webkit-animation: marquee 45s linear infinite;
}

.logomarquee-track > div {
    flex: 0 0 auto;
    width: 110px;
    padding: 0 1rem;
    margin-top: auto;
    margin-bottom: auto;
}

.logomarquee:hover .logomarquee-track {
    animation-play-state: paused;
}

/* Technologie-Laufband */

/* Weiche Kanten an beiden Seiten, links nur angedeutet, damit der Text bündig bleibt */
.techmarquee {
    display: flex;
    overflow: hidden;
    padding: 1.5rem 0 .25rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000000 4%, #000000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000000 4%, #000000 82%, transparent);
}

.techmarquee-track {
    display: flex;
    flex: 0 0 auto;
    animation: marquee 70s linear infinite;
    -webkit-animation: marquee 70s linear infinite;
}

.techmarquee-track > div {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    padding-right: .9rem;
    font-family: "mono";
    font-size: 20px;
    line-height: 1;
    white-space: nowrap;
}

.techmarquee-track > div:after {
    content: "\2022"; /* Trennpunkt zwischen den Einträgen */
    padding-left: .9rem;
    opacity: .4;
}

.techmarquee-track > div i {
    font-size: 22px;
}

/* Dieselbe Farbwanderung wie bei den Icons unter "Software to go" */
.techmarquee-track > div:nth-child(3n+1) i {
    animation: colorswitch 3.5s ease-in 1s infinite;
    -webkit-animation: colorswitch 3.5s ease-in 1s infinite;
}
.techmarquee-track > div:nth-child(3n+2) i {
    animation: colorswitch 3.5s ease-in 1.75s infinite;
    -webkit-animation: colorswitch 3.5s ease-in 1.75s infinite;
}
.techmarquee-track > div:nth-child(3n+3) i {
    animation: colorswitch 3.5s ease-in 2.5s infinite;
    -webkit-animation: colorswitch 3.5s ease-in 2.5s infinite;
}

.techmarquee:hover .techmarquee-track {
    animation-play-state: paused;
}

/* Insert Coin */

.coinslot {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: url('/img/icon-select.png'), pointer;
}

.coinslot:hover .coin {
    transform: scale(1.15) rotate(-8deg);
}

.coinslot .coin {
    transition: transform .2s ease;
}

/* Tratschtanten (Beiträge aus dem Glanzbox Blog) */

.blogteaser-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}

.blogteaser-head > img {
    width: 110px;
    flex: 0 0 auto;
    animation: float 6s ease-in-out infinite;
}

.blogteaser-head > div {
    flex: 1 1 auto;
}

.blogteaser {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0 3rem 0;
}

.blogteaser-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}

.blogteaser-card:hover, .blogteaser-card:focus {
    transform: translateY(-6px);
}

.blogteaser-card-empty {
    min-height: 220px;
    opacity: .35;
}

.blogteaser-media {
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.blogteaser-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease, filter .4s ease;
}

.blogteaser-media .blogteaser-fallback {
    object-fit: contain;
    padding: 1rem;
}

.blogteaser-card:hover .blogteaser-media img {
    transform: scale(1.06);
}

.blogteaser-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1rem 1.25rem 1.25rem 1.25rem;
}

.blogteaser-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    font-family: "mono";
    font-size: 20px;
    line-height: 1;
    margin-bottom: .5rem;
}

.blogteaser-category {
    border-radius: 20px;
    padding: 2px 10px 0 10px;
    font-size: 16px;
    text-transform: uppercase;
}

.blogteaser-body h4 {
    font-family: "secondary";
    font-size: 1.5rem;
    margin-bottom: .5rem;
    transition: color .2s ease;
}

.blogteaser-body p {
    font-size: 15px;
    line-height: 1.5em;
    text-align: left;
    margin-bottom: 1rem;
}

.blogteaser-stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
    font-family: "mono";
    font-size: 20px;
    line-height: 1;
}

.blogteaser-more {
    margin-left: auto;
    font-family: "secondary";
    font-size: 16px;
    font-weight: 700;
}

.blogteaser-card:hover .blogteaser-more i {
    animation: caret .6s ease infinite;
}

/* Kickstart (Amiga-Easteregg hinter "Insert Coin") */

.kickstart {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .85);
    cursor: url('/img/icon-select.png'), pointer;
}

.kickstart.booting {
    display: flex;
}

.kickstart-screen {
    position: relative;
    overflow: hidden;
    width: 92%;
    max-width: 720px;
    padding: 2rem 1.5rem 1.25rem 1.5rem;
    border: 3px solid var(--turquoise-main);
    border-radius: 6px;
    background: linear-gradient(160deg, var(--turquoise-dark), var(--purple-darker) 70%, #000000);
    box-shadow: 0 0 50px rgba(0, 155, 236, .4), inset 0 0 80px rgba(0, 0, 0, .85);
    animation: crtboot 1s ease-out;
    -webkit-animation: crtboot 1s ease-out;
}

/* Copper-Balken im Hintergrund, wie sie der Amiga über den Bildschirm geschoben hat */
.kickstart-copper {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    opacity: .2;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, var(--pink-main) 0px, var(--pink-main) 10px, transparent 10px, transparent 52px, var(--purple-main) 52px, var(--purple-main) 62px, transparent 62px, transparent 104px, var(--turquoise-main) 104px, var(--turquoise-main) 114px, transparent 114px, transparent 156px);
    animation: copperflow 6s ease-in-out infinite;
    -webkit-animation: copperflow 6s ease-in-out infinite;
}

.kickstart-stage {
    position: relative;
    height: 190px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.kickstart-disk {
    width: 110px;
    position: absolute;
    bottom: 40px;
    animation: diskinsert 3.2s ease-in-out .4s both;
    -webkit-animation: diskinsert 3.2s ease-in-out .4s both;
}

/* Das Diskettenlaufwerk: ein Schlitz, mehr braucht es nicht */
.kickstart-drive {
    position: relative;
    z-index: 2;
    width: 190px;
    height: 34px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--grey-bright), var(--grey-main));
    box-shadow: 0 6px 0 rgba(0, 0, 0, .5);
}

.kickstart-drive:before {
    content: "";
    position: absolute;
    top: 9px;
    left: 15px;
    width: 130px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--grey-darker);
}

.kickstart-drive:after {
    content: "";
    position: absolute;
    top: 10px;
    right: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--pink-main);
    animation: blinker 1s ease-in infinite;
}

.kickstart-console {
    position: relative;
    z-index: 2;
    margin-top: 1.5rem;
    min-height: 190px;
}

.kickstart-headline, .kickstart-log, .kickstart-hint {
    font-family: "mono";
    color: #ffffff;
    text-align: left;
    text-shadow: 0 0 12px var(--turquoise-main);
}

.kickstart-headline {
    font-size: 30px;
    line-height: 1;
    margin-bottom: .5rem;
    color: var(--turquoise-bright);
}

.kickstart-log {
    font-size: 22px;
    line-height: 1.25;
    margin: 0;
    white-space: pre-wrap;
}

.kickstart-log:after {
    content: "_";
    animation: caret .8s steps(1) infinite;
}

.kickstart-hint {
    position: relative;
    z-index: 2;
    font-size: 18px;
    margin: 1rem 0 0 0;
    opacity: .6;
}

/* Einblenden beim Scrollen */

/* Die Klasse setzt das JavaScript - ohne JavaScript ist einfach alles sofort sichtbar */
.reveal {
    opacity: 0;
}

.reveal.revealed {
    animation: reveal .7s cubic-bezier(.2, .7, .3, 1) both;
    -webkit-animation: reveal .7s cubic-bezier(.2, .7, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.revealed {
        opacity: 1;
        animation: none;
    }

    .logomarquee-track, .techmarquee-track, .techmarquee-track > div i, .blogteaser-head > img, section.intro h1 em {
        animation: none;
    }
}