/* ======================================================
   FUTURE COMMAND INTERFACE
   style.css
   Teil 2.1
   Grundlayout | Hintergrund | Header | Navigation
====================================================== */

/* ---------- Farben ---------- */

:root{

    --bg:#050B1A;
    --bg2:#081F45;

    --cyan:#39D5FF;
    --cyanSoft:#6FE6FF;

    --gold:#E8C66A;

    --white:#EAF8FF;

    --glass:rgba(255,255,255,.08);

    --border:rgba(255,255,255,.15);

    --shadow:0 0 20px rgba(57,213,255,.20);

}

/* ---------- Reset ---------- */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:linear-gradient(180deg,
    #050B1A,
    #07162f,
    #050B1A);

    color:var(--white);

    font-family:'Rajdhani',sans-serif;

    overflow-x:hidden;

    min-height:100vh;

}

/* ---------- Hintergrund Grid ---------- */

#grid{

    position:fixed;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:40px 40px;

    pointer-events:none;

    z-index:-3;

}

/* ---------- Sterne ---------- */

#stars{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-4;

    opacity:.45;

    background-image:

    radial-gradient(circle at 10% 20%, white 1px, transparent 2px),

    radial-gradient(circle at 40% 80%, white 1px, transparent 2px),

    radial-gradient(circle at 70% 30%, white 1px, transparent 2px),

    radial-gradient(circle at 90% 60%, white 1px, transparent 2px),

    radial-gradient(circle at 25% 45%, white 1px, transparent 2px),

    radial-gradient(circle at 60% 12%, white 1px, transparent 2px),

    radial-gradient(circle at 82% 90%, white 1px, transparent 2px);

    animation:starMove 80s linear infinite;

}

/* ---------- Glass Effekt ---------- */

.glass{

    background:var(--glass);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    border:1px solid var(--border);

    border-radius:18px;

    box-shadow:var(--shadow);

}

/* ---------- Header ---------- */

header{

    width:100%;

    position:sticky;

    top:0;

    z-index:1000;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 50px;

    background:rgba(5,11,26,.60);

    backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(255,255,255,.10);

}

/* ---------- Logo ---------- */

.logo h1{

    font-family:'Orbitron',sans-serif;

    color:var(--cyan);

    font-size:32px;

    letter-spacing:3px;

    text-shadow:0 0 15px var(--cyan);

}

.logo p{

    color:var(--gold);

    font-size:14px;

    letter-spacing:4px;

    margin-top:4px;

}

/* ---------- Navigation ---------- */

nav ul{

    list-style:none;

    display:flex;

    gap:35px;

}

nav a{

    color:white;

    text-decoration:none;

    font-size:18px;

    transition:.35s;

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--cyan);

    transition:.35s;

}

nav a:hover{

    color:var(--cyan);

}

nav a:hover::after{

    width:100%;

}

/* ---------- Uhr ---------- */

.clockPanel{

    width:230px;

    padding:18px;

    text-align:center;

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

    border:1px solid rgba(57,213,255,.25);

    border-radius:15px;

    box-shadow:0 0 20px rgba(57,213,255,.15);

}

#clock{

    font-family:'Orbitron',sans-serif;

    font-size:30px;

    color:var(--cyan);

    text-shadow:0 0 10px var(--cyan);

}

#date{

    margin-top:6px;

    color:var(--gold);

    font-size:15px;

    letter-spacing:2px;

}

#calendar{

    margin-top:15px;

    font-size:14px;

    line-height:1.7;

}

/* ---------- Hauptbereich ---------- */

main{

    width:min(1400px,95%);

    margin:auto;

}

/* ---------- Sektionen ---------- */

section{

    padding:90px 0;

}

/* ---------- Überschriften ---------- */

.sectionTitle{

    text-align:center;

    margin-bottom:55px;

    font-size:38px;

    font-family:'Orbitron',sans-serif;

    color:var(--cyan);

    letter-spacing:3px;

    text-shadow:0 0 15px rgba(57,213,255,.35);

}

/* ---------- Animation ---------- */

