/* 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;
}

/* Menü-Button: fixiert und über der Intro-Sektion (z-index 1100), damit er auch ganz oben auf der
   Startseite erreichbar ist. Header und Menü werden nur im geöffneten Zustand über das Intro
   gehoben (body.menu-open, gesetzt in scripts.js), sonst bleibt das Intro ungestört. */
.menu-toggler {
    top: calc(var(--headerlogo-height) / 5);
    position: fixed;
    right: 5px;
    z-index: 1200;
}

.menu-toggler .navbar-toggler-icon {
    transition: transform .3s ease;
}

.menu-toggler:not(.collapsed) .navbar-toggler-icon {
    transform: rotate(90deg);
    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.9)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M7 7l18 18M25 7L7 25'/%3E%3C/svg%3E");
}

.menu-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);
}

/* Mobiles Menü (unter 992px)
   Das Bootstrap-Collapse fließt weiterhin von oben herein. Die Einträge bekommen aber Luft, ein
   farbiges Icon-Badge in der Farbe des jeweiligen Bereichs, Trennlinien, einen Pfeil und ein
   gestaffeltes Einblenden. Der Hamburger wird zum X. Ab 992px gilt die horizontale Leiste
   (style.responsive.css). Schließen bei Klick oder Escape regelt initMobileMenu() in scripts.js. */
@media (max-width: 991.98px) {
    /* Über den sticky Titeln der Unterseiten (z-index 850), unter dem Header (900) */
    nav.navbar {
        z-index: 890;
    }

    body.menu-open header {
        z-index: 1150;
    }

    body.menu-open nav.navbar {
        z-index: 1140;
    }

    /* Der Header taucht beim Öffnen über dem Intro auf: kurz einblenden statt aufploppen */
    body.menu-open header .logo {
        animation: navitem .3s ease-out both;
    }

    nav.navbar .navbar-collapse {
        background: linear-gradient(180deg, rgba(48, 12, 31, .45) 0%, rgba(48, 12, 31, .9) 100%);
        border-bottom: 1px solid rgba(255, 255, 255, .14);
        box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
    }

    nav.navbar ul.nav {
        padding: .6rem .9rem 1rem;
    }

    nav.navbar .nav-item + .nav-item {
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    nav.navbar .nav-link {
        display: flex;
        align-items: center;
        gap: .95rem;
        padding: .75rem .6rem;
        border: 0;
        border-radius: .7rem;
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: .01em;
        text-align: left;
        text-shadow: none;
        transition: background-color .2s ease, transform .2s ease;
    }

    nav.navbar .nav-link:hover,
    nav.navbar .nav-link:focus-visible {
        background-color: rgba(255, 255, 255, .1);
    }

    nav.navbar .nav-link:active {
        transform: scale(.985);
    }

    nav.navbar .nav-link.active {
        background-color: rgba(255, 255, 255, .12);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    }

    /* Icon-Badge */
    nav.navbar .nav-link i {
        flex: 0 0 2.5rem;
        width: 2.5rem;
        height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 1.1rem;
        color: #ffffff;
        --fa-primary-color: #ffffff;
        --fa-secondary-color: #ffffff;
        --fa-secondary-opacity: .6;
        background-color: rgba(255, 255, 255, .14);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 6px 16px rgba(0, 0, 0, .25);
    }

    nav.navbar a.development i { background-color: var(--turquoise-main); }
    nav.navbar a.design i      { background-color: var(--purple-bright); }
    nav.navbar a.sound i       { background-color: var(--turquoise-bright); }
    nav.navbar a.text i        { background-color: var(--purple-main); }
    /* Kontakt als Call-to-Action invertiert: weißes Badge, purpurnes Icon */
    nav.navbar a.contact i {
        background-color: #ffffff;
        color: var(--purple-dark);
        --fa-primary-color: var(--purple-dark);
        --fa-secondary-color: var(--purple-main);
    }
    nav.navbar a.blog i        { background-color: var(--pink-main); }

    /* Pfeil rechts */
    nav.navbar .nav-link::after {
        content: '';
        margin-left: auto;
        width: .55rem;
        height: .55rem;
        border-right: 2px solid rgba(255, 255, 255, .55);
        border-bottom: 2px solid rgba(255, 255, 255, .55);
        transform: rotate(-45deg);
        transition: transform .2s ease, border-color .2s ease;
    }

    nav.navbar .nav-link:hover::after {
        border-color: #ffffff;
        transform: rotate(-45deg) translate(2px, 2px);
    }

    /* Gestaffeltes Einblenden, solange das Collapse aufgeht bzw. offen ist. Ein Selektor für beide
       Zustände, damit die Animation beim Wechsel von .collapsing zu .show nicht neu startet. */
    nav.navbar .navbar-collapse:is(.collapsing, .show) .nav-item {
        animation: navitem .5s cubic-bezier(.2, .7, .2, 1) both;
    }

    nav.navbar .navbar-collapse:is(.collapsing, .show) .nav-item:nth-child(1) { animation-delay: .04s; }
    nav.navbar .navbar-collapse:is(.collapsing, .show) .nav-item:nth-child(2) { animation-delay: .09s; }
    nav.navbar .navbar-collapse:is(.collapsing, .show) .nav-item:nth-child(3) { animation-delay: .14s; }
    nav.navbar .navbar-collapse:is(.collapsing, .show) .nav-item:nth-child(4) { animation-delay: .19s; }
    nav.navbar .navbar-collapse:is(.collapsing, .show) .nav-item:nth-child(5) { animation-delay: .24s; }
    nav.navbar .navbar-collapse:is(.collapsing, .show) .nav-item:nth-child(6) { animation-delay: .29s; }

    @media (prefers-reduced-motion: reduce) {
        nav.navbar .navbar-collapse:is(.collapsing, .show) .nav-item { animation: none; }
    }
}

/* 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;
    }
}

/* Safari-Tab-Leiste (Safari 26+)
   Safari 26 ignoriert <meta theme-color> und ermittelt die Farbe der Tab-Leiste in WebKit
   (LocalFrameView::fixedContainerEdges): Hit-Test am Punkt (Breite/2, 4px), dann das erste fixierte
   Element in der Ahnenkette. Dessen background-color zählt nur, wenn sie deckend und die Border-Box
   höher als 10px ist; ein backdrop-filter in der Kette (unser Header-Logo) ergibt "mehrere Farben"
   und damit Weiß. Dieses Element liegt deshalb mit z-index 2600 über Header und Retro-Overlays.
   Sichtbar bleiben 6px mit 15% Deckkraft (unter 10% würde WebKit es als transparent ignorieren).
   Safari verwirft im hellen Fenster dunkle Farben (empirisch: Luma unter ca. 130 bleibt weiß),
   deshalb ist die helle Farbe in style.schemes.css ein aufgehelltes Magenta im CI-Farbton.
   Testen: Safari 26.6 färbt localhost über HTTPS mit Dev-Zertifikat nie; http://127.0.0.1:<port>
   nutzen und pro Origin nur einmal laden, Safari merkt sich die erste gültige Farbe. */
.safari-tint {
    position: fixed;
    top: -8px;
    left: 0;
    width: 100%;
    height: 14px;
    opacity: .15;
    z-index: 2600;
    pointer-events: 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;
    margin-top: 3rem;
}

.blogteaser-logo {
    display: block;
    width: 150px;
    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, .blogteaser-card * {
    cursor: url('/img/icon-select.png'), pointer;
}

.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-logo, section.intro h1 em {
        animation: none;
    }
}

/* Glanzbox Warmup am Hockenheimring (Einladungsseite /warmup) */

/* Das Motiv trägt den Schriftzug selbst, deshalb steht es unter dem Opener statt darin und bleibt
   von der Sättigung des dunklen Schemas verschont (.protected) */
.warmup-hero {
    display: block;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

section#sub.warmup .container > .row {
    margin-bottom: 1rem;
}

section#sub.warmup h4 i {
    margin-right: .25rem;
}

