/* ==========================================================
   NOVA OS PUBLIC WEBSITE
   STYLE.CSS
   PART 1
   RESET + LAYOUT
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:
        radial-gradient(circle at top,
        rgba(10,42,70,.45),
        rgba(2,8,16,.98)),
        #020812;

    color:#ffffff;

    overflow-x:hidden;

}

/* Sterne */

body:before{

    content:"";

    position:fixed;

    inset:0;

    background-image:

        radial-gradient(#7fd7ff 1px,transparent 1px),

        radial-gradient(#4ebcff 1px,transparent 1px),

        radial-gradient(#ffffff 1px,transparent 1px);

    background-size:

        180px 180px,

        280px 280px,

        420px 420px;

    background-position:

        0 0,

        80px 120px,

        200px 60px;

    opacity:.25;

    pointer-events:none;

    z-index:-1;

}

/* ==========================================================
   LAYOUT
========================================================== */

.nova-layout{

    display:flex;

    min-height:100vh;

}

.nova-main{

    flex:1;

    display:flex;

    flex-direction:column;

    min-height:100vh;

}

.nova-content{

    flex:1;

    width:100%;

    max-width:1600px;

    margin:auto;

    padding:60px;

}

/* ==========================================================
   SIDEBAR
========================================================== */

.nova-sidebar{

    width:280px;

    flex-shrink:0;

    background:

        linear-gradient(

            180deg,

            rgba(8,18,30,.97),

            rgba(5,12,20,.97)

        );

    border-right:

        1px solid rgba(38,217,255,.08);

    display:flex;

    flex-direction:column;

}

.sidebar-logo{

    padding:40px 30px 25px;

    text-align:center;

}

.sidebar-logo-image{

    width:180px;

    max-width:100%;

}

.sidebar-title{

    text-align:center;

    margin-bottom:35px;

}

.sidebar-title h2{

    font-size:44px;

    font-weight:800;

    letter-spacing:1px;

}

.sidebar-title p{

    color:#8ca7bb;

    margin-top:8px;

    font-size:14px;

    letter-spacing:2px;

}

.sidebar-navigation{

    padding:0 24px;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.sidebar-navigation a{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:#bdd4e4;

    padding:16px 20px;

    border-radius:16px;

    transition:.25s;

}

.sidebar-navigation a:hover{

    background:rgba(38,217,255,.10);

    color:#ffffff;

}

.sidebar-navigation .active{

    background:

        linear-gradient(

            90deg,

            rgba(38,217,255,.18),

            rgba(38,217,255,.08)

        );

    border-left:4px solid #26d9ff;

    color:#ffffff;

}

.sidebar-bottom{

    margin-top:auto;

    padding:30px;

    border-top:

        1px solid rgba(38,217,255,.08);

}

.sidebar-status{

    display:flex;

    align-items:center;

    gap:15px;

}

.status-light{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#33ff88;

    box-shadow:

        0 0 18px #33ff88;

}

.sidebar-status strong{

    display:block;

    color:#ffffff;

}

.sidebar-status small{

    color:#86a1b6;

}

.sidebar-footer{

    margin-top:25px;

    color:#6d879a;

    line-height:1.8;

    font-size:13px;

}
/* ==========================================================
   HEADER
========================================================== */

.nova-header{

    position:sticky;

    top:0;

    z-index:1000;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 40px;

    background:rgba(6,14,24,.82);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(38,217,255,.08);

}

.header-left{

    display:flex;

    flex-direction:column;

}

.header-label{

    color:#26d9ff;

    font-size:11px;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:5px;

}

.header-left h1{

    font-size:42px;

    font-weight:800;

}

.header-center{

    flex:1;

    display:flex;

    justify-content:center;

}

.header-search{

    width:520px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:14px 24px;

    border-radius:40px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(38,217,255,.12);

}

.header-search svg{

    color:#26d9ff;

}

.header-search input{

    width:100%;

    background:none;

    border:none;

    outline:none;

    color:#ffffff;

    font-size:15px;

}

.header-search input::placeholder{

    color:#7f9aae;

}

.header-right{

    display:flex;

    align-items:center;

}

.header-status{

    display:flex;

    align-items:center;

    gap:12px;

}

.status-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#33ff88;

    box-shadow:0 0 16px #33ff88;

}

.header-status strong{

    display:block;

    font-size:15px;

}

.header-status small{

    color:#8da7bb;

}

/* ==========================================================
   HERO
========================================================== */

.hero{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    min-height:700px;

    margin-bottom:100px;

}
.hero.hero-spaced{

    margin-top:120px;

}
.hero-text{

    max-width:700px;

}

.hero-tag{

    display:inline-block;

    color:#26d9ff;

    letter-spacing:5px;

    font-size:13px;

    margin-bottom:25px;

}

.hero h1{

    font-size:74px;

    line-height:1.05;

    font-weight:900;

    margin-bottom:30px;

}

.hero p{

    font-size:22px;

    color:#a9c0d2;

    line-height:1.8;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.button-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:60px;

    background:#26d9ff;

    color:#00131c;

    font-weight:700;

    text-decoration:none;

    transition:.25s;

}

.button-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 0 35px rgba(38,217,255,.35);

}

.button-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:60px;

    border:1px solid rgba(38,217,255,.35);

    color:#ffffff;

    text-decoration:none;

    transition:.25s;

}

.button-secondary:hover{

    background:rgba(38,217,255,.08);

}

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:720px;

    animation:auroraFloat 8s ease-in-out infinite;

    filter:

        drop-shadow(0 0 45px rgba(38,217,255,.35));

}

