* {
	margin: 0px;
	padding: 0px;
	border: 0px none;
	outline: 0px none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.copy-motion-path {
    z-index: 50;
}
body {
	font-family: 'work-sans', Arial, sans-serif;
	text-align: left;
	font-size: 62.5%;  /* 1em = 10px , 1.4em = 14px */
    font-size: 0.7vw;
	color: #000;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

    --txt: 2em;
	--txtsm: 1.2em;
	--tit: 4em;
	--titlg: 1.2em;
	--titsm: 2.8em;

    --txt-max: min(var(--txt), 15px);

    --pathscale: 1;

    --bgcolor-cur: #b4cfd6;
    --bgcolor-next: #6a8a91;


    --first: #88b40f;
    --third: #c6e66f;

    min-width: 128em;
}
h1,h2 {
	font-size: var(--tit);
	line-height: 1.1em;
	font-weight: lighter;
    padding-bottom: 1vw;
}
h1 em,
h2 em,
p em {
	font-family: 'utopia-std', serif;
	font-weight: bold;
    font-size: var(--titlg);
}
h3, h4, h5 {
    font-weight: bold;
    font-size: var(--titsm);
}
p,form, li, tr {
    font-size: var(--txt);
    line-height: 1.5em;
}

li p {
    font-size: 1em;
}
p em {
   font-size: 2em;
}
p a, td a {
    color: var(--first);
    transition: color 0.2s;
}
p a:hover, td a:hover {
    color: var(--third);
}

.ce-gallery img,
.ce-gallery video {
	max-width: 100%;
	height: auto;
}

.wtxt a {
    display: inline-block;
    background-color: #fff;
    text-decoration: none;
    padding: 0.4em 0.5em 0.3em;
    line-height: 1em;
    transition: color 0.3s, background-color 0.3s;
    margin-top: 1em;
}
.wtxt a:hover {
    background-color: var(--first);
    color: #fff;
}
p {
    padding-bottom: 1em;
}
p:last-child {
    padding-bottom: 0;
}

.frame.frame-type-table, .frame.frame-type-html {
	overflow: auto;
}
blockquote {
    font-family: 'utopia-std', serif;
}

.primary {
	color: var(--first);
}

html, body{
    min-height: 100vh;
    min-height: 100lvh;
    /* max-height: 100vh;
    max-height: 100lvh; */
}
#scroller, #turn, #overlay, #veil {
    height: 100vh;
    height: 100lvh;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100vw;
}
body {
    background-color: rgb(183, 219, 230);
}

.stage {
    aspect-ratio: 4/3;
    height: 100vh;
    height: 100lvh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* border: 1px solid red; */
    background:  no-repeat center transparent;
    background-size: cover;
    display: flex;
    place-content: center;
    align-items: center;
}
@media (min-aspect-ratio: 4/3) {
    .stage {
        height: auto;
        width: 100%;
    }
}
.stage img,
.stage svg {
    position: fixed;
    height: 100%;
    width: auto;
    top: 0;
    left: 0;
}
.stage img.half {
    height: 50%;
}
.stage img.third {
    height: 66.66%;
}

.stage img.bottom {
    top: auto;
    bottom: 0;
}



#turn {
    display: none;
    z-index: 120;
}

#veil {
    pointer-events: none;
    z-index: 110;
    background: linear-gradient(to right, #fff0, var(--bgcolor-cur) 10%, var(--bgcolor-next) 90%, #fff0 ) no-repeat;
    background-size: 120% 100%;
    background-position: 100vw 0;
}
.out #veil{
    background-position: -10vw 0;
    transition: background-position 0.6s ease-out;
}
.in #veil{
    background-position: -120vw 0;
    transition: background-position 0.6s ease-out;
}

#overlay {
    background: url('/fileadmin/Resources/Public/img/close-white.svg') no-repeat rgba(0,0,0,0);
    background-position: -3em 5em;
    transition: background-color 0.6s, background-position 0.6s;
    overflow-y: auto;
    overflow-x: clip;
    z-index: 115;
    pointer-events: none;
    font-size: 8.5px; /* results in 17px font size for --txt*/
}
#overcont {
    position: absolute;
    right: 0;
    background-color: #fff;
    padding: 5em;
    width: 600px;
    max-width: calc(100% - 8em);
    min-height: 100vh;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform ease-in-out 0.6s;
    cursor: initial;
}
body.overactive #overlay{
    pointer-events: all;
    background-color: rgba(0,0,0,0.5);
    background-position: 5em 5em;
    cursor: pointer;
}
body.overactive #overcont{
    transform: translateX(0);
}

