.social_feed_element{overflow:visible;padding:0;width:100%}.social_feed_element.extended .inner a{display:inline;padding:0;color:#1b95e0}.social_feed_element.extended .inner a:hover,.social_feed_element.extended a.more:hover{text-decoration:underline}.social_feed_element.extended .inner>figure{padding:0}.social_feed_element.extended a.more{padding:0;font-size:14px;color:#1b95e0;font-weight:700;display:block}.social_feed_element.extended .inner{padding:0 20px 20px}.social_feed_element.extended p:first-child{margin-top:0}.social_feed_element.extended p:last-child{margin-bottom:0}.social_feed_element .inner{background:#f2f2f2;padding:0;margin:30px 10px 10px;position:relative;word-break:break-word;border-top:5px solid #c1c1c1}.social_feed_element .inner a{padding:0 20px;display:block}.social_feed_element .inner>figure{padding:0 20px}.social_feed_element .ce_text{padding:15px 0;color:#333;margin:0}.social_feed_element .icon{position:static;text-indent:0}.social_feed_element .icon img{position:absolute;top:-20px;border-radius:100%;max-width:50px}.social_feed_element .icon .image-wrapper:not(.loaded){height:0!important}.social_feed_element .info{margin:0;padding:10px 0 0;text-align:right;font-size:14px;color:#989898;display:flex;align-items:center;justify-content:flex-end}.social_feed_element .info img{width:15px;margin-left:10px}.social_feed_element .title{margin:10px 0;font-size:16px;font-weight:700;color:#333}.social_feed_element a{color:#333;text-decoration:none}.social_feed_element .ce_text{font-size:14px}.social_feed_element .fa{font-size:18px;padding-left:5px}.social_feed_element .image_container>a{padding:0}.social_feed_container{width:calc(100% + 30px);margin-left:-15px;font-family:sans-serif}.social_feed_container:not(.masonry){display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.social_feed_container:not(.masonry).columns2 .social_feed_element{-ms-flex:0 0 50%;flex:0 0 50%}.social_feed_container:not(.masonry).columns3 .social_feed_element{-ms-flex:0 0 33%;flex:0 0 33%}.social_feed_container:not(.masonry).columns4 .social_feed_element{-ms-flex:0 0 25%;flex:0 0 25%}.social_feed_container.masonry.columns2 .social_feed_element,.social_feed_container.masonry.columns3 .social_feed_element,.social_feed_container.masonry.columns4 .social_feed_element{float:left}.social_feed_container.masonry.columns2 .social_feed_element{width:50%}.social_feed_container.masonry.columns3 .social_feed_element{width:33.33%}.social_feed_container.masonry.columns4 .social_feed_element{width:25%}@media (max-width:767px){.social_feed_container{width:100%;margin-left:0}.social_feed_container:not(.masonry).columns2 .social_feed_element,.social_feed_container:not(.masonry).columns3 .social_feed_element,.social_feed_container:not(.masonry).columns4 .social_feed_element{-ms-flex:0 0 100%;flex:0 0 100%}.social_feed_container.masonry.columns2 .social_feed_element,.social_feed_container.masonry.columns3 .social_feed_element,.social_feed_container.masonry.columns4 .social_feed_element{float:none;width:100%}} .glightbox-container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999!important;overflow:hidden;-ms-touch-action:none;touch-action:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;outline:0}.glightbox-container.inactive{display:none}.glightbox-container .gcontainer{position:relative;width:100%;height:100%;z-index:9999;overflow:hidden}.glightbox-container .gslider{-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;height:100%;left:0;top:0;width:100%;position:relative;overflow:hidden;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.glightbox-container .gslide{width:100%;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0}.glightbox-container .gslide.current{opacity:1;z-index:99999;position:relative}.glightbox-container .gslide.prev{opacity:1;z-index:9999}.glightbox-container .gslide-inner-content{width:100%}.glightbox-container .ginner-container{position:relative;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100%;margin:auto;height:100vh}.glightbox-container .ginner-container.gvideo-container{width:100%}.glightbox-container .ginner-container.desc-bottom,.glightbox-container .ginner-container.desc-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.glightbox-container .ginner-container.desc-left,.glightbox-container .ginner-container.desc-right{max-width:100%!important}.gslide iframe,.gslide video{outline:0!important;border:none;min-height:165px;-webkit-overflow-scrolling:touch;-ms-touch-action:auto;touch-action:auto}.gslide:not(.current){pointer-events:none}.gslide-image{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.gslide-image img{max-height:100vh;display:block;padding:0;float:none;outline:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100vw;width:auto;height:auto;-o-object-fit:cover;object-fit:cover;-ms-touch-action:none;touch-action:none;margin:auto;min-width:200px}.desc-bottom .gslide-image img,.desc-top .gslide-image img{width:auto}.desc-left .gslide-image img,.desc-right .gslide-image img{width:auto;max-width:100%}.gslide-image img.zoomable{position:relative}.gslide-image img.dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.gslide-video{position:relative;max-width:100vh;width:100%!important}.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster{display:none}.gslide-video .gvideo-wrapper{width:100%;margin:auto}.gslide-video::before{content:'';position:absolute;width:100%;height:100%;background:rgba(255,0,0,.34);display:none}.gslide-video.playing::before{display:none}.gslide-video.fullscreen{max-width:100%!important;min-width:100%;height:75vh}.gslide-video.fullscreen video{max-width:100%!important;width:100%!important}.gslide-inline{background:#fff;text-align:left;max-height:calc(100vh - 40px);overflow:auto;max-width:100%;margin:auto}.gslide-inline .ginlined-content{padding:20px;width:100%}.gslide-inline .dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.ginlined-content{overflow:auto;display:block!important;opacity:1}.gslide-external{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;min-width:100%;background:#fff;padding:0;overflow:auto;max-height:75vh;height:100%}.gslide-media{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto}.zoomed .gslide-media{-webkit-box-shadow:none!important;box-shadow:none!important}.desc-bottom .gslide-media,.desc-top .gslide-media{margin:0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gslide-description{position:relative;-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%}.gslide-description.description-left,.gslide-description.description-right{max-width:100%}.gslide-description.description-bottom,.gslide-description.description-top{margin:0 auto;width:100%}.gslide-description p{margin-bottom:12px}.gslide-description p:last-child{margin-bottom:0}.zoomed .gslide-description{display:none}.glightbox-button-hidden{display:none}.glightbox-mobile .glightbox-container .gslide-description{height:auto!important;width:100%;position:absolute;bottom:0;padding:19px 11px;max-width:100vw!important;-webkit-box-ordinal-group:3!important;-ms-flex-order:2!important;order:2!important;max-height:78vh;overflow:auto!important;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.75)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%);-webkit-transition:opacity .3s linear;transition:opacity .3s linear;padding-bottom:50px}.glightbox-mobile .glightbox-container .gslide-title{color:#fff;font-size:1em}.glightbox-mobile .glightbox-container .gslide-desc{color:#a1a1a1}.glightbox-mobile .glightbox-container .gslide-desc a{color:#fff;font-weight:700}.glightbox-mobile .glightbox-container .gslide-desc *{color:inherit}.glightbox-mobile .glightbox-container .gslide-desc .desc-more{color:#fff;opacity:.4}.gdesc-open .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:.4}.gdesc-open .gdesc-inner{padding-bottom:30px}.gdesc-closed .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.greset{-webkit-transition:all .3s ease;transition:all .3s ease}.gabsolute{position:absolute}.grelative{position:relative}.glightbox-desc{display:none!important}.glightbox-open{overflow:hidden}.gloader{height:25px;width:25px;-webkit-animation:lightboxLoader .8s infinite linear;animation:lightboxLoader .8s infinite linear;border:2px solid #fff;border-right-color:transparent;border-radius:50%;position:absolute;display:block;z-index:9999;left:0;right:0;margin:0 auto;top:47%}.goverlay{width:100%;height:calc(100vh + 1px);position:fixed;top:-1px;left:0;background:#000;will-change:opacity}.glightbox-mobile .goverlay{background:#000}.gclose,.gnext,.gprev{z-index:99999;cursor:pointer;width:26px;height:44px;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gclose svg,.gnext svg,.gprev svg{display:block;width:25px;height:auto;margin:0;padding:0}.gclose.disabled,.gnext.disabled,.gprev.disabled{opacity:.1}.gclose .garrow,.gnext .garrow,.gprev .garrow{stroke:#fff}.gbtn.focused{outline:2px solid #0f3d81}iframe.wait-autoplay{opacity:0}.glightbox-closing .gclose,.glightbox-closing .gnext,.glightbox-closing .gprev{opacity:0!important}.glightbox-clean .gslide-description{background:#fff}.glightbox-clean .gdesc-inner{padding:22px 20px}.glightbox-clean .gslide-title{font-size:1em;font-weight:400;font-family:arial;color:#000;margin-bottom:19px;line-height:1.4em}.glightbox-clean .gslide-desc{font-size:.86em;margin-bottom:0;font-family:arial;line-height:1.4em}.glightbox-clean .gslide-video{background:#000}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.75);border-radius:4px}.glightbox-clean .gclose path,.glightbox-clean .gnext path,.glightbox-clean .gprev path{fill:#fff}.glightbox-clean .gprev{position:absolute;top:-100%;left:30px;width:40px;height:50px}.glightbox-clean .gnext{position:absolute;top:-100%;right:30px;width:40px;height:50px}.glightbox-clean .gclose{width:35px;height:35px;top:15px;right:10px;position:absolute}.glightbox-clean .gclose svg{width:18px;height:auto}.glightbox-clean .gclose:hover{opacity:1}.gfadeIn{-webkit-animation:gfadeIn .5s ease;animation:gfadeIn .5s ease}.gfadeOut{-webkit-animation:gfadeOut .5s ease;animation:gfadeOut .5s ease}.gslideOutLeft{-webkit-animation:gslideOutLeft .3s ease;animation:gslideOutLeft .3s ease}.gslideInLeft{-webkit-animation:gslideInLeft .3s ease;animation:gslideInLeft .3s ease}.gslideOutRight{-webkit-animation:gslideOutRight .3s ease;animation:gslideOutRight .3s ease}.gslideInRight{-webkit-animation:gslideInRight .3s ease;animation:gslideInRight .3s ease}.gzoomIn{-webkit-animation:gzoomIn .5s ease;animation:gzoomIn .5s ease}.gzoomOut{-webkit-animation:gzoomOut .5s ease;animation:gzoomOut .5s ease}@-webkit-keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes gfadeIn{from{opacity:0}to{opacity:1}}@keyframes gfadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes gfadeOut{from{opacity:1}to{opacity:0}}@keyframes gfadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@-webkit-keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@-webkit-keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@-webkit-keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@media (min-width:769px){.glightbox-container .ginner-container{width:auto;height:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.glightbox-container .ginner-container.desc-top .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-top .gslide-image,.glightbox-container .ginner-container.desc-top .gslide-image img{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.glightbox-container .ginner-container.desc-left .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-left .gslide-image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.gslide-image img{max-height:97vh;max-width:100%}.gslide-image img.zoomable{cursor:-webkit-zoom-in;cursor:zoom-in}.zoomed .gslide-image img.zoomable{cursor:-webkit-grab;cursor:grab}.gslide-inline{max-height:95vh}.gslide-external{max-height:100vh}.gslide-description.description-left,.gslide-description.description-right{max-width:275px}.glightbox-open{height:auto}.goverlay{background:rgba(0,0,0,.92)}.glightbox-clean .gslide-media{-webkit-box-shadow:1px 2px 9px 0 rgba(0,0,0,.65);box-shadow:1px 2px 9px 0 rgba(0,0,0,.65)}.glightbox-clean .description-left .gdesc-inner,.glightbox-clean .description-right .gdesc-inner{position:absolute;height:100%;overflow-y:auto}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.32)}.glightbox-clean .gclose:hover,.glightbox-clean .gnext:hover,.glightbox-clean .gprev:hover{background-color:rgba(0,0,0,.7)}.glightbox-clean .gprev{top:45%}.glightbox-clean .gnext{top:45%}}@media (min-width:992px){.glightbox-clean .gclose{opacity:.7;right:20px}}@media screen and (max-height:420px){.goverlay{background:#000}} @charset "UTF-8"; /* ##################################################### */ /* ############## Farbdefinitionen ##################### */ /* ##################################################### */ body { --color1: #8f96cb; /* Flieder */ --color2: #0aacaf; /* Petrol */ --color3: #078688; /* Petrol dunkler */ --color4: #495191; /* Flieder dunkler */ --color5: #d1d6fe; /* Flieder heller */ --color6: #222645; /* Flieder sehr dunkel */ --color7: #e7ebff; /* Flieder noch heller */ --color8: #cc6238; /* Orange */ --color10: #ffffff; /* Weiß */ --color11: #efefef; /* Hellgrau */ --color12: #bbbbbb; /* Grau */ --color13: #5f5f5f; /* Dunkelgrau */ --color14: #4b4b4b; /* Text */ --color15: #000000; /* Schwarz */ --main-color: var(--color1); --base-font-color: var(--color14); --base-heading-color: var(--color15); --link-color: var(--color4); --link-hover-color: var(--color6); --hyperlink-background: var(--color1); --hyperlink-color: var(--color10); --hyperlink-hover-background: var(--color15); --hyperlink-hover-color: var(--color10); --hyperlink-icon-background: var(--color15); --hyperlink-icon-color: var(--color10); --button-dark-background: var(--main-color); --button-dark-color: var(--color10); --button-dark-hover-background: var(--color4); --button-dark-hover-color: var(--color10); --button-light-background: var(--color10); --button-light-color: var(--main-color); --button-light-hover-background: var(--color15); --button-light-hover-color: var(--color10); --input-background: var(--color11); --input-color: var(--color14); --input-focus-background: var(--color11); --input-focus-border: var(--main-color); --accordion-background: var(--color11); --accordion-toggler-background: var(--color7); --accordion-toggler-color: var(--color10); --accordion-toggler-hover-background: var(--color15); --accordion-toggler-hover-color: var(--color10); } /* ##################################################### */ /* ############## Gaps und Screenbreiten ############### */ /* ##################################################### */ /* gutter */ /* Document * ========================================================================== */ /** * Add border box sizing in all browsers (opinionated). */ *, ::before, ::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /** * 1. Add text decoration inheritance in all browsers (opinionated). * 2. Add vertical alignment inheritance in all browsers (opinionated). */ ::before, ::after { text-decoration: inherit; /* 1 */ vertical-align: inherit; /* 2 */ } /** * 1. Use the default cursor in all browsers (opinionated). * 2. Change the line height in all browsers (opinionated). * 3. Use a 4-space tab width in all browsers (opinionated). * 4. Remove the grey highlight on links in iOS (opinionated). * 5. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. * 6. Breaks words to prevent overflow in all browsers (opinionated). */ html { cursor: default; /* 1 */ line-height: 1.5; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ -webkit-tap-highlight-color: transparent; -ms-text-size-adjust: 100%; /* 5 */ -webkit-text-size-adjust: 100%; /* 5 */ word-break: break-word; /* 6 */ } /* Sections * ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content * ========================================================================== */ /** * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. */ dl dl, dl ol, dl ul, ol dl, ul dl { margin: 0; } /** * Remove the margin on nested lists in Edge 18- and IE. */ ol ol, ol ul, ul ol, ul ul { margin: 0; } /** * 1. Add the correct sizing in Firefox. * 2. Show the overflow in Edge 18- and IE. */ hr { height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * Add the correct display in IE. */ main { display: block; } /** * Remove the list style on navigation lists in all browsers (opinionated). */ nav ol, nav ul { list-style: none; padding: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * Add the correct text decoration in Edge 18-, IE, and Safari. */ abbr[title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /* Embedded content * ========================================================================== */ /* * Change the alignment on media elements in all browsers (opinionated). */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on iframes in all browsers (opinionated). */ iframe { border-style: none; } /** * Remove the border on images within links in IE 10-. */ img { border-style: none; } /** * Change the fill color to match the text color in all browsers (opinionated). */ svg:not([fill]) { fill: currentColor; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Tabular data * ========================================================================== */ /** * Collapse border spacing in all browsers (opinionated). */ table { border-collapse: collapse; } /* Forms * ========================================================================== */ /** * Remove the margin on controls in Safari. */ button, input, select { margin: 0; } /** * 1. Show the overflow in IE. * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. */ button { overflow: visible; /* 1 */ text-transform: none; /* 2 */ } /** * Correct the inability to style buttons in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * 1. Change the inconsistent appearance in all browsers (opinionated). * 2. Correct the padding in Firefox. */ fieldset { border: 1px solid #a0a0a0; /* 1 */ padding: 0.35em 0.75em 0.625em; /* 2 */ } /** * Show the overflow in Edge 18- and IE. */ input { overflow: visible; } /** * 1. Correct the text wrapping in Edge 18- and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. */ legend { color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in Edge 18- and IE. * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the inheritance of text transform in Firefox. */ select { text-transform: none; } /** * 1. Remove the margin in Firefox and Safari. * 2. Remove the default vertical scrollbar in IE. * 3. Change the resize direction in all browsers (opinionated). */ textarea { margin: 0; /* 1 */ overflow: auto; /* 2 */ resize: vertical; /* 3 */ } /** * Remove the padding in IE 10-. */ [type=checkbox], [type=radio] { padding: 0; } /** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * Remove the inner padding in Chrome, Edge, and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style upload buttons in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /** * Remove the inner border and padding of focus outlines in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus outline styles unset by the previous rule in Firefox. */ :-moz-focusring { outline: 1px dotted ButtonText; } /** * Remove the additional :invalid styles in Firefox. */ :-moz-ui-invalid { box-shadow: none; } /* Interactive * ========================================================================== */ /* * Add the correct display in Edge 18- and IE. */ details { display: block; } /* * Add the correct styles in Edge 18-, IE, and Safari. */ dialog { background-color: white; border: solid; color: black; display: block; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; padding: 1em; position: absolute; right: 0; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; } dialog:not([open]) { display: none; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting * ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* User interaction * ========================================================================== */ /* * 1. Remove the tapping delay in IE 10. * 2. Remove the tapping delay on clickable elements in all browsers (opinionated). */ a, area, button, input, label, select, summary, textarea, [tabindex] { -ms-touch-action: manipulation; /* 1 */ touch-action: manipulation; /* 2 */ } /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /* Accessibility * ========================================================================== */ /** * Change the cursor on busy elements in all browsers (opinionated). */ [aria-busy=true] { cursor: progress; } /* * Change the cursor on control elements in all browsers (opinionated). */ [aria-controls] { cursor: pointer; } /* * Change the cursor on disabled, not-editable, or otherwise * inoperable elements in all browsers (opinionated). */ [aria-disabled=true], [disabled] { cursor: not-allowed; } /* * Change the display on visually hidden accessible elements * in all browsers (opinionated). */ [aria-hidden=false][hidden] { display: initial; } [aria-hidden=false][hidden]:not(:focus) { clip: rect(0, 0, 0, 0); position: absolute; } /* ##################################################### */ /* ############## Screen Styles ######################## */ /* ##################################################### */ @media screen { /*@font-face { font-family: "OpenSans"; src: url('../../files/layout/fonts/OpenSans-VariableFont_wdth-wght.woff2') format('woff2'); font-weight: 300 800; font-stretch: 75 100; font-display: swap; font-style: normal; } @font-face { font-family: "OpenSans"; src: url('../../files/layout/fonts/OpenSans-Italic-VariableFont_wdth-wght.woff2') format('woff2'); font-weight: 300 800; font-stretch: 75 100; font-display: swap; font-style: italic; }*/ @font-face { font-family: "icomoon-slfg"; src: url("../../files/layout/fonts/icomoon-slfg.woff?3uujug") format("woff"), url("../../files/layout/fonts/icomoon-slfg.svg?3uujug#icomoon-slfg") format("svg"); font-weight: normal; font-style: normal; font-display: block; } /* Barlow Condesed */ @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-Thin.woff2") format("woff2"); font-weight: 100; font-stretch: 70%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-ThinItalic.woff2") format("woff2"); font-weight: 100; font-stretch: 70%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-ExtraLight.woff2") format("woff2"); font-weight: 200; font-stretch: 70%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-ExtraLightItalic.woff2") format("woff2"); font-weight: 200; font-stretch: 70%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-Light.woff2") format("woff2"); font-weight: 300; font-stretch: 70%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-LightItalic.woff2") format("woff2"); font-weight: 300; font-stretch: 70%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-Regular.woff2") format("woff2"); font-weight: 400; font-stretch: 70%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-Italic.woff2") format("woff2"); font-weight: 400; font-stretch: 70%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-Medium.woff2") format("woff2"); font-weight: 500; font-stretch: 70%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-MediumItalic.woff2") format("woff2"); font-weight: 500; font-stretch: 70%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-SemiBold.woff2") format("woff2"); font-weight: 600; font-stretch: 70%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-SemiBoldItalic.woff2") format("woff2"); font-weight: 600; font-stretch: 70%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-stretch: 70%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-BoldItalic.woff2") format("woff2"); font-weight: 700; font-stretch: 70%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-ExtraBold.woff2") format("woff2"); font-weight: 800; font-stretch: 70%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-ExtraBoldItalic.woff2") format("woff2"); font-weight: 800; font-stretch: 70%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-Black.woff2") format("woff2"); font-weight: 900; font-stretch: 70%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowCondensed-BlackItalic.woff2") format("woff2"); font-weight: 900; font-stretch: 70%; font-display: swap; font-style: italic; } /* Barlow SemiCondesed */ @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-Thin.woff2") format("woff2"); font-weight: 100; font-stretch: 85%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-ThinItalic.woff2") format("woff2"); font-weight: 100; font-stretch: 85%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-ExtraLight.woff2") format("woff2"); font-weight: 200; font-stretch: 85%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-ExtraLightItalic.woff2") format("woff2"); font-weight: 200; font-stretch: 85%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-Light.woff2") format("woff2"); font-weight: 300; font-stretch: 85%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-LightItalic.woff2") format("woff2"); font-weight: 300; font-stretch: 85%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-Regular.woff2") format("woff2"); font-weight: 400; font-stretch: 85%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-Italic.woff2") format("woff2"); font-weight: 400; font-stretch: 85%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-Medium.woff2") format("woff2"); font-weight: 500; font-stretch: 85%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-MediumItalic.woff2") format("woff2"); font-weight: 500; font-stretch: 85%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-SemiBold.woff2") format("woff2"); font-weight: 600; font-stretch: 85%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-SemiBoldItalic.woff2") format("woff2"); font-weight: 600; font-stretch: 85%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-stretch: 85%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-BoldItalic.woff2") format("woff2"); font-weight: 700; font-stretch: 85%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-ExtraBold.woff2") format("woff2"); font-weight: 800; font-stretch: 85%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-ExtraBoldItalic.woff2") format("woff2"); font-weight: 800; font-stretch: 85%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-Black.woff2") format("woff2"); font-weight: 900; font-stretch: 85%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/BarlowSemiCondensed-BlackItalic.woff2") format("woff2"); font-weight: 900; font-stretch: 85%; font-display: swap; font-style: italic; } /* Barlow */ @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-Thin.woff2") format("woff2"); font-weight: 100; font-stretch: 100%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-ThinItalic.woff2") format("woff2"); font-weight: 100; font-stretch: 100%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-ExtraLight.woff2") format("woff2"); font-weight: 200; font-stretch: 100%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-ExtraLightItalic.woff2") format("woff2"); font-weight: 200; font-stretch: 100%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-Light.woff2") format("woff2"); font-weight: 300; font-stretch: 100%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-LightItalic.woff2") format("woff2"); font-weight: 300; font-stretch: 100%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-stretch: 100%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-Italic.woff2") format("woff2"); font-weight: 400; font-stretch: 100%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-Medium.woff2") format("woff2"); font-weight: 500; font-stretch: 100%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-MediumItalic.woff2") format("woff2"); font-weight: 500; font-stretch: 100%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-stretch: 100%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-SemiBoldItalic.woff2") format("woff2"); font-weight: 600; font-stretch: 100%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-Bold.woff2") format("woff2"); font-weight: 700; font-stretch: 100%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-BoldItalic.woff2") format("woff2"); font-weight: 700; font-stretch: 100%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-ExtraBold.woff2") format("woff2"); font-weight: 800; font-stretch: 100%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-ExtraBoldItalic.woff2") format("woff2"); font-weight: 800; font-stretch: 100%; font-display: swap; font-style: italic; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-Black.woff2") format("woff2"); font-weight: 900; font-stretch: 100%; font-display: swap; font-style: normal; } @font-face { font-family: "Barlow"; src: url("../../files/layout/fonts/Barlow-BlackItalic.woff2") format("woff2"); font-weight: 900; font-stretch: 100%; font-display: swap; font-style: italic; } .icon-bubble_black:before { content: "\e901"; } .icon-bubble_outline:before { content: "\e905"; } .icon-bubble:before { content: "\e907"; } .icon-plus1:before { content: "\f067"; } .icon-minus:before { content: "\f068"; } .icon-check:before { content: "\f00c"; } .icon-close:before { content: "\f00d"; } .icon-remove:before { content: "\f00d"; } .icon-times:before { content: "\f00d"; } .icon-print:before { content: "\f02f"; } .icon-chevron-left:before { content: "\f053"; } .icon-chevron-right:before { content: "\f054"; } .icon-chevron-up:before { content: "\f077"; } .icon-chevron-down:before { content: "\f078"; } .icon-thumbs-o-up:before { content: "\f087"; } .icon-thumbs-o-down:before { content: "\f088"; } .icon-sign-out:before { content: "\f08b"; } .icon-sign-in:before { content: "\f090"; } .icon-phone1:before { content: "\f095"; } .icon-bars:before { content: "\f0c9"; } .icon-navicon:before { content: "\f0c9"; } .icon-reorder:before { content: "\f0c9"; } .icon-caret-right:before { content: "\f0da"; } .icon-mail:before { content: "\f0e0"; } .icon-angle-left:before { content: "\f104"; } .icon-angle-right:before { content: "\f105"; } .icon-angle-up:before { content: "\f106"; } .icon-angle-down:before { content: "\f107"; } .icon-graduation-cap:before { content: "\f19d"; } .icon-mortar-board:before { content: "\f19d"; } .icon-child:before { content: "\f1ae"; } .icon-sign-language:before { content: "\f2a7"; } .icon-signing:before { content: "\f2a7"; } .icon-home:before { content: "\e900"; } .icon-newspaper:before { content: "\e904"; } .icon-pencil2:before { content: "\e906"; } .icon-image:before { content: "\e90d"; } .icon-images:before { content: "\e90e"; } .icon-camera:before { content: "\e90f"; } .icon-headphones:before { content: "\e910"; } .icon-music:before { content: "\e911"; } .icon-film:before { content: "\e913"; } .icon-bullhorn:before { content: "\e91a"; } .icon-book:before { content: "\e91f"; } .icon-books:before { content: "\e920"; } .icon-file-empty:before { content: "\e924"; } .icon-file-picture:before { content: "\e927"; } .icon-folder-open:before { content: "\e930"; } .icon-ticket:before { content: "\e939"; } .icon-phone:before { content: "\e942"; } .icon-pushpin:before { content: "\e946"; } .icon-location:before { content: "\e947"; } .icon-map:before { content: "\e94b"; } .icon-clock:before { content: "\e94e"; } .icon-bell:before { content: "\e951"; } .icon-calendar:before { content: "\e953"; } .icon-mobile:before { content: "\e958"; } .icon-bubbles4:before { content: "\e970"; } .icon-user:before { content: "\e971"; } .icon-users:before { content: "\e972"; } .icon-quotes-left:before { content: "\e977"; } .icon-quotes-right:before { content: "\e978"; } .icon-search:before { content: "\e986"; } .icon-lock:before { content: "\e98f"; } .icon-unlocked:before { content: "\e990"; } .icon-gift:before { content: "\e99f"; } .icon-bin:before { content: "\e9ac"; } .icon-briefcase:before { content: "\e9ae"; } .icon-download2:before { content: "\e9c5"; } .icon-earth:before { content: "\e9ca"; } .icon-link:before { content: "\e9cb"; } .icon-attachment:before { content: "\e9cd"; } .icon-cross:before { content: "\ea0f"; } .icon-enter:before { content: "\ea13"; } .icon-exit:before { content: "\ea14"; } .icon-arrow-up2:before { content: "\ea3a"; } .icon-arrow-up-right2:before { content: "\ea3b"; } .icon-arrow-right2:before { content: "\ea3c"; } .icon-arrow-down2:before { content: "\ea3e"; } .icon-arrow-left2:before { content: "\ea40"; } .icon-facebook:before { content: "\ea90"; } .icon-instagram:before { content: "\ea92"; } .icon-whatsapp:before { content: "\ea93"; } .icon-youtube:before { content: "\ea9d"; } .icon-linkedin2:before { content: "\eaca"; } .icon-xing2:before { content: "\ead4"; } .icon-file-pdf:before { content: "\eadf"; } .icon-file-word:before { content: "\eae1"; } .icon-file-excel:before { content: "\eae2"; } @-webkit-keyframes kenburns { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.15); transform: scale(1.15); } } @keyframes kenburns { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.15); transform: scale(1.15); } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-70px); transform: translateY(-70px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-70px); transform: translateY(-70px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeInLeft, .fadeInRight, .fadeInDown, .fadeInUp, .fadeIn, .kenburns { -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-fill-mode: forwards !important; animation-fill-mode: forwards !important; } .fadeInLeft { opacity: 0; -webkit-animation: 0.5s ease-out 0s 1 fadeInLeft; animation: 0.5s ease-out 0s 1 fadeInLeft; } .fadeInRight { opacity: 0; -webkit-animation: 0.5s ease-out 0s 1 fadeInRight; animation: 0.5s ease-out 0s 1 fadeInRight; } .fadeInDown { opacity: 0; -webkit-animation: 0.5s ease-out 0s 1 fadeInDown; animation: 0.5s ease-out 0s 1 fadeInDown; } .fadeInUp { opacity: 0; -webkit-animation: 0.5s ease-out 0s 1 fadeInUp; animation: 0.5s ease-out 0s 1 fadeInUp; } .fadeIn { opacity: 0; -webkit-animation: 2s ease-out 0s 1 fadeIn; animation: 2s ease-out 0s 1 fadeIn; } .kenburns img { -webkit-animation: 20s ease-out 0s 1 kenburns; animation: 20s ease-out 0s 1 kenburns; } .delay-1 { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .delay-2 { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .delay-3 { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .delay-4 { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .delay-5 { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .delay-6 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .delay-7 { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } .delay-8 { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } /*###################################################*/ /*########## Animation on scroll - Delay ############*/ /*###################################################*/ } @media screen and (min-width: 550px) { .wow:nth-child(even) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } } @media screen and (min-width: 810px) { .wow:nth-child(3n+2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .wow:nth-child(3n+3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } } @media screen and (min-width: 1200px) { .wow:nth-child(4n+2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .wow:nth-child(4n+3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .wow:nth-child(4n+4) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } } @media screen { /* ##################################################### */ /* ############## Grid ################################# */ /* ##################################################### */ .grid-2, .grid-3, .grid-4, .grid-x { display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .col-all { grid-column: 1/-1; } } @media screen and (min-width: 620px) { .grid-2 { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .col-2 { -ms-grid-column-span: 2; grid-column: span 2; } } @media screen and (min-width: 830px) { .col-2 { -ms-grid-column-span: 2; grid-column: span 2; } .col-3 { -ms-grid-column-span: 3; grid-column: span 3; } } @media screen and (min-width: 917px) { .grid-2, .grid-3, .grid-4, .grid-x { gap: 30px; } } @media screen and (min-width: 1024px) { .grid-3 { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } } @media screen and (min-width: 1200px) { .grid-4 { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 1440px) { .grid-2, .grid-3, .grid-4, .grid-x { gap: 45px; } } @media screen { /* ##################################################### */ /* ############## Masonry ############################## */ /* ##################################################### */ .masonry { display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; } .masonry .grid-col--1 { display: -webkit-box; display: -ms-flexbox; display: flex; } .masonry .grid-col--2, .masonry .grid-col--3, .masonry .grid-col--4 { display: none; } .masonry .grid-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 50px; } } @media screen and (min-width: 570px) { .masonry h1 { width: 100%; } .masonry .grid-col--2 { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (min-width: 850px) { .masonry .grid-col--3 { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (min-width: 1150px) { .masonry .grid-col--4 { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (min-width: 1200px) { .masonry { gap: 45px; } .masonry .grid-col { gap: 70px; } } @media screen { ::-moz-selection { background: var(--base-font-color); color: var(--color10); } ::selection { background: var(--base-font-color); color: var(--color10); } mark, .highlight { background: var(--base-font-color); color: var(--color10); } html { font-size: 100%; font-family: "Barlow"; font-weight: 500; font-stretch: 100%; font-style: normal; color: var(--base-font-color); line-height: 1.6; text-align: left; } } @media screen and (min-width: 917px) { html { font-size: 110%; } } @media screen and (min-width: 1200px) { html { font-size: 120%; } } @media screen and (min-width: 1600px) { html { font-size: 130%; } } @media screen { body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; color: var(--base-font-color); } button:focus-visible, a:focus-visible { outline: 2px solid #005fcc; outline-offset: 4px; } p { padding: 0; margin: 0 0 1em; } p [class^=icon-], p [class*=" icon-"] { margin-right: 0.5em; } p.short { padding-top: 0; } br, strong { font-weight: 700; } h1, h2, h3, h4, h5 { font-family: "Barlow"; color: var(--base-heading-color); line-height: 1.1; -ms-hyphens: auto; hyphens: auto; padding: 0; } } @media screen and (min-width: 917px) { h1, h2, h3, h4, h5 { -ms-hyphens: none; hyphens: none; } } @media screen { h1.no-hyphens, h2.no-hyphens, h3.no-hyphens, h4.no-hyphens, h5.no-hyphens { -ms-hyphens: none; hyphens: none; } h1 .subtitle, h2 .subtitle, h3 .subtitle, h4 .subtitle, h5 .subtitle { display: block; font-size: 1.5rem; line-height: 1.3; color: var(--color2); margin-top: 0.4em; } .no-hyphens h1, .no-hyphens h2, .no-hyphens h3, .no-hyphens h4, .no-hyphens h5 { -ms-hyphens: none; hyphens: none; } h1 { font-size: 3.3em; line-height: 1; margin: 0 0 0.5em; font-weight: 700; font-stretch: 85%; color: var(--color2); } h2 { font-size: 2.5em; line-height: 1.1; margin: 0 0 0.5em; font-weight: 700; font-stretch: 85%; color: var(--color2); } h3 { font-size: 1.6em; margin: 1.5em 0 0.5em; font-weight: 600; } h4 { font-size: 1.1em; margin: 1.5em 0 0.3em; font-weight: 700; } h5 { font-size: 1em; margin: 1.5em 0 0.1em; font-weight: 600; } } @media screen { /*@media (min-width: $smalldesktop) { h1 { font-size: 5em;} h2 { font-size: 3.8em;} h3 { font-size: 2.8em;} }*/ h1 + h2, h1 + h3, h1 + h4, h2 + h3, h2 + h4, h3 + h4, h3 + p, h1 + .ce_text h2:first-child, h1 + .ce_text h3:first-child { margin-top: 0; } .content-headline.center, .content-text.center { text-align: center; } .content-headline.right, .content-text.right { text-align: right; } a { color: var(--link-color); text-decoration: none; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; cursor: pointer; } a:hover { color: var(--link-hover-color); } .dark-points a, .black a, .green a, .green-points a, .lilac a, .lilac-points a { color: var(--color7); } .dark-points a:hover, .black a:hover, .green a:hover, .green-points a:hover, .lilac a:hover, .lilac-points a:hover { color: var(--link-hover-color); } main a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } hr { border: none; border-bottom: 1px solid var(--color11); } .content-text:after, .teaser:after, .content-accordion:after { content: ""; display: block; clear: both; } .content-text ul, .content-text ol, .teaser ul, .teaser ol, .content-accordion ul, .content-accordion ol { margin: 0 0 1em; } .content-text ul, .teaser ul, .content-accordion ul { margin: 0 0 1em; list-style: none; padding: 0; } .content-text ul li, .teaser ul li, .content-accordion ul li { position: relative; padding: 0 0 0 1.5em; } .content-text ul li:before, .teaser ul li:before, .content-accordion ul li:before { content: "\f0da"; font-family: "icomoon-slfg"; color: var(--color2); position: absolute; margin-left: -0.75em; } .white.content-text, .light-points.content-text, .dark-points.content-text, .lightgrey.content-text, .black.content-text, .green.content-text, .green-points.content-text, .lilac.content-text, .lilac-points.content-text { padding: 20px; } .white.content-text > *:first-child, .light-points.content-text > *:first-child, .dark-points.content-text > *:first-child, .lightgrey.content-text > *:first-child, .black.content-text > *:first-child, .green.content-text > *:first-child, .green-points.content-text > *:first-child, .lilac.content-text > *:first-child, .lilac-points.content-text > *:first-child { margin-top: 0; } .dark-points .content-text ul li:before, .dark-points .content-accordion ul li:before, .black .content-text ul li:before, .black .content-accordion ul li:before, .green .content-text ul li:before, .green .content-accordion ul li:before, .green-points .content-text ul li:before, .green-points .content-accordion ul li:before, .lilac .content-text ul li:before, .lilac .content-accordion ul li:before, .lilac-points .content-text ul li:before, .lilac-points .content-accordion ul li:before { color: var(--color10); } .zitat { position: relative; } .zitat .zitat-text { position: relative; font-size: 1.5em; font-weight: 400; font-style: italic; } .zitat .zitat-text span { position: absolute; font-size: 2.5em; color: var(--color1); z-index: -1; } .zitat .zitat-text .icon-quotes-right { left: -30px; top: -15px; } .zitat .zitat-text .icon-quotes-left { right: -30px; bottom: -15px; } .zitat .zitat-author { font-weight: 300; font-size: 0.9em; } .zitat svg { position: absolute; top: -10px; left: -20px; z-index: -2; height: 120%; max-height: 300px; opacity: 0.5; fill: var(--color10); } .zitat.petrol .bubble { fill: var(--color2); } .zitat.lilac .bubble { fill: var(--color1); } [class^=icon-], [class*=" icon-"], .icon { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "icomoon-slfg" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ##################################################### */ /* ############## Tabellen ############################# */ /* ##################################################### */ table { border-collapse: collapse; border: none; width: 100%; line-height: 1.2; margin: 2em 0; -ms-hyphens: auto; hyphens: auto; } table td, table th { padding: 0.7em 1em; vertical-align: top; } table thead tr th { font-weight: 600; background: var(--color2); color: var(--color10); border-right: 1px solid var(--color10); } table thead tr th:last-child { border-right: none; } table tbody tr td { border-right: 1px solid var(--color12); background: var(--color10); } table tbody tr td:last-child { border: none; } table tbody tr:nth-child(even) td { background: var(--color11); } caption { text-align: left; line-height: 1.2; padding: 1em 0; } /* ##################################################### */ /* ############## Turn off native styling ############## */ /* ##################################################### */ input[type=text], input[type=tel], input[type=email], input[type=button], input[type=password], input[type=search], input[type=submit], input[type=file], input[type=number], select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 0; max-width: 600px; } ::-webkit-input-placeholder { all: unset; color: var(--color12); font-family: "Barlow"; font-weight: 450; } ::-moz-placeholder { all: unset; color: var(--color12); font-family: "Barlow"; font-weight: 450; } :-ms-input-placeholder { all: unset; color: var(--color12); font-family: "Barlow"; font-weight: 450; } ::-ms-input-placeholder { all: unset; color: var(--color12); font-family: "Barlow"; font-weight: 450; } ::placeholder { all: unset; color: var(--color12); font-family: "Barlow"; font-weight: 450; } /* ##################################################### */ /* ############## Allgemeinde Definitionen ############# */ /* ##################################################### */ textarea, select, input[type=number], input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], input[type=file] { font-family: "Barlow"; font-weight: 450; width: 100%; padding: 0.5em 0.8em; background-color: var(--color10); font-size: 1em; color: var(--base-font-color); outline: none; text-align: left; border: 1px solid var(--color12); border-radius: 10px; display: block; } textarea:focus, select:focus, input[type=number]:focus, input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=password]:focus, input[type=search]:focus, input[type=file]:focus { border: 1px solid var(--color13); } textarea::-webkit-input-placeholder, select::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=search]::-webkit-input-placeholder, input[type=file]::-webkit-input-placeholder { color: transparent; } textarea::-moz-placeholder, select::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=file]::-moz-placeholder { color: transparent; } textarea:-ms-input-placeholder, select:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=search]:-ms-input-placeholder, input[type=file]:-ms-input-placeholder { color: transparent; } textarea::-ms-input-placeholder, select::-ms-input-placeholder, input[type=number]::-ms-input-placeholder, input[type=text]::-ms-input-placeholder, input[type=email]::-ms-input-placeholder, input[type=tel]::-ms-input-placeholder, input[type=password]::-ms-input-placeholder, input[type=search]::-ms-input-placeholder, input[type=file]::-ms-input-placeholder { color: transparent; } textarea::placeholder, select::placeholder, input[type=number]::placeholder, input[type=text]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, input[type=password]::placeholder, input[type=search]::placeholder, input[type=file]::placeholder { color: transparent; } fieldset { padding: 0.5em 0; position: relative; border: none; } fieldset legend { font-weight: 600; color: var(--color2); } fieldset legend span { display: inline-block; } fieldset span { display: -webkit-box; display: -ms-flexbox; display: flex; /*align-items: start;*/ } fieldset span input { margin: 0.3em 0.5em 0 0; } fieldset span label { display: block; } .widget-text, .widget-password, .widget-textarea { position: relative; } .widget-text label, .widget-password label, .widget-textarea label { display: block; color: var(--color2); text-align: left; position: absolute; left: 1em; top: 0.3em; -webkit-transition: all 0.3s; transition: all 0.3s; } .widget-text label.moved, .widget-password label.moved, .widget-textarea label.moved { -webkit-transform: translateY(-2em); transform: translateY(-2em); } .formbody { display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /*@media(min-width: $tablet) { gap: $biggap; }*/ } } @media screen and (min-width: 1200px) { .formbody { gap: 45px; } } @media screen { .formbody button[type=submit] { margin: 0; /*padding: 1em;*/ } .formbody p.error { grid-column: 1/-1; color: #d21e00; margin: 0; } } @media screen { /* ##################################################### */ /* ############## Buttons ############################## */ /* ##################################################### */ button, button[type=submit], .button, .back a, #to-top, .textbox .teaser .button { font-family: "Barlow"; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; border: none; border-radius: 15px; font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none; padding: 0.75em 1em; margin: 1.4em 6px 0 0; cursor: pointer; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; background-color: var(--button-dark-background); color: var(--button-dark-color); } button:hover, button[type=submit]:hover, .button:hover, .back a:hover, #to-top:hover, .textbox .teaser .button:hover { background-color: var(--button-dark-hover-background); color: var(--button-dark-hover-color); } button.light, button[type=submit].light, .button.light, .back a.light, #to-top.light, .textbox .teaser .button.light { background-color: var(--button-light-background); color: var(--button-light-color); } button.light:hover, button[type=submit].light:hover, .button.light:hover, .back a.light:hover, #to-top.light:hover, .textbox .teaser .button.light:hover { background-color: var(--button-light-hover-background); color: var(--button-light-hover-color); } .dark-points button, .dark-points button[type=submit], .dark-points .button, .dark-points .back a, .black button, .black button[type=submit], .black .button, .black .back a, .green button, .green button[type=submit], .green .button, .green .back a, .green-points button, .green-points button[type=submit], .green-points .button, .green-points .back a, .lilac button, .lilac button[type=submit], .lilac .button, .lilac .back a, .lilac-points button, .lilac-points button[type=submit], .lilac-points .button, .lilac-points .back a { background-color: var(--button-light-background); color: var(--button-light-color); } .dark-points button:hover, .dark-points button[type=submit]:hover, .dark-points .button:hover, .dark-points .back a:hover, .black button:hover, .black button[type=submit]:hover, .black .button:hover, .black .back a:hover, .green button:hover, .green button[type=submit]:hover, .green .button:hover, .green .back a:hover, .green-points button:hover, .green-points button[type=submit]:hover, .green-points .button:hover, .green-points .back a:hover, .lilac button:hover, .lilac button[type=submit]:hover, .lilac .button:hover, .lilac .back a:hover, .lilac-points button:hover, .lilac-points button[type=submit]:hover, .lilac-points .button:hover, .lilac-points .back a:hover { background-color: var(--button-light-hover-background); color: var(--button-light-hover-color); } /* ##################################################### */ /* ############## Suche ################################ */ /* ##################################################### */ #topsearch { background: var(--main-color); color: var(--color10); } #topsearch #mainsearch { width: 100%; margin-top: -105px; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; pointer-events: none; } #topsearch #mainsearch[aria-hidden=false] { pointer-events: auto; margin-top: 0; } #topsearch #mainsearch .formbody { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 30px 0; gap: 20px; } #topsearch #mainsearch .formbody .widget-text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; max-width: 300px; border-bottom: 1px solid var(--color10); margin: 0; } #topsearch #mainsearch .formbody .widget-text label { right: 0; text-align: right; color: var(--color10); } #topsearch #mainsearch .formbody .widget-text label.moved { -webkit-transform: translateY(-1.8em); transform: translateY(-1.8em); } #topsearch #mainsearch .formbody .widget-text input { border: none; background: none; text-align: right; color: var(--color10); padding-right: 0; padding-left: 0; } #topsearch #mainsearch .formbody button { margin: 0; background-color: var(--button-light-background); color: var(--button-light-color); } #topsearch #mainsearch .formbody button:hover { background-color: var(--button-light-hover-background); color: var(--button-light-hover-color); } } @media screen and (min-width: 917px) { #topsearch #mainsearch { margin-top: -139.3px; } #topsearch #mainsearch .formbody { padding: 45px 0; } } @media screen and (min-width: 1200px) { #topsearch #mainsearch { margin-top: -143.75px; } } @media screen and (min-width: 1600px) { #topsearch #mainsearch { margin-top: -148.25px; } } @media screen { #main .mod_search .formbody { margin-bottom: 1em; } #main .mod_search .header { margin-bottom: 2em; } #main .mod_search .search_default { border-top: 1px solid var(--color12); border-bottom: 1px solid var(--color12); padding: 30px 0; } #main .mod_search .search_default h3 { margin-top: 0; } #main .mod_search .search_default p:last-child { margin-bottom: 0; } #main .mod_search .search_default + .search_default { border-top: 0; } } @media screen { /* ##################################################### */ /* ############## Interner Bereich ##################### */ /* ##################################################### */ .logoutbutton { display: block; position: fixed; right: -120px; top: 20%; z-index: 100; } .logoutbutton a { text-decoration: none; padding: 0.7em 0.9em 0.7em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; letter-spacing: 0.5px; background-color: var(--color8); color: var(--button-dark-color); white-space: nowrap; border-radius: 10px 0 0 10px; } .logoutbutton a .icon-sign-out { padding-right: 0.7em; font-size: 1.2em; } .logoutbutton a:hover { margin-right: 100px; text-decoration: none !important; } } @media screen and (min-width: 917px) { .logoutbutton { right: -140px; } .logoutbutton a:hover { margin-right: 110px; } } @media screen and (min-width: 1200px) { .logoutbutton { right: -150px; } .logoutbutton a:hover { margin-right: 120px; } } @media screen and (min-width: 1600px) { .logoutbutton { right: -160px; } .logoutbutton a:hover { margin-right: 130px; } } @media screen { html { scroll-behavior: smooth; } .invisible { display: none; } :tagret { scroll-padding-block-start: 35px; } } @media screen and (min-width: 917px) { :tagret { scroll-padding-block-start: 95px; } } @media screen { .sprungmarke { scroll-padding-block-start: 35px; } } @media screen and (min-width: 917px) { .sprungmarke { scroll-padding-block-start: 95px; } } @media screen { /* ##################################################### */ /* ############## Menü Kopfzeile ####################### */ /* ##################################################### */ } @media screen and (max-width: 916px) { nav.kopfzeile { margin-left: auto; } } @media screen { nav.kopfzeile ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin: 0; gap: 10px; } nav.kopfzeile li a, nav.kopfzeile li button { display: block; margin: 0; background: var(--button-dark-background); color: var(--button-dark-color); border-radius: 15px; padding: 0.5em 0.8em 0.6em; font-size: 1.3em; line-height: 1; text-align: center; } nav.kopfzeile li a .text, nav.kopfzeile li button .text { font-size: 0.4em; font-weight: 600; padding-bottom: 0.7em; display: block; text-transform: uppercase; } nav.kopfzeile li a:hover, nav.kopfzeile li button:hover { background: var(--button-dark-hover-background); color: var(--button-dark-hover-color); } nav.kopfzeile li:last-child a { margin-right: 15px; } nav.kopfzeile li .menutrigger { height: 100%; } nav.kopfzeile li .menutrigger[aria-expanded=false] .icon-navicon { display: block; } nav.kopfzeile li .menutrigger[aria-expanded=false] .icon-cross, nav.kopfzeile li .menutrigger[aria-expanded=false] .icon-close { display: none; } nav.kopfzeile li .menutrigger[aria-expanded=true] .icon-navicon { display: none; } nav.kopfzeile li .menutrigger[aria-expanded=true] .icon-cross, nav.kopfzeile li .menutrigger[aria-expanded=true] .icon-close { display: block; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } nav.kopfzeile li .menutrigger[aria-expanded=true]:hover .icon-cross, nav.kopfzeile li .menutrigger[aria-expanded=true]:hover .icon-close { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @media screen and (min-width: 917px) { nav.kopfzeile li a, nav.kopfzeile li button { padding: 0.5em 0.8em 0.5em; } } @media screen { /* ##################################################### */ /* ############## Megamenü (Variante 2) ################ */ /* ##################################################### */ #meganav { position: fixed; visibility: hidden; top: 98px; right: -100%; left: 100%; height: calc(100vh - 98px); -webkit-transition: all ease-in-out 0.3s 0.2s; transition: all ease-in-out 0.3s 0.2s; background: var(--color10); color: var(--color10); border-top: 1px solid var(--color2); border-bottom: 1px solid var(--color2); z-index: 300; } } @media screen and (min-width: 480px) { #meganav { height: auto; } } @media screen and (min-width: 917px) { #meganav { top: 102px; } } @media screen and (min-width: 1200px) { #meganav { top: 107px; } } @media screen { #meganav[aria-hidden=false] { visibility: visible; overflow-y: scroll; left: 0; right: 0; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #meganav[aria-hidden=false] .inside { opacity: 1; -webkit-transition: all ease-in-out 0.3s 0.2s; transition: all ease-in-out 0.3s 0.2s; } } @media screen and (min-width: 480px) { #meganav[aria-hidden=false] { overflow-y: auto; } } @media screen { #meganav .inside { position: relative; padding: 20px 20px 90px; opacity: 0; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } } @media screen and (min-width: 600px) { #meganav .inside { padding: 20px 20px 45px; } } @media screen and (min-width: 917px) { #meganav .inside { padding: 45px 30px; } } @media screen and (min-width: 1400px) { #meganav .inside { max-width: 1400px; margin-left: auto; margin-right: auto; padding: 90px 30px; } } @media screen { #meganav #mainnav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 15px 30px; margin: 0 0 45px; } #meganav #mainnav ul li { width: 120px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; text-align: center; } #meganav #mainnav ul li a, #meganav #mainnav ul li strong { font-weight: 700; font-size: 1.1em; line-height: 1; } #meganav #mainnav ul li a:before, #meganav #mainnav ul li strong:before { content: ""; display: block; margin: 0 auto 10px; width: 100px; aspect-ratio: 4/3.77; } #meganav #mainnav ul li a.programm:before, #meganav #mainnav ul li strong.programm:before { background: url(../../files/layout/img/menuegrafik-programm_petrol-bubble.png) no-repeat; background-size: contain; } #meganav #mainnav ul li a.themen:before, #meganav #mainnav ul li strong.themen:before { background: url(../../files/layout/img/menuegrafik-themen_petrol-bubble.png) no-repeat; background-size: contain; } #meganav #mainnav ul li a.mentoren, #meganav #mainnav ul li strong.mentoren { -ms-hyphens: auto; hyphens: auto; } #meganav #mainnav ul li a.mentoren:before, #meganav #mainnav ul li strong.mentoren:before { background: url(../../files/layout/img/menuegrafik-mentoren_petrol-bubble.png) no-repeat; background-size: contain; } } @media screen and (min-width: 600px) { #meganav #mainnav ul li a:before, #meganav #mainnav ul li strong:before { width: 200px; margin-bottom: 20px; } } @media screen { #meganav #mainnav ul li strong { color: var(--color4); } #meganav #mainnav ul li.home { display: none; } } @media screen and (max-width: 479px) { #meganav #mainnav ul li.mentoren { width: 200px; } } @media screen and (min-width: 480px) { #meganav #mainnav ul li { width: 200px; } #meganav #mainnav ul li a, #meganav #mainnav ul li strong { font-size: 1.3em; line-height: 1.2; } } @media screen and (min-width: 1024px) { #meganav #mainnav ul li { width: 300px; } } @media screen and (min-width: 1200px) { #meganav #mainnav ul { margin: 0 0 90px; } } @media screen { #meganav .service ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px 30px; margin: 0; } } @media screen { /* ##################################################### */ /* ############## Pfad-Menü ############################ */ /* ##################################################### */ .mod_breadcrumb { margin-top: 45px; padding: 0 20px; } } @media screen and (min-width: 917px) { .mod_breadcrumb { padding: 0 30px; } } @media screen and (min-width: 1200px) { .mod_breadcrumb { max-width: 1400px; margin: 100px auto 0; } } @media screen { .mod_breadcrumb ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; } .mod_breadcrumb li { font-size: 0.8em; text-transform: uppercase; padding-right: 10px; } .mod_breadcrumb li:after { content: ">"; margin-left: 10px; } .mod_breadcrumb li:last-child { padding-right: 0; } .mod_breadcrumb li:last-child:after { display: none; } .mod_breadcrumb li a { text-decoration: none; } .no-breadcrumb .mod_breadcrumb { display: none; } } @media screen { /* ##################################################### */ /* ############## ToTop-Button ######################### */ /* ##################################################### */ footer nav { width: 100%; } footer nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px; margin: 0; } } @media screen and (min-width: 917px) { footer nav { width: auto; } footer nav ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media screen { /* ##################################################### */ /* ############## ToTop-Button ######################### */ /* ##################################################### */ #to-top { display: none; /*@media(min-width: $desktop) { right: -135px; }*/ } } @media screen and (min-width: 917px) { #to-top { display: block; opacity: 0; margin: 0; padding: 1.1em; position: fixed; bottom: 15px; right: 15px; line-height: 1; z-index: 298; } #to-top span { font-size: 1.5em; } #to-top:hover { bottom: 25px; } } @media screen { .linkbox-1 { position: relative; background: var(--color10); border-radius: 15px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 1px solid var(--main-color); -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .linkbox-1 a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; } .linkbox-1 .image figure { aspect-ratio: 4/3; margin: 0; } .linkbox-1 .image figure img { height: 100%; -o-object-fit: cover; object-fit: cover; } .linkbox-1 .inner { padding: 20px; color: var(--base-font-color); -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .linkbox-1 .inner .category { margin: -0.7em 0 0.75em; text-align: right; font-size: 0.75em; font-style: italic; color: var(--color3); line-height: 1.2em; } .linkbox-1 .inner .info { margin: 0 0 0.5em; font-size: 0.8rem; font-style: italic; } .linkbox-1 .inner .title { margin: 0 0 1em; padding: 0 0 1em; border-bottom: 1px solid var(--main-color); } .linkbox-1 .inner .title h3 { font-size: 1.1rem; font-weight: 700; color: var(--base-heading-color); margin: 0; } .linkbox-1 .inner .title h3 .subtitle { font-size: 0.9em; font-weight: 500; font-style: italic; color: var(--base-font-color); } .linkbox-1 .inner .teaser { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .linkbox-1 .inner .more { color: var(--link-color); -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .linkbox-1 .inner p { font-size: 0.9em; } .linkbox-1 .inner p:last-child { margin-bottom: 0; } .linkbox-1:hover { /*box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .3);*/ border-color: var(--color15); } .linkbox-1:hover .image figure img { -webkit-transform: scale(1.11) rotate(-5deg); transform: scale(1.11) rotate(-5deg); } .linkbox-1:hover .inner .more { color: var(--link-hover-color); } .linkbox-2, .textbox { position: relative; background: var(--color10); border-radius: 15px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); -webkit-transition: all ease-in-out 0.1s; transition: all ease-in-out 0.1s; } .linkbox-2 .image, .textbox .image { padding: 20px; } .linkbox-2 .image figure, .textbox .image figure { aspect-ratio: 4/2; margin: 0; } .linkbox-2 .image figure img, .textbox .image figure img { height: 100%; -o-object-fit: contain; object-fit: contain; } .linkbox-2 .inner, .textbox .inner { padding: 20px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; color: var(--base-font-color); } .linkbox-2 .inner .info, .textbox .inner .info { color: var(--main-color); margin: 0 0 0.5em; font-size: 0.8rem; font-style: italic; } .linkbox-2 .inner .title, .textbox .inner .title { font-size: 1.3rem; font-weight: 700; color: var(--base-heading-color); margin: 0 0 1em; padding: 0 0 1em; } .linkbox-2 .inner .teaser, .textbox .inner .teaser { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; font-size: 0.9em; line-height: 1.5; } .linkbox-2:before { content: ""; position: absolute; top: 0; right: 0; bottom: 100%; left: 0; background: var(--color10); opacity: 0.9; -webkit-transition: bottom ease-in-out 0.3s 0.3s; transition: bottom ease-in-out 0.3s 0.3s; } .linkbox-2:after { content: "\e9cb"; font-family: "icomoon-slfg"; font-size: 2em; line-height: 1; background: var(--color2); color: var(--color10); border-radius: 100%; padding: 0.5em; position: absolute; top: calc(50% - 1em); left: calc(50% - 1em); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; -webkit-transition: opacity ease-in-out 0.2s 0.3s, -webkit-transform cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s 0s; transition: opacity ease-in-out 0.2s 0.3s, -webkit-transform cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s 0s; transition: opacity ease-in-out 0.2s 0.3s, transform cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s 0s; transition: opacity ease-in-out 0.2s 0.3s, transform cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s 0s, -webkit-transform cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s 0s; } .linkbox-2 a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; } .linkbox-2:has(a):hover { -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); } .linkbox-2:has(a):hover:before { bottom: 0; -webkit-transition-delay: 0s; transition-delay: 0s; } .linkbox-2:has(a):hover:after { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; -webkit-transition: opacity ease-in-out 0.3s 0s, -webkit-transform cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s 0.3s; transition: opacity ease-in-out 0.3s 0s, -webkit-transform cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s 0.3s; transition: opacity ease-in-out 0.3s 0s, transform cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s 0.3s; transition: opacity ease-in-out 0.3s 0s, transform cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s 0.3s, -webkit-transform cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s 0.3s; } .teambox { position: relative; } .teambox figure { aspect-ratio: 4/3; position: relative; z-index: 2; } .teambox svg { fill: var(--color2); position: absolute; top: 4%; left: 6%; width: 63.5%; -webkit-transform: scaleX(-1) rotate(8deg); transform: scaleX(-1) rotate(8deg); } .teambox:nth-child(2n-1) svg { fill: var(--color1); } .teambox p { margin: 0; font-size: 0.95em; } .teambox .title .name { font-size: 1.1em; } .teambox .details { margin-top: 1em; } .teambox .details a.button { display: none; } .teambox .workarea { margin-top: 1em; } .dark-points .teambox svg, .black .teambox svg, .green .teambox svg, .green-points .teambox svg, .lilac .teambox svg, .lilac-points .teambox svg { fill: var(--color3); } .dark-points .teambox:nth-child(2n-1) svg, .black .teambox:nth-child(2n-1) svg, .green .teambox:nth-child(2n-1) svg, .green-points .teambox:nth-child(2n-1) svg, .lilac .teambox:nth-child(2n-1) svg, .lilac-points .teambox:nth-child(2n-1) svg { fill: var(--color4); } @-webkit-keyframes splide-loading { 0% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes splide-loading { 0% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } .splide__track--draggable { -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; } .splide__track--fade > .splide__list > .splide__slide { margin: 0 !important; opacity: 0; z-index: 0; } .splide__track--fade > .splide__list > .splide__slide.is-active { opacity: 1; z-index: 1; } .splide--rtl { direction: rtl; } .splide__track--ttb > .splide__list { display: block; } .splide__container { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .splide__list { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: -ms-flexbox; display: -webkit-box; display: flex; height: 100%; margin: 0 !important; padding: 0 !important; } .splide.is-initialized:not(.is-active) .splide__list { display: block; } .splide__pagination { -ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; margin: 0; pointer-events: none; } .splide__pagination li { display: inline-block; line-height: 1; list-style-type: none; margin: 0; pointer-events: auto; } .splide:not(.is-overflow) .splide__pagination { display: none; } .splide__progress__bar { width: 0; } .splide { position: relative; visibility: hidden; } .splide.is-initialized, .splide.is-rendered { visibility: visible; } .splide__slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; list-style-type: none !important; margin: 0; position: relative; } .splide__slide img { vertical-align: bottom; } .splide__spinner { -webkit-animation: splide-loading 1s linear infinite; animation: splide-loading 1s linear infinite; border: 2px solid #999; border-left-color: transparent; border-radius: 50%; bottom: 0; contain: strict; display: inline-block; height: 20px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 20px; } .splide__sr { clip: rect(0 0 0 0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause { display: none; } .splide__toggle.is-active .splide__toggle__pause { display: inline; } .splide__track { overflow: hidden; position: relative; z-index: 0; } } @media screen { /* ##################################################### */ /* ############## Allgemeines ########################## */ /* ##################################################### */ body { position: relative; overflow-x: hidden; overflow-y: visible; padding: 0 !important; } } @media screen and (max-width: 599px) { body.no-scroll { position: fixed; width: 100%; } } @media screen { header .inside, #topsearch .inside { padding: 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (min-width: 917px) { header .inside, #topsearch .inside { padding: 0 30px; } } @media screen and (min-width: 1200px) { header .inside, #topsearch .inside { max-width: 1400px; margin: 0 auto; } } @media screen and (min-width: 800px) { .max-800 { max-width: 800px; margin-left: auto; margin-right: auto; } } @media screen and (min-width: 1000px) { .max-1000 { max-width: 1000px; margin-left: auto; margin-right: auto; } } @media screen and (min-width: 1400px) { .max-1400 { max-width: 1400px; margin-left: auto; margin-right: auto; } } @media screen { #wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } #wrapper #container { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } @media screen { /* ##################################################### */ /* ############## Artikel ############################## */ /* ##################################################### */ .mod_article, .layout_full { margin-top: 45px; margin-bottom: 45px; position: relative; } .mod_article:last-child, .layout_full:last-child { margin-bottom: 0; } .mod_article > *, .layout_full > * { padding-left: 20px; padding-right: 20px; margin-bottom: 50px; } } @media screen and (min-width: 800px) { .mod_article > .max-800, .layout_full > .max-800 { max-width: 800px; margin-left: auto; margin-right: auto; } } @media screen and (min-width: 917px) { .mod_article > *, .layout_full > * { padding-left: 30px; padding-right: 30px; margin-bottom: 70px; } } @media screen and (min-width: 1200px) { .mod_article, .layout_full { margin-top: 100px; } .mod_article > *, .layout_full > * { margin-bottom: 100px; max-width: 1400px; margin: 0 auto 100px; } .mod_article > *.max-1000, .layout_full > *.max-1000 { max-width: 1000px; margin-left: auto; margin-right: auto; } .mod_article > *.full-width, .layout_full > *.full-width { max-width: unset; } } @media screen and (min-width: 1200px) and (min-width: 1430px) { .mod_article > *.full-width > *, .layout_full > *.full-width > * { padding-left: 30px; padding-right: 30px; } } @media screen and (min-width: 1600px) { .mod_article, .layout_full { margin-top: 140px; margin-bottom: 140px; } .mod_article > *, .layout_full > * { margin: 0 auto 140px; } } @media screen { .no-padding { padding-left: 0 !important; padding-right: 0 !important; } .no-margin { margin-bottom: 0 !important; } .small-margin { margin-bottom: 20px !important; } .medium-margin { margin-bottom: 45px !important; } #right .mod_article { padding: 0; } } @media screen and (min-width: 1200px) { .mod_breadcrumb + .mod_article { margin-top: 45px; } } @media screen { /* ##################################################### */ /* ############## Hintergründe ######################### */ /* ##################################################### */ .white { background: var(--color10); } .light-points { background-color: var(--color10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='62' viewBox='0 0 90 90'%3E%3Ccircle fill='%23F8F8F8' cx='45' cy='45' r='7'/%3E%3Cg fill='%23F8F8F8' fill-opacity='1'%3E%3Ccircle cx='0' cy='90' r='7'/%3E%3Ccircle cx='90' cy='90' r='7'/%3E%3Ccircle cx='90' cy='0' r='7'/%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3C/g%3E%3C/svg%3E"); } .dark-points { background-color: var(--color15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 90 90'%3E%3Ccircle fill='%23111111' cx='45' cy='45' r='7'/%3E%3Cg fill='%23111111' fill-opacity='1'%3E%3Ccircle cx='0' cy='90' r='7'/%3E%3Ccircle cx='90' cy='90' r='7'/%3E%3Ccircle cx='90' cy='0' r='7'/%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3C/g%3E%3C/svg%3E"); } .lightgrey { background: var(--color11); } .black { background: var(--color15); color: var(--color10); } .green { background: var(--color2); background: linear-gradient(340deg, var(--color3) 0%, var(--color2) 65%); color: var(--color10); } .green-points { color: var(--color10); background: var(--color2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='67' height='67' viewBox='0 0 90 90'%3E%3Ccircle fill-opacity='0.25' fill='%230AACAF' cx='45' cy='45' r='7'/%3E%3Cg fill='%230AACAF' fill-opacity='0.25'%3E%3Ccircle cx='0' cy='90' r='7'/%3E%3Ccircle cx='90' cy='90' r='7'/%3E%3Ccircle cx='90' cy='0' r='7'/%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3C/g%3E%3C/svg%3E"); } .lilac { background: var(--color1); background: linear-gradient(340deg, var(--color4) 0%, var(--color1) 65%); color: var(--color10); } .lilac-points { color: var(--color10); background-color: var(--color1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='67' height='67' viewBox='0 0 90 90'%3E%3Ccircle fill-opacity='0.23' fill='%23D1D6FE' cx='45' cy='45' r='7'/%3E%3Cg fill='%23D1D6FE' fill-opacity='0.23'%3E%3Ccircle cx='0' cy='90' r='7'/%3E%3Ccircle cx='90' cy='90' r='7'/%3E%3Ccircle cx='90' cy='0' r='7'/%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3C/g%3E%3C/svg%3E"); } .white, .light-points, .dark-points, .lightgrey, .black, .green, .green-points, .lilac, .lilac-points { padding-top: 45px; padding-bottom: 45px; } } @media screen and (min-width: 917px) { .white, .light-points, .dark-points, .lightgrey, .black, .green, .green-points, .lilac, .lilac-points { padding-top: 70px; padding-bottom: 70px; } } @media screen and (min-width: 1200px) { .white, .light-points, .dark-points, .lightgrey, .black, .green, .green-points, .lilac, .lilac-points { padding-top: 100px; padding-bottom: 100px; } } @media screen and (min-width: 1600px) { .white, .light-points, .dark-points, .lightgrey, .black, .green, .green-points, .lilac, .lilac-points { padding-top: 140px; padding-bottom: 140px; } } @media screen { .dark-points h2, .dark-points h3, .dark-points h4, .dark-points h5, .black h2, .black h3, .black h4, .black h5, .green h2, .green h3, .green h4, .green h5, .green-points h2, .green-points h3, .green-points h4, .green-points h5, .lilac h2, .lilac h3, .lilac h4, .lilac h5, .lilac-points h2, .lilac-points h3, .lilac-points h4, .lilac-points h5 { color: var(--color10); } .dark-points h2:first-child, .dark-points h3:first-child, .dark-points h4:first-child, .dark-points h5:first-child, .black h2:first-child, .black h3:first-child, .black h4:first-child, .black h5:first-child, .green h2:first-child, .green h3:first-child, .green h4:first-child, .green h5:first-child, .green-points h2:first-child, .green-points h3:first-child, .green-points h4:first-child, .green-points h5:first-child, .lilac h2:first-child, .lilac h3:first-child, .lilac h4:first-child, .lilac h5:first-child, .lilac-points h2:first-child, .lilac-points h3:first-child, .lilac-points h4:first-child, .lilac-points h5:first-child { margin-top: 0; } } @media screen { /* ##################################################### */ /* ############## Header ############################### */ /* ##################################################### */ } @media screen and (min-width: 480px) { header { position: sticky; top: 0px; z-index: 299; } header.sticky { background: var(--color10); border-bottom: 1px solid var(--color2); } } @media screen { header .inside { padding-top: 20px; padding-bottom: 20px; gap: 45px 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } header .inside .logo { display: block; width: 100%; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } } @media screen and (min-width: 480px) { header .inside .logo { width: 280px; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } } @media screen and (min-width: 700px) { header .inside .logo { width: 350px; } } @media screen and (min-width: 800px) { header .inside .logo { width: 450px; } } @media screen and (min-width: 1024px) { header .inside .logo { width: 500px; } } @media screen and (min-width: 1200px) { header .inside .logo { width: 550px; } } @media screen { /* ##################################################### */ /* ############## Footer ############################### */ /* ##################################################### */ footer { background: var(--color2); background: linear-gradient(340deg, var(--color3) 0%, var(--color2) 65%); color: var(--color10); } footer .inside > * { padding-left: 20px; padding-right: 20px; } } @media screen and (min-width: 917px) { footer .inside > * { padding-left: 30px; padding-right: 30px; } } @media screen { footer .inside a { color: var(--colo10); } footer .inside a:hover { text-decoration: underline; text-underline-offset: 0.2em; } footer .inside .footer-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; padding-top: 45px; padding-bottom: 45px; text-align: center; } footer .inside .footer-top .logo.smartphone { width: 100%; display: none; } } @media screen and (min-width: 600px) { footer .inside .footer-top .logo.smartphone { display: none; } } @media screen { footer .inside .footer-top .logo.desktop { display: block; width: 250px; margin: 0 auto; } } @media screen and (min-width: 600px) { footer .inside .footer-top .logo.desktop { display: block; width: 250px; margin: 0; } } @media screen and (min-width: 600px) { footer .inside .footer-top { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; text-align: left; } } @media screen and (min-width: 917px) { footer .inside .footer-top { /*justify-content: space-between;*/ gap: 100px; } } @media screen and (min-width: 1200px) { footer .inside .footer-top { /*max-width: 1400px; margin: 0 auto;*/ gap: 140px; } } @media screen { footer .inside .footer-copyright { width: 100%; text-align: center; font-size: 0.85em; } footer .inside .footer-copyright p { padding: 20px 0 30px; margin: 0; } footer .inside .footer-copyright .mummert { color: var(--color11); display: inline-block; margin-top: 0.5em; font-size: 0.9em; } footer .inside .footer-copyright .mummert:hover { color: var(--color10); } } @media screen { /* ##################################################### */ /* ############## Bilder ############################### */ /* ##################################################### */ img { width: 100%; height: auto; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } figure { overflow: hidden; margin: 0 0 1.5em; } figure a { display: block; overflow: hidden; } figure a img { -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } figure:hover a img { -webkit-transform: scale(1.11) rotate(-5deg); transform: scale(1.11) rotate(-5deg); } figure figcaption { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; padding: 0.5em 0 0; color: var(--color12); } } @media screen and (min-width: 480px) { .media--right figure { float: right; margin: 0.4em 0 1.5em 2em; } } @media screen and (min-width: 480px) { .media--left figure { float: left; margin: 0.4em 2em 1.5em 0; } } @media screen and (min-width: 480px) { .media--right figure, .media--left figure { max-width: 250px; } } @media screen and (min-width: 600px) { .media--right figure, .media--left figure { max-width: 350px; } } @media screen and (min-width: 917px) { .media--right figure, .media--left figure { max-width: 400px; } } @media screen and (min-width: 1200px) { .media--right figure, .media--left figure { max-width: 500px; } } @media screen { /* ##################################################### */ /* ############## Bilder ############################### */ /* ##################################################### */ .content-gallery ul { margin: 0; list-style: none; padding: 0; display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } } @media screen and (min-width: 830px) { .content-gallery ul { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } } @media screen and (min-width: 917px) { .content-gallery ul { gap: 30px; } } @media screen and (min-width: 1200px) { .content-gallery ul { gap: 45px; } } @media screen { .content-gallery ul figure { aspect-ratio: 4/3; margin: 0; border-radius: 15px; } .content-gallery ul figure img { height: 100%; -o-object-fit: cover; object-fit: cover; } .content-gallery ul figure:has(figcaption) { aspect-ratio: unset; border-radius: 0; } .content-gallery ul figure:has(figcaption) a { aspect-ratio: 4/3; border-radius: 15px; } .logo-gallery ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0 30px; } } @media screen and (min-width: 917px) { .logo-gallery ul { gap: 0 45px; } } @media screen and (min-width: 1200px) { .logo-gallery ul { gap: 0 70px; } } @media screen { .logo-gallery ul li { width: 100%; max-width: 250px; } .logo-gallery ul figure { aspect-ratio: 16/9; } .logo-gallery ul figure img { -o-object-fit: contain; object-fit: contain; } } @media screen { /* ##################################################### */ /* ############## Lightbox ############################# */ /* ##################################################### */ #glightbox-body .goverlay { background: var(--color10); opacity: 0.8; } #glightbox-body .gslide-media { -webkit-box-shadow: none; box-shadow: none; background: var(--color10); } #glightbox-body .gslide-media img { width: 100%; max-width: 1600px; margin: 0; -webkit-box-shadow: 1px 2px 9px 0 rgba(0, 0, 0, 0.65); box-shadow: 1px 2px 9px 0 rgba(0, 0, 0, 0.65); } #glightbox-body .gslide-description { background: transparent; } #glightbox-body .gslide-description .gdesc-inner { padding: 10px 0 0; } #glightbox-body .gslide-description .gdesc-inner .gslide-title { color: var(--base-heading-color); margin: 0; padding: 0; font-size: 1.2em; font-family: "Barlow"; font-weight: 700; } #glightbox-body .gclose, #glightbox-body .gnext, #glightbox-body .gprev { background: var(--button-dark-background); -webkit-transition: background ease-in-out 0.3s; transition: background ease-in-out 0.3s; border-radius: 10px; width: 45px; height: 45px; } #glightbox-body .gclose:hover, #glightbox-body .gnext:hover, #glightbox-body .gprev:hover { background: var(--button-dark-hover-background); } #glightbox-body .gclose:hover path, #glightbox-body .gnext:hover path, #glightbox-body .gprev:hover path { fill: var(--button-dark-hover-color); } #glightbox-body .gclose svg, #glightbox-body .gnext svg, #glightbox-body .gprev svg { padding: 0; } #glightbox-body .gclose path, #glightbox-body .gnext path, #glightbox-body .gprev path { fill: var(--button-dark-color); -webkit-transition: fill ease-in-out 0.3s; transition: fill ease-in-out 0.3s; } #glightbox-body .gclose.disabled, #glightbox-body .gnext.disabled, #glightbox-body .gprev.disabled { display: none; } /* ##################################################### */ /* ############## Slider ############################### */ /* ##################################################### */ .splide .splide__arrows { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 10px; margin-bottom: 20px; } .splide .splide__arrows button { padding: 8px 10px 10px; margin: 0; border-radius: 11px; } .splide .splide__arrows button svg { fill: var(--button-dark-color); width: 20px; height: 20px; -webkit-transition: fill ease-in-out 0.3s; transition: fill ease-in-out 0.3s; } .splide .splide__arrows button.splide__arrow--prev svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .splide .splide__arrows button:hover svg { fill: var(--button-dark-hover-color); } .splide .splide__arrows button.light svg { fill: var(--button-light-color); } .splide .splide__arrows button.light:hover svg { fill: var(--button-light-hover-color); } } @media screen and (min-width: 917px) { .splide .splide__arrows { margin-bottom: 30px; } } @media screen { .splide .splide__pagination { gap: 10px; margin: 1em 0 0; padding: 0; } .splide .splide__pagination button { margin: 0; padding: 0; width: 20px; height: 20px; background: transparent; border: 2px solid var(--color2); } .splide .splide__pagination button:hover { -webkit-transform: scale(1.15); transform: scale(1.15); } .splide .splide__pagination button.is-active { background: var(--color2); -webkit-transform: scale(1.15); transform: scale(1.15); /*border-radius: 5px;*/ } .dark-points .splide .splide__pagination button, .black .splide .splide__pagination button, .green .splide .splide__pagination button, .green-points .splide .splide__pagination button, .lilac .splide .splide__pagination button, .lilac-points .splide .splide__pagination button { border-color: var(--color10); } .dark-points .splide .splide__pagination button.is-active, .black .splide .splide__pagination button.is-active, .green .splide .splide__pagination button.is-active, .green-points .splide .splide__pagination button.is-active, .lilac .splide .splide__pagination button.is-active, .lilac-points .splide .splide__pagination button.is-active { background: var(--color10); } .introslider .splide__arrows { display: none; } } @media screen and (min-width: 917px) { .introslider .splide__arrows { display: block; } .introslider .splide__arrows button { position: absolute; top: calc(50% - 20px); background: none; opacity: 0; } .introslider .splide__arrows button svg { fill: var(--color13); width: 30px; height: 30px; } .introslider .splide__arrows button.splide__arrow--prev { left: -90px; } .introslider .splide__arrows button.splide__arrow--next { right: -90px; } .introslider .splide__arrows button:hover { background: var(--button-dark-hover-background); } .introslider .splide__arrows button:hover svg { fill: var(--button-dark-hover-color); } .introslider:hover .splide__arrows button { opacity: 1; } .introslider:hover .splide__arrows button.splide__arrow--prev { left: -45px; } .introslider:hover .splide__arrows button.splide__arrow--next { right: -45px; } } @media screen { .introslider .content-text:after { display: none; } .introslider .content-text .rte { max-width: 800px; margin: 0 auto; } .introslider .content-text .rte h2 { font-size: 1.8em; -ms-hyphens: none; hyphens: none; } .introslider .content-text .rte p { width: 90%; font-size: 0.9em; line-height: 1.4; } .introslider .content-text:has(figure) figure { float: none !important; margin: 20px 0 0; height: 250px; } .introslider .content-text:has(figure) figure img { height: 100%; -o-object-fit: contain; object-fit: contain; } .introslider .content-text:has(figure) .rte h2 { margin-top: 45px; } } @media screen and (min-width: 600px) { .introslider .content-text:has(figure) { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 20px 40%; grid-template-columns: 1fr 40%; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .introslider .content-text:has(figure) figure { width: 100%; height: auto; margin: 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .introslider .content-text:has(figure) figure img { height: auto; -o-object-fit: unset; object-fit: unset; } } @media screen and (min-width: 750px) { .introslider .content-text:has(figure) { gap: 30px; } } @media screen { @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) { @media screen and (min-width: 580px) { .newsslider .splide__slide { margin-right: 30px !important; } } @media screen and (min-width: 1400px) { .newsslider .splide__slide { margin-right: 45px !important; } } } } @media screen { /* ##################################################### */ /* ############## Akkordeon ############################ */ /* ##################################################### */ .content-accordion { position: relative; overflow: hidden; border: none; } .content-accordion .handorgel__header { font-size: 1em; } .content-accordion .handorgel__header button { position: relative; padding: 10px 20px; background: transparent; font-weight: 700; color: var(--base-font-color); text-transform: unset; line-height: 1.6; border-radius: 15px; border: 1px solid var(--color12); -webkit-transition: border-color ease-in-out 0.3s; transition: border-color ease-in-out 0.3s; } .content-accordion .handorgel__header button:after { content: "\f067"; font-family: "icomoon-slfg"; font-size: 1.2em; line-height: 1.4; position: absolute; right: 20px; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .content-accordion .handorgel__header button:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--color14); } .content-accordion .handorgel__header button:hover:after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .content-accordion .handorgel__header.handorgel__header--open button { background: rgba(255, 255, 255, 0.2); border-color: var(--color14); border-radius: 15px 15px 0 0; border-bottom: 0; } .content-accordion .handorgel__header.handorgel__header--open button:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .content-accordion .handorgel__header.handorgel__header--open button:hover:after { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .content-accordion .handorgel__content { overflow: hidden; background: rgba(255, 255, 255, 0.2); border: 1px solid var(--color14); border-radius: 0 0 15px 15px; border-top: 0; } .content-accordion .handorgel__content > div { padding: 20px; } .content-accordion .handorgel__content .download-element { padding: 0; } .content-accordion .handorgel__content .download-element:before { display: none; } .content-accordion .handorgel__content + .handorgel__header { margin-top: 30px; } .dark-points .content-accordion .handorgel__header button, .black .content-accordion .handorgel__header button, .green .content-accordion .handorgel__header button, .green-points .content-accordion .handorgel__header button, .lilac .content-accordion .handorgel__header button, .lilac-points .content-accordion .handorgel__header button { border-color: var(--color10); color: var(--color10); -webkit-transition: border-color ease-in-out 0.3s, background-color 0.2s ease; transition: border-color ease-in-out 0.3s, background-color 0.2s ease; } .dark-points .content-accordion .handorgel__header button:hover, .black .content-accordion .handorgel__header button:hover, .green .content-accordion .handorgel__header button:hover, .green-points .content-accordion .handorgel__header button:hover, .lilac .content-accordion .handorgel__header button:hover, .lilac-points .content-accordion .handorgel__header button:hover { border-color: var(--color10); } .dark-points .content-accordion .handorgel__content, .black .content-accordion .handorgel__content, .green .content-accordion .handorgel__content, .green-points .content-accordion .handorgel__content, .lilac .content-accordion .handorgel__content, .lilac-points .content-accordion .handorgel__content { border-color: var(--color10); } /* ##################################################### */ /* ############## Downloads / Hyperlink ################ */ /* ##################################################### */ .content-downloads ul, .enclosure { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2em; list-style: none; padding: 0; } .download-element a, .content-hyperlink a { display: block; position: relative; overflow: hidden; border-radius: 15px; border: 1px solid var(--color12); color: var(--base-font-color); font-weight: 700; padding: 0.5em 70px 0.5em 1em; letter-spacing: 0.25px; text-decoration: none; } .download-element a .size, .content-hyperlink a .size { font-size: 0.75em; color: var(--color6); font-weight: 800; } .download-element a:before, .download-element a:after, .content-hyperlink a:before, .content-hyperlink a:after { font-family: "icomoon-slfg"; position: absolute; right: 0; height: 100%; width: 55px; font-size: 1.2em; padding: 0.3em 0.6em; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .download-element a:before, .content-hyperlink a:before { top: 0; } .download-element a:after, .content-hyperlink a:after { top: -100%; } .download-element a:hover, .content-hyperlink a:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--color14); } .download-element a:hover:before, .content-hyperlink a:hover:before { top: 100%; } .download-element a:hover:after, .content-hyperlink a:hover:after { top: 0; } .download-element a:before { content: "\e924"; } .download-element a:after { content: "\e9c5"; } .content-hyperlink a:before { content: "\e9cb"; } .content-hyperlink a:after { content: "\ea3b"; } .ext-pdf a:before { content: "\eadf"; } .ext-jpg a:before, .ext-png a:before, .ext-gif a:before, .ext-jpeg a:before, .ext-svg a:before { content: "\e927"; } .ext-xls a:before, .ext-xlsx a:before { content: "\eae1"; } .ext-doc a:before, .ext-docx a:before { content: "\ef40"; } .dark-points .download-element a, .dark-points .content-hyperlink a, .black .download-element a, .black .content-hyperlink a, .green .download-element a, .green .content-hyperlink a, .green-points .download-element a, .green-points .content-hyperlink a, .lilac .download-element a, .lilac .content-hyperlink a, .lilac-points .download-element a, .lilac-points .content-hyperlink a { color: var(--color10); border-color: var(--color10); } .dark-points .download-element a:before, .dark-points .download-element a:after, .dark-points .content-hyperlink a:before, .dark-points .content-hyperlink a:after, .black .download-element a:before, .black .download-element a:after, .black .content-hyperlink a:before, .black .content-hyperlink a:after, .green .download-element a:before, .green .download-element a:after, .green .content-hyperlink a:before, .green .content-hyperlink a:after, .green-points .download-element a:before, .green-points .download-element a:after, .green-points .content-hyperlink a:before, .green-points .content-hyperlink a:after, .lilac .download-element a:before, .lilac .download-element a:after, .lilac .content-hyperlink a:before, .lilac .content-hyperlink a:after, .lilac-points .download-element a:before, .lilac-points .download-element a:after, .lilac-points .content-hyperlink a:before, .lilac-points .content-hyperlink a:after { color: var(--color10); } .dark-points .download-element a:hover, .dark-points .content-hyperlink a:hover, .black .download-element a:hover, .black .content-hyperlink a:hover, .green .download-element a:hover, .green .content-hyperlink a:hover, .green-points .download-element a:hover, .green-points .content-hyperlink a:hover, .lilac .download-element a:hover, .lilac .content-hyperlink a:hover, .lilac-points .download-element a:hover, .lilac-points .content-hyperlink a:hover { border-color: var(--color10); } /* ##################################################### */ /* ############## Imagemap ############################# */ /* ##################################################### */ .imagemap:before { content: ""; color: var(--color4); position: absolute; } .imagemap #sachsen { font-size: 0.65em; max-width: 800px; } .imagemap #sachsen a { text-decoration: none; } .imagemap #sachsen a.no-member { pointer-events: none; } .imagemap #sachsen a.no-member .kreisgrenze { fill: var(--color10); } .imagemap #sachsen a.no-member .kreis, .imagemap #sachsen a.no-member .city, .imagemap #sachsen a.no-member .kreisstadt { opacity: 0.5; } .imagemap #sachsen .landesgrenze { stroke: var(--color2); stroke-width: 2; fill: none; stroke-linejoin: round; } .imagemap #sachsen .kreisgrenze { fill: var(--color10); stroke: var(--color2); stroke-width: 1; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; stroke-linejoin: round; } .imagemap #sachsen .city { font-weight: 600; font-size: 0.8em; fill: var(--color2); } .imagemap #sachsen .kreisstadt { fill: var(--color2); } .imagemap #sachsen .kreis { font-weight: 700; font-size: 1.15em; fill: var(--color1); } .imagemap #sachsen a:hover .kreisgrenze { fill: #dedede; } .imagemap #sachsen a.active .kreisgrenze { fill: var(--color2); } .imagemap #sachsen a.active .kreis, .imagemap #sachsen a.active .city, .imagemap #sachsen a.active .kreisstadt { fill: var(--color10); } .dark-points .imagemap #sachsen a.active .kreisgrenze, .black .imagemap #sachsen a.active .kreisgrenze, .green .imagemap #sachsen a.active .kreisgrenze, .green-points .imagemap #sachsen a.active .kreisgrenze, .lilac .imagemap #sachsen a.active .kreisgrenze, .lilac-points .imagemap #sachsen a.active .kreisgrenze { fill: #dedede; } .dark-points .imagemap #sachsen a.active .kreis, .black .imagemap #sachsen a.active .kreis, .green .imagemap #sachsen a.active .kreis, .green-points .imagemap #sachsen a.active .kreis, .lilac .imagemap #sachsen a.active .kreis, .lilac-points .imagemap #sachsen a.active .kreis { fill: var(--color1); } .dark-points .imagemap #sachsen a.active .city, .dark-points .imagemap #sachsen a.active .kreisstadt, .black .imagemap #sachsen a.active .city, .black .imagemap #sachsen a.active .kreisstadt, .green .imagemap #sachsen a.active .city, .green .imagemap #sachsen a.active .kreisstadt, .green-points .imagemap #sachsen a.active .city, .green-points .imagemap #sachsen a.active .kreisstadt, .lilac .imagemap #sachsen a.active .city, .lilac .imagemap #sachsen a.active .kreisstadt, .lilac-points .imagemap #sachsen a.active .city, .lilac-points .imagemap #sachsen a.active .kreisstadt { fill: var(--color2); } .sprachmentoren { position: relative; } .sprachmentoren .infobox { visibility: hidden; display: none; } .sprachmentoren .infobox.active { visibility: visible; display: block; } .sprachmentoren .infobox .mod_listing-table { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .sprachmentoren .blanco.in-active { visibility: hidden; display: none; } /* ##################################################### */ /* ############## News ################################# */ /* ##################################################### */ } @media screen and (min-width: 1200px) { .mod_newslist { max-width: 1400px; margin-left: auto; margin-right: auto; } } @media screen { .mod_newsreader { padding: 0; } .mod_newsreader .layout_full { margin-top: 45px; } .mod_newsreader .layout_full .info { text-align: right; font-style: italic; margin-bottom: 30px; } } @media screen { /* ##################################################### */ /* ############## Events ############################### */ /* ##################################################### */ .mod_eventlist button, .mod_eventlist .button { margin: 0; font-size: 0.8em; padding: 0.75em 1em; border-radius: 10px; } } @media screen and (min-width: 1200px) { .mod_eventlist button, .mod_eventlist .button { border-radius: 15px; } } @media screen { .mod_eventlist #filters-container { margin-bottom: 30px; } .mod_eventlist #filters-container .control-group { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; } .mod_eventlist #fail-message { display: none; opacity: 0; -webkit-transition: opacity ease-in-out 0.3s; transition: opacity ease-in-out 0.3s; } .mod_eventlist #fail-message.show { display: block; opacity: 1; } .mod_eventlist .layout_upcoming { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 10px; padding: 1em 0; position: relative; border-top: 1px solid var(--color11); border-bottom: 1px solid var(--color11); } .mod_eventlist .layout_upcoming p { margin: 0; padding: 0; } .mod_eventlist .layout_upcoming time { line-height: 1; margin-bottom: 0.5em; } .mod_eventlist .layout_upcoming time .daynumber { font-weight: 800; font-size: 2.5em; } .mod_eventlist .layout_upcoming time .month { font-size: 1.2em; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; } .mod_eventlist .layout_upcoming time .enddate { margin-top: 10px; font-size: 0.8em; padding-left: 0.5em; } .mod_eventlist .layout_upcoming .titles .date { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.3px; } .mod_eventlist .layout_upcoming .titles .title { margin: 0.2em 0 0.75em; font-size: 1.4em; } .mod_eventlist .layout_upcoming .titles .title a .subtitle { margin-top: 0.3em; font-size: 0.8em; color: var(--link-color); -webkit-transition: color ease-in-out 0.2s; transition: color ease-in-out 0.2s; } .mod_eventlist .layout_upcoming .titles .title a:hover .subtitle { color: var(--link-hover-color); } .mod_eventlist .layout_upcoming .titles .calendar { color: var(--color3); font-style: italic; } .mod_eventlist .layout_upcoming .actions { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 10px; } } @media screen and (min-width: 600px) { .mod_eventlist .layout_upcoming { -ms-grid-columns: 110px 30px 1fr; grid-template-columns: 110px 1fr; gap: 20px 30px; } .mod_eventlist .layout_upcoming time { margin-bottom: 0; text-align: right; } .mod_eventlist .layout_upcoming time span { display: block; padding: 0; } .mod_eventlist .layout_upcoming .actions { grid-column: 1/-1; gap: 20px; } } @media screen and (min-width: 917px) { .mod_eventlist .layout_upcoming { -ms-grid-columns: 100px 1fr 210px; grid-template-columns: 100px 1fr 210px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .mod_eventlist .layout_upcoming .actions { grid-column: unset; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: right; } } @media screen and (min-width: 1200px) { .mod_eventlist .layout_upcoming { -ms-grid-columns: 110px 1fr 240px; grid-template-columns: 110px 1fr 240px; } } @media screen { .mod_eventlist .layout_upcoming + .layout_upcoming { border-top: none; } .dark-points .mod_eventlist button, .dark-points .mod_eventlist .button, .black .mod_eventlist button, .black .mod_eventlist .button, .green .mod_eventlist button, .green .mod_eventlist .button, .green-points .mod_eventlist button, .green-points .mod_eventlist .button, .lilac .mod_eventlist button, .lilac .mod_eventlist .button, .lilac-points .mod_eventlist button, .lilac-points .mod_eventlist .button { background: var(--button-light-background); color: var(--button-light-color); } .dark-points .mod_eventlist button:hover, .dark-points .mod_eventlist .button:hover, .black .mod_eventlist button:hover, .black .mod_eventlist .button:hover, .green .mod_eventlist button:hover, .green .mod_eventlist .button:hover, .green-points .mod_eventlist button:hover, .green-points .mod_eventlist .button:hover, .lilac .mod_eventlist button:hover, .lilac .mod_eventlist .button:hover, .lilac-points .mod_eventlist button:hover, .lilac-points .mod_eventlist .button:hover { background: var(--button-light-hover-background); color: var(--button-light-hover-color); } .dark-points .mod_eventlist .layout_upcoming .titles .title a .subtitle, .black .mod_eventlist .layout_upcoming .titles .title a .subtitle, .green .mod_eventlist .layout_upcoming .titles .title a .subtitle, .green-points .mod_eventlist .layout_upcoming .titles .title a .subtitle, .lilac .mod_eventlist .layout_upcoming .titles .title a .subtitle, .lilac-points .mod_eventlist .layout_upcoming .titles .title a .subtitle { color: var(--color5); } .dark-points .mod_eventlist .layout_upcoming .titles .title a:hover .subtitle, .black .mod_eventlist .layout_upcoming .titles .title a:hover .subtitle, .green .mod_eventlist .layout_upcoming .titles .title a:hover .subtitle, .green-points .mod_eventlist .layout_upcoming .titles .title a:hover .subtitle, .lilac .mod_eventlist .layout_upcoming .titles .title a:hover .subtitle, .lilac-points .mod_eventlist .layout_upcoming .titles .title a:hover .subtitle { color: var(--link-hover-color); } .dark-points .mod_eventlist .layout_upcoming .titles .calendar, .black .mod_eventlist .layout_upcoming .titles .calendar, .green .mod_eventlist .layout_upcoming .titles .calendar, .green-points .mod_eventlist .layout_upcoming .titles .calendar, .lilac .mod_eventlist .layout_upcoming .titles .calendar, .lilac-points .mod_eventlist .layout_upcoming .titles .calendar { color: var(--color10); } .mod_eventreader { padding: 0; } .mod_eventreader button, .mod_eventreader .button { margin: 0; font-size: 0.8em; padding: 0.75em 1em; border-radius: 10px; } } @media screen and (min-width: 1200px) { .mod_eventreader button, .mod_eventreader .button { border-radius: 15px; } } @media screen { .mod_eventreader .layout_full { margin-top: 45px; } .mod_eventreader .layout_full .infobox { padding-top: 20px; border-top: 1px solid var(--color12); } .mod_eventreader .layout_full .infobox > * { display: -ms-grid; display: grid; -ms-grid-columns: 100px auto; grid-template-columns: 100px auto; } .mod_eventreader .layout_full .infobox > * span:first-child { font-weight: 700; } .mod_eventreader .layout_full .jumpbuttons { padding-bottom: 20px; border-bottom: 1px solid var(--color12); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; } .mod_eventreader .layout_full .enclosure { padding-left: 20px; padding-right: 20px; } .mod_eventreader .anfahrt { text-align: center; padding-top: 70px; padding-bottom: 0; margin-bottom: -1em; } .mod_eventreader .anfahrt p:last-child { margin: 0; position: relative; z-index: 2; } .mod_eventreader .back { display: none; } } @media screen { /* ##################################################### */ /* ############## Map ################################## */ /* ##################################################### */ #map, #map-slfg, #map-ehs { height: 100%; min-height: 400px; font: unset; } #map .maplibregl-control-container button, #map-slfg .maplibregl-control-container button, #map-ehs .maplibregl-control-container button { margin: 0; border-radius: 0; } #map .maplibregl-control-container .maplibregl-ctrl, #map-slfg .maplibregl-control-container .maplibregl-ctrl, #map-ehs .maplibregl-control-container .maplibregl-ctrl { font-size: 0.6em; } #map .maplibregl-popup .maplibregl-popup-tip, #map-slfg .maplibregl-popup .maplibregl-popup-tip, #map-ehs .maplibregl-popup .maplibregl-popup-tip { border-bottom-color: var(--color4); } #map .maplibregl-popup .maplibregl-popup-content, #map-slfg .maplibregl-popup .maplibregl-popup-content, #map-ehs .maplibregl-popup .maplibregl-popup-content { background: var(--color4); color: var(--color10); border-radius: 5px; padding: 15px 25px 15px 15px; font-size: 0.7em; } #map .maplibregl-popup .maplibregl-popup-content p, #map-slfg .maplibregl-popup .maplibregl-popup-content p, #map-ehs .maplibregl-popup .maplibregl-popup-content p { margin: 0; } #map .maplibregl-popup .maplibregl-popup-content p + p, #map-slfg .maplibregl-popup .maplibregl-popup-content p + p, #map-ehs .maplibregl-popup .maplibregl-popup-content p + p { margin-top: 0.5em; } #map .maplibregl-popup .maplibregl-popup-content a, #map-slfg .maplibregl-popup .maplibregl-popup-content a, #map-ehs .maplibregl-popup .maplibregl-popup-content a { color: var(--color5); } #map .maplibregl-popup .maplibregl-popup-content a:hover, #map-slfg .maplibregl-popup .maplibregl-popup-content a:hover, #map-ehs .maplibregl-popup .maplibregl-popup-content a:hover { color: var(--color10); } #map .maplibregl-popup .maplibregl-popup-content .maplibregl-popup-close-button, #map-slfg .maplibregl-popup .maplibregl-popup-content .maplibregl-popup-close-button, #map-ehs .maplibregl-popup .maplibregl-popup-content .maplibregl-popup-close-button { background: var(--button-light-background); color: var(--button-light-color); padding: 0.25em 0.5em 0.3em; margin: 0; border-radius: 5px; font-size: 1.2em; line-height: 1; } #map .maplibregl-popup .maplibregl-popup-content .maplibregl-popup-close-button:hover, #map-slfg .maplibregl-popup .maplibregl-popup-content .maplibregl-popup-close-button:hover, #map-ehs .maplibregl-popup .maplibregl-popup-content .maplibregl-popup-close-button:hover { background: var(--button-light-hover-background); color: var(--button-light-hover-color); } /* ##################################################### */ /* ############## Cookiebar ############################ */ /* ##################################################### */ .contao-cookiebar p { margin-top: 0; } .contao-cookiebar .cc-inner { border-radius: 0 !important; width: 100%; } .contao-cookiebar .cc-inner .cc-group { color: var(--base-font-color); } .contao-cookiebar .cc-inner .cc-cookies { background: none; } .contao-cookiebar .cc-inner .cc-cookies .cc-cookie .cc-cookie-info { background: none; border: none; padding: 0; } .contao-cookiebar .cc-inner .cc-footer.highlight { background: none; } .contao-cookiebar .cc-inner p { font-size: 0.85em; } .contao-cookiebar .cc-inner a { color: var(--link-color); font-size: 0.85em; text-decoration: underline; } .contao-cookiebar .cc-inner a:hover { color: var(--link-hover-color); } .contao-cookiebar .cc-inner button { -webkit-transition: all ease 0.3s; transition: all ease 0.3s; } .contao-cookiebar .cc-inner button.cc-btn { border-radius: 0 !important; background: var(--button-dark-background); color: var(--button-dark-color); border: 1px solid var(--button-dark-border); } .contao-cookiebar .cc-inner button.cc-btn:hover { background-color: var(--button-dark-hover-background); border-color: var(--button-dark-hover-border); color: var(--button-dark-hover-color); } .contao-cookiebar .cc-inner button.cc-btn.success { background-color: var(--button-dark-background); color: var(--button-dark-color); border-color: var(--button-dark-border); } .contao-cookiebar .cc-inner button.cc-btn.success:hover { background-color: var(--button-dark-hover-background); border-color: var(--button-dark-hover-border); } .contao-cookiebar input:checked + label::before { border-color: var(--color1); background: none; } .contao-cookiebar input:checked + label::after { background: var(--color1); } .contao-cookiebar input:disabled + label::before { background: var(--color11); border-color: var(--color12); } .contao-cookiebar input:disabled + label::after { background: var(--color12); } } /* ##################################################### */ /* ############## Print Styles ######################### */ /* ##################################################### */ @media print { /* ############################################################# */ /* ############## https://github.com/BafS/Gutenberg ############ */ /* ############################################################# */ *, *:before, *:after, p:first-letter, div:first-letter, blockquote:first-letter, li:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line { background: transparent !important; -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; } html { font-size: 16px; margin: 0; padding: 0; } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background: #fff !important; color: #000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.5; margin: 0 auto; text-rendering: optimizeLegibility; } p, blockquote, table, ul, ol, dl { margin-bottom: 1.5rem; margin-top: 0; } p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; } h1, h2, h3, h4, h5, h6 { color: #000; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.2; margin-bottom: 0.75rem; margin-top: 0; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } a, a:visited { color: #000; text-decoration: underline; word-wrap: break-word; } table { border-collapse: collapse; } thead { display: table-header-group; } table, th, td { border-bottom: 1px solid #000; } td, th { padding: 8px 16px; page-break-inside: avoid; } code, pre, kbd { border: 1px solid #bbb; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 85%; } code, kbd { padding: 3px; } pre { margin-bottom: 1.5rem; padding: 10px 12px; } pre code, pre kbd { border: 0; } ::-webkit-input-placeholder { color: transparent; } :-moz-placeholder { color: transparent; } ::-moz-placeholder { color: transparent; } :-ms-input-placeholder { color: transparent; } blockquote { border: 0; border-left: 5px solid #bbb; margin-left: 1px; padding: 12px 1.5rem; } [dir=rtl] blockquote { border-left: 0; border-right: 5px solid #bbb; margin-left: 0; margin-right: 1px; } blockquote:first-child { margin-top: 0; } blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child { margin-bottom: 0; } blockquote footer { display: block; font-size: 80%; } img { border: 0; display: block; max-width: 100% !important; vertical-align: middle; } hr { border: 0; border-bottom: 2px solid #bbb; height: 0; margin: 2.25rem 0; padding: 0; } dt { font-weight: bold; } dd { margin: 0; margin-bottom: 0.75rem; } abbr[title], acronym[title] { border: 0; text-decoration: none; } table, blockquote, pre, code, figure, li, hr, ul, ol, a, tr { page-break-inside: avoid; } h2, h3, h4, p, a { orphans: 3; widows: 3; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; page-break-inside: avoid; } h1 + p, h2 + p, h3 + p { page-break-before: avoid; } img { page-break-after: auto; page-break-before: auto; page-break-inside: avoid; } pre { white-space: pre-wrap !important; word-wrap: break-word; } body { padding-bottom: 2.54cm; padding-left: 1.8cm; padding-right: 1.8cm; padding-top: 2.54cm; } a[href^=http]:after, a[href^=ftp]:after { content: " (" attr(href) ")"; font-size: 80%; } a[href$=".jpg"]:after, a[href$=".jpeg"]:after, a[href$=".gif"]:after, a[href$=".png"]:after { display: none; } abbr[title]:after, acronym[title]:after { content: " (" attr(title) ")"; } .page-break, .break-before, .page-break-before { page-break-before: always; } .break-after, .page-break-after { page-break-after: always; } .avoid-break-inside { page-break-inside: avoid; } .no-print { display: none; } a.no-reformat:after { content: ""; } abbr[title].no-reformat:after, acronym[title].no-reformat:after { content: ""; } .no-reformat abbr:after, .no-reformat acronym:after, .no-reformat a:after { content: ""; } #topbar, #header, #navbar, #footer, #left, .custom, .mod_breadcrumb, form, iframe, nav, .slidenews, .centerlink, .aktuelle_va, .testimonial, .accordion-wrapper, .ce_accordion, .ce_downloads, .contao-cookiebar, .gallerie-slider, .back, .imagelink { display: none; } p.label, .description, figure, .ce_table { margin: 1rem 0 0; } figure.float_right, figure.float_left { float: right; margin: 0 0 1rem 1.5rem; max-width: 300px; } .name, .function, .phone { margin: 0; } body { padding: 2rem; } img { max-width: 30% !important; } h2, h3, h4, h5 { padding-top: 1em; text-align: left; } .ce_gallery { margin: 1rem 0; } .ce_gallery ul { list-style: none; display: -ms-grid; display: grid; grid-gap: 30px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); padding: 0; } .ce_gallery figure { margin: 0; } .person, .newsbox, .layout_latest { padding: 1rem 0; margin: 1rem 0 0; border-top: 1px solid #777; border-bottom: 1px solid #777; } .person:after, .newsbox:after, .layout_latest:after { content: ""; display: block; clear: both; } .person figure, .newsbox figure, .layout_latest figure { float: left; margin: 0 1.5rem 1rem 0; max-width: 300px; } .person h2, .newsbox h2, .layout_latest h2 { font-size: 1.5rem; } .person h2 a, .newsbox h2 a, .layout_latest h2 a { text-decoration: none; } .person + .person, .newsbox + .newsbox, .layout_latest + .layout_latest { border-top: none; margin: 0; } }