@keyframes starMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-250px);

    }

}
/* ======================================================
   style.css
   Teil 2.2
   Hero | Buttons | Karten | Animationen
====================================================== */


/* ---------------- Hero ---------------- */

.hero{

    min-height:85vh;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

    padding:70px;

    position:relative;

    overflow:hidden;

}


.heroText{

    flex:1;

}


.heroText h2{

    font-family:'Orbitron',sans-serif;

    font-size:64px;

    line-height:1.1;

    color:var(--cyan);

    text-shadow:
        0 0 15px rgba(57,213,255,.6),
        0 0 35px rgba(57,213,255,.25);

    margin-bottom:30px;

}


.heroText p{

    font-size:22px;

    color:#d7ecff;

    max-width:650px;

    line-height:1.8;

}


/* ---------------- Button ---------------- */

.button{

    display:inline-block;

    margin-top:45px;

    padding:18px 40px;

    border-radius:40px;

    border:1px solid var(--cyan);

    text-decoration:none;

    color:white;

    font-weight:bold;

    letter-spacing:2px;

    transition:.35s;

    background:rgba(57,213,255,.08);

    backdrop-filter:blur(8px);

    box-shadow:0 0 20px rgba(57,213,255,.15);

}

.button:hover{

    background:rgba(57,213,255,.22);

    transform:translateY(-3px);

    box-shadow:
        0 0 20px rgba(57,213,255,.45),
        0 0 40px rgba(57,213,255,.25);

}


/* ---------------- Hero-Kreis ---------------- */

.heroCircle{

    width:360px;

    height:360px;

    border-radius:50%;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    border:2px solid rgba(57,213,255,.4);

    background:

        radial-gradient(circle,
        rgba(57,213,255,.12),
        transparent 70%);

    box-shadow:

        0 0 40px rgba(57,213,255,.25),

        inset 0 0 30px rgba(57,213,255,.18);

}


/* Innerer Kreis */

.heroCircle::before{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    border:1px solid rgba(232,198,106,.35);

}


/* Zweiter Ring */

.heroCircle::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    border:1px dashed rgba(57,213,255,.35);

}


/* Puls */

.pulse{

    width:120px;

    height:120px;

    border-radius:50%;

    background:rgba(57,213,255,.25);

    animation:pulse 4s infinite ease-in-out;

}


/* ---------------- Technologien ---------------- */

.cardContainer{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:35px;

}


.card{

    padding:40px;

    transition:.4s;

    position:relative;

    overflow:hidden;

}


.card::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

    transition:.8s;

}


.card:hover::before{

    left:120%;

}


.card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 0 35px rgba(57,213,255,.30);

}


.card h3{

    font-family:'Orbitron',sans-serif;

    color:var(--gold);

    font-size:24px;

    margin-bottom:20px;

}


.card p{

    color:#d8ecff;

    line-height:1.8;

    font-size:18px;

}


/* ---------------- Sanftes Schweben ---------------- */

.card{

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

}


.card:nth-child(2){

    animation-delay:1s;

}

.card:nth-child(3){

    animation-delay:2s;

}

.card:nth-child(4){

    animation-delay:3s;

}


/* ---------------- Hero Glow ---------------- */

.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-220px;

    top:-180px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(57,213,255,.10),

    transparent 70%);

    pointer-events:none;

}


/* ---------------- Animationen ---------------- */

@keyframes pulse{

    0%{

        transform:scale(.9);

        opacity:.6;

    }

    50%{

        transform:scale(1.2);

        opacity:1;

    }

    100%{

        transform:scale(.9);

        opacity:.6;

    }

}


@keyframes floatCard{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0px);

    }

}
/* ======================================================
   style.css
   Teil 2.3
   About | Kontakt | Footer | Cursor Glow
====================================================== */


/* ===============================
   ABOUT
================================= */