@media (max-aspect-ratio: 5/4) {
    #turn {
        display: block;
        background: url('turn.svg') center no-repeat rgba(0, 0, 0, 0.8);
        background-size: contain;
    }
}

#hud > ul {
    position: fixed;
    z-index: 110;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 1.5em;
    list-style: none;
}
#hud li {
    margin: 0;
    padding: 0;
    font-size: 24px;
}
#hud > .mainnav {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4em;
    padding: 0.4em 1.8em;
    gap: 2em;
    font-weight: bold;
    align-items: center;
}
.mainnav > * {
    cursor: pointer;
    display: block; 
}
.mainnav svg {
    display: block;
}
.mainnav a {
    color: #fff;
    text-decoration: none;
    display: block; 

}

#share {
    position: relative;
}

#shareoptions {
    position: absolute;
    top: 2em;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.66);
    padding: 0 0.3em;
    border-radius: 2em;
    /* display: none; */
    overflow: clip;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}
.open #shareoptions {
    max-height: 27em;
}

#shareoptions button {
    display: block;
    width: 2em;
    height: 2em;
    margin: 1em 0;
    overflow: clip;
    text-indent: -99em;
    background: transparent no-repeat center;
    background-size: contain;
    border: 0 none;
    padding: 0;
    filter: grayscale(1) brightness(0.8);
}
#shareoptions button:hover {
    filter: grayscale(0) brightness(1);
}
#shareoptions [data-sharer="linkedin"] {
    background-image: url('icons/linkedin.svg');
}
#shareoptions [data-sharer="x"] {
    background-image: url('icons/x.svg');
}
#shareoptions [data-sharer="facebook"] {
    background-image: url('icons/facebook.svg');
}
#shareoptions [data-sharer="whatsapp"] {
    background-image: url('icons/whatsapp.svg');
}
#shareoptions [data-sharer="bluesky"] {
    background-image: url('icons/bluesky.svg');
}
#shareoptions [data-sharer="email"] {
    background-image: url('icons/email.svg');
}

#hud .scenenav{
    top: initial;
    bottom: 1rem;
}
.scenenav li{
    line-height: 1em;
}
.scenenav .butt {
    font-size: 1.5vw;
   	line-height: 1.75em;
}
.scenenav .act {
    pointer-events: none;
    background-color: #fff;
    color: #666;
}

.timeline {
    position: relative;
    z-index: 10;
    width: 1em;
    height: 15000px;
}



.butt {
    display: block;
    aspect-ratio: 1;
    color: #fff;
    background-color: #0001;
    border: 1px solid #fff;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    font-size: 1.4em;
    line-height: 1.6em;
    text-decoration: none;
    transition: color 0.5s, background-color 0.5s, border-color 0.5s;
}
.butt:hover {
    color: #e83d64;
    border-color: #e83d64;
    background-color: #FFF3;
}
@keyframes movebg {
    0%, 100% {
        background-position-y: 0%;
    }
    50% {
        background-position-y: 100%;
    }
}
.scenelink {
    text-decoration: none;
}
.scenelink p{
    color: #FFF;
    display: block;
    text-align: center;
}
.scenelink p:last-child{
    padding-top: 1em;
}
#sound {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20px;
    width: 22px;
    margin-top: -4px;
    overflow: clip;
}

.soundbar {
	height: 20px;
	position: relative;
	width: 4px;
	transform: translateY(16px)
}

.soundbar:before {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	background-color: #fff;
	content: '';
}

.soundbar:nth-child(2) {
		transform: translateY(12px)
}

.soundbar:nth-child(3) {
		transform: translateY(8px)
}

.soundbar:nth-child(4) {
		transform: translateY(4px)
}

@keyframes sound {
	0% {
		transform: translateY(18px)
	}

	50% {
		transform: translateY(0)
	}

	100% {
		transform: translateY(18px)
	}
}
body.soundon .soundbar:nth-child(1) {
    animation: sound 2s linear infinite -1.1s;
}

