.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 */ /* Maximale Bildhoehe im Intro-Slider der Startseite */ /* 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; width: 100%; } } @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: calc(100% * var(--bf-schrift, 1)); 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: calc(110% * var(--bf-schrift, 1)); } } @media screen and (min-width: 1200px) { html { font-size: calc(120% * var(--bf-schrift, 1)); } } @media screen and (min-width: 1600px) { html { font-size: calc(130% * var(--bf-schrift, 1)); } } @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; } .grid-2 h3, .grid-3 h3, .grid-4 h3, .grid-x h3 { -ms-hyphens: auto; hyphens: auto; } .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 .widget-text input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 0.75em; height: 0.75em; margin-left: 0.7em; cursor: pointer; opacity: 0.85; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center; background-size: contain; } #topsearch #mainsearch .formbody .widget-text input::-webkit-search-cancel-button:hover { opacity: 1; } #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; display: -ms-grid; display: grid; -ms-grid-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); gap: 0 30px; } #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 figure.image_container { margin: 0 0 20px; max-width: 300px; } #main .mod_search .search_default figure.image_container a { display: block; } #main .mod_search .search_default figure.image_container img { display: block; width: 100%; aspect-ratio: 1; -o-object-fit: cover; object-fit: cover; } } @media screen and (min-width: 600px) { #main .mod_search .search_default:has(> figure.image_container) { -ms-grid-columns: minmax(0, 1fr) 300px; grid-template-columns: minmax(0, 1fr) 300px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } #main .mod_search .search_default:has(> figure.image_container) > :not(figure) { -ms-grid-column: 1; grid-column: 1; } #main .mod_search .search_default:has(> figure.image_container) figure.image_container { -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 20; grid-row: 1/span 20; margin-bottom: 0; } } @media screen { #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; scroll-padding-top: calc(var(--header-height, 114px) + 20px); } .invisible { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } a.invisible:focus-visible { width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; z-index: 400; padding: 0.5em 1em !important; background: var(--color6) !important; color: var(--color10) !important; border: 0 !important; border-radius: 10px !important; font-size: 0.9rem !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: normal !important; text-decoration: none !important; text-transform: none !important; outline: 3px solid var(--color2); outline-offset: 2px; } .skip-link:focus-visible { position: fixed !important; top: 12px; left: 12px; } } @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; } } @media screen and (max-width: 839px) { nav.kopfzeile li a .text, nav.kopfzeile li button .text { display: none; } } @media screen { 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; /* Themenbloecke: je Hauptpunkt eine Spalte mit seinen Unterseiten */ /* Hauptpunkte ohne eigene Spalte (Aktuelles, Veranstaltungen) -- steht seit 09.10.2026 ueber den Themenspalten. Gestaltet wie die Spaltenueberschriften (.mm-theme h3), damit sie als gleichrangige Hauptpunkte lesbar sind, statt als umrandete Knoepfe. Davor je ein Zeichen in einem hellen Kaestchen (Radius 10px), darunter eine feine Linie als Abschluss zu den Spalten. :not(.invisible) laesst den Sprunglink versteckt. */ /* Instagram-Leiste am Ende des Menues (HTML-Modul "Menü - Instagram"). Eigene Trennlinie, damit sie auch ohne .mm-extra abgesetzt steht; folgt sie auf .mm-extra, uebernimmt deren Linie die Trennung. */ } } @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 .mm-themen { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 30px; margin: 0; } } @media screen and (min-width: 600px) { #meganav .mm-themen { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 917px) { #meganav .mm-themen { -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: repeat(3, 1fr); gap: 45px 30px; } } @media screen and (min-width: 1200px) { #meganav .mm-themen { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } } @media screen { #meganav .mm-theme.home { display: none; } #meganav .mm-theme h3 { margin: 0 0 10px; font-size: 1.2em; line-height: 1.2; } #meganav .mm-theme h3 a { color: var(--color15); text-decoration: none; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #meganav .mm-theme h3 a:hover { color: var(--color2); } #meganav .mm-theme h3 strong { color: var(--color4); } #meganav .mm-theme ul { list-style: none; margin: 0; padding: 0; } #meganav .mm-theme ul a, #meganav .mm-theme ul strong { display: block; font-size: 0.95em; text-decoration: none; padding: 0.42em 0; border-bottom: 1px solid var(--color11); -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #meganav .mm-theme ul a { color: var(--color14); } #meganav .mm-theme ul a:hover { color: var(--color2); padding-left: 0.4em; } #meganav .mm-theme ul strong { color: var(--color4); } #meganav .mm-theme ul ul { display: contents; } #meganav .mm-theme ul ul li { display: contents; } #meganav .mm-theme ul ul a:before, #meganav .mm-theme ul ul strong:before { content: "└ "; color: var(--color2); } #meganav .mm-extra { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px 30px; margin: 0 0 30px; padding: 0 0 30px; border-bottom: 1px solid var(--color11); } #meganav .mm-extra .service, #meganav .mm-extra ul, #meganav .mm-extra li { display: contents; } #meganav .mm-extra a:not(.invisible), #meganav .mm-extra strong { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.55em; font-family: "Barlow"; font-size: 1.2em; font-weight: 700; line-height: 1.2; text-decoration: none; color: var(--color15); -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #meganav .mm-extra a:not(.invisible) .icon, #meganav .mm-extra strong .icon { display: -ms-grid; display: grid; place-items: center; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 2em; height: 2em; border-radius: 10px; font-size: 0.8em; background: var(--color7); color: var(--color4); -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #meganav .mm-extra a:not(.invisible):hover { color: var(--color2); } #meganav .mm-extra a:not(.invisible):hover .icon { background: var(--color2); color: var(--color10); } #meganav .mm-extra strong { color: var(--color4); } } @media screen and (min-width: 917px) { #meganav .mm-extra { margin-bottom: 45px; } } @media screen { #meganav .mm-instagram { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 45px; padding-top: 30px; border-top: 1px solid var(--color11); } #meganav .mm-instagram a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; width: 100%; max-width: 520px; padding: 0.8em 1.2em 0.8em 0.8em; border: 1px solid var(--color11); border-radius: 15px; text-decoration: none; color: var(--color14); background: linear-gradient(110deg, rgba(10, 172, 175, 0.08) 0%, rgba(73, 81, 145, 0.08) 100%); -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #meganav .mm-instagram a:hover { border-color: var(--color2); } #meganav .mm-instagram a:hover .mm-instagram__icon { -webkit-transform: rotate(-6deg) scale(1.06); transform: rotate(-6deg) scale(1.06); } #meganav .mm-instagram a:hover .mm-instagram__pfeil { -webkit-transform: translateX(4px); transform: translateX(4px); } #meganav .mm-instagram__icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -ms-grid; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; font-size: 1.5em; color: var(--color10); background: linear-gradient(135deg, var(--color2) 0%, var(--color4) 100%); -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #meganav .mm-instagram__text { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.15em; } #meganav .mm-instagram__titel { font-weight: 700; line-height: 1.2; color: var(--color15); } #meganav .mm-instagram__profil { font-size: 0.9em; line-height: 1.2; color: var(--color13); } #meganav .mm-instagram__pfeil { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 1.2em; color: var(--color2); -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #meganav .mm-extra + .mm-instagram { margin-top: 30px; padding-top: 0; border-top: 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 { /* ##################################################### */ /* ############## Hauptnavigation (Klick-Menü) ######### */ /* ##################################################### */ /* ---------- Umschalten ---------- */ #mobilnav:not(.mm-menu) { display: none; } .kopfzeile .mobilnav-knopf { display: none; } #hauptnav { display: none; } body:not(.megamenue) #meganav, body:not(.megamenue) .kopfzeile .menue-knopf { display: none; } } @media screen and (max-width: 1199px) { body:not(.megamenue) .kopfzeile .mobilnav-knopf { display: block; } } @media screen and (min-width: 1200px) { body:not(.megamenue) #hauptnav { display: block; } } @media screen { body.megamenue #mobilnav { display: none !important; } } @media screen { /* ---------- Desktop ---------- */ html { scroll-padding-top: calc(var(--kopf-sichtbar, var(--header-height, 114px)) + 20px); } } @media screen and (min-width: 1200px) { body:not(.megamenue) header { top: calc(-1 * var(--kopf-versatz, 0px)); background: var(--color10); border-bottom: 1px solid var(--color2); } body:not(.megamenue) header .inside { row-gap: 10px; padding-bottom: 0; } } @media screen { #hauptnav { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: 100%; margin: 0; } #hauptnav > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 0 4px; margin: 0 0 0 -0.8em; padding: 0; list-style: none; } #hauptnav li { margin: 0; padding: 0; } #hauptnav > ul > li { position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; } #hauptnav .hauptnav__knopf, #hauptnav .hauptnav__link { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; 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; gap: 0.45em; margin: 0; padding: 0.85em 0.8em; border: 0; border-radius: 10px 10px 0 0; background: transparent; font-family: "Barlow"; font-size: 0.9em; font-weight: 600; line-height: 1.2; color: var(--color15); text-decoration: none; text-transform: none; letter-spacing: normal; white-space: nowrap; cursor: pointer; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #hauptnav .hauptnav__knopf .icon, #hauptnav .hauptnav__link .icon { font-size: 0.7em; color: var(--color2); -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #hauptnav .hauptnav__knopf.aktiv, #hauptnav .hauptnav__link.aktiv { color: var(--color3); } #hauptnav .hauptnav__knopf:hover, #hauptnav .hauptnav__link:hover { background: var(--color2); color: var(--color10); } #hauptnav .hauptnav__knopf:hover .icon, #hauptnav .hauptnav__link:hover .icon { color: var(--color10); } #hauptnav strong.hauptnav__link { cursor: default; } #hauptnav .hauptnav__knopf[aria-expanded=true] { background: var(--color2); color: var(--color10); } #hauptnav .hauptnav__knopf[aria-expanded=true] .icon { color: var(--color10); -webkit-transform: rotate(180deg); transform: rotate(180deg); } #hauptnav .hauptnav__untermenue { display: none; position: absolute; top: calc(100% + 1px); left: 0; z-index: 10; width: -webkit-max-content; width: -moz-max-content; width: max-content; min-width: max(100%, 240px); max-width: 340px; padding: 0.5em; background: var(--color10); border: 1px solid var(--color11); border-top: 0; border-radius: 0 0 15px 15px; -webkit-box-shadow: 0 12px 30px rgba(34, 38, 69, 0.14); box-shadow: 0 12px 30px rgba(34, 38, 69, 0.14); } #hauptnav .hauptnav__untermenue ul { margin: 0; padding: 0; list-style: none; } #hauptnav .hauptnav__untermenue a, #hauptnav .hauptnav__untermenue strong { display: block; padding: 0.55em 0.8em; border-radius: 10px; font-size: 0.95em; line-height: 1.3; text-decoration: none; color: var(--color14); -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #hauptnav .hauptnav__untermenue a:hover { background: var(--color2); color: var(--color10); } #hauptnav .hauptnav__untermenue strong { color: var(--color3); } #hauptnav .hauptnav__untermenue .uebersicht { margin-bottom: 0.35em; padding-bottom: 0.35em; border-bottom: 1px solid var(--color11); } #hauptnav .hauptnav__untermenue .uebersicht a, #hauptnav .hauptnav__untermenue .uebersicht strong { font-weight: 600; } #hauptnav .hauptnav__untermenue .uebersicht a { color: var(--color15); } #hauptnav .hauptnav__untermenue .uebersicht a:hover { color: var(--color10); } #hauptnav > ul > li:last-child .hauptnav__untermenue { left: auto; right: 0; } #hauptnav .ist-offen > .hauptnav__untermenue { display: block; } #hauptnav:not(.bereit) .hat-untermenue:focus-within > .hauptnav__untermenue { display: block; } } @media screen { /* ---------- Mobil (mmenu) ---------- */ .kopfzeile .mobilnav-trigger { height: 100%; } .mm-menu--offcanvas.mm-menu--position-left-front, .mm-menu--offcanvas.mm-menu--position-right-front { z-index: 400; } .mm-wrapper.mm-wrapper--opened .mm-wrapper__blocker { z-index: 399; } .mm-menu { --mm-color-background: var(--color10); --mm-color-text: var(--color14); --mm-color-text-dimmed: var(--color13); --mm-color-border: var(--color11); --mm-color-icon: var(--color2); --mm-color-background-highlight: var(--color7); --mm-color-background-emphasis: var(--color7); --mm-color-focusring: var(--color2); --mm-listitem-size: 50px; --mm-navbar-size: 56px; font-family: "Barlow"; } .mm-menu .mm-navbar { font-family: "Barlow"; font-weight: 700; color: var(--color15); } .mm-menu .mm-listitem { font-size: 1.05em; } .mm-menu .level_1 > .mm-listitem > .mm-listitem__text { font-weight: 600; color: var(--color15); } .mm-menu .uebersicht .mm-listitem__text { font-weight: 600; color: var(--color15); } .mm-menu .mm-listitem--selected > .mm-listitem__text { background: var(--color7); color: var(--color4); } .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 { 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: 4px; 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 .category span { padding: 0.2em 0.55em; border: 1px solid rgba(7, 134, 136, 0.35); border-radius: 10px; } .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; } .linkbox-2.download:after { content: "\e9c5"; } .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); } /* ##################################################### */ /* ############## 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: 30px; margin-bottom: 30px; 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: 30px; } } @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: 50px; } } @media screen and (min-width: 1200px) { .mod_article, .layout_full { margin-top: 100px; } .mod_article > *, .layout_full > * { margin-bottom: 70px; max-width: 1400px; margin: 0 auto 70px; } .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: 100px; margin-bottom: 100px; } .mod_article > *, .layout_full > * { margin: 0 auto 100px; } } @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: 30px; padding-bottom: 30px; } } @media screen and (min-width: 917px) { .white, .light-points, .dark-points, .lightgrey, .black, .green, .green-points, .lilac, .lilac-points { padding-top: 45px; padding-bottom: 45px; } } @media screen and (min-width: 1200px) { .white, .light-points, .dark-points, .lightgrey, .black, .green, .green-points, .lilac, .lilac-points { padding-top: 70px; padding-bottom: 70px; } } @media screen and (min-width: 1600px) { .white, .light-points, .dark-points, .lightgrey, .black, .green, .green-points, .lilac, .lilac-points { padding-top: 100px; padding-bottom: 100px; } } @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%; max-width: 450px; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } } @media screen and (min-width: 600px) { header .inside .logo { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; width: auto; min-width: 0; max-width: 450px; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } } @media screen and (min-width: 1024px) { header .inside .logo { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 500px; max-width: none; } } @media screen and (min-width: 1200px) { header .inside .logo { width: 550px; } } @media screen { header .inside .logo img { display: block; width: 100%; height: auto; } } @media screen and (max-width: 1199px) { #container { padding-top: 40px; } } @media screen { /* ##################################################### */ /* ############## Footer ############################### */ /* ##################################################### */ footer { background: var(--color2); 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 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 45px 1fr 45px 1fr; grid-template-columns: repeat(3, 1fr); gap: 45px; } } @media screen and (min-width: 1200px) { footer .inside .footer-top { max-width: 1400px; margin-left: auto; margin-right: auto; } } @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 (Swiper) ###################### */ /* ##################################################### */ .content-swiper > .swiper { padding-left: 0; padding-right: 0; } .content-swiper .swiper-slide { height: auto; } .content-swiper .slider-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; } .content-swiper .slider-arrows button { padding: 8px 10px 10px; margin: 0; border-radius: 11px; } .content-swiper .slider-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; } .content-swiper .slider-arrows button.prev svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .content-swiper .slider-arrows button:hover svg { fill: var(--button-dark-hover-color); } .content-swiper .slider-arrows button.light svg { fill: var(--button-light-color); } .content-swiper .slider-arrows button.light:hover svg { fill: var(--button-light-hover-color); } } @media screen and (min-width: 917px) { .content-swiper .slider-arrows { margin-bottom: 30px; } } @media screen { .content-swiper .swiper-pagination { position: static; 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; gap: 10px; margin: 1em 0 0; padding: 0 0 3px; } .content-swiper .swiper-pagination .swiper-pagination-bullet { width: 20px; height: 20px; margin: 0; padding: 0; opacity: 1; background: transparent; border: 2px solid var(--color2); border-radius: 50%; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .content-swiper .swiper-pagination .swiper-pagination-bullet:hover { -webkit-transform: scale(1.15); transform: scale(1.15); } .content-swiper .swiper-pagination .swiper-pagination-bullet-active { background: var(--color2); -webkit-transform: scale(1.15); transform: scale(1.15); } .dark-points .content-swiper .swiper-pagination-bullet, .black .content-swiper .swiper-pagination-bullet, .green .content-swiper .swiper-pagination-bullet, .green-points .content-swiper .swiper-pagination-bullet, .lilac .content-swiper .swiper-pagination-bullet, .lilac-points .content-swiper .swiper-pagination-bullet { border-color: var(--color10); } .dark-points .content-swiper .swiper-pagination-bullet-active, .black .content-swiper .swiper-pagination-bullet-active, .green .content-swiper .swiper-pagination-bullet-active, .green-points .content-swiper .swiper-pagination-bullet-active, .lilac .content-swiper .swiper-pagination-bullet-active, .lilac-points .content-swiper .swiper-pagination-bullet-active { background: var(--color10); } .mod_article > .introslider { margin-bottom: 20px; } .introslider .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .introslider .swiper-slide > .content-text { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .introslider .content-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .introslider .content-text .rte { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } .introslider .content-text .slide-button { margin-top: auto; margin-bottom: 0; } .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) .rte { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } .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; max-height: 400px; -o-object-fit: contain; object-fit: contain; -o-object-position: left; object-position: left; } } @media screen and (min-width: 750px) { .introslider .content-text:has(figure) { gap: 30px; } } @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"; } /* ##################################################### */ /* ############## Download-Kacheln ##################### */ /* ##################################################### */ .downloads-kacheln ul, .news-kacheln ul { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; } } @media screen and (min-width: 600px) { .downloads-kacheln ul, .news-kacheln ul { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } @media screen { .downloads-kacheln .download-kachel, .downloads-kacheln .news-kachel, .news-kacheln .download-kachel, .news-kacheln .news-kachel { display: -webkit-box; display: -ms-flexbox; display: flex; } .downloads-kacheln .download-kachel a:before, .downloads-kacheln .news-kachel a:before, .news-kacheln .download-kachel a:before, .news-kacheln .news-kachel a:before { content: none; } .downloads-kacheln .download-kachel a, .downloads-kacheln .news-kachel a, .news-kacheln .download-kachel a, .news-kacheln .news-kachel a { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; position: relative; overflow: hidden; padding: 0; border: 1px solid var(--color12); border-radius: 15px; color: var(--base-font-color); text-decoration: none; font-weight: 400; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .downloads-kacheln .download-kachel a:after, .downloads-kacheln .news-kachel a:after, .news-kacheln .download-kachel a:after, .news-kacheln .news-kachel a:after { content: "\e9c5"; font-family: "icomoon-slfg"; position: absolute; top: 50%; right: 10px; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 1em; border-radius: 50%; background: var(--color2); color: var(--color10); opacity: 0; -webkit-transform: translateY(-50%) scale(0.5); transform: translateY(-50%) scale(0.5); -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .downloads-kacheln .download-kachel a:hover, .downloads-kacheln .news-kachel a:hover, .news-kacheln .download-kachel a:hover, .news-kacheln .news-kachel a:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--color14); } .downloads-kacheln .download-kachel a:hover:after, .downloads-kacheln .news-kachel a:hover:after, .news-kacheln .download-kachel a:hover:after, .news-kacheln .news-kachel a:hover:after { opacity: 1; -webkit-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); } .downloads-kacheln .download-kachel a:hover .kachel-bild img, .downloads-kacheln .news-kachel a:hover .kachel-bild img, .news-kacheln .download-kachel a:hover .kachel-bild img, .news-kacheln .news-kachel a:hover .kachel-bild img { -webkit-transform: scale(1.06); transform: scale(1.06); } .downloads-kacheln .kachel-bild, .news-kacheln .kachel-bild { -webkit-box-flex: 0; -ms-flex: 0 0 64px; flex: 0 0 64px; overflow: hidden; background: var(--color11); } .downloads-kacheln .kachel-bild figure, .news-kacheln .kachel-bild figure { margin: 0; height: 100%; } .downloads-kacheln .kachel-bild img, .news-kacheln .kachel-bild img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; -webkit-transition: -webkit-transform ease-in-out 0.3s; transition: -webkit-transform ease-in-out 0.3s; transition: transform ease-in-out 0.3s; transition: transform ease-in-out 0.3s, -webkit-transform ease-in-out 0.3s; } .downloads-kacheln .kachel-bild.ohne-bild, .news-kacheln .kachel-bild.ohne-bild { position: relative; } .downloads-kacheln .kachel-bild.ohne-bild:before, .news-kacheln .kachel-bild.ohne-bild:before { content: "\e924"; font-family: "icomoon-slfg"; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 1.6em; color: var(--color12); } .downloads-kacheln .kachel-text, .news-kacheln .kachel-text { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; 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-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.2em; min-height: 76px; padding: 0.5em 44px 0.5em 0.85em; } .downloads-kacheln .kachel-titel, .news-kacheln .kachel-titel { font-weight: 700; line-height: 1.2; font-size: 0.85em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .downloads-kacheln .kachel-meta, .news-kacheln .kachel-meta { font-size: 0.7em; font-weight: 800; line-height: 1.2; letter-spacing: 0.25px; color: var(--color6); } .downloads-kacheln .ext-pdf .kachel-bild.ohne-bild:before, .news-kacheln .ext-pdf .kachel-bild.ohne-bild:before { content: "\eadf"; } .downloads-kacheln .ext-jpg .kachel-bild.ohne-bild:before, .downloads-kacheln .ext-jpeg .kachel-bild.ohne-bild:before, .downloads-kacheln .ext-png .kachel-bild.ohne-bild:before, .downloads-kacheln .ext-gif .kachel-bild.ohne-bild:before, .downloads-kacheln .ext-svg .kachel-bild.ohne-bild:before, .news-kacheln .ext-jpg .kachel-bild.ohne-bild:before, .news-kacheln .ext-jpeg .kachel-bild.ohne-bild:before, .news-kacheln .ext-png .kachel-bild.ohne-bild:before, .news-kacheln .ext-gif .kachel-bild.ohne-bild:before, .news-kacheln .ext-svg .kachel-bild.ohne-bild:before { content: "\e927"; } .downloads-kacheln .ext-xls .kachel-bild.ohne-bild:before, .downloads-kacheln .ext-xlsx .kachel-bild.ohne-bild:before, .news-kacheln .ext-xls .kachel-bild.ohne-bild:before, .news-kacheln .ext-xlsx .kachel-bild.ohne-bild:before { content: "\eae1"; } .downloads-kacheln .ext-doc .kachel-bild.ohne-bild:before, .downloads-kacheln .ext-docx .kachel-bild.ohne-bild:before, .news-kacheln .ext-doc .kachel-bild.ohne-bild:before, .news-kacheln .ext-docx .kachel-bild.ohne-bild:before { content: "\ef40"; } .dark-points .downloads-kacheln .download-kachel a, .black .downloads-kacheln .download-kachel a, .green .downloads-kacheln .download-kachel a, .green-points .downloads-kacheln .download-kachel a, .lilac .downloads-kacheln .download-kachel a, .lilac-points .downloads-kacheln .download-kachel a { color: var(--color10); border-color: var(--color10); } .dark-points .downloads-kacheln .download-kachel a .kachel-meta, .black .downloads-kacheln .download-kachel a .kachel-meta, .green .downloads-kacheln .download-kachel a .kachel-meta, .green-points .downloads-kacheln .download-kachel a .kachel-meta, .lilac .downloads-kacheln .download-kachel a .kachel-meta, .lilac-points .downloads-kacheln .download-kachel a .kachel-meta { color: var(--color10); } .dark-points .downloads-kacheln .download-kachel a:hover, .black .downloads-kacheln .download-kachel a:hover, .green .downloads-kacheln .download-kachel a:hover, .green-points .downloads-kacheln .download-kachel a:hover, .lilac .downloads-kacheln .download-kachel a:hover, .lilac-points .downloads-kacheln .download-kachel a:hover { border-color: var(--color10); } .news-kacheln { margin-top: 20px; } } @media screen and (min-width: 600px) { .news-kacheln ul { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } @media screen { .news-kacheln .news-kachel a { background: var(--color10); } .news-kacheln .news-kachel a:after { content: "\ea3c"; } .news-kacheln .news-kachel a:hover { background: var(--color10); } .news-kacheln .kachel-bild { -ms-flex-preferred-size: 90px; flex-basis: 90px; } .news-kacheln .kachel-bild img { -o-object-position: center; object-position: center; } .news-kacheln .kachel-teaser { font-size: 0.75em; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-termine { margin-bottom: 45px; } .news-termine ul { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; } } @media screen and (min-width: 917px) { .news-termine ul { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } @media screen { .news-termine .termin { display: -webkit-box; display: -ms-flexbox; display: flex; } .news-termine .termin a { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 20px; position: relative; padding: 0.7em 48px 0.7em 0.7em; border: 1px solid var(--color12); border-radius: 15px; background: var(--color10); color: var(--base-font-color); text-decoration: none; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .news-termine .termin a:hover { border-color: var(--color2); } .news-termine .termin a:hover .termin__pfeil { -webkit-transform: translate(4px, -50%); transform: translate(4px, -50%); } .news-termine .termin__datum { -webkit-box-flex: 0; -ms-flex: 0 0 72px; flex: 0 0 72px; 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-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0.55em 0; border-radius: 10px; background: var(--color3); color: var(--color10); line-height: 1; text-align: center; } .news-termine .termin__tag { font-family: "Barlow"; font-size: 1.9em; font-weight: 700; } .news-termine .termin__monat { margin-top: 0.25em; font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .news-termine .termin__jahr { margin-top: 0.2em; font-size: 0.7em; } .news-termine .termin__text { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; 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-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.2em; } .news-termine .termin__wann { font-size: 0.75em; font-weight: 800; letter-spacing: 0.25px; color: var(--color3); } .news-termine .termin__titel { font-weight: 700; line-height: 1.25; color: var(--color15); } .news-termine .termin__unter { font-size: 0.85em; line-height: 1.3; color: var(--color13); } .news-termine .termin__pfeil { position: absolute; top: 50%; right: 16px; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.2em; color: var(--color2); -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .news-termine .empty { margin: 0; font-style: italic; color: var(--color13); } .news-termine .termine-mehr { margin-top: 16px; } .news-termine .termine-mehr.ist-zu { display: none; } .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); } } @media screen { /* ##################################################### */ /* ############## 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, .imagemap #sachsen a:focus-visible .kreisgrenze { fill: var(--color1); } .imagemap #sachsen a:hover .kreis, .imagemap #sachsen a:hover .city, .imagemap #sachsen a:hover .kreisstadt, .imagemap #sachsen a:focus-visible .kreis, .imagemap #sachsen a:focus-visible .city, .imagemap #sachsen a:focus-visible .kreisstadt { fill: var(--color10); } .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 { /* ##################################################### */ /* ############## Banner mit Claim (Startseite) ######## */ /* ##################################################### */ /* Element "Banner mit Claim" (rsce_banner), Varianten band, box, blase. Gemeinsam: Claim weiß auf Petrol, Knopf weiß, Bilder überblenden (Klasse ist-aktiv). Mobil steht das Bild über dem Text. */ .claim-banner__claim { margin: 0 0 0.45em; font-size: clamp(1.8rem, 3.2vw, 3rem); line-height: 1.05; color: var(--color10); -ms-hyphens: manual; hyphens: manual; } .claim-banner__satz { margin: 0 0 1.2em; color: var(--color10); max-width: 34em; } .claim-banner__knopf { margin: 0; } .claim-banner__knopf .button { margin: 0; background: var(--color10); color: var(--color3); } .claim-banner__knopf .button:hover { background: var(--color6); color: var(--color10); } .claim-banner__text { position: relative; z-index: 2; color: var(--color10); } .claim-banner__flaeche { position: relative; overflow: hidden; } .claim-banner__motiv { position: absolute; z-index: 0; height: auto; -webkit-transform: rotate(-8deg) scaleX(-1); transform: rotate(-8deg) scaleX(-1); pointer-events: none; } .claim-banner__motiv path { fill: rgba(255, 255, 255, 0.14); } } @media screen and (max-width: 916px) { .claim-banner .claim-banner__innen .claim-banner__flaeche { min-height: 210px; } .claim-banner .claim-banner__innen .claim-banner__flaeche .claim-banner__motiv { width: min(45%, 165px); right: 6%; bottom: 14%; } } @media screen { .claim-banner__bilder { position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--color11); } .claim-banner__bild { position: absolute; inset: 0; opacity: 0; -webkit-transition: opacity 1.2s ease-in-out; transition: opacity 1.2s ease-in-out; } .claim-banner__bild.ist-aktiv { opacity: 1; } .claim-banner__bild figure, .claim-banner__bild picture { display: block; height: 100%; margin: 0; } .claim-banner__bild img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } } @media screen and (prefers-reduced-motion: reduce) { .claim-banner__bild { -webkit-transition: none; transition: none; } } @media screen { /* Variante 1 "band": über die volle Breite, Farbfläche links bis etwa zur Mitte, Text in der Flucht des Inhalts (1400er-Spalte), Bild rechts bis zum Rand. Vorbild baugrund-dresden.de. */ .mod_article > .claim-banner--band { max-width: none; padding-left: 0; padding-right: 0; } .claim-banner--band .claim-banner__motiv { right: 5%; bottom: 8%; width: 44%; } #container:has(.mod_article:first-of-type > .claim-banner--band:first-child) { padding-top: 0; } .mod_article:first-of-type:has(> .claim-banner--band:first-child) { margin-top: 0; } .claim-banner--band .claim-banner__innen { display: -ms-grid; display: grid; background: var(--color2); } .claim-banner--band .claim-banner__innen .claim-banner__flaeche { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 30px 20px 45px; } } @media screen and (min-width: 917px) { .claim-banner--band .claim-banner__innen { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; min-height: 420px; } .claim-banner--band .claim-banner__innen .claim-banner__flaeche { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; padding: 45px 45px 45px max(30px, (100vw - 1400px) / 2 + 30px); } .claim-banner--band .claim-banner__innen .claim-banner__bilder { aspect-ratio: auto; } } @media screen and (min-width: 1200px) { .claim-banner--band .claim-banner__innen { min-height: 480px; } } @media screen { /* Variante 2 "box": Box mit runden Ecken in Inhaltsbreite; links die Farbfläche mit Text und Sprechblase, rechts das Bild. */ .claim-banner--box .claim-banner__innen { display: -ms-grid; display: grid; overflow: hidden; border-radius: 15px; background: var(--color2); } .claim-banner--box .claim-banner__innen .claim-banner__flaeche { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 30px 30px 45px; } .claim-banner--box .claim-banner__innen .claim-banner__motiv { right: 5%; bottom: 7%; width: 58%; } } @media screen and (min-width: 917px) { .claim-banner--box .claim-banner__innen { -ms-grid-columns: 5fr 7fr; grid-template-columns: 5fr 7fr; min-height: 400px; } .claim-banner--box .claim-banner__innen .claim-banner__flaeche { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; padding: 45px; } .claim-banner--box .claim-banner__innen .claim-banner__bilder { aspect-ratio: auto; } } @media screen and (min-width: 1200px) { .claim-banner--box .claim-banner__innen { min-height: 460px; } } @media screen { /* Variante "blase": große Sprechblase (Petrol) mit Kreis (Flieder), daneben die Bilder im Format 4:3 -- erster Entwurf nach Kundenwunsch. */ .claim-banner--blase .claim-banner__innen { display: -ms-grid; display: grid; gap: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media screen and (min-width: 917px) { .claim-banner--blase .claim-banner__innen { -ms-grid-columns: 5fr 45px 7fr; grid-template-columns: 5fr 7fr; gap: 45px; } } @media screen and (min-width: 1400px) { .claim-banner--blase .claim-banner__innen { max-width: 1400px; margin-left: auto; margin-right: auto; } } @media screen { .claim-banner--blase .claim-banner__innen .claim-banner__form { position: relative; aspect-ratio: 87.3/70.9; max-width: 560px; width: 100%; margin: 0 auto; } .claim-banner--blase .claim-banner__innen .claim-banner__kreis { position: absolute; z-index: 0; top: -7%; right: -3%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--color1); } .claim-banner--blase .claim-banner__innen .claim-banner__blase { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; } .claim-banner--blase .claim-banner__innen .claim-banner__blase path { fill: var(--color2); } .claim-banner--blase .claim-banner__innen .claim-banner__text { position: absolute; top: 0; left: 11%; right: 11%; height: 78%; 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-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .claim-banner--blase .claim-banner__innen .claim-banner__bilder { aspect-ratio: 4/3; border-radius: 15px; } } @media screen { /* ##################################################### */ /* ############## Platzhalter (nur Staging) ############ */ /* ##################################################### */ /* Inhalte, die der Kunde noch liefert (Über uns, Materialien usw.): Klasse "platzhalter" am Element. Gestrichelter orangefarbener Rahmen, damit sie auf Staging nicht als fertiger Inhalt durchgehen. Vor dem Livegang darf kein Element mehr diese Klasse haben. */ .platzhalter { outline: 2px dashed var(--color8); outline-offset: 6px; border-radius: 10px; } /* ##################################################### */ /* ############## Rubriken auf Wissenswertes ########### */ /* ##################################################### */ /* Vier Karten je Rubrik, der Rest hinter "Weitere Beiträge" (mod_newslist_rubrik). Die weiteren Karten stecken in einem eigenen Container, der sich mit display: contents ins Raster einfügt. */ .rubrik-liste .rubrik-liste__mehr { display: contents; } .rubrik-liste .rubrik-liste__mehr.ist-zu { display: none; } .rubrik-liste__knopf { margin: 30px 0 0; text-align: center; } .rubrik-liste__knopf .button { margin: 0; } .mod_newslist + .content-headline, .mod_newslist + * + .content-headline { margin-top: 45px; } /* ##################################################### */ /* ############## Kategoriefilter Nachrichten ########## */ /* ##################################################### */ /* Aufbau wie bei evjusa: Beschriftung ueber dem Auswahlfeld, Felder in einer Zeile. Aktuell nur ein Feld, das Raster traegt aber weitere mit. */ .news-filter { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 10px 20px; margin-bottom: 30px; /* Die Felder kommen aus je einem Modul, dessen Huelle sonst das Flex-Kind waere. display: contents reicht die Felder in die Leiste durch. */ } .news-filter .mod_newscategories, .news-filter .mod_newsmenu { display: contents; } .news-filter__feld { display: -ms-grid; display: grid; gap: 4px; -webkit-box-flex: 1; -ms-flex: 1 1 220px; flex: 1 1 220px; max-width: 420px; } .news-filter label { font-family: "Barlow"; font-weight: 700; font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color13); } .news-filter { /* Groesse und Rahmen kommen aus forms.scss. Dort steht appearance: none, deshalb fehlt der Aufklapp-Pfeil -- den nur hier nachruesten. */ } .news-filter__select { padding-right: 2.4em; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%230aacaf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9em center; background-size: 0.8em auto; } .news-filter__select:hover { border-color: var(--color2); } /* Stichwortfeld (Inhaltselement "Template", news_suche): Formular reicht Beschriftung und Zeile per display: contents ins Raster des Felds durch, Lupe als Knopf rechts im Feld. Platzhalter sichtbar (forms.scss blendet Platzhalter sonst für die schwebenden Beschriftungen aus). */ .news-filter__suche .news-suche { display: contents; } .news-filter__suche .news-suche__zeile { position: relative; } .news-filter__suche input[type=search] { max-width: none; padding-right: 2.8em; } .news-filter__suche input[type=search]::-webkit-input-placeholder { color: var(--color12); } .news-filter__suche input[type=search]::-moz-placeholder { color: var(--color12); } .news-filter__suche input[type=search]:-ms-input-placeholder { color: var(--color12); } .news-filter__suche input[type=search]::-ms-input-placeholder { color: var(--color12); } .news-filter__suche input[type=search]::placeholder { color: var(--color12); } .news-filter__suche input[type=search]:hover { border-color: var(--color2); } .news-filter__suche input[type=search]::-webkit-search-cancel-button { cursor: pointer; } .news-filter__suche .news-suche__knopf { position: absolute; top: 50%; right: 0.25em; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -ms-grid; display: grid; place-items: center; width: 2.2em; height: 2.2em; margin: 0; padding: 0; border-radius: 8px; background: transparent; color: var(--color2); font-size: 1em; letter-spacing: normal; } .news-filter__suche .news-suche__knopf:hover, .news-filter__suche .news-suche__knopf:focus-visible { background: var(--color2); color: var(--color10); } .news-suche__ergebnis { margin: 0 0 30px; font-weight: 600; } .news-suche__ergebnis a { margin-left: 0.6em; font-weight: 400; } /* ##################################################### */ /* ############## Blaetterung ########################## */ /* ##################################################### */ /* Contao-Standardmarkup: nav.pagination > p + ul > li > a|strong. Alles in einer zentrierten Zeile, p und Liste als Flex-Geschwister. */ .pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px 20px; margin-top: 45px; } .pagination p { margin: 0; font-size: 0.85em; color: var(--color13); } .pagination ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; margin: 0; padding: 0; list-style: none; } .pagination li { margin: 0; } .pagination a, .pagination strong { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: 2.4em; padding: 0.45em 0.7em; border-radius: 10px; font-size: 0.9em; font-weight: 600; line-height: 1; text-decoration: none; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .pagination a { color: var(--color14); border: 1px solid var(--color12); } .pagination a:hover { background: var(--color2); border-color: var(--color2); color: var(--color10); } .pagination { /* aktuelle Seite */ } .pagination strong.active { background: var(--color2); border: 1px solid var(--color2); color: var(--color10); } .pagination { /* Zurueck/Vorwaerts brauchen keine Mindestbreite */ } .pagination .first a, .pagination .previous a, .pagination .next a, .pagination .last a { min-width: 0; } .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; } /* ##################################################### */ /* ############## 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); } /* ##################################################### */ /* ############## Bewegung (Entwurf 09.10.2026) ######## */ /* ##################################################### */ /* ---------- 1. Sprechblasen-Kante am Footer ---------- */ body:not(.bewegung-aus) footer { position: relative; z-index: 5; } body:not(.bewegung-aus) #container { padding-bottom: 20px; } .footer-blasen { display: none; } body:not(.bewegung-aus) .footer-blasen { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1; height: 74px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; pointer-events: none; overflow: hidden; overflow: clip visible; clip-path: inset(-200px 0 0 0); } body:not(.bewegung-aus) .footer-blasen:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 22px; background: var(--color2); pointer-events: none; } body:not(.bewegung-aus) .footer-blasen .blase { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; z-index: 2; width: 84px; margin: 0 -16px -20px; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; pointer-events: auto; } body:not(.bewegung-aus) .footer-blasen .blase svg { display: block; width: 100%; height: auto; fill: var(--color2); } body:not(.bewegung-aus) .footer-blasen .blase.klein { width: 64px; margin-bottom: -18px; } body:not(.bewegung-aus) .footer-blasen .blase.gross { width: 104px; margin-bottom: -24px; } body:not(.bewegung-aus) .footer-blasen .blase.gespiegelt svg { -webkit-transform: scaleX(-1); transform: scaleX(-1); } body:not(.bewegung-aus) .footer-blasen .blase.hoch { margin-bottom: -10px; } body:not(.bewegung-aus) .footer-blasen .blase.tief { margin-bottom: -28px; } body:not(.bewegung-aus) .footer-blasen .blase.flieder { z-index: 1; margin-bottom: -8px; } body:not(.bewegung-aus) .footer-blasen .blase.flieder svg { fill: var(--color1); } @-webkit-keyframes blase-wippen { 0%, 100% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -webkit-transform: translateY(-9px) rotate(-3deg); transform: translateY(-9px) rotate(-3deg); } } @keyframes blase-wippen { 0%, 100% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -webkit-transform: translateY(-9px) rotate(-3deg); transform: translateY(-9px) rotate(-3deg); } } body:not(.bewegung-aus) footer:hover .footer-blasen .blase, body:not(.bewegung-aus) .footer-blasen:hover .blase { -webkit-animation: blase-wippen 1.6s ease-in-out infinite; animation: blase-wippen 1.6s ease-in-out infinite; -webkit-animation-delay: calc(var(--i, 0) * -0.13s); animation-delay: calc(var(--i, 0) * -0.13s); } body:not(.bewegung-aus) .footer-blasen.wippt-einmal .blase { -webkit-animation: blase-wippen 1.6s ease-in-out 2; animation: blase-wippen 1.6s ease-in-out 2; -webkit-animation-delay: calc(var(--i, 0) * 0.06s); animation-delay: calc(var(--i, 0) * 0.06s); } /* ---------- 2. Lese-Blase ("Nach oben") ---------- */ } @media screen and (min-width: 917px) { body:not(.bewegung-aus) #to-top.lese-blase { width: 66px; padding: 0; background: transparent; border-radius: 0; bottom: 18px; right: 18px; -webkit-transform: translateY(var(--versatz, 0px)) rotate(calc((var(--fortschritt, 0) - 0.5) * 14deg)); transform: translateY(var(--versatz, 0px)) rotate(calc((var(--fortschritt, 0) - 0.5) * 14deg)); -webkit-transition: opacity ease-in-out 0.3s, visibility ease-in-out 0.3s, -webkit-transform cubic-bezier(0.25, 1.6, 0.5, 1) 0.6s; transition: opacity ease-in-out 0.3s, visibility ease-in-out 0.3s, -webkit-transform cubic-bezier(0.25, 1.6, 0.5, 1) 0.6s; transition: opacity ease-in-out 0.3s, visibility ease-in-out 0.3s, transform cubic-bezier(0.25, 1.6, 0.5, 1) 0.6s; transition: opacity ease-in-out 0.3s, visibility ease-in-out 0.3s, transform cubic-bezier(0.25, 1.6, 0.5, 1) 0.6s, -webkit-transform cubic-bezier(0.25, 1.6, 0.5, 1) 0.6s; } body:not(.bewegung-aus) #to-top.lese-blase:hover { bottom: 18px; background: transparent; } body:not(.bewegung-aus) #to-top.lese-blase:hover .lese-blase__rand { stroke: var(--color2); } } @media screen { body:not(.bewegung-aus) #to-top.lese-blase svg { display: block; width: 100%; height: auto; overflow: visible; } body:not(.bewegung-aus) #to-top.lese-blase .lese-blase__grund { fill: var(--color10); } body:not(.bewegung-aus) #to-top.lese-blase .lese-blase__fuellung { fill: var(--color2); transform-box: fill-box; -webkit-transform: translateY(calc((1 - var(--fortschritt, 0)) * 100%)); transform: translateY(calc((1 - var(--fortschritt, 0)) * 100%)); -webkit-transition: -webkit-transform linear 0.15s; transition: -webkit-transform linear 0.15s; transition: transform linear 0.15s; transition: transform linear 0.15s, -webkit-transform linear 0.15s; } body:not(.bewegung-aus) #to-top.lese-blase .lese-blase__rand { fill: none; stroke: var(--color1); stroke-width: 3; -webkit-transition: stroke ease-in-out 0.3s; transition: stroke ease-in-out 0.3s; } body:not(.bewegung-aus) #to-top.lese-blase span { position: absolute; left: 0; right: 0; top: 36%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; font-size: 1.35em; color: var(--color6); pointer-events: none; } .lese-blase svg { display: none; } body:not(.bewegung-aus) .lese-blase svg { display: block; } } @media screen { /* ---------- Bewegung reduzieren ---------- */ } @media screen and (prefers-reduced-motion: reduce) { .footer-blasen .blase { -webkit-animation: none !important; animation: none !important; } #to-top.lese-blase { -webkit-transform: none !important; transform: none !important; } } @media screen { html.bf-animationen-aus #to-top.lese-blase { -webkit-transform: none !important; transform: none !important; } } @media screen { /* ##################################################### */ /* ############## Werkzeugleiste Barrierefreiheit ###### */ /* ##################################################### */ .toolbar-bf { display: none; } .bf-js .toolbar-bf { --bf-breite: min(270px, calc(100vw - 110px)); position: fixed; left: 0; bottom: 16px; z-index: 297; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-transform: translateX(calc(-1 * var(--bf-breite))); transform: translateX(calc(-1 * var(--bf-breite))); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } } @media screen and (min-width: 917px) { .bf-js .toolbar-bf { --bf-breite: 270px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; bottom: auto; top: calc(var(--header-height, 114px) + 30px); } } @media screen { .bf-js .toolbar-bf.is-open { -webkit-transform: none; transform: none; } .toolbar-bf-toggle { position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: 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; width: 48px; height: 48px; margin: 0; padding: 0; background: var(--color4); color: var(--color10); border: 0; border-radius: 0 15px 15px 0; -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15); cursor: pointer; -webkit-transition: background-color ease-in-out 0.2s; transition: background-color ease-in-out 0.2s; } .toolbar-bf-toggle .ico { width: 26px; height: 26px; } .toolbar-bf-toggle:hover, .toolbar-bf-toggle[aria-expanded=true] { background: var(--color6); } .toolbar-bf-toggle:focus-visible { outline: 3px solid var(--color4); outline-offset: 2px; } .toolbar-bf-tooltip { display: none; } } @media screen and (min-width: 917px) { .toolbar-bf-tooltip { display: block; position: absolute; left: calc(100% + 8px); top: 50%; padding: 6px 10px; background: var(--color6); color: var(--color10); border-radius: 10px; font-size: 0.75rem; font-weight: 600; line-height: 1.3; letter-spacing: normal; text-transform: none; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; -webkit-transform: translate(-4px, -50%); transform: translate(-4px, -50%); -webkit-transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s, -webkit-transform 0.2s ease-in-out; transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s, -webkit-transform 0.2s ease-in-out; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0s linear 0.2s; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0s linear 0.2s, -webkit-transform 0.2s ease-in-out; } .toolbar-bf-tooltip:before { content: ""; position: absolute; right: 100%; top: 50%; border: 5px solid transparent; border-right-color: var(--color6); -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @media screen { .toolbar-bf-toggle[aria-expanded=false]:is(:hover, :focus-visible) > .toolbar-bf-tooltip { opacity: 1; visibility: visible; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition-delay: 0s; transition-delay: 0s; } .toolbar-bf-panel { width: var(--bf-breite); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px; background: var(--color10); border-top: 3px solid var(--color4); border-radius: 0 0 15px 0; -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15); visibility: hidden; -webkit-transition: visibility 0s linear 0.3s; transition: visibility 0s linear 0.3s; } } @media screen and (min-width: 917px) { .toolbar-bf-panel { max-height: calc(100dvh - var(--header-height, 114px) - 30px - 16px); } } @media screen { .is-open > .toolbar-bf-panel { visibility: visible; -webkit-transition-delay: 0s; transition-delay: 0s; } .toolbar-bf-titel { margin: 0 0 0.6em; font-size: 1rem; font-weight: 700; color: var(--color4); } .toolbar-bf-liste { list-style: none; margin: 0; padding: 0; display: -ms-grid; display: grid; gap: 4px; } .toolbar-bf-liste li { margin: 0; padding: 0; } .toolbar-bf-liste li:before { content: none; } .toolbar-bf-liste button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 0.5em; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px; background: var(--color11); color: var(--color14); border: 0; border-radius: 10px; font-size: 0.85rem; font-weight: 600; line-height: 1.3; letter-spacing: normal; text-transform: none; text-align: left; cursor: pointer; } .toolbar-bf-liste button:hover { background: var(--color7); color: var(--color14); } .toolbar-bf-liste button:focus-visible { outline: 3px solid var(--color4); outline-offset: -3px; } .toolbar-bf-liste button[aria-pressed=true] { background: var(--color4); color: var(--color10); } .toolbar-bf-liste button[aria-pressed=true]:after { content: "an"; font-size: 0.75rem; font-weight: 700; } .toolbar-bf-liste button[aria-disabled=true] { opacity: 0.45; cursor: default; } .toolbar-bf-liste button[aria-disabled=true]:hover { background: var(--color11); } .toolbar-bf-status { min-height: 1.4em; margin: 0.5em 0 4px; font-size: 0.75rem; color: var(--color13); } .toolbar-bf-erklaerung { font-size: 0.75rem; font-weight: 600; color: var(--link-color); } } @media screen { /* ##################################################### */ /* ############## Wirkung der Schalter ################# */ /* ##################################################### */ html.bf-schrift :is(#main, #footer) { overflow-wrap: anywhere; -ms-hyphens: auto; hyphens: auto; } html.bf-kontrast body { --color1: #495191; --color2: #05686b; --color3: #044e50; --color5: #b9c0f5; --color12: #767676; --color13: #3d3d3d; --color14: #000000; --base-font-color: #000000; --base-heading-color: #000000; --link-color: #2e3466; --link-hover-color: #000000; } html.bf-kontrast a:focus-visible, html.bf-kontrast button:focus-visible { outline: 3px solid #000; outline-offset: 2px; } html.bf-graustufen { -webkit-filter: grayscale(1); filter: grayscale(1); } html.bf-links :is(#main, #footer, .mod_breadcrumb) a:not(.button) { text-decoration: underline !important; text-underline-offset: 0.18em; } html.bf-animationen-aus { scroll-behavior: auto; } html.bf-animationen-aus *, html.bf-animationen-aus *:before, html.bf-animationen-aus *:after { -webkit-animation-duration: 0.001ms !important; animation-duration: 0.001ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; -webkit-transition-duration: 0.001ms !important; transition-duration: 0.001ms !important; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; } html.bf-animationen-aus .wow { visibility: visible !important; -webkit-animation-name: none !important; animation-name: none !important; } /* ---------- Auslöser oben rechts (05.11.2026) ---------- */ .kopfzeile .bf-knopf { display: none; } .bf-js .kopfzeile .bf-knopf { display: block; } .bf-kopf-icon svg { display: block; width: 1em; height: 1em; margin: 0 auto; } .bf-js .toolbar-bf { left: auto; right: 0; bottom: auto; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; top: var(--bf-oben, calc(var(--header-height, 114px) + 12px)); -webkit-transform: translateX(100%); transform: translateX(100%); } .bf-js .toolbar-bf.is-open { -webkit-transform: none; transform: none; } .bf-js .toolbar-bf-toggle { display: none; } .toolbar-bf-panel { border-radius: 0 0 0 15px; max-height: calc(100dvh - var(--bf-oben, 130px) - 16px); } } /* ##################################################### */ /* ############## 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; } .toolbar-bf { display: none !important; } }