/* Theme Name: R316 Version: 1.2.1 Author: elektrischerwalfisch Author URI: http://elektrischerwalfisch.de */ /* -------------------------------------- */ /* SOURCESANS */ @font-face { font-family: 'sourcesans'; /* ExtraLight */ src: url('fonts/sourcesans/SourceSansPro-ExtraLight.woff2') format('woff2'), url('fonts/sourcesans/SourceSansPro-ExtraLight.woff') format('woff'), url('fonts/sourcesans/SourceSansPro-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; } @font-face { font-family: 'sourcesans'; /* ExtraLight Italic*/ src: url('fonts/sourcesans/SourceSansPro-ExtraLightItalic.woff2') format('woff2'), url('fonts/sourcesans/SourceSansPro-ExtraLightItalic.woff') format('woff'), url('fonts/sourcesans/SourceSansPro-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; } @font-face { font-family: 'sourcesans'; /* Light */ src: url('fonts/sourcesans/SourceSansPro-Light.woff2') format('woff2'), url('fonts/sourcesans/SourceSansPro-Light.woff') format('woff'), url('fonts/sourcesans/SourceSansPro-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'sourcesans'; /* Light Italic*/ src: url('fonts/sourcesans/SourceSansPro-LightItalic.woff2') format('woff2'), url('fonts/sourcesans/SourceSansPro-LightItalic.woff') format('woff'), url('fonts/sourcesans/SourceSansPro-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'sourcesans'; /* Normal */ src: url('fonts/sourcesans/SourceSansPro-Regular.woff2') format('woff2'), url('fonts/sourcesans/SourceSansPro-Regular.woff') format('woff'), url('fonts/sourcesans/SourceSansPro-Regular.ttf') format('truetype'); font-weight: 400; /* entspricht font-weight: normal */ font-style: normal; } @font-face { font-family: 'sourcesans'; /* Regular Italic */ src: url('fonts/sourcesans/SourceSansPro-Italic.woff2') format('woff2'), url('fonts/sourcesans/SourceSansPro-Italic.woff') format('woff'), url('fonts/sourcesans/SourceSansPro-Italic.ttf') format('truetype'); font-weight: 400; /* entspricht font-weight: normal */ font-style: italic; } @font-face { font-family: 'sourcesans'; /* Semi Bold */ src: url('fonts/sourcesans/SourceSansPro-Semibold.woff2') format('woff2'), url('fonts/sourcesans/SourceSansPro-Semibold.woff') format('woff'), url('fonts/sourcesans/SourceSansPro-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'sourcesans'; /* Semi Bold Italic */ src: url('fonts/sourcesans/SourceSansPro-SemiboldItalic.woff2') format('woff2'), url('fonts/sourcesans/SourceSansPro-SemiboldItalic.woff') format('woff'), url('fonts/sourcesans/SourceSansPro-SemiboldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'sourcesans'; /* Bold */ src: url('fonts/sourcesans/SourceSansPro-Bold.woff2') format('woff2'), url('fonts/sourcesans/SourceSansPro-Bold.woff') format('woff'), url('fonts/sourcesans/SourceSansPro-Bold.ttf') format('truetype'); font-weight: 700; /* entspricht font-weight: bold */ font-style: normal; } @font-face { font-family: 'sourcesans'; /* Bold Italic */ src: url('fonts/sourcesans/SourceSansPro-BoldItalic.woff2') format('woff2'), url('fonts/sourcesans/SourceSansPro-BoldItalic.woff') format('woff'), url('fonts/sourcesans/SourceSansPro-BoldItalic.ttf') format('truetype'); font-weight: 700; /* entspricht font-weight: bold */ font-style: italic; } @font-face { font-family: 'sourcesans'; /* Black Bold */ src: url('fonts/sourcesans/SourceSansPro-Black.woff2') format('woff2'), url('fonts/sourcesans/SourceSansPro-Black.woff') format('woff'), url('fonts/sourcesans/SourceSansPro-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'sourcesans'; /* Black Italic */ src: url('fonts/sourcesans/SourceSansPro-BlackItalic.woff2') format('woff2'), url('fonts/sourcesans/SourceSansPro-BlackItalic.woff') format('woff'), url('fonts/sourcesans/SourceSansPro-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; } /* -------------------------------------- */ /* linguisticspro */ @font-face { font-family: 'linguisticspro'; /* Normal */ src: url('fonts/linguisticspro/linguisticspro-regular.woff2') format('woff2'), url('fonts/linguisticspro/linguisticspro-regular.woff') format('woff'), url('fonts/linguisticspro/linguisticspro-regular.ttf') format('truetype'); font-weight: 400; /* entspricht font-weight: normal */ font-style: normal; } @font-face { font-family: 'linguisticspro'; /* regular italic */ src: url('fonts/linguisticspro/linguisticspro-italic.woff2') format('woff2'), url('fonts/linguisticspro/linguisticspro-italic.woff') format('woff'), url('fonts/linguisticspro/linguisticspro-italic.ttf') format('truetype'); font-weight: 400; /* entspricht font-weight: normal */ font-style: italic; } @font-face { font-family: 'linguisticspro'; /* bold */ src: url('fonts/linguisticspro/linguisticspro-bold.woff2') format('woff2'), url('fonts/linguisticspro/linguisticspro-bold.woff') format('woff'), url('fonts/linguisticspro/linguisticspro-bold.ttf') format('truetype'); font-weight: 700; /* entspricht font-weight: bold */ font-style: normal; } @font-face { font-family: 'linguisticspro'; /* bold italic */ src: url('fonts/linguisticspro/linguisticspro-bolditalic.woff2') format('woff2'), url('fonts/linguisticspro/linguisticspro-bolditalic.woff') format('woff'), url('fonts/linguisticspro/linguisticspro-bolditalic.ttf') format('truetype'); font-weight: 700; /* entspricht font-weight: bold */ font-style: italic; } /* VARIABLEN */ :root { --colordark: rgb(47,46,46);} :root { --colorlight: #FFFFFF;} :root { --color01: #2347BA;} /* BLAU */ :root { --color02: rgb(212, 212, 212);} /* GRAU */ :root { --gap: 20px;} /* GAP */ :root { --headerheight01: 155px;} :root { --headerheight02: 105px;} :root { --bgloader01: url("img/loader-white01.gif") no-repeat scroll center center var(--colorlight);} /* White Loader-Gif */ * {margin: 0;padding: 0;box-sizing: border-box;} header, footer, section, article, nav {display: block;} body {background: var(--colorlight);color: var(--colordark);font-family: 'sourcesans', Arial, Helvetica, Sans-Serif;font-weight: 400;font-style: normal;line-height: 30px;font-size: 22px;} h1, h2 { font-family: 'linguisticspro'; color: var(--colordark);font-weight: 400;font-size: 48px; line-height: 55px; margin-bottom: 40px;} h3 { font-family: 'linguisticspro'; color: var(--colordark);font-weight: 400;font-size: 32px;line-height: 36px;margin-bottom: var(--gap);} h4, h5, h6 {color: var(--colordark); font-weight: 700; font-size: inherit;line-height: inherit;} a:link, a:visited {color: var(--color01);text-decoration: underline;} a:hover, a:active {text-decoration: none;outline: 0;} p {margin-bottom: var(--gap);} ul {list-style: none;} img {border: none;} b, strong {font-weight: 700;} hr {margin-bottom: 30px; background: var(--colordark);border: medium none;height: 1px;} table {border-collapse: collapse;border-spacing: 0;} .invisible, .screen-reader-text {display: none;} .clear {clear: both;} input.submit, #main .wp-block-button > a {position: relative;color: var(--colordark);background: none;font-size: 100%;font-weight: 400;text-decoration: none;width: 100%;border: none;padding: 6px 42px 6px 20px;cursor: pointer;border-radius: 0;} input.submit:hover, #main .wp-block-button > a:hover {background: var(--color01);color: var(--colorlight);} #main .wp-block-button > a::before, #main .wp-block-button > a::after {content: '';background: var(--colordark);height: 4px;width: 18px;position: absolute;right: 12px;} #main .wp-block-button > a::before {top: calc(50% - 7px);transform: rotate(45deg);} #main .wp-block-button > a::after {bottom: calc(50% - 7px);transform: rotate(-45deg)} #main .wp-block-button > a:hover::before, #main .wp-block-button > a:hover::after {background: var(--colorlight);} #main .wp-block-button.stoerer { margin-right: -50px!important;} #main .wp-block-button.stoerer a {background: red;color: var(--colorlight);text-align: left;} #main .wp-block-button.stoerer > a::before, #main .wp-block-button.stoerer > a::after {background: var(--colorlight);} #main .wp-block-button.stoerer > a:hover {opacity: 0.6;} a.icon {display: flex; text-decoration: none;color: var(--colordark);margin-bottom: var(--gap);} a.icon[href="#"] {pointer-events: none;text-decoration: none;} a.icon:hover {opacity: 0.4;} a.icon i {min-width: 36px; font-size: 24px;line-height: 30px;} a.icon span {} /* Layout Basis-Einstellungen (z.B. Spaltensets) */ #wrapper .inside {margin: 0 auto} #wrapper .inside, #wrapper .content > * {width: 981px;} #wrapper .content > * {margin-left: auto;margin-right: auto;} #wrapper .wp-block-columns {margin-bottom: var(--gap);gap: var(--gap);} #wrapper .wp-block-columns .wp-block-column {} /* IE-fix object-fit-images (Gutenberg-Gallery) */ #main .wp-block-gallery img, #main .gallery img {object-fit: cover;height: 100%;width: 100%;font-family: 'object-fit: cover;'; } /* Animationen */ #header #menu ul, #header #menu ul li a { -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s;} #header, #container {background: var(--colorlight);} #header {height: var(--headerheight01);padding-top: 23px;box-shadow: 0px 0px 8px var(--colordark);position: fixed;width: 100%;z-index: 10;top: 0;left: 0;} #header .inside {display: flex;justify-content: space-between;align-items: center;} #header .title {} #header .title a {display: block;width: auto;height: 110px;} #header .title a img {display: block;height: 100%;width: auto;border: none;margin-left: -1px;} #header #menu {text-align: right;} #header #menu .title, #header #menu p:empty {display: none;} #header #menu ul {font-size: 0;line-height: 0;} #header #menu li:not(:first-child) {border-left: 1px solid var(--colordark);} #header #menu li {position: relative;} #header #menu li, #header #menu a { display: inline-block; font-size: 16px;line-height: 48px;} #header #menu a {width: 100%;display: block;color: var(--colordark); padding: 0 15px;text-decoration: none;} #header #menu ul li.current_page_item > a, #header #menu ul li.current_page_ancestor > a, #header #menu ul li a:hover {color: var(--color01);} #header #menu ul.children {display: none; position: absolute;top: 48px;right: 0; z-index: 10;box-shadow: 0px 0px 4px var(--colordark);background: var(--colorlight);} #header #menu ul li:hover ul.children {display: block;} #header #menu ul.children li {display: block;border-left: none;border-bottom: 1px solid var(--colordark);} #header #menu ul.children li a {line-height: 36px;} #header #menu ul.children li.current_page_item > a, #header #menu ul.children li.current_page_ancestor > a, #header #menu ul.children li a:hover {color: var(--color01);background: none;} #header #menu #toggle-nav {display: none;} #container {padding: calc( var(--headerheight01) + var(--gap) ) 0 30px 0;} #main ul, #main ol { margin: 0 0 var(--gap) var(--gap);} #main ul { list-style: disc;} #wrapper #main .content > * {margin-bottom: var(--gap);} #main .content .wp-block-group > .wp-block-group__inner-container {border: 1px solid var(--colordark);padding: 30px 30px;} #main .content .wp-block-group > .wp-block-group__inner-container > *:last-child {margin-bottom: 0;} #main .wp-block-image, #main .wp-block-video {position: relative; margin-bottom: 0; text-align: center;} #main .wp-block-image img {max-width: 100%;height: auto;display: block;} #main .wp-block-image .aligncenter {display: inline-block;} #main .wp-block-image .alignleft, #main .wp-block-image .alignright {margin-bottom: 0;max-width: 50%;} #main .wp-block-image:not(.is-resized) > img, #main .wp-block-image figure {position: relative;} #main .wp-block-image:not(.is-resized) > img, #main .wp-block-image:not(.is-resized) > a > img, #main .wp-block-image figure:not(.is-resized) > img {width: 100%;height: auto;} #main figcaption {color: var(--colordark);text-align: left;font-style: italic;font-size: 14px;line-height: 16px;width: 100%;} #main .wp-block-embed figcaption, #main .wp-block-gallery figcaption.blocks-gallery-caption {position: static;background: none;color: inherit;text-align: center;} #main .wp-block-gallery {margin-bottom: var(--gap);} #main .wp-block-gallery ul {list-style: none;margin: 0;} #main .wp-block-media-text {background: var(--color01);color: var(--colorlight);margin-bottom: var(--gap);} #main .wp-block-media-text {height: 100%;} #main .wp-block-media-text .wp-block-media-text__media img {height: auto;} #main .wp-block-media-text.is-image-fill a {display: block;height: 100%;} #main .wp-block-media-text.is-image-fill a img {display: none;} #main .wp-block-media-text .wp-block-media-text__content {padding: 4px 8px;} #main .wp-block-pullquote {padding-top: 0;margin-bottom: var(--gap);} #main .wp-block-pullquote p {font-size: 20px;line-height: 28px;margin-bottom: var(--gap); } #main .wp-block-pullquote.is-style-solid-color {background: var(--color02);} #main .wp-block-pullquote.is-style-solid-color blockquote {max-width: 100%; padding: 20px 30px 0px 30px;} #main .wp-block-pullquote cite {font-style: italic;} #main .wp-block-quote {padding: 20px 30px;} #main .wp-block-quote p { font-family: 'linguisticspro'; color: var(--colordark);font-weight: 400;font-size: 32px; line-height: 38px;} #main .wp-block-quote cite {font-style: normal;font-size: 18px;font-weight: 300;} #main .wp-block-verse {background: var(--color02);padding: 20px 30px;white-space: normal;} #main .wp-block-buttons {margin-bottom: 10px;} #main .wp-block-buttons .wp-block-button {display: block; margin: 0 0 5px 0} #main table {width: 100%;word-break: normal;} #main table th, #main table td {text-align: left;border: none;padding: 4px 8px;vertical-align: top;} #main iframe {background: var(--bgloader01);} #main .wp-block-embed.is-type-video .wp-block-embed__wrapper {background: var(--colordark);position: relative;padding-bottom: 55%;padding-top: var(--gap);height: 0;overflow: hidden;} #main .wp-block-embed.is-type-video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} #wrapper #main .wp-block-gallery.logo-gallery .wp-block-image {margin-bottom: 0;} #wrapper #main .wp-block-gallery.logo-gallery .wp-block-image img {margin: 0 auto;} #main .grafik {display: flex;justify-content: center;align-items: center;height: 100%;} #main .grafik span {} #main .grafik.align-left {justify-content: flex-start;} #main .grafik.align-top-left {align-items: flex-start;justify-content: flex-start;} #main .grafik.align-top-center {align-items: flex-start;} #main .grafik.align-top-right {align-items: flex-start;justify-content: flex-end;} #main .grafik.align-right {justify-content: flex-end;} #main .grafik.align-bottom-left {align-items: flex-end;justify-content: flex-start;} #main .grafik.align-bottom-center {align-items: flex-end;} #main .grafik.align-bottom-right {align-items: flex-end;justify-content: flex-end;} #main .grafik.grafik01 span {height: 164px;width: 27px;padding-left: 27px;} #main .grafik.grafik01 img {transform: rotate(90deg);transform-origin: 0 0;} #main .grafik.grafik03 span {height: 136px;width: 138px;} #main .grafik.grafik03 img {transform: rotate(-45deg);transform-origin: top right;margin-left: -46px;} #main .grafik.grafik04 span {height: 86px;width: 82px;} #main .grafik.grafik04 img {transform: rotate(-90deg);transform-origin: top right;margin-left: -85px;} #main .grafik.grafik04.align-top-left, #main .grafik.grafik04.align-top-center, #main .grafik.grafik04.align-top-right {margin-top: -20px;} #footer {color: var(--color02);background: var(--colordark);font-size: 14px;line-height: 21px;padding: 48px 0;} #footer h3 {font-weight: 500;color: var(--colorlight);} #footer .inside {display: flex;justify-content: space-between;} #footer .line-one ul {margin: 0;} #footer .line-one a {color: var(--color02);text-decoration: none;} #footer .line-one a:hover {text-decoration: underline;} #footer .arrow .inside {justify-content: flex-end;} #footer .arrow a {display: block;position: relative;width: 36px;height: 28px;} #footer .arrow a::before, #footer .arrow a::after {content: '';display: block;position: absolute;top: 12px;background: var(--colorlight);height: 4px;width: 18px;} #footer .arrow a::before {transform: rotate(-45deg);left: 4px;} #footer .arrow a::after {transform: rotate(45deg);right: 4px;} @media screen and (max-width: 1011px) { #wrapper .inside, #wrapper .content > * {width: 100%;} #wrapper .inside, #wrapper .content > * {padding-left: var(--gap);padding-right: var(--gap);} #header {height:var(--headerheight02);padding-top: 12px;} #header .title a {height: 80px;} #header #menu li, #header #menu a {font-size: 14px;} #header #menu a {padding: 0 10px;} #container {padding-top: calc( var(--headerheight02) + var(--gap));} } @media screen and (max-width: 767px) { #main .grafik {display: none;} } @media screen and (max-width: 680px) { body {font-size: 18px; line-height: 26px;} h1, h2 {font-size: 28px;line-height: 32px;margin-bottom: 23px;} #header {position: static;height: auto; margin-bottom: var(--gap);padding-bottom: 15px;} #header .title {position: absolute;top: 12px;left: var(--gap);z-index: 1;} #header #menu {width: 100%;} #header #menu ul {margin-top: 75px;} #header #menu ul li, #header #menu ul.children li {border: none; display: block;} #header #menu li:not(:first-child) {border-left: none;} #header #menu ul li a {display: block;overflow: hidden;padding: 0;} #header #menu > ul > li:not(:first-child) > a::before {content:''; display: block; height: 1px;width: 100%; background: var(--colordark);} #header #menu > ul > li > a {height: 0;font-size: 20px;line-height: 60px;} #header #menu ul.children li a {height: 0; line-height: 26px;} #header #menu.menu-active > ul > li > a {height: 60px;} #header #menu.menu-active ul.children li a {height: 26px;} #header #menu.menu-active ul.children {margin-bottom: 10px;} #header #menu ul.children {display: block;position: static;margin-top: -16px;box-shadow: none;} #header #menu ul.children li a {line-height: 26px;} #header #menu #toggle-nav {cursor: pointer;display: block;width: 38px;position: absolute;top: 25px;right: var(--gap);z-index: 1;} #header #menu #toggle-nav span {background: var(--colordark);display: block;height: 6px;margin: 6px 0;width: auto;} #container {padding-top: 0;} #wrapper .wp-block-columns .wp-block-column:empty {display: none;} #footer .inside {display: block;text-align: center;} #footer .arrow a {display: inline-block;margin-top: var(--gap);} }