body.soundon .soundbar:nth-child(2) {
    animation: sound 1.9s linear infinite -0.8s;
}

body.soundon .soundbar:nth-child(3) {
    animation: sound 1.8s linear infinite -0.3s;
}

body.soundon .soundbar:nth-child(4) {
    animation: sound 1.7s linear infinite;
}



.porthole {
    display: block;
    border-radius: 50%;
    border: 0.2em solid #fff;
    aspect-ratio: 1;
    width: 15vw;
    background: url('kapitel1.png') no-repeat center 0%;
    background-size: 100% auto;
    animation: 6s ease-in-out movebg infinite;
    color: #fff;
    text-decoration: none;
    position: relative;
    padding-bottom: 0;
}
[data-scene="2"] .porthole{
    background-image: url('kapitel2.png');
}
[data-scene="3"] .porthole{
    background-image: url('kapitel3.png');
}
[data-scene="4"] .porthole{
    background-image: url('kapitel4.png');
}
[data-scene="5"] .porthole{
    background-image: url('kapitel5.png');
}

.scenelink.next {
    position: fixed;
    right: -16vw;
    top: 50%;
    margin-top: -5vw;
    pointer-events: all;
    z-index: 30;
}

.porthole span {
    display: flex;
    justify-content: center;
	align-items: center;
    border-radius: 50%;
    aspect-ratio: 1;
    background-color: #0008;
    opacity: 0;
    /* transform: scale(0.5); */
    transition: opacity 0.5s;
    transition-delay: 0;
}
.scenelink:hover .porthole span {
    opacity: 1;
    /* transform: scale(1); */
}

.porthole b {
    font-family: 'utopia-std', serif;
    color: #fff;
    font-size: 2em;
}

#overcont header {
    padding-bottom: 1.5em;
}
#overcont .frame {
    padding-bottom: 3em;
}

form * {
    font-size: 1em;
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="checkbox"],
input[type="password"],
input[type="file"],
textarea,
select {
	border: 1px solid transparent;	
	border-top-color: var(--third);
	border-left-color: var(--third);
	padding: 0.5em 1em;
	background: #FFF;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.6s;
}
.powermail_fieldwrap,
legend {
	margin-bottom: 1em;
}

.radio ,
.checkbox {
	padding-top: 0.8em;
}
.radio:first-child ,
.checkbox:first-child {
	padding-top: 0;
}
.radio label,
.checkbox label {
	padding-top: 0;
	padding-left: 2em;
	display: block;
	position: relative;
	cursor: pointer;
}
.radio input,
.checkbox input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 0.1em;
}
.powermail_fieldwrap {
	display: grid;
	gap: 0.5em;
}


textarea {
	resize: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus {
	border-color: var(--first);
}

input[type="submit"],
button,
.button {
	padding: 0.5em 2em 0.5em 1em;
	background: var(--first) url('/fileadmin/Resources/Public/img/arrow-right_white.svg') no-repeat right center;
	border-right: 1em solid var(--first);
	color: #FFF; 
	cursor: pointer;
	transition: filter 0.3s;
	text-decoration: none;
	display: inline-block;
}

input[type="submit"]:hover,
button:hover,
.button:hover {
	filter: brightness(0.8) contrast(1.4);
    color: #fff;
}
.powermail_fieldwrap_type_submit {
    justify-content: end;
}

select {
	appearance: none;
	-webkit-appearance: none;
	cursor:pointer;
	background: url('/fileadmin/Resources/Public/img/arrow-down.svg') no-repeat #fff;
	background-position: calc(100% - 1em) center;
	padding-right: 3em;
}

table {
    border-collapse: collapse;
    min-width: 100%;
}
td {
    font-size: 0.8em;
    line-height: 1.1em;
    padding: 0.4em 0.5em;
}
tr {
    height: auto !important;

}
#c2414 td {
    width: auto !important;
    font-size: 0.8em;
    line-height: 1.1em;
    padding: 0.4em 0.5em;
    border-right: 1px solid #dcf3a2;
    transition: background-color 0.5s;
    transition-delay: 0s;
    height: auto !important;
}
#c2414 tr:hover td{ 
    background-color: #EEE;
}
#c2414 tr:first-child td {
    height: 9em !important;
    border-right: 0 none;
    background-color: transparent;
}
#c2414 td:first-child {
    padding-left: 0;
}
#c2414 td:last-child {
    padding-right: 0;
    border-right: 0 none;
}
#c2414 tr:first-child td strong {
	position: relative;
	width: 28px;
	display: block;
	transform: rotateZ(-45deg);
	white-space: nowrap;
	transform-origin: 200% 100%;
}