.about{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.aboutText{

    padding:50px;

}

.aboutText h2{

    font-family:'Orbitron',sans-serif;

    color:var(--cyan);

    font-size:42px;

    margin-bottom:25px;

    letter-spacing:2px;

    text-shadow:0 0 15px rgba(57,213,255,.35);

}

.aboutText p{

    font-size:20px;

    line-height:1.9;

    color:#d9ecff;

}

.aboutImage{

    padding:20px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.aboutImage img{

    width:100%;

    border-radius:18px;

    border:1px solid rgba(57,213,255,.25);

    box-shadow:

        0 0 30px rgba(57,213,255,.25);

    transition:.5s;

}

.aboutImage img:hover{

    transform:scale(1.02);

    box-shadow:

        0 0 45px rgba(57,213,255,.40);

}


/* ===============================
   KONTAKT
================================= */

form{

    max-width:800px;

    margin:auto;

    padding:45px;

    display:flex;

    flex-direction:column;

    gap:25px;

}

form input,
form textarea{

    width:100%;

    padding:18px 22px;

    border-radius:12px;

    border:1px solid rgba(57,213,255,.25);

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

    color:white;

    font-size:18px;

    outline:none;

    transition:.35s;

}

form textarea{

    resize:vertical;

    min-height:180px;

}

form input::placeholder,
form textarea::placeholder{

    color:#b9d7eb;

}

form input:focus,
form textarea:focus{

    border-color:var(--cyan);

    box-shadow:

        0 0 18px rgba(57,213,255,.30);

}


/* ===============================
   BUTTON
================================= */

form button{

    align-self:flex-start;

    padding:16px 34px;

    border:none;

    border-radius:35px;

    background:linear-gradient(
        90deg,
        var(--cyan),
        #4de8ff
    );

    color:#02101f;

    font-weight:bold;

    letter-spacing:2px;

    cursor:pointer;

    transition:.35s;

    font-size:17px;

}

form button:hover{

    transform:translateY(-3px);

    box-shadow:

        0 0 25px rgba(57,213,255,.50);

}


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

footer{

    margin-top:80px;

    padding:35px;

    text-align:center;

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

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

    color:#b5d8ec;

    font-size:15px;

    letter-spacing:2px;

}


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

#cursorGlow{

    position:fixed;

    width:180px;

    height:180px;

    border-radius:50%;

    pointer-events:none;

    background:radial-gradient(

        circle,

        rgba(57,213,255,.16),

        rgba(57,213,255,.05),

        transparent 70%

    );

    transform:translate(-50%,-50%);

    z-index:9999;

    transition:

        left .08s linear,

        top .08s linear;

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#06111f;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        var(--cyan),

        var(--gold)

    );

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--cyan);

}


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

::selection{

    background:rgba(57,213,255,.35);

    color:white;

}


/* ===============================
   SANFTER FADE-IN
================================= */

section{

    animation:fadeUp 1.2s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ======================================================
   style.css
   Teil 2.4
   Responsive | HUD-Effekte | Feinschliff
====================================================== */


/* ===========================================
   Holografische Linien
=========================================== */

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 38px,
            rgba(57,213,255,.03) 39px,
            transparent 40px
        );

    pointer-events:none;

}


/* ===========================================
   Leichter Glow um Sections
=========================================== */

section{

    position:relative;

}

section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,

    rgba(57,213,255,.05),

    transparent 65%);

    pointer-events:none;

}


/* ===========================================
   Karten erhalten leichte Rotation
=========================================== */

.card:nth-child(odd){

    transform:rotate(-0.4deg);

}

.card:nth-child(even){

    transform:rotate(.4deg);

}

.card:hover{

    transform:

        translateY(-10px)

        scale(1.02)

        rotate(0deg);

}


/* ===========================================
   Bilder
=========================================== */

img{

    display:block;

    max-width:100%;

}


/* ===========================================
   Links
=========================================== */

a{

    transition:.3s;

}


/* ===========================================
   Formular Animation
=========================================== */

form{

    transition:.4s;

}

form:hover{

    box-shadow:

        0 0 35px rgba(57,213,255,.20);

}


/* ===========================================
   Uhr leicht leuchtend
=========================================== */

.clockPanel{

    animation:clockGlow 5s ease-in-out infinite;

}

@keyframes clockGlow{

    0%{

        box-shadow:

        0 0 15px rgba(57,213,255,.10);

    }

    50%{

        box-shadow:

        0 0 28px rgba(57,213,255,.25);

    }

    100%{

        box-shadow:

        0 0 15px rgba(57,213,255,.10);

    }

}


