/*
Theme Name: Echtzeitstream
Version: 2.2
Author: elektrischerwalfisch
Author URI: http://elektrischerwalfisch.de
*/

/* -------------------------------------- */
/* OPENSANS */

@font-face {
    font-family: 'opensans'; /* Light */
    src: url('assets/fonts/opensans/OpenSans-Light.woff2') format('woff2'),
         url('assets/fonts/opensans/OpenSans-Light.woff') format('woff'),
         url('assets/fonts/opensans/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Light Italic*/
    src: url('assets/fonts/opensans/OpenSans-LightItalic.woff2') format('woff2'),
         url('assets/fonts/opensans/OpenSans-LightItalic.woff') format('woff'),
         url('assets/fonts/opensans/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Normal */
    src: url('assets/fonts/opensans/OpenSans-Regular.woff2') format('woff2'),
         url('assets/fonts/opensans/OpenSans-Regular.woff') format('woff'),
         url('assets/fonts/opensans/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400; /* entspricht font-weight: normal */
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Regular Italic */
    src: url('assets/fonts/opensans/OpenSans-Italic.woff2') format('woff2'),
         url('assets/fonts/opensans/OpenSans-Italic.woff') format('woff'),
         url('assets/fonts/opensans/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400; /* entspricht font-weight: normal */
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Semi Bold */
    src: url('assets/fonts/opensans/OpenSans-Semibold.woff2') format('woff2'),
         url('assets/fonts/opensans/OpenSans-Semibold.woff') format('woff'),
         url('assets/fonts/opensans/OpenSans-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Semi Bold Italic */
    src: url('assets/fonts/opensans/OpenSans-SemiboldItalic.woff2') format('woff2'),
         url('assets/fonts/opensans/OpenSans-SemiboldItalic.woff') format('woff'),
         url('assets/fonts/opensans/OpenSans-SemiboldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Bold */
    src: url('assets/fonts/opensans/OpenSans-Bold.woff2') format('woff2'),
         url('assets/fonts/opensans/OpenSans-Bold.woff') format('woff'),
         url('assets/fonts/opensans/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;  /* entspricht font-weight: bold */
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Bold Italic */
    src: url('assets/fonts/opensans/OpenSans-BoldItalic.woff2') format('woff2'),
         url('assets/fonts/opensans/OpenSans-BoldItalic.woff') format('woff'),
         url('assets/fonts/opensans/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;  /* entspricht font-weight: bold */
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Extra Bold */
    src: url('assets/fonts/opensans/OpenSans-ExtraBold.woff2') format('woff2'),
         url('assets/fonts/opensans/OpenSans-ExtraBold.woff') format('woff'),
         url('assets/fonts/opensans/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Extra Bold Italic */
    src: url('assets/fonts/opensans/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
         url('assets/fonts/opensans/OpenSans-ExtraBoldItalic.woff') format('woff'),
         url('assets/fonts/opensans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}


/* VARIABLEN */
:root {  --content-width01: 1180px;}

:root {  --colordark: #29292a;}
:root {  --colorlight: #FFFFFF;}

:root {  --color00: rgba(255,255,255,0.6);} /* HELLGRAU */

:root {  --color01: #67b7e1;} /* BLAU */
:root {  --color02: rgba(255,255,255,0.15);} /* GRAU */

:root {  --space-below01: 15px;} /* Vertikaler Abstand 01 */
:root {  --space-below02: 30px;} /* Vertikaler Abstand 02 */
:root {  --space-below03: 60px;} /* Vertikaler Abstand 03 */
:root {  --side-space01: 20px;} /* Seitlicher Abstand 01 */
:root {  --aspectratio01: 1.6 / 1;} /* AspectRatio01 */
:root {  --gap01: 30px;} /* Gap 01 */
:root {  --hover-opacity: 0.5;} /* Link-hover-opacity */
:root {  --animation01: all 0.4s ease-in-out 0s;} /* Animation 01 */

:root {  --fontsize-s: 12px;} /* Font Size S */
:root {  --fontsize-m: 16px;} /* Font Size Default */
:root {  --fontsize-l: 25px;} /* Font Size L */

#main iframe,
#main .wp-block-cover {background: url("assets/img/loading.gif") no-repeat scroll center center transparent;background-size: 50px auto;}
#main iframe {display: block;}

.editor-styles-wrapper .wp-block-group {border: 1px solid #cccccc;}
.editor-styles-wrapper .wp-block-group::before {content:"Gruppe";font-size: 11px;background: #999;color: #fff;padding: 0 4px;position: absolute;top: 0;left: 0;}

* {margin: 0;padding: 0;box-sizing: border-box;}
header, footer, section, article, nav {display: block;}

body {background: var(--colordark);color: var(--color00);font-family: 'opensans', Arial, Helvetica, Sans-Serif;font-weight: 400;font-style: normal;line-height: 1.4;font-size: var(--fontsize-m); }

h1 {font-size: var(--fontsize-m);}
h2 {font-size: var(--fontsize-m);}
h3 {font-size: var(--fontsize-m);}
h1, h2, h3  { line-height: 1.2; color: var(--colorlight); font-weight: 400;}

h4, h5, h6 {color: var(--colordark); font-weight: 400; font-size: inherit;line-height: inherit;}

h1, h2, h3, p, ul, ol {margin-bottom: var(--space-below01);}

a:link, a:visited {color: var(--color01);text-decoration: underline;}
a:hover {text-decoration: none;outline: 0;}
p {margin-bottom: var(--space-below01);}
ul {list-style: none;}
img {border: none;}
b, strong {font-weight: 700;}
hr {margin-bottom: var(--space-below01); background: var(--colordark);border: medium none;height: 1px;}
table {border-collapse: collapse;border-spacing: 0;}
.invisible,
.screen-reader-text {display: none;}

.wpcf7 label {font-weight: 700;}
.wpcf7 label span {font-weight: 400;}
.wpcf7 input.wpcf7-form-control,
.wpcf7 select,
.wpcf7 textarea {background: var(--colorlight) none repeat scroll 0 0;border: 1px solid var(--colordark);padding: 5px 10px;box-sizing: border-box;-moz-box-sizing: border-box;width: 100%;margin-bottom: 10px;-webkit-appearance: none;appearance: none;border-radius: 0;}

input.submit,
.wpcf7 input.wpcf7-submit,
.wp-block-buttons .wp-block-button .wp-block-button__link {color: var(--colorlight);background: var(--color01) none repeat scroll 0 0;font-size: 100%;font-weight: 700;text-transform: uppercase;text-decoration: none;width: 100%;border: 1px solid var(--color01);padding: 8px;cursor: pointer;border-radius: 0;}

input.submit:hover,
.wpcf7 input.wpcf7-submit:hover,
.wp-block-buttons .wp-block-button > *:hover {opacity: var(--hover-opacity);}

.wp-block-buttons .wp-block-button > .wp-block-button__link,
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {border: 1px solid var(--color01);}
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {color: var(--colordark);background: none;}

.wpcf7 .wpcf7-radio > *,
.wpcf7 .wpcf7-checkbox > * {display: block;margin: 0;}
.wpcf7 .wpcf7-response-output {margin: 0 0 var(--space-below01) 0;}
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {margin-left: 0;}

/* Basis-Einstellungen für Breiten von Block-Elementen (Einstellungen für Editor-Breiten in der theme.json) */
#wrapper .inside,
#main > .content > *,
#main > .content > .wp-block-cover:not(.alignfull) > .wp-block-cover__inner-container,
#main > .content > *:is(.bgColor01, .bgColor02) > * {max-width: var(--content-width01); width: 100%; margin-left: auto!important; margin-right: auto!important; padding-left: var(--side-space01); padding-right: var(--side-space01);}
#main > .content > .alignfull {max-width: none;padding-left: 0;padding-right: 0;}

/* Standard-Margin von Block-Elementen nach unten und Außnahmen davon */
*:is(.content, .is-root-container) > *:not(.wp-block-spacer, .wp-block-heading, p) {margin-bottom: var(--space-below02);}

/* Besondere Block-Elemente mit Padding oben und unten */
*:is(.content, .is-root-container) > *:is(.bgColor01, .bgColor02, .wp-block-cover:not(.alignfull)) {padding-top: var(--space-below03);padding-bottom: var(--space-below02);}

#main > .content > a {display: block;} /* bugfix */


.wp-block-columns {gap: var(--gap01);}

#header {position: fixed; top: 0; left: 0; z-index: 100; width: 100%;transition: var(--animation01);}
#header .inner {display: flex; justify-content: space-between; margin: 30px; align-items: center;}
#header p:empty {display: none;}

#header .title a {display: block; width: 272px;color: var(--colorlight); text-decoration: none; font-size: 28px; text-transform: uppercase;line-height: 30px;font-weight: 600;}
#header .title a img {display: block; width: 100%;height: auto;}

#header .menu {display: flex;}

#header .menu ul {font-size: 0;line-height: 0;margin: 0; transition:var(--animation01);display: inline-block;}
#header .menu ul li {position: relative;}
#header .menu ul li,
#header .menu ul a { display: inline-block; font-size: 15px;line-height: 30px;white-space: nowrap;}
#header .menu ul a {width: 100%;display: block;color: var(--colorlight); text-transform: uppercase; padding: 0 10px;text-decoration: none;transition: var(--animation01);}
#header .menu ul a::after {content: '';display: block; width: 100%; height: 3px; background: var(--colorlight); transform: scaleX(0);transition: var(--animation01);}
#header .menu ul li.current_page_item > a::after,
#header .menu ul li.current_page_parent > a::after,
#header .menu ul li a:hover::after {transform: scaleX(1);}
#header .menu ul ul.children {display: none;}

#header .menu ul.lang {margin-left: var(--side-space01);}
#header .menu ul.lang a {padding: 0 2px;font-weight: 700;}
#header .menu ul.lang a:hover,
#header .menu ul.lang li.active a {color: var(--color01);}
#header .menu ul.lang a::after {display: none;}

#header .menu #menu-language {margin-left: var(--side-space01);}
#header .menu #menu-language li a {padding: 0 2px;font-weight: 700;}

html[lang="de"] #header .menu #menu-language li:not(.en) a,
html[lang="en"] #header .menu #menu-language li.current_page_item a {color: var(--color01);}
#header .menu #menu-language li.current_page_item a {color: var(--color01);}

#header .menu #menu-language li.current_page_item a::after {display: none;}

#header.scrolled {background: var(--colordark);box-shadow: 0px 0px 2px var(--color00);}

#header #toggle-nav {display: none;}

#main {min-height: 90vh;}
#main .content > *:first-child {margin-top: 100px;}
#main .content > *:first-child:is(.wp-block-cover) {margin-top: 0;}

.editor-styles-wrapper ul.wp-block-list,
#main ul { list-style: disc;}
.editor-styles-wrapper ul.wp-block-list > li,
#main ul > li { margin-left: 20px;}

.editor-styles-wrapper h1.wp-block-post-title {font-size: var(--fontsize-l);font-weight: 700;}
.editor-styles-wrapper p > a,
#main p > a {font-weight: 600;}

.editor-styles-wrapper .wp-block-cover,
#main .wp-block-cover {min-height: 500px;padding-top: 0;padding-bottom: 0;}
.wp-block-cover *:is(h1, h2, h2, h4, h5) {color: inherit;}
.wp-block-cover .wp-block-cover__background {background-color: transparent !important; background-image: url(assets/img/dot.png);background-repeat: repeat;}
.wp-block-cover .wp-block-cover__inner-container .wp-block-buttons .wp-block-button .wp-block-button__link {border: none; background: var(--colordark);font-weight: inherit;text-transform: none;}
.wp-block-cover .wp-block-cover__inner-container .wp-block-buttons .wp-block-button .wp-block-button__link:hover {background: var(--color01);opacity: 1;}

.wp-block-cover .wp-block-columns {margin-bottom: 0;}
.wp-block-cover .wp-block-columns .wp-block-column.bgColor10 {padding-left: var(--side-space01);padding-right: var(--side-space01);background: rgba(0,0,0,0.7);position: relative;z-index: 1;}

#main .wp-block-cover.img-loaded {background: none;}
#main .wp-block-cover > img {opacity: 0;transition: var(--animation01);} 
#main .wp-block-cover.img-loaded > img {opacity: 1;}

.wp-block-image {margin-bottom: var(--space-below01);}
#main figcaption {font-style: italic;font-size: var(--fontsize-s);text-align: center;}

.wp-block-media-text {background: var(--color01);}
.wp-block-media-text * {color: var(--colorlight);}
.wp-block-media-text {height: 100%;}

.wp-block-media-text .wp-block-media-text__media img {height: auto;}
.wp-block-media-text.is-image-fill a {display: block;height: 100%;}
.wp-block-media-text.is-image-fill a img {display: none;}
.wp-block-media-text .wp-block-media-text__content {padding: 4px 8px;}

.wp-block-pullquote,
.wp-block-quote,
.wp-block-verse {background: var(--color02);padding: 20px 30px;white-space: normal;margin-bottom: var(--space-below01);}
.wp-block-pullquote p,
.wp-block-quote p,
.wp-block-verse {font-size: 20px;line-height: 28px;margin-bottom: var(--space-below01); }
.wp-block-pullquote cite,
.wp-block-quote cite {font-size: 14px;line-height: 18px;font-style: italic;}
.wp-block-quote {position: relative;padding: 20px 30px 20px 60px;}
.wp-block-quote::before {content: '"';  position: absolute;top: 5px;left: 22px;font-size: 68px;line-height: 68px;opacity: 0.5;}

#main table {width: 100%;}
#main table th,
#main table td {text-align: left;border: 1px solid var(--colordark);padding: 4px 8px;}

#main .wp-block-embed.is-type-video .wp-block-embed__wrapper {background: var(--colordark);position: relative;padding-bottom: 55%;padding-top: 15px;height: 0;overflow: hidden;}
#main .wp-block-embed.is-type-video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

#main .post-list {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap: var(--gap01);}
#main .post-list :is(h1, .pagination) {grid-column: 1 / -1;}

#main .post-list .post > a {background: var(--color02);display: block;height: 100%;text-decoration: none;padding-bottom: var(--space-below01);transition: var(--animation01);}
#main .post-list .post > a:hover {opacity: var(--hover-opacity);}
#main .post-list .post span:not(.thumb)  {display: block;padding: 0 var(--side-space01);}
#main .post-list .post .thumb {width: 100%;display: block;margin-bottom: var(--space-below01);aspect-ratio: var(--aspectratio01);}
#main .post-list .post .thumb img {object-fit: cover;display: block;height: 100%;width: 100%;}
#main .post-list .post .title {color: var(--colorlight);font-weight: 600;}
#main .post-list .post .excerpt {font-size: var(--fontsize-s);}

.single #main .thumb {aspect-ratio: 1.8 / 1;}
.single #main .thumb img {width: 100%;height: 100%;object-fit: cover;}

#main .postnav::before,
#main .postnav::after {content:'';display: block;height: 1px;background-color: var(--color00);}
#main .postnav::before {margin-bottom: 2px;}
#main .postnav::after {margin-top: 4px;} 
#main .pagination {text-align: center;} 
#main :is(.postnav, .pagination) > * {display: inline-block;margin: 0;font-size: var(--fontsize-s);}
#main :is(.postnav, .pagination) a {text-decoration: none; font-size: var(--fontsize-s); color: var(--colorlight);}

#main .pagination :is(a, span) {padding: 0 4px;}
#main .pagination a:hover,
#main .pagination span.current {text-decoration: none;background: var(--colorlight);color: var(--colordark);}

#main .postnav :is(.prev, .next) {width: 50%;}
#main .postnav .prev {text-align: left;}
#main .postnav .next {text-align: right;}

.bgColor01 {background: var(--color01);}
.bgColor02 {background: var(--color02);}

.wp-block-columns.align-bottom .wp-block-column {position: relative;padding-bottom: var(--space-below02);}
.wp-block-columns.align-bottom .wp-block-column > :last-child {position: absolute;bottom: 0;}

/* Korrektur Ankernavi*/
#main .content div[id] {margin-top: -100px;padding-top: 100px;}

#footer {color: var(--colorlight);background: var(--colordark);font-size: var(--fontsize-s);}

#footer .inside {display: flex;flex-wrap: wrap;justify-content: space-between;}
#footer .inside::before {content: '';display: block; margin-bottom: 10px; background:var(--colorlight);height: 1px; width: 100%;flex-basis: 100%;order: -1;}


#footer .line-one * {display: inline-block;}
#footer .line-one a {text-decoration: none;}
#footer .line-one a,
#footer .line-one li {padding-left: 5px;}
#footer .line-one li::before {content: '|';}

#footer .arrow .inside {justify-content: center;padding-bottom: 15px;}
#footer .arrow a {display: inline-block;position: relative; width: 36px;height: 28px;}
#footer .arrow a:hover {opacity: 0.5;}
#footer .arrow a::before, #footer .arrow a::after {content: '';display: block;position: absolute;top: 12px;background: var(--colorlight);height: 2px;width: 14px;}
#footer .arrow a::before {transform: rotate(-45deg);left: 6px;}
#footer .arrow a::after {transform: rotate(45deg);right: 6px;}


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

    #main .post-list {grid-template-columns: 1fr 1fr 1fr;}

}

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

    #header .title a {width: 200px;}

    #header .inner {display: block;margin: var(--side-space01);}

    #header,
    #header.scrolled {position: static;}

    #header .menu {display: block;}

    #header .menu ul,
    #header .menu ul li {display: block;}
    #header .menu ul li a {text-align: right;padding: 0;display: block;overflow: hidden;height: 0;}
    #header .menu ul a::after {display: none;}
    #header .menu ul ul.children {display: none;}    

    #header .menu ul li.current_page_item > a,
    #header .menu ul li.current_page_ancestor > a,
    #header .menu ul li a:hover {font-weight: 700;}

    #header .menu #menu-language {margin-left: 0;display: inline-block;width: 100%;text-align: right;}
    #header .menu #menu-language li {display: inline-block;}

    #header.menu-active .menu ul li a {height: 34px!important;}
    #header.menu-active .menu ul {padding-top: var(--space-below01);}

   #header #toggle-nav {cursor: pointer;display: block;width: 36px;position: absolute;top: 7px;right: var(--side-space01);z-index: 1;}
   #header #toggle-nav span {background: var(--colorlight);display: block;height: 4px;margin: 8px 0;width: auto;transition: var(--animation01)}

   #header.menu-active #toggle-nav span {opacity: 0;transform-origin: 1px center;}
   #header.menu-active #toggle-nav span:first-child {opacity: 1;transform: rotate(45deg);}
   #header.menu-active #toggle-nav span:last-child {opacity: 1;transform: rotate(-45deg);}

   #main .post-list {grid-template-columns: 1fr 1fr;}

   #footer .inside {display: block;text-align: center;}

}

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

    #main .post-list {grid-template-columns: 1fr;}

}