.thought {
    z-index: 20;
    position: fixed;
    top: 50%;
    left: 50%;
}
.thought > * {
    transform: scale(0);
    transform-origin: 30% 80%;
}



div.bubble,
p.bubble {
    padding: 3em 2em;
    background: no-repeat center;
    background-size: 100% 100%;
    display: grid;
    text-align: center;
}
.bubble > * {
    grid-area: 1/1;
    opacity: 0;
}
.bubble > *:first-child{
    opacity: 1;
}
.box {
    background-color: #fff;
    width: 2.5em;
    height: 2.5em;
    margin-left: 3em;
}
.box.small {
    width: 1.5em;
    height: 1.5em;
    margin-left: 0;
}

.topright .medium {
    margin-left: 65%;
}
.topright .box.small {
    margin-left: 80%;
}
.thought.topright > * {
    transform-origin: 80% 20%;
}


.bottomright .medium {
    margin-left: 65%;
}
.bottomright .box.small {
    margin-left: 80%;
}
.thought.bottomright > * {
    transform-origin: 60% 80%;
}


.topcenter-l .medium {
    margin-left: 36%;
}
.topcenter-l .box.small {
    margin-left: 33%;
}
.thought.topcenter-l > * {
    transform-origin: 45% 0%;
    margin-bottom: 2vw;
}

.topcenter-r .medium {
    margin-left: 45%;
}
.topcenter-r .box.small {
    margin-left: 50%;
}
.thought.topcenter-r > * {
    transform-origin: 55% 0%;
    margin-bottom: 2vw;
}


.bottomcenter-l .medium {
    margin-left: 36%;
}
.bottomcenter-l .box.small {
    margin-left: 33%;
}
.thought.bottomcenter-l > * {
    transform-origin: 45% 100%;
    margin-top: 2vw;
}

.bottomcenter-r .medium {
    margin-left: 51%;
}
.bottomcenter-r .box.small {
    margin-left: 62%;
}
.thought.bottomcenter-r > * {
    transform-origin: 45% 100%;
    margin-top: 2vw;
}

.wtxt {
    z-index: 19;
    position: fixed;
    top: calc(50% - 16vw);
    left: 50%;
    color: #fff;
    max-width: 30vw;
}
.wtxt > * {
    position: relative;
    left: 5vw;
    opacity: 0;
}

.wtxt {
    pointer-events: none;
}

[style*='opacity: 1;'] a {
    pointer-events: all;
}

.scrollDown {
    position: fixed;
    bottom: 4em;
    left: 50%;
    width: 3em;
    height: 5em;
    border: 3px solid #fff;
    border-radius: 2em;
    box-shadow: 0 0 5em rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(1.5);
}
@keyframes mouseWheel {
    0% {
        transform: translateY(0);
        opacity: 0;

    }
    20% {
        opacity: 1;
    }
    50%{
        opacity: 1;
    }
    90%, 100% {
        transform: translateY(2.5em);
        opacity: 0;
    }
}

.scrollDown::after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    background-color: #fff;
    border-radius: 1em;
    position: relative;
    left: calc(50% - 0.5em);
    top: 0.5em;
    animation: mouseWheel 1.5s ease-in-out infinite;
}


a.info {
    position: absolute;
    bottom: 0;
    right: -1em;
    color: var(--first);
    background-color: #fff;
    text-decoration: none;
    font-size: var(--txt);
    width: calc(var(--txt) * 0.8);
    height: calc(var(--txt) * 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 9em;
    transition: color 0.3s, background-color 0.3s;
    /* transform: scale(1.5); */
    opacity: 1;
}
a.info:hover {
    color: #fff;
    background-color: var(--first);
}
a.info::before,
a.info::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 9em;
    background-color: #fffa;
    border: 0.1em solid #fff;
    animation: pulse 2s ease-out infinite;
    z-index: -2;
}
a.info::after {
    animation-delay: 1s;
}
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
    
}