/* ===========================================
   Navigation
=========================================== */

nav{

    flex:1;

    display:flex;

    justify-content:center;

}


/* ===========================================
   Tablet
=========================================== */

@media (max-width:1100px){

.hero{

    flex-direction:column;

    text-align:center;

}

.heroCircle{

    width:280px;

    height:280px;

}

.heroText h2{

    font-size:48px;

}

.about{

    grid-template-columns:1fr;

}

.clockPanel{

    width:200px;

}

}


/* ===========================================
   Smartphone
=========================================== */

@media (max-width:768px){

header{

    flex-direction:column;

    gap:25px;

    padding:25px;

}

nav ul{

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

}

.hero{

    padding:35px;

}

.heroText h2{

    font-size:36px;

}

.heroText p{

    font-size:18px;

}

.sectionTitle{

    font-size:30px;

}

.cardContainer{

    grid-template-columns:1fr;

}

.aboutText{

    padding:30px;

}

form{

    padding:25px;

}

.clockPanel{

    width:100%;

}

}


/* ===========================================
   Kleine Smartphones
=========================================== */

@media (max-width:500px){

.heroCircle{

    width:220px;

    height:220px;

}

.heroText h2{

    font-size:30px;

}

.logo h1{

    font-size:24px;

}

nav a{

    font-size:16px;

}

}


/* ===========================================
   Reduzierte Animationen
=========================================== */

@media (prefers-reduced-motion:reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto;

}

}


/* ===========================================
   Ende
=========================================== */
/* ======================================================
   PART 4 – EXTRAS
====================================================== */

/* ---------------- BOOT SCREEN ---------------- */

#bootScreen{

    position:fixed;
    inset:0;

    background:#050B1A;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:99999;

    animation:bootFade 2.5s ease forwards;

}

.bootText{

    font-family:'Orbitron',sans-serif;
    color:var(--cyan);

    font-size:18px;
    letter-spacing:3px;

    text-shadow:0 0 15px var(--cyan);

}

@keyframes bootFade{

    0%{opacity:1;}
    80%{opacity:1;}
    100%{opacity:0;visibility:hidden;}

}


/* ---------------- MOBILE MENU ---------------- */

#menuToggle{

    display:none;

    position:fixed;
    top:20px;
    left:20px;

    font-size:28px;
    color:var(--cyan);

    z-index:10000;

    cursor:pointer;

    text-shadow:0 0 10px var(--cyan);

}

/* Mobile Navigation aktiv */
@media (max-width:768px){

    #menuToggle{
        display:block;
    }

    nav ul{

        display:none;
        flex-direction:column;

        background:rgba(5,11,26,.95);

        position:absolute;
        top:80px;
        left:20px;

        padding:20px;

        border:1px solid rgba(57,213,255,.3);

        border-radius:12px;

    }

    nav ul.active{
        display:flex;
    }

}


/* ---------------- RADAR EFFECT ---------------- */

.heroCircle{

    overflow:hidden;

}

.heroCircle::after{

    animation:spin 8s linear infinite;

}

@keyframes spin{

    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}

}


/* ---------------- GLITCH LIGHT ---------------- */

.heroText h2{

    position:relative;

}

.heroText h2::after{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(90deg,transparent,rgba(57,213,255,.3),transparent);

    animation:glitch 3s infinite;

    mix-blend-mode:screen;

}

@keyframes glitch{

    0%{transform:translateX(-100%);}
    100%{transform:translateX(100%);}
}
/* ===============================
   TODAY WIDGET (MOBILE)
================================ */

#todayWidget{
    margin-top:10px;
    padding:10px;

    border-radius:12px;

    background:rgba(57,213,255,.08);
    border:1px solid rgba(57,213,255,.25);

    font-size:13px;
    color:#d9f3ff;

    text-align:center;

    letter-spacing:1px;
}

/* Desktop: Widget ausblenden */
@media (min-width: 769px){
    #todayWidget{
        display:none;
    }
}