body {padding:0 0px;
font-size:20px ;color:#666;
background: #FFFFFF;
background: -moz-linear-gradient(left, #ccc 0%, #fff 100%);
background: -webkit-linear-gradient(left, #ccc 0%,#fff 100%);
background: linear-gradient(to left, #ccc 0%,#fff 100%);
padding:0 20px;}

@media screen and (max-width:768px) { 
body, body div {padding:0;}}

.bg {background: url(../img/selbst-emblem-5.svg) 45vw 45vh no-repeat;height:80vh;width:100vw;
background-size:70px;position: fixed;z-index:-1;top:0;}

@media screen and (max-width:768px) {
.bg {background: url(../img/selbst-emblem-5.svg) 40vw 45vh no-repeat;height:80vh;width:100vw;
background-size:70px;position: fixed;z-index:-1;top:0;}}


body {height:3000px;}
    .blogmasonry {column-count:2;}
@media screen and (max-width:1216px) {
    .blogmasonry {column-count:1;}}
.blogmasonry li  {display: inline-block;margin-top:0;} /* hält Inhalt zusammen */

html, p {scroll-behavior: smooth;}
a {text-decoration: none;}
a:hover {text-decoration: underline;}

a:hover,
a:focus {outline: 0 !important; -moz-outline-style: none !important; cursor:pointer;}

/* blinking cursor */
#type-text,.blinking-cursor  {font-size:80px;font-weight:700;line-height:70px;text-transform: uppercase;letter-spacing: 5px; }
.blinking-cursor {user-select: none;animation: blink 1s steps(2, start) infinite;}
@keyframes blink {to {visibility: hidden;}}

@media screen and (max-width:768px) {
#type-text,.blinking-cursor {font-size:40px;line-height:35px;word-wrap: break-word;}}
.wp-block-comment-content a {word-wrap: break-word;}
.small {font-size:60%;}

.ol,.or,.ul,.ur {position:fixed;transform: rotateZ(45deg);
    width:100vh;height:100vh;transition: all 0.5s;color:white;z-index:10;text-align:center;}
.ol {left:-80vh;top:-80vh;background:red;}
.or {right:-80vh;top:-80vh;background:yellow;color:black;}
.ul {left:-80vh;bottom:-80vh;background:blue;}
.ur {right:-80vh;bottom:-80vh;background:green;}


.ol p {transform: rotateZ(-90deg) skew(30deg, 0deg);padding:80vh 60vh 0 0vh;}
.or p {transform: rotateZ(30deg) skew(0deg, -30deg);padding:80vh 0 0 20vh;}
.ur p {transform: rotateZ(-90deg) skew(30deg, 0deg);padding:7vh 0 80vh 45vh;}
.ul p {transform: rotateZ(30deg) skew(0deg, -30deg);padding:2vh 20vh 40vh 0vh;}

.ol:hover, .logo-move-ol {left:-60vh;top:-60vh;}
.or:hover, .logo-move-or {right:-50vh;top:-50vh;}
.ur:hover, .logo-move-ur {right:-60vh;bottom:-60vh;}
.ul:hover, .logo-move-ul {left:-50vh;bottom:-50vh;}
.ol p a, .or p a, .ul p a, .ur p a {text-decoration: none;line-height:150%;}

.ol p, .or p, .ul p, .ur p {text-align:center;font-weight:300; list-style: none; 
	font-size:30px;text-transform: uppercase;letter-spacing: 5px;}
.ol a, .or a, .ul a, .ur a {opacity:0.8;text-decoration: none;}
.ol a:hover, .or a:hover, .ul a:hover, .ur a:hover {font-weight:700;opacity:1;}


@media screen and (max-width:768px) {

.ol p, .or p, .ul p, .ur p  {font-size:18px;}
.ol,.or,.ul,.ur {position:fixed;transform: rotateZ(45deg);
    width:800px;height:800px;transition: all 0.5s;color:white;z-index:10;}

.ol {left:-650px;top:-650px;background:red;}
.or {right:-650px;top:-650px;background:yellow;color:black;}
.ul {left:-650px;bottom:-650px;background:blue;}
.ur {right:-650px;bottom:-650px;background:green;}

.ol p {padding:700px 500px 0 0px;}
.or p {padding:700px 0px 0 300px;}
.ur p {padding:0px 0px 600px 350px;}
.ul p {padding:20px 20px 0 0;}

.ol:hover, .logo-move-ol {left:-550px;top:-550px;}
.or:hover, .logo-move-or {right:-500px;top:-500px;}
.ur:hover, .logo-move-ur {right:-500px;bottom:-500px;}
.ul:hover, .logo-move-ul {left:-550px;bottom:-550px;}
}

video, img {padding-bottom:20px;}

/* startbild */

	.quer {display:block;}
	.hoch {display:none;}

@media (max-aspect-ratio: 9/6) { 
	.quer {display:block}
	.hoch {display:none;}}

@media (max-aspect-ratio: 1) { 
	.quer {display:none;}
	.hoch {display:block;}}


.home footer, .home a.wp-block-pages-list__item__link, .home .wp-block-navigation {display:none;}
.skewup {position:relative; transform: skew(0deg, -8deg);margin-bottom:20px;}
.skew,.wp-block-post-featured-image  {position:relative; transform: skew(0deg, 8deg);margin-bottom:20px;padding:20px 0 0 0;}


.mask {
mask: linear-gradient(20deg,#0000 50px,#000 0 calc(100% - 30px),#0000 0);}/* https://css-generators.com/custom-corners/ */
.maskplus, .wp-block-post-featured-image {
    clip-path: polygon(0 80px,160px 0,100% 0,100% calc(100% - 120px),calc(100% - 200px) 100%,0 100%);
}

@media screen and (max-width:768px) {
.wp-block-post-featured-image {
    clip-path: polygon(0 80px,160px 0,100% 0,100% calc(100% - 120px),calc(100% - 140px) 100%,0 100%);}}




.single blockquote p {position:relative;top:-80px;}
.single blockquote {position:relative;top:50px;}
.single cite {transform: skew(-0deg, -8deg);position:relative;top:-30px;} 
.single h3, .single h2 {transform: skew(-0deg, -8deg);} 
.single img {margin-top:50px;}

@media screen and (max-width:768px) {
.single blockquote p {position:relative;top:-50px;}}


.seite.wp-block-post-title, 
.seite .wp-block-post-content,
nav.wp-block-group,
.must-log-in,

.single-post .wp-block-post-title, .single-post .wp-block-post-content p,
.page h1.wp-block-post-title {position:relative; transform: skew(-0deg, -8deg);margin:20px 0 20px 0;}
.single-post .wp-block-post-title, .page h1.wp-block-post-title {
font-weight:700;text-transform: uppercase;letter-spacing: 5px;}

@media screen and (max-width:768px) and (orientation: portrait){
.single-post .wp-block-post-title, .single-post .wp-block-post-content p,
.page h1.wp-block-post-title {position:relative; transform: skew(-0deg, -8deg);margin:0px 0 10px 0;}
.page h1.wp-block-post-title,
.single-post .wp-block-post-title {margin:20px 0 20px 0;}}


.fb {background: url(../img/facebook_32.png)center center;width:36px;height:35px;display:inline-block;margin:10px 20px 0 0;}