/* intro - scene 0 */

#intro {
    min-height: 100vh;
    background: url('sky.svg') no-repeat center;
    background-size: cover;
}
#logo {
    display: inline-block;
    padding: 4em;
}
.card{
    padding: 4em;
    width: 50em;
}
#frau {
    height: 100vh;
    position: fixed;
    right: 0;
    bottom: 0;
}

.chapters {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4em;

    --step: 25%;
    --delay: -4;
    padding: 4em;
    width: 70%;
    list-style: none;
    position: relative;
    z-index: 1;
}
.chapters .porthole {
    width: initial;
    animation-delay: calc(var(--delay) * 0.5s);
}
.chapters li {
    transition: transform .3s;
}
.chapters:hover li {
    transform: scale(0.9);
}
.chapters li:hover {
    transform: scale(1.2);
}

.chapters li:nth-child(2) .porthole {
   --delay: -3;
}
.chapters li:nth-child(3) .porthole {
    --delay: -2;
}
.chapters li:nth-child(4) .porthole {
    --delay: -1;
}
.chapters li:nth-child(5) .porthole {
    --delay: 0;
}

#imprint {
    display: block;
    padding: 2em 0 0.5em 2em;
    font-size: calc(var(--txt) * 0.8);
    color: #000;
    text-decoration: none;
}





/* ### szene 0 ### */

@keyframes scaleUp {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

#starten {
    top: 5%;
    left: initial;
    right: 50lvh;
}

#starten > * {
    transform-origin: 70% 80%;
    animation: scaleUp 0.6s cubic-bezier(0, 0, 0.5, 1.5) 1s 1 forwards;
    margin-left: auto;
    margin-right: 0;
}
#starten > .bubble {
    animation-delay: 1.9s;
}
#starten > .medium {
    animation-delay: 1.4s;
    margin-right: 3em;
    margin-top: -1em;
}

#starten p {
    padding: 1em 3em;
}
#starten .button {
    margin-top: 0.5em;
}

#maincont {
    min-height: calc(100lvh - 5.5vw);
}




/* scene 1 */

#scene1 {
    background-image: url('s1/00_himmel.svg');
}

#sailingboat {
    padding-left: 20vw;
}
#flying {
    transform: scale(0.3);
    transform-origin: 50% 50%;
    position: relative;
    height: auto;
}
#seagull,
#seagulldark {
    position: fixed;
    left: -30vw;
    top: -25vw;
    transform: scale( var(--pathscale) );
    transform-origin: left top;
}
#wohin {
    margin-top: -15vw;
    margin-left: -9vw;
}

#banken {
    margin-top: 9vw;
    margin-left: -25vw;
}
#banken .medium {
    margin: 0 0 -4vw -2vw;
}
#banken .small {
    margin-left: -5vw;
}
#banken > * {
    transform-origin: 30% 20%;
}



#neindanke {
    margin-top: 9vw;
    margin-left: -25vw;
}



#ballon {
    left: 100vw;
}
#atomkraft {
    opacity: 0;
    margin-top: -23vw;
    margin-left: 10vw;
    transform: scale(1.5);
}
#atomkraft .bubble{
    transform: scale(1);
    background-image: url('s1/25_atomkraftwolke.svg');
    padding: 2em 4em 6em 4em;
    color: #eaa638;
}
#forward{
    position: fixed;
    left: -30vw;
    top: 35vw;
    transform: rotateZ(20deg);
    height: 100%;
}




/* ### szene 2 ### */

#scene2 {
    filter: brightness(1);
}
@keyframes flash {
    0%, 5% {
        filter: brightness(3);
    }
    20% {
        filter: brightness(1.3);
    }
    100% {
        filter: brightness(1);
    }   
}

#scene2.flash {
    animation: flash 1s ease-out 1;
}

