@charset "UTF-8"; /* _variables.scss /* * * * * * * * * * * * * * * * * * * * */ /* usage: figure { @include aspect-ratio(16,9); } result: figure { width: 100%; padding-top: 56.25%; overflow: hidden; position: relative; } figure > img { position: absolute; top: 0; left: 0; } */ /* usage : .foo { @include breakpoint(sm) { width:100%; } } or @include breakpoint(md) { .foo { width:100%; } } .foo { @include breakpoint--strict(sm) { width:100%; } } or @include breakpoint--strict(md) { .foo { width:100%; } } */ /* _calculate-rem.scss Rem is similar to the em value, but instead of being relative to the parent element it’srelative to the font-size set in the . It has all the benefits of em but you don’t get issues with e.g (compounding) since rem is only relative to the html element. The bad part is there’s no support for rem units in IE8 and below. But with this mixin we can create a fallback to pixels when rem isn’t supported. */ /* Usage p { @include font-size(14px) } */ /* Output p { font-size: 14px; //Will be overridden if browser supports rem font-size: 0.8rem; } */ :root { --videoplayer: #2272A5; --maintext: #BC650D; } /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ a, hr { padding: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, hr, menu, nav, section { display: block; } abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: 0 0; } ins, mark { background-color: #ff9; color: #000; } nav ul { list-style: none; } blockquote, q { quotes: none; } blockquote:after, blockquote:before, q:after, q:before { content: ''; content: none; } a { margin: 0; font-size: 100%; vertical-align: baseline; background: 0 0; } ins { text-decoration: none; } mark { font-style: italic; font-weight: 700; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; } input, select { vertical-align: middle; } /* * * * * * * * * _basics.scss * * * * * * * * */ *, *:before, *:after { box-sizing: inherit; } html { box-sizing: border-box; } html { overflow-y: scroll; overflow-x: hidden; } button, label, input[type=button], input[type=submit] { cursor: pointer; } img { width: 100%; height: auto; display: block; } ul { list-style-type: none; } /* * * * * * * * * bootstrap grid * * * * * * * * */ .container, .container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } @-ms-viewport { width: device-width; } .visible-lg, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block, .visible-md, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-sm, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-xs, .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block { display: none !important; } @media (max-width: 767px) { .visible-xs { display: block !important; } table.visible-xs { display: table; } tr.visible-xs { display: table-row !important; } td.visible-xs, th.visible-xs { display: table-cell !important; } .visible-xs-block { display: block !important; } .visible-xs-inline { display: inline !important; } .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm { display: block !important; } table.visible-sm { display: table; } tr.visible-sm { display: table-row !important; } td.visible-sm, th.visible-sm { display: table-cell !important; } .visible-sm-block { display: block !important; } .visible-sm-inline { display: inline !important; } .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important; } table.visible-md { display: table; } tr.visible-md { display: table-row !important; } td.visible-md, th.visible-md { display: table-cell !important; } .visible-md-block { display: block !important; } .visible-md-inline { display: inline !important; } .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1200px) { .visible-lg { display: block !important; } table.visible-lg { display: table; } tr.visible-lg { display: table-row !important; } td.visible-lg, th.visible-lg { display: table-cell !important; } .visible-lg-block { display: block !important; } .visible-lg-inline { display: inline !important; } .visible-lg-inline-block { display: inline-block !important; } .hidden-lg { display: none !important; } } @media (max-width: 767px) { .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } } .visible-print { display: none !important; } @media print { .visible-print { display: block !important; } table.visible-print { display: table; } tr.visible-print { display: table-row !important; } td.visible-print, th.visible-print { display: table-cell !important; } } .visible-print-block { display: none !important; } @media print { .visible-print-block { display: block !important; } } .visible-print-inline { display: none !important; } @media print { .visible-print-inline { display: inline !important; } } .visible-print-inline-block { display: none !important; } @media print { .visible-print-inline-block { display: inline-block !important; } .hidden-print { display: none !important; } } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } .row { margin-left: -15px; margin-right: -15px; } .col, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { float: left; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } .col-xs-pull-12 { right: 100%; } .col-xs-pull-11 { right: 91.66666667%; } .col-xs-pull-10 { right: 83.33333333%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-8 { right: 66.66666667%; } .col-xs-pull-7 { right: 58.33333333%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-5 { right: 41.66666667%; } .col-xs-pull-4 { right: 33.33333333%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-2 { right: 16.66666667%; } .col-xs-pull-1 { right: 8.33333333%; } .col-xs-pull-0 { right: auto; } .col-xs-push-12 { left: 100%; } .col-xs-push-11 { left: 91.66666667%; } .col-xs-push-10 { left: 83.33333333%; } .col-xs-push-9 { left: 75%; } .col-xs-push-8 { left: 66.66666667%; } .col-xs-push-7 { left: 58.33333333%; } .col-xs-push-6 { left: 50%; } .col-xs-push-5 { left: 41.66666667%; } .col-xs-push-4 { left: 33.33333333%; } .col-xs-push-3 { left: 25%; } .col-xs-push-2 { left: 16.66666667%; } .col-xs-push-1 { left: 8.33333333%; } .col-xs-push-0 { left: auto; } .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.66666667%; } .col-xs-offset-10 { margin-left: 83.33333333%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.66666667%; } .col-xs-offset-7 { margin-left: 58.33333333%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.66666667%; } .col-xs-offset-4 { margin-left: 33.33333333%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-2 { margin-left: 16.66666667%; } .col-xs-offset-1 { margin-left: 8.33333333%; } .col-xs-offset-0 { margin-left: 0; } @media (min-width: 768px) { .col, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { float: left; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } .col-sm-pull-12 { right: 100%; } .col-sm-pull-11 { right: 91.66666667%; } .col-sm-pull-10 { right: 83.33333333%; } .col-sm-pull-9 { right: 75%; } .col-sm-pull-8 { right: 66.66666667%; } .col-sm-pull-7 { right: 58.33333333%; } .col-sm-pull-6 { right: 50%; } .col-sm-pull-5 { right: 41.66666667%; } .col-sm-pull-4 { right: 33.33333333%; } .col-sm-pull-3 { right: 25%; } .col-sm-pull-2 { right: 16.66666667%; } .col-sm-pull-1 { right: 8.33333333%; } .col-sm-pull-0 { right: auto; } .col-sm-push-12 { left: 100%; } .col-sm-push-11 { left: 91.66666667%; } .col-sm-push-10 { left: 83.33333333%; } .col-sm-push-9 { left: 75%; } .col-sm-push-8 { left: 66.66666667%; } .col-sm-push-7 { left: 58.33333333%; } .col-sm-push-6 { left: 50%; } .col-sm-push-5 { left: 41.66666667%; } .col-sm-push-4 { left: 33.33333333%; } .col-sm-push-3 { left: 25%; } .col-sm-push-2 { left: 16.66666667%; } .col-sm-push-1 { left: 8.33333333%; } .col-sm-push-0 { left: auto; } .col-sm-offset-12 { margin-left: 100%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-0 { margin-left: 0; } } @media (min-width: 992px) { .col, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { float: left; } .col-md-12 { width: 100%; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; } .col-md-pull-12 { right: 100%; } .col-md-pull-11 { right: 91.66666667%; } .col-md-pull-10 { right: 83.33333333%; } .col-md-pull-9 { right: 75%; } .col-md-pull-8 { right: 66.66666667%; } .col-md-pull-7 { right: 58.33333333%; } .col-md-pull-6 { right: 50%; } .col-md-pull-5 { right: 41.66666667%; } .col-md-pull-4 { right: 33.33333333%; } .col-md-pull-3 { right: 25%; } .col-md-pull-2 { right: 16.66666667%; } .col-md-pull-1 { right: 8.33333333%; } .col-md-pull-0 { right: auto; } .col-md-push-12 { left: 100%; } .col-md-push-11 { left: 91.66666667%; } .col-md-push-10 { left: 83.33333333%; } .col-md-push-9 { left: 75%; } .col-md-push-8 { left: 66.66666667%; } .col-md-push-7 { left: 58.33333333%; } .col-md-push-6 { left: 50%; } .col-md-push-5 { left: 41.66666667%; } .col-md-push-4 { left: 33.33333333%; } .col-md-push-3 { left: 25%; } .col-md-push-2 { left: 16.66666667%; } .col-md-push-1 { left: 8.33333333%; } .col-md-push-0 { left: auto; } .col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0; } } @media (min-width: 1200px) { .col, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 { float: left; } .col-lg-12 { width: 100%; } .col-lg-11 { width: 91.66666667%; } .col-lg-10 { width: 83.33333333%; } .col-lg-9 { width: 75%; } .col-lg-8 { width: 66.66666667%; } .col-lg-7 { width: 58.33333333%; } .col-lg-6 { width: 50%; } .col-lg-5 { width: 41.66666667%; } .col-lg-4 { width: 33.33333333%; } .col-lg-3 { width: 25%; } .col-lg-2 { width: 16.66666667%; } .col-lg-1 { width: 8.33333333%; } .col-lg-pull-12 { right: 100%; } .col-lg-pull-11 { right: 91.66666667%; } .col-lg-pull-10 { right: 83.33333333%; } .col-lg-pull-9 { right: 75%; } .col-lg-pull-8 { right: 66.66666667%; } .col-lg-pull-7 { right: 58.33333333%; } .col-lg-pull-6 { right: 50%; } .col-lg-pull-5 { right: 41.66666667%; } .col-lg-pull-4 { right: 33.33333333%; } .col-lg-pull-3 { right: 25%; } .col-lg-pull-2 { right: 16.66666667%; } .col-lg-pull-1 { right: 8.33333333%; } .col-lg-pull-0 { right: auto; } .col-lg-push-12 { left: 100%; } .col-lg-push-11 { left: 91.66666667%; } .col-lg-push-10 { left: 83.33333333%; } .col-lg-push-9 { left: 75%; } .col-lg-push-8 { left: 66.66666667%; } .col-lg-push-7 { left: 58.33333333%; } .col-lg-push-6 { left: 50%; } .col-lg-push-5 { left: 41.66666667%; } .col-lg-push-4 { left: 33.33333333%; } .col-lg-push-3 { left: 25%; } .col-lg-push-2 { left: 16.66666667%; } .col-lg-push-1 { left: 8.33333333%; } .col-lg-push-0 { left: auto; } .col-lg-offset-12 { margin-left: 100%; } .col-lg-offset-11 { margin-left: 91.66666667%; } .col-lg-offset-10 { margin-left: 83.33333333%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-8 { margin-left: 66.66666667%; } .col-lg-offset-7 { margin-left: 58.33333333%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-5 { margin-left: 41.66666667%; } .col-lg-offset-4 { margin-left: 33.33333333%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-2 { margin-left: 16.66666667%; } .col-lg-offset-1 { margin-left: 8.33333333%; } .col-lg-offset-0 { margin-left: 0; } } .clearfix, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .row:after, .row:before { content: " "; display: table; } .clearfix:after, .container-fluid:after, .container:after, .row:after { clear: both; } .center-block { display: block; margin-left: auto; margin-right: auto; } .pull-right { float: right !important; } .pull-left { float: left !important; } *, :after, :before { box-sizing: border-box; } /* @font-face { font-family: 'SyntaxCom-UltraBlack'; src: url('../fonts/SyntaxCom-UltraBlack.eot'); src: url('../fonts/SyntaxCom-UltraBlack.svg') format('svg'); src: url('../fonts/SyntaxCom-UltraBlack.ttf') format('truetype'); src: url('../fonts/SyntaxCom-UltraBlack.woff') format('woff'); src: url('../fonts/SyntaxCom-UltraBlack.eot') format('eot'); } @font-face { font-family: 'SyntaxCom-Black'; src: url('../fonts/SyntaxCom-Black.eot'); src: url('../fonts/SyntaxCom-Black.svg') format('svg'); src: url('../fonts/SyntaxCom-Black.woff') format('woff'); src: url('../fonts/SyntaxCom-Black.eot') format('eot'); src: url('../fonts/SyntaxCom-Black.ttf') format('truetype'); } @font-face { font-family: 'SyntaxCom-Bold'; src: url('../fonts/SyntaxCom-Bold.eot'); src: url('../fonts/SyntaxCom-Bold.svg') format('svg'); src: url('../fonts/SyntaxCom-Bold.ttf') format('truetype'); src: url('../fonts/SyntaxCom-Bold.woff') format('woff'); src: url('../fonts/SyntaxCom-Bold.eot') format('eot'); } @font-face { font-family: 'SyntaxCom-Italic'; src: url('../fonts/SyntaxCom-Italic.eot'); src: url('../fonts/SyntaxCom-Italic.svg') format('svg'); src: url('../fonts/SyntaxCom-Italic.ttf') format('truetype'); src: url('../fonts/SyntaxCom-Italic.woff') format('woff'); src: url('../fonts/SyntaxCom-Italic.eot') format('eot'); } @font-face { font-family: 'SyntaxCom-Roman'; src: url('../fonts/SyntaxCom-Roman.eot'); src: url('../fonts/SyntaxCom-Roman.svg') format('svg'); src: url('../fonts/SyntaxCom-Roman.ttf') format('truetype'); src: url('../fonts/SyntaxCom-Roman.woff') format('woff'); src: url('../fonts/SyntaxCom-Roman.eot') format('eot'); } */ @font-face { font-family: myFontRoman; src: url(../fonts/SyntaxCom-Roman.woff2) format('woff2'), url(../fonts/SyntaxCom-Roman.woff) format('woff'); } @font-face { font-family: myFontBold; src: url(../fonts/SyntaxCom-Bold.woff2) format('woff2'), url(../fonts/SyntaxCom-Bold.woff) format('woff'); } @font-face { font-family: myFontItalic; src: url(../fonts/SyntaxCom-Italic.woff2) format('woff2'), url(../fonts/SyntaxCom-Italic.woff) format('woff'); } body { font-size: 1.15em; line-height: 1.45; padding-top: 60px; font-family: 'myFontRoman', myFontRoman, sans-serif; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; -o-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; scroll-behavior: smooth; } h1, h2, h3, h4, h5, h6 { font-family: 'myFontBold', myFontBold, sans-serif; letter-spacing: 1px; } [class*="dachzeile"] { font-family: 'myFontRoman', myFontRoman, sans-serif; } em, b { font-family: 'myFontBold', myFontBold, sans-serif; letter-spacing: 1px; } i:not(.fa) { font-family: 'myFontItalic', myFontItalic, sans-serif; } .mneu-wrap .menu__list .menu__list-item:first-of-type a.menu__link { font-family: 'myFontBold', myFontBold, sans-serif; letter-spacing: 1px; } .section__ext-link { font-family: 'myFontRoman', myFontRoman, sans-serif; } /* * * * * * * * * * * * * typo.scss 1. Basic Font Properties 2. Basic Text Styles 3. Links 4. Text Selection 5. OpenType Typography 6. Text Rendering 7. Silbentrennung 8. Blockquote 9. Sub- & Superscripts * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * 1. Basic Font Properties * * * * * * * * * * * * * * * * */ /* font-size */ @media (min-width: 768px) { body { font-size: 1.25em; } } /* http://webdesign.tutsplus.com/articles/a-web-designers-typographic-boilerplate--webdesign-15234 */ /* 2*16 = 32 */ h1 { font-size: 1.5em; } @media (min-width: 992px) { h1 { font-size: 2em; } } /* 1.5*16 = 24 */ h2 { font-size: 1.75em; } /* 1.17*16 = 18.72 */ h3 { font-size: 1.5em; } /* 1*16 = 16 */ h4 { font-size: 1.17em; } /* 0.83*16 = 13.28 */ h5 { font-size: 1em; } /* 0.75*16 = 12 */ h6 { font-size: 0.83em; } p { margin: 0 0 1em; } h1 { font-size: 2.5em; } h1 { font-size: 2em; } h1 { font-size: 1.5em; } @media (min-width: 992px) { h1 { font-size: 2em; } } h2 { font-size: 2em; } h3 { font-size: 1.75em; } h4 { font-size: 1.5em; } h5 { font-size: 1.17em; } h6 { font-size: 1em; } .team__item-title--dachzeile, .news__title--dachzeile, .wsdkjf__title--dachzeile, .section__title--dachzeile { font-size: 0.65em; } #team .col-xs-12 h3 { margin-bottom: .5em; } #team .col-xs-12+.section__text-wrapper { margin-top: 2em; } .padded-multiline-hl-wrapper>h4.team__item-title { line-height: 131%; } .section__main ul:not(.team__list):not(.slick-dots) { columns: 1; -webkit-columns: 1; -moz-columns: 1; } @media (min-width: 992px) { .section__main ul:not(.team__list):not(.slick-dots) { columns: 2; -webkit-columns: 2; -moz-columns: 2; } } .section__main ul:not(.team__list):not(.slick-dots) li { padding-right: 7%; margin-bottom: 0.5em; transform: translateX(30px); position: relative; } .section__main ul:not(.team__list):not(.slick-dots) li:before { content: ""; position: absolute; left: -1.5em; top: 6px; height: 1em; width: 4px; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 12px; border-color: transparent transparent transparent var(--color-section); } #jobs .section__main ul { columns: 1; -webkit-columns: 1; -moz-columns: 1; } /* * * * * * * * * * * * * * * * * 2. Basic Text Styles * * * * * * * * * * * * * * * * */ strong { font-weight: bold; } em { font-style: italic; } small { font-size: 80%; } /* * * * * * * * * * * * * * * * * 3. Links * * * * * * * * * * * * * * * * */ a { text-decoration: none; } a:visited { text-decoration: underline; } a:focus, a:hover { text-decoration: underline; } /* * * * * * * * * * * * * * * * * 4. Text Selection * * * * * * * * * * * * * * * * */ ::selection { color: #ffffff; background: #7c0e2b; /* Safari */ } ::-moz-selection { color: #ffffff; background: #7c0e2b; /* Firefox */ } blockquote { border-left: 1px solid #ddd; margin: 0 0 20px; padding: 9px 20px 0 19px; float: left; } blockquote p { padding: 0 25px; /* FA Icons als " " */ } blockquote p:before, blockquote p:after { position: absolute; top: 0; font-family: "FontAwesome"; font-size: 0.75em; } blockquote p:before { content: "\f10d"; left: 0; } blockquote p:after { content: "\f10e"; right: 0; } blockquote cite { color: #555; display: block; font-size: 0.7em; } blockquote cite:before { content: "— "; } blockquote cite a { color: #555; } blockquote cite a:visited { color: red; } /* * * * * * * * * * * * * * * * * 9. Sub- & Superscripts * * * * * * * * * * * * * * * * */ sup, sub { vertical-align: baseline; position: relative; top: -0.4em; } /* Turn on proper subcript numerals */ sub { top: 0.4em; font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1; -o-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1; -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1; -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1; } /* Turn on proper superscript numerals */ sup { font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1; -o-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1; -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1; -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1; } /* a { text-decoration: none; color: $brandcolor; &:visited { color: $brandcolor; text-decoration: underline; } &:focus, &:hover { text-decoration: underline; } &:active { color: $brandcolor; } } */ article a, .section__main a { color: currentColor; text-decoration: underline; } a.section__ext-link { text-decoration: none; margin-left: 0.5em; padding-bottom: 1px; border-bottom: 1px solid var(--color-section); color: var(--color-section); display: inline-block; } @media (min-width: 992px) { a.section__ext-link { margin-left: 0; } } a.section__ext-link:hover { text-decoration: none; } @media (min-width: 992px) { a.section__ext-link { margin-left: 0; transform: translateX(25px); } } a.section__ext-link:before { content: ""; position: absolute; left: -0.75em; top: 6px; height: 1em; width: 4px; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 12px; border-color: transparent transparent transparent var(--color-section); } @media (min-width: 768px) { a.section__ext-link:before { left: -1.25em; } } /* _opacity.scss This mixin ensures cross browser opacity all the way down to Internet Explorer 5. */ /* Usage .faded-text { @include opacity(0.8); } */ /* .modal { z-index: z-index(modal); } */ /* The background scrolls along with the element. This is default */ /* The background is fixed with regard to the viewport */ /* The background scrolls along with the element's contents */ /* Sets this property to its default value. */ /* Inherits this property from its parent element */ /* usage .class { @extend %bgimg; } */ /* _before-after.scss */ /* extend before */ /* extend after */ /* Usage: .test { &:after { @extend %after; } &:before { @extend %before; } } */ #hero .section__header { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal--header .modal--close, .logos-item { display: flex; align-items: center; justify-content: center; } /* Usage .test { border: 10px solid green; position: absolute; top:0; left:0; right:0; bottom:0; @extend %centerhv-parent; .child { height: 5em; width: 100px; border: 1px solid red; } } Result: .test { display: flex; align-items: center; justify-content: center; } .test { border: 10px solid green; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .test .child { height: 5em; width: 100px; border: 1px solid red; } * * * * * * * * * * or * * * * * * * * * * .test { border: 10px solid green; position: absolute; top:0; left:0; right:0; bottom:0; .child { height: 5em; width: 100px; border: 1px solid red; @extend %centerhv-child; } } result: .test .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .test { border: 10px solid green; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .test .child { height: 5em; width: 100px; border: 1px solid red; } */ /* _clearfix.scss */ /* Usage .container-with-floated-children { @extend %clearfix; } */ /* extend - undo textlist-style */ /* Usage: ul.main-nav { @extend %undo-textlist-style; border: 1px solid red; } ul.secondary-nav { @extend %undo-textlist-style; border: 1px solid green; } */ /* _style.scss /* * * * * * * * * * * * * * * * * * * * */ /* überschreibt bootstrap-wert */ .container { width: 100%; max-width: 1200px; } .main-menu, main, footer, aside { display: block; width: 100%; max-width: 100%; margin: 0 auto; overflow: hidden; } header { display: block; width: 100%; margin: 0 auto; z-index: 100; } /* fixed header */ header { position: fixed; top: 0; left: 0; right: 0; width: 100%; width: 100vw; margin: 0; height: 60px; } header:not(.section__header):not(.suche__header) { height: 60px; } main { padding-top: 60px; padding-top: 0; } .site-wrapper { width: 100%; margin: 0 auto; max-width: 100%; } section:first-of-type .section__title--dachzeile { display: none; } /* .section__main:not(#team .section__main), .section__footer { padding: $section--abstand; padding-bottom: $section--abstand * 2; } */ .section__footer { padding-top: 0; } .section__main { padding: 0.5em; padding-bottom: 2em; } @media (min-width: 768px) { .section__main { padding: 2em; padding-bottom: 2em; } } #veranstaltungen-projekte .section__main, #team .section__main { padding: 0; padding-top: 2em; } /* * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * */ .transition--ease-in-out, aside.newsletter, aside.suche, .suche form, .main-menu--desktop, .main-menu--mobile, .team__item .padded-multiline-hl-wrapper, .team__item-moreinfo, .team__item-cover, .slick-elements__hover, .slick-prev, .slick-next, .slick-dots li { -webkit-transition: all 500ms cubic-bezier(0.025, 0.355, 0.275, 0.995); -moz-transition: all 500ms cubic-bezier(0.025, 0.355, 0.275, 0.995); -o-transition: all 500ms cubic-bezier(0.025, 0.355, 0.275, 0.995); transition: all 500ms cubic-bezier(0.025, 0.355, 0.275, 0.995); /* -webkit-transition-timing-function: cubic-bezier(0.025, 0.355, 0.275, 0.995); -moz-transition-timing-function: cubic-bezier(0.025, 0.355, 0.275, 0.995); -o-transition-timing-function: cubic-bezier(0.025, 0.x355, 0.275, 0.995); transition-timing-function: cubic-bezier(0.025, 0.355, 0.275, 0.995); */ } body>header { display: flex; justify-content: space-between; } .header-area { display: flex; justify-content: space-between; padding: 5px 15px 8px 15px; z-index: 2; background: #fff; } @media (min-width: 720px) { .header-area { padding-bottom: 0; } } .logo-wrapper { display: flex; flex: 1; align-items: center; } .logo-wrapper .logo { width: 5em; } .logo-wrapper .logo img { transform: translateX(-9px); } @media (min-width: 768px) { .logo-wrapper .logo img { transform: translateX(-15px); } } .logo-wrapper .page-title { font-family: 'myFontRoman', myFontRoman, sans-serif; color: #656565; transform: translateY(1px); font-size: 1.5em; } @media (min-width: 992px) { .logo-wrapper .page-title { white-space: nowrap; margin-right: 10px; padding-top: 3px; } } .icons-wrapper { display: flex; } aside.newsletter, aside.suche { position: absolute; background: #fff; } aside.newsletter.invis, aside.suche.invis { transform: translateY(-100%); } aside.newsletter, aside.suche { transform: translateY(60px); } .suche { position: relative; overflow: hidden; width: auto; min-width: 20ch; } .suche input[type="text"] { width: 100%; } @media (min-width: 992px) { .suche { width: 20vw; } } @media (min-width: 540px) { .suche form.invis { transform: translateX(101%); } } @media (max-width: 540px) { .suche, .search-menu__link { display: none; } } .mobile-menu__links { flex: 1 1 100%; } .mobile-menu__links a { width: 25%; display: inline; position: relative; float: left; } .social-menu__list { display: flex; } .social-menu--mobil { width: 48%; } .social-menu--desktop .social-menu__list-item { display: flex; align-items: center; } .social-menu__list-item img { transform: scale(0.75); } .hamburger { position: relative; display: block; /* margin-top: 14px; */ margin-left: 10px; width: 26px; height: 18px; cursor: pointer; } .hamburger>[class*="hamburger__bar"] { position: absolute; width: 100%; height: 20%; left: 0; background-color: #656565; } .hamburger .hamburger__bar--top { top: 0; } .hamburger .hamburger__bar--mid-1 { top: 40%; } .hamburger .hamburger__bar--mid-2 { top: 40%; } .hamburger .hamburger__bar--bottom { top: 80%; } .hamburger.active>.hamburger__bar--top { opacity: 0; transition: opacity .3s ease-in-out; } .hamburger.active>.hamburger__bar--mid-1 { transform: rotate(45deg); transition: transform .3s ease-in-out; } .hamburger.active>.hamburger__bar--mid-2 { transform: rotate(-45deg); transition: transform .3s ease-in-out; } .hamburger.active>.hamburger__bar--bottom { opacity: 0; transition: opacity .3s ease-in-out; } .hamburger.hamburger--mobile { margin-top: 9px; } .main-menu a, .footer-menu a { color: #656565; } .footer-menu { position: relative; } .footer-triangle { position: absolute; top: 0; left: 50%; width: 30px; margin-left: -15px; } .footer-menu .menu-wrap { padding-bottom: 2em; margin-bottom: 2em; border-bottom: 1px solid #656565; padding-top: 2em; border-top: 1px solid #656565; } .main-menu .menu-wrap, .footer-menu .menu-wrap { display: flex; width: 100%; } .main-menu .menu-wrap ul[class$="menu__list"], .footer-menu .menu-wrap ul[class$="menu__list"] { flex: 1 1 100%; } .main-menu .menu-wrap ul[class$="menu__list"]>li, .footer-menu .menu-wrap ul[class$="menu__list"]>li { padding-right: 1em; display: block; } .main-menu .menu-wrap ul[class$="menu__list"]>li:first-of-type, .footer-menu .menu-wrap ul[class$="menu__list"]>li:first-of-type { font-weight: bold; } .main-menu .menu-wrap a[class$="-menu__link"], .footer-menu .menu-wrap a[class$="-menu__link"] { text-decoration: none; } .main-menu .menu-wrap a[class$="-menu__link"]:hover, .footer-menu .menu-wrap a[class$="-menu__link"]:hover { text-decoration: underline; color: #bc640b; } .main-menu--desktop { position: absolute; background: #fff; } .main-menu--desktop .menu-wrap { padding: 1.5em 0; } .main-menu--desktop.invis { transform: translateY(-300px); } .main-menu--desktop { transform: translateY(60px); } .main-menu--mobile { position: absolute; background: #fff; height: 100vh; width: 100vw; overflow-y: scroll; -webkit-overflow-scrolling: touch; padding-bottom: 2em; } .main-menu--mobile .menu-wrap { padding: 1.5em 0; display: block; } .main-menu--mobile .menu__list { margin-bottom: 1em; } .main-menu--mobile ul[class$="menu__list"]>li:first-of-type { margin-bottom: 0; } .main-menu--mobile.invis { transform: translateY(-100%); } .main-menu--mobile { transform: translateY(44px); } .highlight a { color: #bc640b; } .header--desktop { background: #fff; } .headroom--pinned { position: fixed; z-index: 1111; } .headroom--unpinned { z-index: 1111; } .headroom { will-change: transform; -webkit-transition: -webkit-transform 1.4s cubic-bezier(0.42, 0, 0.58, 1); transition: -webkit-transform 1.4s cubic-bezier(0.42, 0, 0.58, 1); transition: transform 1.4s cubic-bezier(0.42, 0, 0.58, 1); transition: transform 1.4s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.4s cubic-bezier(0.42, 0, 0.58, 1); } .headroom--pinned { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 1.4s cubic-bezier(0.42, 0, 0.58, 1); transition: -webkit-transform 1.4s cubic-bezier(0.42, 0, 0.58, 1); transition: transform 1.4s cubic-bezier(0.42, 0, 0.58, 1); transition: transform 1.4s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.4s cubic-bezier(0.42, 0, 0.58, 1); } .headroom--unpinned { -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 1.4s cubic-bezier(0.42, 0, 0.58, 1); transition: -webkit-transform 1.4s cubic-bezier(0.42, 0, 0.58, 1); transition: transform 1.4s cubic-bezier(0.42, 0, 0.58, 1); transition: transform 1.4s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.4s cubic-bezier(0.42, 0, 0.58, 1); } input { outline: none; outline-width: 0; width: 100%; padding: 0.75em; margin-bottom: 0.5em; border: none; border-top: 1px solid #d0e7f6; border-left: 1px solid #d0e7f6; border-bottom: 1px solid #d0e7f6; background-color: #d0e7f6; font-family: 'myFontRoman', myFontRoman, sans-serif; font-size: 1em; font-size: 0.75em; float: left; /* &::placeholder { opacity: 1; color: #fff; } &::-ms-input-placeholder { opacity: 1; color: #fff; } &:-ms-input-placeholder { opacity: 1; color: #fff; } */ } @media (min-width: 992px) { input { width: 75%; } } button, .search_button { outline: none; outline-width: 0; width: 100%; border: 0; padding: 0.75em; font-size: 0.75em; font-family: 'myFontRoman', myFontRoman, sans-serif; margin-bottom: 0.5em; } @media (min-width: 992px) { button, .search_button { width: 25%; } } button[type="submit"], button.submit, .search_button[type="submit"], .search_button.submit { color: #fff; background-color: #2172a5; border-right: 1px solid #2172a5; border-top: 1px solid #2172a5; border-bottom: 1px solid #2172a5; border-left: 1px solid #2172a5; } button[type="submit"] svg, button.submit svg, .search_button[type="submit"] svg, .search_button.submit svg { width: 1.25em; margin: 0 1em; fill: #fff; } button[type="submit"]:hover, button.submit:hover, .search_button[type="submit"]:hover, .search_button.submit:hover { background-color: #fff; color: #2172a5; border-right: 1px solid #2172a5; border-top: 1px solid #2172a5; border-bottom: 1px solid #2172a5; border-left: 1px solid #2172a5; } button[type="submit"]:hover svg, button.submit:hover svg, .search_button[type="submit"]:hover svg, .search_button.submit:hover svg { fill: #2172a5; } .modal__newsletter--bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); opacity: 0.75; z-index: 1; } .modal__newsletter { position: fixed; top: 12%; width: 96%; left: 2%; right: 2%; z-index: 2; } @media (min-width: 768px) { .modal__newsletter { position: fixed; z-index: 1001; width: 1200px; top: 71%; height: auto; left: 50%; right: initial; margin-top: -40vh; /* Negative half of height. */ margin-left: -40vw; /* Negative half of width. */ margin-left: -600px; /* Negative half of width. */ } } .modal__newsletter--inner { position: relative; max-width: 960px; margin: 0 auto; background: #2172a5; padding: 2em 1em 1em 1em; color: #fff; } .modal__newsletter--close { position: absolute; top: 0.5em; right: 0.5em; width: 20px; height: 20px; cursor: pointer; } .modal__newsletter--close--bar { position: absolute; top: 49%; width: 100%; height: 1px; background-color: #fff; } .modal__newsletter--close--bar:nth-of-type(odd) { transform: rotate(45deg); } .modal__newsletter--close--bar:nth-of-type(even) { transform: rotate(-45deg); } /* .msg { padding: 1em; margin-bottom: 1em; &__success { background-color: $kjf-blue1; color: #fff; } &__error { background-color: $kjf-orange; color: #fff; } } */ input.search_field { width: 66.6666%; background-color: initial; border: none; border-bottom: 1px solid #656565; padding-left: 0; padding-bottom: 0.25em; margin-bottom: 0; font-size: 1em; } @media (min-width: 992px) { input.search_field { width: 100%; } } .backtop__wrapper { position: fixed; width: 40px; height: 40px; bottom: 15px; right: 15px; z-index: 1000; background: #bc640b; cursor: pointer; display: flex; align-items: center; justify-content: center; } @media screen and (min-width: 1025px) { .backtop__wrapper { width: 60px; height: 60px; bottom: 30px; right: 30px; } } .backtop__wrapper.invisible { display: none; } .backtop__wrapper.visible { display: flex; } .backtop__wrapper svg { transform: rotate(-90deg); } @media screen and (min-width: 1025px) { .backtop__wrapper svg { transform: rotate(-90deg) scale(1.5); } } .backtop__wrapper * { fill: #fff; } .backtop__wrapper p { font-size: 0.75em; display: none; } #hero { position: relative; background-image: url() no-repeat center center; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-bottom: 1em; } @media (min-width: 768px) { #hero { height: 75vh; } } #hero .section__header { left: 60%; } .hero-inner-wrapper { padding-top: 5%; padding-left: 4.5%; } @media (min-width: 768px) { .hero-inner-wrapper { width: 1200px; width: 80%; margin: 0 auto; padding-top: 27.5vh; padding-left: initial; } } @media (min-width: 992px) { .hero-inner-wrapper { width: 1200px; margin: 0 auto; padding-top: 27.5vh; padding-left: initial; } } .hero-inner-wrapper>.padded-multiline-hl-wrapper { max-width: 90%; } .hero-inner-wrapper>.padded-multiline-hl-wrapper p { max-width: 80ch; } .hero-inner-wrapper .section__title { margin-bottom: 0.5em; } .hero-arrow__wrapper { position: absolute; bottom: 1em; left: 45%; width: 10%; height: 5em; } .hero-arrow__wrapper * { position: relative; margin: 0 auto; display: block; opacity: 0.75; cursor: pointer; } .hero-arrow__wrapper *:hover { opacity: 1; } .hero-arrow__wrapper polygon { fill: #fff; } .bgimg__pos--Oben { background-position: top center; } .bgimg__pos--Mitte { background-position: center center; } .bgimg__pos--Unten { background-position: bottom center; } .news__list, .wsdkjf__list { display: flex; flex-wrap: wrap; } .news__itemlink, .wsdkjf__itemlink { text-decoration: none; vertical-align: top; width: 100%; object-fit: cover; } .news__itemlink:hover, .wsdkjf__itemlink:hover { text-decoration: none; } @media (min-width: 768px) { .news__itemlink, .wsdkjf__itemlink { width: 50%; height: 17em; aspect-ratio: auto; } } @media (min-width: 992px) { .news__itemlink, .wsdkjf__itemlink { width: 25%; height: 17em; aspect-ratio: auto; } } .news__itemlink, .wsdkjf__itemlink { background-repeat: no-repeat; background-position: top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-decoration: none; } .news__itemlink { display: flex; align-items: flex-end; aspect-ratio: 16 / 9; } .news__itemlink .news__item--listview { margin-top: 25%; margin-left: 1em; margin-right: 1em; } @media (min-width: 768px) { .news__itemlink .news__item--listview { margin-left: 5%; margin-right: 5%; } } .news-footer a { text-decoration: none; margin-right: 0.75em; } .hidden { display: none; } .news__olderlink, .news__archiv { position: relative; background-color: #bc640b; display: flex; align-items: center; justify-content: center; } .news__archiv { display: none; } .news__olderlink .news__item--listview, .news__archiv .news__item--listview { margin: initial; } .news__olderlink span.news__olderlink--link, .news__archiv span.news__archiv--link { position: relative; color: #fff; text-decoration: underline; } .seminar--link .news__olderlink--link { margin-left: -26%; } .seminar-list { display: flex; flex-wrap: wrap; } .news__olderlink span.news__olderlink--link:before, .news__archiv span.news__archiv--link:before { content: ""; position: absolute; left: -1.25em; top: 4px; height: 1em; width: 4px; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 12px; border-color: transparent transparent transparent #ffffff; } .no-foto { background: #656565; } .no-foto:nth-of-type(1) { background-image: url(../img/blur/blur1.png); } .no-foto:nth-of-type(2) { background-image: url(../img/blur/blur2.png); } .no-foto:nth-of-type(3) { background-image: url(../img/blur/blur3.png); } .no-foto:nth-of-type(4) { background-image: url(../img/blur/blur4.png); } .no-foto:nth-of-type(5) { background-image: url(../img/blur/blur5.png); } .no-foto:nth-of-type(6) { background-image: url(../img/blur/blur1.png); } .no-foto:nth-of-type(7) { background-image: url(../img/blur/blur2.png); } .no-foto:nth-of-type(8) { background-image: url(../img/blur/blur3.png); } .no-foto:nth-of-type(9) { background-image: url(../img/blur/blur4.png); } .no-foto:nth-of-type(10) { background-image: url(../img/blur/blur5.png); } .no-foto:nth-of-type(11) { background-image: url(../img/blur/blur1.png); } .no-foto:nth-of-type(12) { background-image: url(../img/blur/blur2.png); } .no-foto:nth-of-type(13) { background-image: url(../img/blur/blur3.png); } .no-foto:nth-of-type(14) { background-image: url(../img/blur/blur4.png); } .no-foto:nth-of-type(15) { background-image: url(../img/blur/blur5.png); } .no-foto:nth-of-type(16) { background-image: url(../img/blur/blur1.png); } .no-foto:nth-of-type(17) { background-image: url(../img/blur/blur2.png); } .no-foto:nth-of-type(18) { background-image: url(../img/blur/blur3.png); } .no-foto:nth-of-type(19) { background-image: url(../img/blur/blur4.png); } .no-foto:nth-of-type(20) { background-image: url(../img/blur/blur5.png); } .no-foto:nth-of-type(21) { background-image: url(../img/blur/blur1.png); } .no-foto:nth-of-type(22) { background-image: url(../img/blur/blur2.png); } .no-foto:nth-of-type(23) { background-image: url(../img/blur/blur3.png); } .no-foto:nth-of-type(24) { background-image: url(../img/blur/blur4.png); } .no-foto:nth-of-type(25) { background-image: url(../img/blur/blur5.png); } .no-foto:nth-of-type(26) { background-image: url(../img/blur/blur1.png); } .no-foto:nth-of-type(27) { background-image: url(../img/blur/blur2.png); } .no-foto:nth-of-type(28) { background-image: url(../img/blur/blur3.png); } .no-foto:nth-of-type(29) { background-image: url(../img/blur/blur4.png); } .no-foto:nth-of-type(30) { background-image: url(../img/blur/blur5.png); } .no-foto:nth-of-type(31) { background-image: url(../img/blur/blur1.png); } .no-foto:nth-of-type(32) { background-image: url(../img/blur/blur2.png); } .no-foto:nth-of-type(33) { background-image: url(../img/blur/blur3.png); } .no-foto:nth-of-type(34) { background-image: url(../img/blur/blur4.png); } .no-foto:nth-of-type(35) { background-image: url(../img/blur/blur5.png); } .no-foto:nth-of-type(36) { background-image: url(../img/blur/blur1.png); } .no-foto:nth-of-type(37) { background-image: url(../img/blur/blur2.png); } .no-foto:nth-of-type(38) { background-image: url(../img/blur/blur3.png); } .no-foto:nth-of-type(39) { background-image: url(../img/blur/blur4.png); } .no-foto:nth-of-type(40) { background-image: url(../img/blur/blur5.png); } aside.modal { position: absolute; top: 44px; left: 0; right: 0; z-index: 3; background: #fff; } @media (min-width: 768px) { aside.modal { position: absolute; width: 1200px; height: auto; top: 60px; left: 50%; transform: translateX(-50%); /* margin-top: -40vh; */ /* Negative half of height. */ /* margin-left: -40vw; */ /* Negative half of width. */ /* margin-left: -600px; */ /* Negative half of width. */ background: #fff; } } aside.modal.modal--invis { display: none; } .modal--bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.475); z-index: 2; } .modal--bg.invis { display: none; } body.modal-visible * { filter: grayscale(100%); } .modal--header { height: 35vh; padding-top: 15vh; background-repeat: no-repeat; background-position: top center; background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-attachment: scroll; position: relative; } .modal--header .modal--close { background-color: #bc640b; color: #ffffff; position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; cursor: pointer; } .modal--header .modal--close span { margin-top: 5px; } .modal--header .padded-multiline-hl-wrapper { width: 50%; margin: 0 auto; position: absolute; bottom: 1em; left: 4.5%; } @media (min-width: 768px) { .modal--header .padded-multiline-hl-wrapper { left: 25%; left: 18.5%; } } .modal--header .padded-multiline-hl-wrapper span { background-color: #bc640b; color: #ffffff; } .news-body, .news-footer { width: 100%; } @media (min-width: 768px) { .news-body, .news-footer { width: 62.5%; margin: 0 auto; } } .news-haupttext { padding: 1em; } @media (min-width: 768px) { .news-haupttext { padding: 2em 0 1.5em 0; } } .news-einleitung, .news-footer, .wsdkjf-einleitung, .wsdkjf-footer { background-color: #bc640b; position: relative; color: #ffffff; padding: 1em; } @media (min-width: 768px) { .news-einleitung, .news-footer, .news-einleitung, .news-footer { padding: 2em 0 1.5em 0; } } .news-einleitung:before, .news-footer:before { background-color: #bc640b; content: ""; position: absolute; top: 0; left: -500px; bottom: 0; width: 100vw; z-index: -1; } .news-einleitung:after, .news-footer:after { background-color: #bc640b; content: ""; position: absolute; top: 0; right: -500px; bottom: 0; width: 100vw; z-index: -1; } .news-einleitung p.released-on { font-size: 0.9em; } .no-scroll { margin: 0; /* height: 100%; */ overflow: hidden; } .logos-list { display: flex; flex-wrap: wrap; list-style-type: none; padding: 2em 0; } .logos-item { width: 50%; padding: 0.5em; margin-bottom: 1em; } @media (min-width: 768px) { .logos-item { padding: 1em; margin-bottom: 0em; } } .logos-item .logos-item__img { filter: grayscale(100%); -webkit-filter: grayscale(100%); } @media (min-width: 768px) { .logos-item .logos-item__img { transform: scale(0.75); } } .logos-item:hover .logos-item__img { filter: grayscale(0%); -webkit-filter: grayscale(0%); } @media screen and (min-width: 776px) { .logos-item { width: 25%; } } @media screen and (min-width: 1000px) { .logos-item { width: 20%; } } .team__list { display: flex; flex-wrap: wrap; margin-top: 2em; } .team__item { font-size: 0.8em; } .team__item { position: relative; width: 100%; overflow: hidden; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: scroll; } .wsdkjf__list-items { position: relative; } @media (min-width: 835px) { .team__item, .wsdkjf__list-items { width: 50%; } } @media (min-width: 992px) { .team__item, .wsdkjf__list-items { width: 33.3333%; } } @media (min-width: 1500px) { .team__item, .wsdkjf__list-items { width: 25%; } } .team__item .team__link { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; cursor: pointer; } .team__item .padded-multiline-hl-wrapper { bottom: 0; margin-left: 7vw; z-index: 2; position: absolute; } .team__item .padded-multiline-hl-wrapper.info-visible { bottom: 65%; } .team__item .padded-multiline-hl-wrapper h4 { margin-bottom: 0; } @media (min-width: 768px) { .team__item .padded-multiline-hl-wrapper { margin-left: 10%; } } /* .team__item-moreinfo { position: absolute; top: 2em; left: 0; right: 0; height: 100%; margin-left: 10%; padding-top: 7.5em; padding-right: 8%; z-index: 2; } */ @media (min-width: 768px) { .team__item-moreinfo { padding-left: 9px; } } .team__item-moreinfo.invis { opacity: 0; top: 100%; } .team__item-cover { position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; background: #bc640b; } .team__item-cover.invis { opacity: 0; top: 100%; } .team__link { text-decoration: none !important; } .team__link:hover { text-decoration: none !important; } .team__item--video, .team__item--img { vertical-align: top; width: 100%; object-fit: cover; } .landscape { aspect-ratio: 700/392; } .quadratic { aspect-ratio: 1/1; } /* .team__item { display: flex; justify-content: center; align-items: center; overflow: hidden } .team__item--video { flex-shrink: 0; min-width: 100%; min-height: 100% } */ .team__list--without-videos .team__item { position: relative; width: 100%; min-height: 45vh; } @media (min-width: 768px) { .team__list--without-videos .team__item { height: 20em; } } @media (min-width: 992px) { .team__list--without-videos .team__item { height: 20em; } } @media (min-width: 1200px) { .team__list--without-videos .team__item { height: 20em; } } .template-2 .section__header { position: relative; height: 75vh; width: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: scroll; z-index: 1; } .template-2 .section__header>.container { height: 100%; } .template-2 .section__header>.container>.row { height: 100%; } .template-2 .section__header>.container>.row>.col-xs-12 { height: 100%; } .template-2 .section__header .section__header-img { display: block; } .template-2 .section__header .section__title { position: absolute; bottom: 0; } .template-2 .section__main { padding: 0.5em; padding-bottom: 2em; } @media (min-width: 768px) { .template-2 .section__main { padding: 2em; padding-bottom: 2em; } } .template-2 .section__footer { padding-bottom: 2em; } .template-3 .section__header { position: relative; height: 50vh; width: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: scroll; } .template-3 .section__header>.container { height: 100%; } .template-3 .section__header>.container>.row { height: 100%; } .template-3 .section__header>.container>.row>.col-xs-12 { height: 100%; } .template-3 .section__header .section__header-img { display: block; } .template-3 .section__header .section__title { position: absolute; bottom: 0; width: 100%; } .template-3 .section__header .section__title--headline { width: 100%; } .fachbeitraege-wrapper { display: flex; flex-wrap: wrap; } .fachbeitraege_item { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .fachbeitraege_item h4 { margin-bottom: 1em; } .fachbeitraege_item img { margin-bottom: 2em; margin-top: 2em; } @media screen and (min-width: 776px) { .fachbeitraege_item { width: 48%; margin-bottom: 2em; } /* .fachbeitraege_item:nth-of-type(odd) { margin-right: 2%; } .fachbeitraege_item:nth-of-type(even) { margin-left: 2%; } */ .fachbeitraege_item img { margin-bottom: initial; margin-top: initial; } } .content--publi { padding: 2em 15px; margin: 2em 0; } .padded-multiline-hl-wrapper span { background-color: var(--color-title-bg); color: var(--color-title); } .padded-multiline-hl-wrapper span.no-bg { background-color: #ffffff; color: #656565; } .template-1 .section__header, .template-1 .section__main, .template-1 .section__footer { background-color: var(--color-section-bg); color: var(--color-section); } .template-2 .section__header, .template-2 .section__main, .template-2 .section__footer { background-color: var(--color-section-bg); color: var(--color-section); } .template-publikationen .section__header, .template-publikationen .section__main, .template-publikationen .section__footer, .template-2 .section__header, .template-2 .section__main, .template-2 .section__footer, .template-kontakt .section__header, .template-kontakt .section__main, .template-kontakt .section__footer, .template-netzwerk .section__header, .template-netzwerk .section__main, .template-netzwerk .section__footer, .template-jahresberichte .section__header, .template-jahresberichte .section__main, .template-jahresberichte .section__footer, .template-team .section__header, .template-team .section__main, .template-team .section__footer, .video-player .section__header, .video-player .section__main, .video-player .section__footer { background-color: var(--color-section-bg); color: var(--color-section); } .template-publikationen .section__main a, .template-2 .section__main a, .template-kontakt .section__main a, .template-netzwerk .section__main a, .template-jahresberichte .section__main a, .template-team .section__main a, .video-player .section__main a { color: var(--color-section); text-decoration: underline; } /* .padded-multiline-hl-wrapper { width: 90%; } */ .padded-multiline-hl-wrapper>h1, .padded-multiline-hl-wrapper>h2, .padded-multiline-hl-wrapper>h3, .padded-multiline-hl-wrapper>h4, .padded-multiline-hl-wrapper>h5, .padded-multiline-hl-wrapper>h6, .padded-multiline-hl-wrapper>p { line-height: 1.55; padding: 2px 0; margin-bottom: 0.5em; } @media (min-width: 768px) { .padded-multiline-hl-wrapper>h1, .padded-multiline-hl-wrapper>h2, .padded-multiline-hl-wrapper>h3, .padded-multiline-hl-wrapper>h4, .padded-multiline-hl-wrapper>h5, .padded-multiline-hl-wrapper>h6, .padded-multiline-hl-wrapper>p { margin-bottom: 2em; } .padded-multiline-hl-wrapper>h4 { margin-bottom: 1.2em; ; } } .padded-multiline-hl-wrapper>h1 span, .padded-multiline-hl-wrapper>h2 span, .padded-multiline-hl-wrapper>h3 span, .padded-multiline-hl-wrapper>h4 span, .padded-multiline-hl-wrapper>h5 span, .padded-multiline-hl-wrapper>h6 span, .padded-multiline-hl-wrapper>p span { display: inline; padding: 0.4em; padding: 11px; /* Needs prefixing */ box-decoration-break: clone; -webkit-box-decoration-break: clone; } .padded-multiline-hl-wrapper>h1, .padded-multiline-hl-wrapper>h2, .padded-multiline-hl-wrapper>h3, .padded-multiline-hl-wrapper>h4, .padded-multiline-hl-wrapper>h5, .padded-multiline-hl-wrapper>h6 { line-height: 1.45; } #hero .padded-multiline-hl-wrapper>p { line-height: 1.65; } .section__title--dachzeile { font-family: 'myFontRoman', myFontRoman, sans-serif; } .template-2 .padded-multiline-hl-wrapper { padding-left: 2%; } @media (min-width: 992px) { .template-2 .padded-multiline-hl-wrapper { padding-left: 0; } } .section__text-wrapper.columns-1>p, .section__text-wrapper.columns-2>p, .section__text-wrapper.columns-3>p, .section__text-wrapper.columns-4>p { column-count: 1; } @media (min-width: 768px) { .section__text-wrapper.columns-1>p { column-count: 1; } .section__text-wrapper.columns-2>p { column-count: 1; } .section__text-wrapper.columns-3>p { column-count: 1; } .section__text-wrapper.columns-4>p { column-count: 1; } } @media (min-width: 992px) { .section__text-wrapper.columns-1>p { column-count: 1; } .section__text-wrapper.columns-2>p { column-count: 2; } .section__text-wrapper.columns-3>p { column-count: 3; } .section__text-wrapper.columns-4>p { column-count: 4; } } @media (min-width: 1920px) { .section__text-wrapper.columns-1>p { column-count: 1; } .section__text-wrapper.columns-2>p { column-count: 2; } .section__text-wrapper.columns-3>p { column-count: 3; } .section__text-wrapper.columns-4>p { column-count: 4; } } .hero-slider { width: 100%; overflow: hidden; display: block; } @media (min-width: 768px) { .hero-slider { display: flex; } } .hero-slider__item { color: #ffffff; background-color: var(--color-slider-bg); width: 100%; padding: 1em; } @media (min-width: 992px) { .hero-slider__item { width: 33.33333%; padding: 2em; } } .hero-slider__item a { padding-bottom: 1px; border-bottom: 1px solid var(--color-section); color: var(--color-section); display: inline-block; transform: translateX(30px); } .hero-slider__item a:before { content: ""; position: absolute; left: -1.25em; top: 6px; height: 1em; width: 4px; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 12px; border-color: transparent transparent transparent #ffffff; } .hero-slider__item h3 { font-size: 1.25em; } @media (min-width: 992px) { .hero-slider__item h3 { font-size: 1.75em; } } .section__footer-img-list { display: flex; width: 100%; } .section__footer-img-list .section__footer-img-item { flex: 1 1 100%; } .section__footer-img-item:nth-of-type(2), .section__footer-img-item:nth-of-type(3), .section__footer-img-item:nth-of-type(4) { display: none; } @media (min-width: 768px) { .section__footer-img-item:nth-of-type(2), .section__footer-img-item:nth-of-type(3), .section__footer-img-item:nth-of-type(4) { display: block; } } .googlemaps--wrapper { position: relative; height: 0; overflow: hidden; width: 100%; padding-bottom: 75vh; margin-top: 0; } @media (min-width: 768px) { .googlemaps--wrapper { padding-bottom: 67.5%; margin-top: 2em; } } @media (min-width: 992px) { .googlemaps--wrapper { padding-bottom: 27.5%; margin-top: 2em; } } .googlemaps--wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Suche */ .suche__wrapper a:link { color: currentColor; } .suche__wrapper a:visited { color: currentColor; } .suche__wrapper a:hover { color: #bc640b; text-decoration: underline; } .suche__wrapper a:active { color: #bc640b; } .suche__header { position: static; display: flex; } .suche__close { position: relative; margin-left: auto; width: 25px; height: 25px; } .suche__close:hover .suche__close-item { background: currentColor; } .suche__close .suche__close-item { position: absolute; width: 100%; height: 3.5px; background: #656565; top: 50%; transform-origin: top; } .suche__close .suche__close-item:first-child { transform: rotate(45deg) translateY(-50%); } .suche__close .suche__close-item:last-child { transform: rotate(-45deg) translateY(-50%); } .pagination * { margin: 0 0.25em; } footer { padding-top: 2em; } .footer-top-border { border-top: 1px solid #656565; max-width: 100%; margin: 0 auto; opacity: 0.65; } .footer-page-link { margin-top: 2em; margin-bottom: 2em; padding: 2em; text-decoration: none; text-align: center; } .footer-page-link h5 { color: #656565; font-size: 1.5em; font-family: 'myFontRoman'; } .footer-page-link h5 span { color: #bc640b; font-size: 1em; font-family: 'myFontBold'; position: relative; } .searchtemplate .footer-page-link { display: none; } @media (min-width: 768px) { .footer-page-link h5 span { font-size: 1.5em; } } .footer-page-link h5 span:before { content: ""; position: absolute; left: -1em; top: 12px; height: 0; width: 0; border-width: 7px 0 7px 19px; border-style: solid; border-color: transparent transparent transparent #bc640b; } @media (max-width:767px) { .footer-page-link h5 span:before { top: 4px; } } /* Edge-Hack */ @supports (-ms-ime-align:auto) { .footer-page-link h5 span:before { top: 12px; } } a.footer-page-link, a.footer-page-link:hover, a.footer-page-link:active, a.footer-page-link:visited { text-decoration: none !important; } a.footer-page-link *, a.footer-page-link:hover *, a.footer-page-link:active *, a.footer-page-link:visited * { text-decoration: none !important; } .partner-menu .col-xs-12 .partner-menu__list { display: flex; width: 100%; } .partner-menu .col-xs-12 .partner-menu__list-item { display: block; flex: 1 1 100%; } .footer-footer { margin-bottom: 3em; /* background-image: url(../img/footer-top-border.png); background-repeat: no-repeat; padding-top: 10em; padding-bottom: 6em; margin-top: -1em; */ } .footer-footer__legal { text-align: right; } .footer-footer__legal a { color: #656565; display: inline-block; padding-left: 10px; padding-top: 32px; text-decoration: none; } .footer-footer__legal a:hover { color: #bc640b; } .footer-footer__link { display: inline-block; width: 50%; } @media (min-width: 768px) { .footer-footer__link { width: 25%; } } .footer-footer__link:nth-last-of-type(2) { float: right; } /* Slick Slider */ /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-dots li { border-radius: 50%; background: #fff; transform: scale(0.5); } .slick-dots li.slick-active { transform: scale(0.8); } .slick-dots li.slick-active button:before { display: none; } #publikationen .slick-dots li { background: #656565; } #publikationen .section__main:nth-of-type(6) .slick-dots li { background: #656565; } /* Slider */ .slick-loading .slick-list { background: #fff url("../img/ajax-loader.gif") center center no-repeat; } /* Icons */ @font-face { font-family: "slick"; src: url("../fonts/slick.eot"); src: url("../fonts/slick.eot?#iefix") format("embedded-opentype"), url("../fonts/slick.woff") format("woff"), url("../fonts/slick.ttf") format("truetype"), url("../fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; } /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); padding: 0; border: none; outline: none; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; } .slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir="rtl"] .slick-prev { left: auto; right: -25px; } .slick-prev:before { content: "←"; } [dir="rtl"] .slick-prev:before { content: "→"; } .slick-next { right: -25px; } [dir="rtl"] .slick-next { left: -25px; right: auto; } .slick-next:before { content: "→"; } [dir="rtl"] .slick-next:before { content: "←"; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { color: black; opacity: 0.75; } @media screen and (max-width: 776px) { .slick-prev, .slick-next { top: initial; bottom: 0; transform: translateY(27px); } } .custom-button----- { position: absolute; top: 35%; width: 20px; height: 20px; background: red; } .custom-button-----.left { left: -10px; } .custom-button-----.right { right: -10px; } .slick-elements__hover, .slick-prev, .slick-next, .slick-dots li { opacity: 1; } .slick-elements__hover:hover, .slick-prev:hover, .slick-next:hover, .slick-dots li:hover { opacity: 0.5; } .slick-prev, .slick-next { z-index: 100; } .slick-prev:before, .slick-prev i, .slick-next:before, .slick-next i { display: none; } .slick-prev { width: 0; height: 0; border-style: solid; border-width: 10px 30px 10px 0; border-color: transparent #656565 transparent transparent; left: -7px; } @media (min-width: 768px) { .slick-prev { left: 30px; } } .slick-next { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 30px; border-color: transparent transparent transparent #656565; right: -7px; } @media (min-width: 768px) { .slick-next { right: 30px; } } .slick-list { width: 100%; margin: 0 auto; } @media (min-width: 768px) { .slick-list { width: 80%; } } .page__kontakt>footer { display: none; } #hero .section__header { left: 54%; top: 40%; width: 60%; } @media (min-width: 992px) { .section__main div.container.leitlinien div.columns-1 ul:not(.team__list):not(.slick-dots) { columns: 1; -webkit-columns: 1; -moz-columns: 1; } } @media (max-width: 991px) { .section__main div.container.leitlinien div.col-xs-6, .section__main div.container.leitlinien div.col-sm-6 { float: none; width: 100%; } } div.mobile-spacer { height: 50px; } @media (min-width: 768px) { div.mobile-spacer { height: 0px; } } @media (max-width: 768px) { .padded-multiline-hl-wrapper>h1, .padded-multiline-hl-wrapper>h2, .padded-multiline-hl-wrapper>h3, .padded-multiline-hl-wrapper>h4, .padded-multiline-hl-wrapper>h5, .padded-multiline-hl-wrapper>h6 { line-height: 1.45; } span.section__title--headline { line-height: 1.35; } span.team__item-title--dachzeile, span.news__title--dachzeile, span.wsdkjf__title--dachzeile { line-height: 2.5; } } .news__title--dachzeile, .wsdkjf__title--dachzeile { font-size: 0.45; line-height: 1; color: var(--color-section); background: var(--color-section-bg); } .news__title--headline, .wsdkjf__title--headline { font-size: 80%; padding-top: 13px !important; padding-bottom: 13px !important; color: var(--color-section); background: var(--color-section-bg); } .news__item--listview, .wsdkjf__item--listview { position: relative; margin-top: 0 !important; } .news__olderlink .news__item--listview, .news__archiv .news__item--listview { position: absolute; top: 50%; left: 50%; margin-left: -15%; margin-top: 0% !important; line-height: 0; } .news__title, .wsdkjf__title { line-height: 1; } h4.wsdkjf__title { margin-bottom: 0; } .wsdkjf__list-items .padded-multiline-hl-wrapper { width: 90%; bottom: 0; margin-left: 7vw; z-index: 2; position: absolute; margin-bottom: 1em; } @media (max-width: 768px) { .news__title, .wsdkjf__title { line-height: 1; } } @media (min-width: 768px) { div.mobile-spacer { height: 0px; } .wsdkjf__list-items .padded-multiline-hl-wrapper { margin-left: 10%; } } .team__item--container { height: 100%; width: 100%; } li.team__item div.padded-multiline-hl-wrapper { margin-bottom: 1em; } li.team__item div.padded-multiline-hl-wrapper.info-visible { margin-bottom: 0; top: 5%; z-index: 3; } .team__item-moreinfo { font-size: 80%; } .team__item-moreinfo.invis { opacity: 0; font-size: 100%; } .team__item-moreinfo { font-size: 90%; position: absolute; top: 0; left: 0; right: 0; height: 100%; margin-left: 11%; padding-top: 5vw; padding-right: 8%; z-index: 2; overflow: auto; } .team__item-moreinfo>p { line-height: 1.2; margin-bottom: 0.5em; } .team__item-moreinfo>.phone { margin-bottom: 0; } @media (min-width: 1800px) { .team__item-moreinfo>p, .mailto { margin-bottom: 1em; } } @media (min-width: 768px) and (max-width: 1199px) { .team__item .padded-multiline-hl-wrapper.info-visible .team__item-title--dachzeile { font-size: 55%; } .team__item .padded-multiline-hl-wrapper.info-visible .team__item-title { line-height: 1; } .team__item .padded-multiline-hl-wrapper.info-visible .team__item-title--headline { font-size: 80%; } } @media (max-width: 767px) { .team__item .padded-multiline-hl-wrapper.info-visible .team__item-title--dachzeile { font-size: 0.65em; } .team__item .padded-multiline-hl-wrapper.info-visible .team__item-title--headline { font-size: 100%; } .team__item-moreinfo { padding-top: 19vw; font-size: 125%; margin-left: 7vw; padding-left: 9px; } } @media (min-width: 768px) and (max-width: 992px) { .team__item .padded-multiline-hl-wrapper.info-visible .team__item-title--dachzeile { font-size: 70%; } .team__item .padded-multiline-hl-wrapper.info-visible .team__item-title--headline { font-size: 100%; } .team__item-moreinfo { padding-top: 9vw; font-size: 90%; } } @media (min-width: 992px) and (max-width: 1199px) { .team__item-moreinfo { padding-top: 6vw; font-size: 85%; } } @media (min-width: 1200px) and (max-width: 1299px) { .team__item .padded-multiline-hl-wrapper.info-visible .team__item-title--dachzeile { font-size: 57%; } .team__item-moreinfo { /* padding-top: 6.5em; */ font-size: 82.5%; } } @media (min-width: 1300px) and (max-width: 1499px) { .team__item .padded-multiline-hl-wrapper.info-visible .team__item-title--dachzeile { font-size: 60%; } .team__item-moreinfo { /* padding-top: 7em; */ font-size: 85%; } } @media (min-width: 1200px) and (max-width: 1499px) { .team__item .padded-multiline-hl-wrapper.info-visible .team__item-title { line-height: 1; } .team__item .padded-multiline-hl-wrapper.info-visible .team__item-title--headline { font-size: 90%; } } .team__item .padded-multiline-hl-wrapper.info-visible .team__item-title--headline { padding-top: 0; padding-bottom: 0; } /* .team__item .padded-multiline-hl-wrapper { top: 0; bottom: 0; } */ .mailto { text-decoration: underline; } #neuigkeiten .padded-multiline-hl-wrapper>h1, .padded-multiline-hl-wrapper>h2, .padded-multiline-hl-wrapper>h3, .padded-multiline-hl-wrapper>h4, .padded-multiline-hl-wrapper>h5, .padded-multiline-hl-wrapper>h6, #veranstaltungen-projekte .padded-multiline-hl-wrapper>h1, .padded-multiline-hl-wrapper>h2, .padded-multiline-hl-wrapper>h3, .padded-multiline-hl-wrapper>h4, .padded-multiline-hl-wrapper>h5, .padded-multiline-hl-wrapper>h6 { line-height: 131%; } #aktuelles p a { color: #656565; text-decoration: underline; } .col--1 { columns: 1 !important; -webkit-columns: 1 !important; -moz-columns: 1 !important; } .suche__wrapper { margin-top: 80px; } .suche__uebersicht { margin-bottom: 40px; } /* wirsinddaskjf */ .wsdkjf-haupttext { padding-top: 2em; padding-bottom: 0em; /* background: var(--maintext); */ /* color: #fff; */ } .wsdkjf-haupttext:first-of-type .section__title--dachzeile { display: inline; padding-left: 0; } .wsdkjf-haupttext .section__title--headline { padding: 0; } .wsdkjf-haupttext .padded-multiline-hl-wrapper span.no-bg { background: transparent; } .wsdkjf-haupttext p a { color: inherit; text-decoration: underline; } .video-player { padding: 1em 0; background: var(--videoplayer); } .video-player .section__main { padding: 1em; } .video-player .embed-container { display: flex; justify-content: center; } @media screen and (min-width: 768px) { .video-player { padding: 3.25rem 0; } } /* Youtubeoverlay */ .iframe.loaded { max-width: 100%; height: auto; } .iframe.invisible { width: 0; height: 0; } /* iframeoverlay */ .iframeoverlay { position: relative; display: flex; justify-content: center; align-items: center; background: #1e6a99; width: 100%; } .iframeoverlay__content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; padding: 20px; width: 100%; text-align: center; } .iframeoverlay__content a, .iframeoverlay__content a:hover, .iframeoverlay__content a:focus, .iframeoverlay__content a:active { color: white; text-decoration: underline; } /* @media (min-width: 650px) { .iframeoverlay__content br { display: block; } } */ .iframeoverlay__content-icon { background-color: transparent; width: 5em; height: auto; margin-bottom: 16px; } .btn__unlock { background-color: var(--color-title-bg); border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-top: 16px; } .btn__unlock:hover { background-color: #9a5108; transition: background-color .3s ease-in-out; } [class^="iframenr"], [class*=" iframenr"] { background: #000; } .smpltxt__container { display: flex; align-items: end; } .smpltxt__itemicon { width: 1.5em; height: auto; margin-right: 20px; } @media screen and (min-width: 768px) { .smpltxt__itemicon { margin-left: -2.5em; } } .invisible { visibility: hidden; opacity: 0; } .fadeout { animation: fadeOut .3s forwards; -moz-animation: fadeOut .3s forwards; -webkit-animation: fadeOut .3s forwards; -o-animation: fadeOut .3s forwards; } .fadein { animation: fadeIn .3s forwards; -moz-animation: fadeIn .3s forwards; -webkit-animation: fadeIn .3s forwards; -o-animation: fadeIn .3s forwards; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Spinner */ .spinner, .spinner-team { display: none; position: absolute; top: 50%; left: 50%; z-index: 999; transform: translate(-50%, -50%); } .spinner-team { display: flex; background-color: rgba(0, 0, 0, 0.75); top: 0; right: 0; bottom: 0; left: 0; transform: none; z-index: 2; } .sk-folding-cube { position: relative; margin: auto; width: 40px; height: 40px; } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #B06928; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .spinner-team .sk-folding-cube .sk-cube:before { background-color: #2272A5; } .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } }