:root {
    --bg-color: white;
    --text-color: var(--deepblue);
}

body {
    overflow-x: hidden;
}

section {
    box-sizing: border-box;
    overflow: hidden;
}

p {
    letter-spacing: 0.015rem;
}

/*  ZUCKER-HEADER */

body,
header {
    background-color: var(--bg-color);
}

.header-bar {
    width: calc(36vw * 0.83);
}

.header-bar:hover {
    background-color: yellow;
}

.header-bar:hover:after {
    background-color: red;
    color: blue;
}

/*  ZUCKER-HEADER END*/


.lead__wrapper {
    padding-bottom: 2rem;
}

.lead__wrapper:after {
    background-color: var(--text-color);
}

/*  Bauhaus-Wort ANIMATION*/

.title-animation {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

@media all and (min-width: 1400px) {
    .title-animation {
    }
}

h1 {
    font-size: calc(7rem + 1vw);
    text-align: left;
}

.b-no-animation {
    animation: b-no-animation 0.3s ease-out 0s;
    animation-fill-mode: both;
}

@keyframes b-no-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.changing-words {
    max-width: 60rem;
    max-width: 55rem;
}

.b-animation.hide {
    animation: b-animation 0.2s ease-out;
    animation-fill-mode: both;
}

@keyframes b-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.b-animation.last {
    animation: b-animation-last 0.3s ease-out;
    animation-fill-mode: backwards;
}

@keyframes b-animation-last {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.b-animation:nth-of-type(1) {animation-delay: calc(0.2s + 0.2s);}
.b-animation:nth-of-type(2) {animation-delay: calc(0.2s + 0.4s);}
.b-animation:nth-of-type(3) {animation-delay: calc(0.2s + 0.6s);}
.b-animation:nth-of-type(4) {animation-delay: calc(0.2s + 0.8s);}
.b-animation:nth-of-type(5) {animation-delay: calc(0.2s + 1.0s);}
.b-animation:nth-of-type(6) {animation-delay: calc(0.2s + 1.2s);}
.b-animation:nth-of-type(7) {animation-delay: calc(0.2s + 1.4s);}
.b-animation:nth-of-type(8) {animation-delay: calc(0.2s + 1.6s);}

.teaser,
.authors {
    animation: b-animation-last 0.3s ease-out 2.4s backwards;
}

h1,
h2,
h3,
p,
.word-count {
    color: var(--text-color);
}

span.nowrap {
    word-break: keep-all;
}

span.underline {
    text-decoration: underline yellow;
    text-decoration-style: solid;
    text-decoration-style: wavy;
}

.main__section {
    padding: 5rem 0 9rem 0;
}

.text__wrapper {
    overflow: hidden;
    z-index: 100;
    margin: 2rem auto 0rem auto;
    padding-top: 1rem;
}

.text__wrapper .text__block {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/*Snippet*/

.snippet__wrapper {
    box-sizing: border-box;
    position: relative;
    height: 100%;
    width: 100%;
    margin: 3rem auto;
    padding: 2rem 1.75rem calc(2rem + 0.75rem) 1rem;
    background: radial-gradient(circle, var(--deepblue) 1px, white 1px),
        radial-gradient(circle, var(--deepblue) 1px, white 1px) 2px 2px;
    background-size: 5px 5px;
}

.snippet__wrapper .text__block {
    max-width: 90rem;
    margin: 0 auto 0 auto;
}

.snippet__wrapper h2,
.snippet__wrapper h4,
.snippet__wrapper h5,
.snippet__wrapper p {
    color: white;
}

h5.subhead,
h5.capital {
    text-transform: uppercase;
    margin-bottom: 1.35em;
    text-align: center;
}

.specialobject {
    color: var(--text-color);
    background-color: var(--text-color);
}

.specialobject-animation {
    opacity: 0;
}

.specialobject-animation.go {
    animation-name: specialobject-animation;
    animation-duration: 0.5s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
    transform-origin: bottom center;
    animation-timing-function: ease;
}

@keyframes specialobject-animation {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    60% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}



/*INSERT 1*/

.insert1 h5.insert:nth-of-type(odd) {
    float: left;
}

.insert1 h5.insert:nth-of-type(even) {
    float: none;
    margin-left: 7rem;
    margin-bottom: 0.5rem;
}

/*INSERT 2*/

.insert2 .text__block > div {
    max-width: 120rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.insert2 .text__block > div > div {
    max-width: 60rem;
}

.insert2 .insert {
    margin-left: 2rem;
}

.insert2 .insert:before {
    content: "• ";
    margin-left: -2rem;
    float: left;
}

.insert2 h5 {
    margin-left: 2rem;
}

.insert2 h5.subhead,
.insert2 h5.capital {
    margin-left: 0;
}

.insert2 h5.subhead {
    text-align: left;
}

/*INSERT 3*/

h5.numeral {
    float: left;
}

h5.list {
    margin-left: 3rem; 
}

.big-quote {
    margin-top: 3rem;
    margin-bottom: 3rem;
    box-shadow: 0.75rem 0.75rem 0 0 var(--text-color);
}

.big-quote.go {
    animation-delay: 0.4s;
    transform-origin: top left;
}

.big-quote:after {
    top: -2rem;
    left: 0;
    border-width: 2rem 0 0 2rem;
    border-color: transparent transparent transparent white;
}

.big-quote h5 {
    color: var(--text-color);
}

/*INSERT 4*/

.insert4 h5.list {
    margin-left: 2rem;
}

/*CAR ANIMATION*/

.text__block:first-of-type p {
    margin-bottom: 0;
}

.car-animation-wrapper {
    background-color: red;
    height: 0;
    margin-top: -0.5rem;
}

.car-wrapper {
    position: relative;
    height: 3rem;
    width: 6rem;
}

.car-wrapper.go {
    animation: car-moving 5s ease 0.2s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes car-moving {
    0% {
        transform: translateX(0);
    }
    60% {
        transform: translateX(calc(50vw - 7rem));
    }
    100% {
        transform: translateX(100vw);
    }
}

.car-body {
    width: 6rem;
    height: 1.25rem;
    background-color: var(--text-color);
    position: absolute;
    bottom: 0.5rem;
}

.car-body:after,
.car-body:before {
    content: "";
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    background-color: var(--text-color);
    position: absolute;
    top: 0.75rem;
}

.car-body:after {
    left: 0.5rem;
}

.car-body:before {
    right: 0.5rem;
}

.car-top {
    width: 40%;
    margin: 0 auto;
    height: 1.25rem;
    background-color: var(--text-color);
    position: relative;
    top: -100%;
    left: -3%;
}

.car-top:before,
.car-top:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.car-top:before {
    border-width: 0 0 1.5rem 1rem;
    border-color: transparent transparent var(--text-color) transparent;
    left: -1rem;
}

.car-top:after {
    border-width: 1.5rem 0 0 1rem;
    border-color: transparent transparent transparent var(--text-color);
    right: -1rem;
}

/*PACMANS*/

.pacman-2d-wrapper {
    height: 20rem;
    z-index: -5;
    overflow-x: hidden;
}

.pacman.yellow {
    left: 100vw;
    top: -7rem;
}

.pacman.yellow.go {
    animation-name: pm-yellow;
    animation-delay: 0.5s;
    animation-duration: 5s;
}

@keyframes pm-yellow {
    0% {
        transform: translate(0,0) rotate(180deg);
    }
    100% {
        transform: translate(calc(-100vw - 8rem),0) rotate(180deg);
    }
}

.pacman.red {
    top: 0;
    left: 0;
}

.pacman.red.go {
    animation-name: pm-red;
    animation-delay: 0s;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

@keyframes pm-red {
    0% {
        transform: translate(0,0) rotate(0);
    }
    40% {
        transform: translate(50vw,0) rotate(0);
    }
    41% {
        transform: translate(50vw,0) rotate(90deg);
    }
    60% {
        transform: translate(50vw,25vw) rotate(90deg);
    }
    61% {
        transform: translate(50vw,25vw) rotate(0deg);
    }
    99%, 
    100% {
        transform: translate(calc(100vw + 8rem),25vw) rotate(00deg);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.pacman.blue {
    left: 0;
    top: 0.9rem;
}

.pacman.blue.go {
    animation-name: pm-blue;
    animation-delay: 0s;
    animation-duration: 8s;
}

@keyframes pm-blue {
    0% {
        transform: translate(0,0) rotate(0);
    }
    60% {
        transform: translate(calc(100vw - 10rem),0) rotate(0);
    }
    61% {
        transform: translate(calc(100vw - 10rem),0) rotate(-90deg);
    }
    90%{
        transform: translate(calc(100vw - 10rem),-30vw) rotate(-90deg);
    }
    91%{
        transform: translate(calc(100vw - 10rem),-30vw) rotate(0deg);
    }
    99%, 
    100% {
        transform: translate(110vw,-30vw) rotate(0deg);
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*PACMANS END*/


a:link		{color: var(--text-color); text-decoration: underline;}
a:visited	{color: var(--text-color); text-decoration: underline;}
a:hover  	{color: black; text-decoration: underline;}
a:active 	{color: black; text-decoration: underline;}


footer {
    border-color: var(--text-color);
}