#timeline2 {
    height: 30000px;
}
@keyframes bgleft {
    0%{
        background-position: 0% 0;
    }
    100%{
        background-position: 200% 0;
    }
}
#waves {
    background: url('s2/water-boundary.svg') repeat-x transparent;
    background-size: 200% auto;
    position: absolute;
    width: 100%;
    height: 5vw;
    top: 50%;
    /* bottom: calc(50lvh + -8vw); */
    animation: bgleft 5s linear infinite;
}

#krux {
    top: calc(50% - 22vw);
    left: 20%;
}

.stage .mine {
    left: 50%;
    top: 75lvh;
    transform: translateX(-50%) rotate(30deg);
    transform-origin: center bottom;
}

#fossile {
    /* left: 80%; */
}
#waffen {
    left: 35%
}
#tabak {
    left: 70%
}
#gentech {
    /* left: 80% */
}

#practices {
    left: 35%;
}

.stage .shark {
    left: 145vw;
    transform: translateX(-50%);
}

#menot {
    top: calc(50% - 22vw);
    left: 33vw;
}


#values {
    top: calc(50% - 19vw);
    left: 10%;
}

.scenelink.next[data-scene="3"] {
    top: calc(50% - 10vw);
}


#clouds {
    left: 100%;
    height: 50%;
}




/* ### szene 3 ### */


#timeline3 {
    height: 40000px;
}
.scene3 .thought{
    display: none;
}


@keyframes swim {
    0%,100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, 4px);
    }
}

#swimboot {
    animation: swim 4s ease-in-out infinite;
}

@keyframes wave{
    0%,100%{
        transform: scaleX(0.97);
    }
    50% {
        transform: scaleX(1.03);
    }
}
.wave {
    animation: wave 2s ease-in-out 0s infinite;
    transform-origin: 300px center;
}

#immobilien-q {
    top: calc(50% - 15vw);
    left: 15%;
}
#immobilien-a {
    top: calc(50% - 22vw);
    left: 34%;
}

#kotiert-q,
#wirkung-q {
  	top: calc(50% - 21vw);
	left: 36%;
}

.stage .investment {
    left: 100%;
    transform-origin: left center;
}


#kotiert-a {
    margin-top: -2.4vw;
	margin-left: -32vw;
}
#ethos-q .medium ,
#kotiert-a .medium {
    margin-left: 65%;
}
#ethos-q .small ,
#kotiert-a .small {
    margin-left: 80%;
}
#ethos-q > * ,
#kotiert-a > * {
    transform-origin: 80% 20%;
}


#ethos-q {
    margin-top: 4vw;
	margin-left: -19vw;
}

#ethos-a {
    margin-top: -3vw;
    margin-left: 13vw;
}

/* #kotiert-p {
    transform-origin: left bottom;
} */

#ethos-p,
#ethos-o {
    left: -90%;
    transform: scale(0.5);
}


#wirkung-a {
    margin-top: -21vw;
    margin-left: -4vw;
}



#s3solarboot {
    display: none;
}




/* ### szene 4 ### */


#timeline4 {
    height: 40000px;
}
.scene4 .thought{
    display: none;
}

#tollteam {
    top: calc(50% - 18vw);
}

#s4solarboot {
    left: -35%;
    transform: scale(0.8);
}

#frauabendrot {
    left: -35%;
}

#frauabendrot.fliped{
    transform: scaleX(-1);
}

#frauabendrot.fliped.doublefliped {
    transform: scaleX(1);
}

#exposition{
    top: calc(50% - 22vw);
    left: 60%;
}
#butterfly{
    top: 62%;
    left: 20%;
}

#blumenbg {
    left: 230%;
    transform: scale(1.3);
}

.stage .infokranz {
    opacity: 0;
    left: 30%;
    transform: scale(1.3);
}
.p-kreis {
    opacity: 0;
}

#allarcs {
    transform: scale(0.8);
    transform-origin: center;
}

.arc use {
    transform: scale(0);
    transition: transform 0.6s;
    transform-origin: 50px 50px;
    transition-delay: calc(6s - ( var(--delay) * 0.1s ) );
}
#bumen_immo use{
    transition-delay: calc(4.5s - ( var(--delay) * 0.1s ) );
}
#bumen_alt use{
    transition-delay: calc(2.5s - ( var(--delay) * 0.1s ) );
}

