/*  Variablen
    Diese werden hier gesetzt und koennen dann im Folgenden einfach mehrfach
    verwendet werden. Somit kann man alle Farbwerte auf einmal anpassen.
*/

:root {

    --col1: rgba(114, 161, 175, 0.831);
    --col1-20: rgba(255, 239, 211,.2); /* entspricht col1, in 20% transparent */

    --col2: #1F2024;
    --col1-20: rgba(31,32,36,.2); /* entspricht col2, in 20% transparent */

    --col3: #1b50c8;
    --col3-35: rgba(27,80,200,.35); /* entspricht col-accent, in 35% transparent */
    --col3-50: rgba(27,80,200,.5); /* entspricht col-accent, in 50% transparent */

    --col4: #292929;

    --col-accent: #e77307;
    --col-accent-35: rgba(231,115,7,.35); /* entspricht col-accent, in 35% transparent */
    --col-accent-50: hsla(29, 94%, 47%, 0.5); /* entspricht col-accent, in 50% transparent */
    --col-accent-var: #d7863a;




}

/* Info: masseinheiten

    px = pixel
    % = is klar ;-)
    vw = viewport-width
    vh = viewport-height

    ----
    pt = punkt
    em & rem = (schrift)

*/





/* Body */

body {
    background: var(--col1);
}

h2 {
    color: var(--col-accent);
    font-weight: bold;
}



/* Navigation */

nav {
    background-color: var(--col1-20);
}
nav .navbar-brand {
    color: rgba(255,255,255,.75);
    font-weight: bold;
}
nav .navbar-brand:hover {
    color: var(--col-accent-50);
}
nav .nav-link {
    color: rgba(255,255,255,.75);
}
nav .nav-link:hover {
    color: var(--col-accent);
}
nav .navbar-toggler {
    background-color: rgba(255,255,255,.1);
}
body.nav-main-collapsed nav {
    background-color: rgba(0,0,0,.75);
}


/* Header */

header {
    position: relative;
    padding-top: 100px;
    border-bottom: 50px var(--col1) solid;
    overflow: hidden;
    width: 100%;
}
header:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(50% + 50px);
    height: 25px;
    background: var(--col1);
}

header h2 {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--col-accent-var);
    font-size: 2rem;
}
header h1 {
    font-weight: bold;
    color: var(--col1);
}

header p {
    color: var(--col4);
}

header .rgbShiftSlider {
    height: 100vh;
    display: block;
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    /*mix-blend-mode: hard-light;*/
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*transform-origin : 50vw 300vh;*/
    transform-origin: 50% 50%;
}
header canvas {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
}
header img.back {
    position: absolute;
    z-index: -2;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

header .circle {
    width: 30vw;
    height: 30vw;
    max-width: 500px;
    max-height: 500px;
    position: relative;
    padding: 25px;
    margin-bottom: -25px;
}


header .circle:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 25px;
    width: 50%;
    height: 25px;
    background: var(--col4);
}
header .circle .rotate {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 20px var(--col-accent-50) dashed;
    border-radius: 50%;
    transform: rotate(0deg);
    animation: header_circle_rotate 50s linear infinite;
    background: var(--col-accent-35);
    box-shadow: 10px 10px 30px rgba(0,0,0,.5);
}

@keyframes header_circle_rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }

}
header .circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 25px var(--col1-20) solid;
}

@media (max-width: 767px) {
    header:before,
    header .circle:before {
        display: none !important;

    }
    header .circle-wrapper {
        margin: auto;
        padding-bottom: 100px;
    }    header .circle {
        width: 50vw;
        height: 50vw;
    }

}

@media (min-width: 768px) {
    header .circle {
        width: 40vw;
        height: 40vw;
    }
}



/* sections */
section.bg-1 {
    background-color: var(--col1);
}
section.bg-2 {
    background-color: var(--col2);
}
section {
    color: var(--col4);
}


/*
.zweiter-absatz .rot {
    background-color: #A00;
    background-image: ;
}


.dritter-absatz .rot {
    background-color: #F00;
}

@media (min-width: 300px) {
    .dritter-absatz .rot {
        background-color: #FF0;
    }
}
*/