@keyframes auroraFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0);

    }

}
/* ==========================================================
   OVERVIEW CARDS
========================================================== */

.overview{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-bottom:100px;

}

.overview-card{

    background:rgba(10,20,34,.72);

    border:1px solid rgba(38,217,255,.10);

    border-radius:24px;

    padding:40px;

    backdrop-filter:blur(16px);

    transition:.30s;

}

.overview-card:hover{

    transform:translateY(-8px);

    border-color:#26d9ff;

    box-shadow:
        0 0 35px rgba(38,217,255,.15);

}

.overview-card h2{

    font-size:32px;

    margin-bottom:20px;

}

.overview-card p{

    color:#9cb6c8;

    line-height:1.9;

    font-size:17px;

}

/* ==========================================================
   TIMELINE
========================================================== */

.process{

    margin-bottom:100px;

    text-align:center;

}

.process h2{

    font-size:54px;

    margin-bottom:60px;

}

.process-flow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.step{

    min-width:140px;

    padding:20px;

    border-radius:18px;

    background:rgba(10,20,34,.72);

    border:1px solid rgba(38,217,255,.10);

    font-weight:600;

    transition:.25s;

}

.step:hover{

    border-color:#26d9ff;

    transform:translateY(-5px);

}

.arrow{

    font-size:34px;

    color:#26d9ff;

}

/* ==========================================================
   MISSION
========================================================== */

.mission{

    text-align:center;

    max-width:1000px;

    margin:0 auto 120px;

}

.mission h2{

    font-size:56px;

    line-height:1.2;

    margin-bottom:30px;

}

.mission p{

    color:#9cb6c8;

    font-size:22px;

    line-height:1.9;

}

/* ==========================================================
   FOOTER
========================================================== */

.nova-footer{

    margin-top:60px;

    padding:40px;

    border-top:1px solid rgba(38,217,255,.10);

}

.footer-cards{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.footer-card{

    background:rgba(10,20,34,.72);

    border:1px solid rgba(38,217,255,.10);

    border-radius:22px;

    padding:35px;

    transition:.30s;

}

.footer-card:hover{

    border-color:#26d9ff;

    transform:translateY(-5px);

}

.footer-card h3{

    font-size:28px;

    margin-bottom:25px;

}

.footer-card a{

    display:block;

    color:#a9c0d2;

    text-decoration:none;

    margin-bottom:12px;

    transition:.20s;

}

.footer-card a:hover{

    color:#26d9ff;

    padding-left:6px;

}

.footer-card p{

    color:#90a8ba;

    line-height:1.8;

    margin-top:18px;

}

.footer-divider{

    margin:22px 0;

    border-top:1px solid rgba(255,255,255,.08);

}

.team-list{

    list-style:none;

}

.team-list li{

    padding:8px 0;

    color:#a9c0d2;

}

.footer-bottom{

    margin-top:35px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    color:#7992a6;

    font-size:14px;

}

.footer-bottom strong{

    color:#ffffff;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1400px){

    .hero{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .overview{

        grid-template-columns:1fr;

    }

    .footer-cards{

        grid-template-columns:1fr;

    }

}

@media(max-width:900px){

    .nova-sidebar{

        display:none;

    }

    .nova-content{

        padding:30px;

    }

    .hero h1{

        font-size:52px;

    }

    .process-flow{

        justify-content:center;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}

@media(max-width:700px){

    .nova-header{

        padding:0 20px;

    }

    .header-center{

        display:none;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .button-primary,
    .button-secondary{

        width:100%;

    }

}
/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#06111d;

}

::-webkit-scrollbar-thumb{

    background:#1b4f73;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#26d9ff;

}

/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:#26d9ff;

    color:#001018;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    transition:.25s;

}

img{

    max-width:100%;

    display:block;

}

/* ==========================================================
   GLASS EFFECT
========================================================== */

.glass{

    background:rgba(12,22,36,.65);

    backdrop-filter:blur(18px);

    border:1px solid rgba(38,217,255,.10);

    border-radius:22px;

}

/* ==========================================================
   FADE ANIMATION
========================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp .9s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   GLOW
========================================================== */

.glow{

    box-shadow:

        0 0 25px rgba(38,217,255,.20),

        0 0 80px rgba(38,217,255,.08);

}

/* ==========================================================
   CONTAINER
========================================================== */

.container{

    width:100%;

    max-width:1600px;

    margin:auto;

}

/* ==========================================================
   SECTION
========================================================== */

section{

    width:100%;

}

/* ==========================================================
   FUTURE PLACEHOLDERS
========================================================== */

/*

Aurora
University
Knowledge Graph
Foundation
Ideas
Partners
Contact

verwenden dieselben Klassen und
müssen später keine neue CSS mehr
erhalten.

Die komplette Homepage basiert
ab jetzt ausschließlich auf dieser
Datei.

========================================================== */