#scene4 .arc.active  use {
    transform: scale(1);
    transition-delay: calc(var(--delay) * 0.1s );
}


#immo-k {
    left: 74%;
}
#kotiert-k {
    left: 71%;
}
#alt-k {
    left: 22%;
    top: -9vw;
}


#immo-s{
    top: calc(50% - 7vw);
    left: 64%;
}

.wtxt.shadow{
    /* text-shadow: 0 0 6vw #202c00, 0 0 2vw #202c00CC; */
    -webkit-text-stroke: 0.2px;
}
.shadow p a {
    margin-top: 0;
}
#immo-txt {
    left: 5%;
    top: calc(50% - 21vw);
}

#kotiert-s{
    top: calc(50% - 14vw);
    left: 62%;
}
#kotiert-i {
    left: 5%;
    top: calc(50% - 21vw);
}

#alt-s{
    top: calc(50% - 11vw);
    left: 3%;
}

#alt-i {
    left: 5%;
    top: calc(50% - 10vw);;
}

#anlageinfo {
    max-width: 16%;
    top:calc(50% - 6vw);
    left: 42%;
    text-align: center;
    opacity: 0;
}
#anlageinfo > p{
    opacity: 1;
}

#wirkungsmatrix {
    left: 6%;
    opacity: 0;
}

#matrix-s {
	left: 35%;
    top: calc(50% + 2vw);
}







/* ### Szene 5  */


#timeline5 {
    height: 40000px;
}



#scene5 .bg {
    right: 0;
    left: auto;
}

#scene5 .spot {
    height: 70%;
    top: 90%;
    left: auto;
    right: 0;
}

.wtxt.dark {
    color: #000;
    top: calc(50% - 11vw);
	left: 36%;
    max-width: 30vw;
}
.wtxt.dark  > * {
    left: 0;
    filter: blur(30px);
}
.wtxt.dark a {
    color: #fff;
    background-color: var(--first);
    transition: filter 0.3s;
}
.wtxt.dark a:hover {
    color: #fff;
    background-color: var(--first);
    filter: brightness(0.8) contrast(1.4);
}



#werfen{
    left: 45%;
    top: calc(50% - 30em);
}

#fraugross {
    position: static;
    transform-origin: 50% 100%;
}
#fraugrosswrap {
    position: fixed;
    height: 100%;
    top:0;
    right: 2%;
    transform-origin: 50% 100%;
}
@keyframes walk {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(var(--walkheight));
    }
}
#walk {
    animation: walk 0.7s ease-in-out 0s infinite;
}
#leuchtturm {
    --walkheight: 0.1vw;
    transform-origin: 150% 66%;
}

#walk.standstill {
    --walkheight: 0.01vw;
}

#sonne {
    left: 39%;
    top: -80%;
}

#bootsilhouette {
    left: -20%;
    top: 10%;
    transform: scale(1.5);
}

#buschwerk {
    transform-origin: 87% 66%;
}
.horizon {
    transform-origin: 10% 55%;
}

#finale {
    max-width: 50vw;
    left: 37%;
    top: calc(50% - 9vw);
}
#finale > * {
    top: -5vw;
    left: 0;
}
#finale h2 {
    padding-bottom: 0.5em;
}
#finale span {
    display: block;
}
#finale .md {
    padding-left: 5vw;
}
#finale .big {
    padding-left: 11vw;
}
#finale img {
    width: 10vw;
    margin-left: 22vw;
}
#seagulldark {
    top: -80vw;
}

#finalbuttons {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: min(4rem, 6vw);
}

#finalbuttons .info {
    --first: #d64c66; /* sun */
    --first: #E94369; /* from ci */
    position: relative;
    font-size: revert;
    font-weight: normal;
    font-size: var(--txt-max);
    width: min(8vw, 85px);
    height: min(8vw, 85px);
    text-align: center;
   	right: auto; /* override default right positions of .info*/
    left: calc(10vw + 1.5rem);
}

#scene5 {
    transition: filter 5s ease-in-out;
}
#scene5.done {
    filter: brightness(0.5) contrast(1.5);
}

/* cleverreach form */
.ui-sortable {
    padding-bottom: 1em;
}
/*  hide checkboxes for newsletter */
[id="8389935"] {
    display: none;
}