/* Eckdaten */
.warmup-facts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 50px;
    padding: 1.25rem;
    border-radius: 10px;
}

.warmup-facts > div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    line-height: 1.4em;
}

.warmup-facts > div > i {
    flex: 0 0 auto;
    width: 1.75rem;
    font-size: 1.6rem;
    text-align: center;
    margin-top: .1rem;
}

/* Tagesablauf: Uhrzeit links in der Headline-Schrift, danach der Programmpunkt */
.warmup-timeline {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.warmup-timeline > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: .6rem .75rem;
    border-left: 3px solid transparent;
}

.warmup-timeline > div:not(:last-child) {
    border-bottom: 1px solid;
}

.warmup-timeline > div > span {
    flex: 0 0 auto;
    width: 7.5rem;
    font-family: "secondary";
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -.5px;
    line-height: 1;
    white-space: nowrap;
}

.warmup-timeline > div > div {
    flex: 1 1 auto;
    line-height: 1.4em;
}

.warmup-timeline > div.highlight {
    border-left-color: var(--pink-main);
    font-weight: 700;
}

.warmup-timeline small {
    font-weight: 400;
    opacity: .75;
}

/* Sprungziel des Buttons "Jetzt anmelden": die Überschrift bleibt unter dem fixierten Header sichtbar */
#anmeldung {
    scroll-margin-top: calc(var(--headerlogo-height) + var(--nav-height));
}

/* Anmeldung: das Formular rückt auf die Höhe der Überschrift (siehe section#sub .container h3) */
.warmup-form {
    margin-top: 50px;
}

.warmup-hint {
    margin-top: .5rem;
    margin-bottom: 10px;
}

.warmup-check {
    margin-top: .5rem;
    margin-bottom: 1.5rem;
}

.warmup-check .form-check-input {
    margin-top: .3em;
    cursor: url('/img/icon-select.png'), pointer;
}

.warmup-check .form-check-input:checked {
    background-color: var(--purple-main);
    border-color: var(--purple-main);
}

.warmup-check .form-check-label {
    cursor: url('/img/icon-select.png'), pointer;
}

/* Logos und Kart */
.warmup-partner {
    text-align: left;
    padding-top: .5rem;
}

.warmup-partner img {
    width: 45%;
    max-width: 260px;
    border-radius: 10px;
}

.warmup-kart {
    padding-top: 65px;
}

.warmup-kart img {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35));
    animation: float 6s ease-in-out infinite;
}

.warmup-logo {
    margin-top: 2.5rem;
    padding-right: 2rem;
}

/* Hinweis auf die knappen Startplätze, gestaltet wie der Eckdaten-Kasten */
.warmup-note {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.25rem;
    border-radius: 10px;
    line-height: 1.5em;
}

.warmup-note > i {
    flex: 0 0 auto;
    width: 1.75rem;
    font-size: 1.6rem;
    text-align: center;
    margin-top: .1rem;
}