body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both} .download-element a{padding:3px 6px 3px 22px;background:url(../../assets/contao/images/iconPLAIN.svg) left center no-repeat}ul.enclosure{padding-left:0}li.download-element{list-style-type:none}.ext-xl a{background-image:url(../../assets/contao/images/iconXL.svg)}.ext-xls a{background-image:url(../../assets/contao/images/iconXLS.svg)}.ext-xlsx a{background-image:url(../../assets/contao/images/iconXLSX.svg)}.ext-hqx a{background-image:url(../../assets/contao/images/iconHQX.svg)}.ext-cpt a{background-image:url(../../assets/contao/images/iconCPT.svg)}.ext-bin a{background-image:url(../../assets/contao/images/iconBIN.svg)}.ext-doc a{background-image:url(../../assets/contao/images/iconDOC.svg)}.ext-docx a{background-image:url(../../assets/contao/images/iconDOCX.svg)}.ext-word a{background-image:url(../../assets/contao/images/iconWORD.svg)}.ext-cto a{background-image:url(../../assets/contao/images/iconCTO.svg)}.ext-dms a{background-image:url(../../assets/contao/images/iconDMS.svg)}.ext-lha a{background-image:url(../../assets/contao/images/iconLHA.svg)}.ext-lzh a{background-image:url(../../assets/contao/images/iconLZH.svg)}.ext-exe a{background-image:url(../../assets/contao/images/iconEXE.svg)}.ext-class a{background-image:url(../../assets/contao/images/iconCLASS.svg)}.ext-so a{background-image:url(../../assets/contao/images/iconSO.svg)}.ext-sea a{background-image:url(../../assets/contao/images/iconSEA.svg)}.ext-dll a{background-image:url(../../assets/contao/images/iconDLL.svg)}.ext-oda a{background-image:url(../../assets/contao/images/iconODA.svg)}.ext-pdf a{background-image:url(../../assets/contao/images/iconPDF.svg)}.ext-ai a{background-image:url(../../assets/contao/images/iconAI.svg)}.ext-eps a{background-image:url(../../assets/contao/images/iconEPS.svg)}.ext-ps a{background-image:url(../../assets/contao/images/iconPS.svg)}.ext-pps a{background-image:url(../../assets/contao/images/iconPPS.svg)}.ext-ppt a{background-image:url(../../assets/contao/images/iconPPT.svg)}.ext-pptx a{background-image:url(../../assets/contao/images/iconPPTX.svg)}.ext-smi a{background-image:url(../../assets/contao/images/iconSMI.svg)}.ext-smil a{background-image:url(../../assets/contao/images/iconSMIL.svg)}.ext-mif a{background-image:url(../../assets/contao/images/iconMIF.svg)}.ext-odc a{background-image:url(../../assets/contao/images/iconODC.svg)}.ext-odf a{background-image:url(../../assets/contao/images/iconODF.svg)}.ext-odg a{background-image:url(../../assets/contao/images/iconODG.svg)}.ext-odi a{background-image:url(../../assets/contao/images/iconODI.svg)}.ext-odp a{background-image:url(../../assets/contao/images/iconODP.svg)}.ext-ods a{background-image:url(../../assets/contao/images/iconODS.svg)}.ext-odt a{background-image:url(../../assets/contao/images/iconODT.svg)}.ext-wbxml a{background-image:url(../../assets/contao/images/iconWBXML.svg)}.ext-wmlc a{background-image:url(../../assets/contao/images/iconWMLC.svg)}.ext-dmg a{background-image:url(../../assets/contao/images/iconDMG.svg)}.ext-dcr a{background-image:url(../../assets/contao/images/iconDCR.svg)}.ext-dir a{background-image:url(../../assets/contao/images/iconDIR.svg)}.ext-dxr a{background-image:url(../../assets/contao/images/iconDXR.svg)}.ext-dvi a{background-image:url(../../assets/contao/images/iconDVI.svg)}.ext-gtar a{background-image:url(../../assets/contao/images/iconGTAR.svg)}.ext-inc a{background-image:url(../../assets/contao/images/iconINC.svg)}.ext-php a{background-image:url(../../assets/contao/images/iconPHP.svg)}.ext-php3 a{background-image:url(../../assets/contao/images/iconPHP3.svg)}.ext-php4 a{background-image:url(../../assets/contao/images/iconPHP4.svg)}.ext-php5 a{background-image:url(../../assets/contao/images/iconPHP5.svg)}.ext-phtml a{background-image:url(../../assets/contao/images/iconPHTML.svg)}.ext-phps a{background-image:url(../../assets/contao/images/iconPHPS.svg)}.ext-js a{background-image:url(../../assets/contao/images/iconJS.svg)}.ext-psd a{background-image:url(../../assets/contao/images/iconPSD.svg)}.ext-rar a{background-image:url(../../assets/contao/images/iconRAR.svg)}.ext-fla a{background-image:url(../../assets/contao/images/iconFLA.svg)}.ext-swf a{background-image:url(../../assets/contao/images/iconSWF.svg)}.ext-sit a{background-image:url(../../assets/contao/images/iconSIT.svg)}.ext-tar a{background-image:url(../../assets/contao/images/iconTAR.svg)}.ext-tgz a{background-image:url(../../assets/contao/images/iconTGZ.svg)}.ext-xhtml a{background-image:url(../../assets/contao/images/iconXHTML.svg)}.ext-xht a{background-image:url(../../assets/contao/images/iconXHT.svg)}.ext-zip a{background-image:url(../../assets/contao/images/iconZIP.svg)}.ext-m4a a{background-image:url(../../assets/contao/images/iconM4A.svg)}.ext-mp3 a{background-image:url(../../assets/contao/images/iconMP3.svg)}.ext-wma a{background-image:url(../../assets/contao/images/iconWMA.svg)}.ext-mpeg a{background-image:url(../../assets/contao/images/iconMPEG.svg)}.ext-wav a{background-image:url(../../assets/contao/images/iconWAV.svg)}.ext-ogg a{background-image:url(../../assets/contao/images/iconOGG.svg)}.ext-mid a{background-image:url(../../assets/contao/images/iconMID.svg)}.ext-midi a{background-image:url(../../assets/contao/images/iconMIDI.svg)}.ext-aif a{background-image:url(../../assets/contao/images/iconAIF.svg)}.ext-aiff a{background-image:url(../../assets/contao/images/iconAIFF.svg)}.ext-aifc a{background-image:url(../../assets/contao/images/iconAIFC.svg)}.ext-ram a{background-image:url(../../assets/contao/images/iconRAM.svg)}.ext-rm a{background-image:url(../../assets/contao/images/iconRM.svg)}.ext-rpm a{background-image:url(../../assets/contao/images/iconRPM.svg)}.ext-ra a{background-image:url(../../assets/contao/images/iconRA.svg)}.ext-bmp a{background-image:url(../../assets/contao/images/iconBMP.svg)}.ext-gif a{background-image:url(../../assets/contao/images/iconGIF.svg)}.ext-jpeg a{background-image:url(../../assets/contao/images/iconJPEG.svg)}.ext-jpg a{background-image:url(../../assets/contao/images/iconJPG.svg)}.ext-jpe a{background-image:url(../../assets/contao/images/iconJPE.svg)}.ext-png a{background-image:url(../../assets/contao/images/iconPNG.svg)}.ext-tiff a{background-image:url(../../assets/contao/images/iconTIFF.svg)}.ext-tif a{background-image:url(../../assets/contao/images/iconTIF.svg)}.ext-svg a{background-image:url(../../assets/contao/images/iconSVG.svg)}.ext-svgz a{background-image:url(../../assets/contao/images/iconSVGZ.svg)}.ext-webp a{background-image:url(../../assets/contao/images/iconWEBP.svg)}.ext-avif a{background-image:url(../../assets/contao/images/iconAVIF.svg)}.ext-heic a{background-image:url(../../assets/contao/images/iconHEIC.svg)}.ext-jxl a{background-image:url(../../assets/contao/images/iconJXL.svg)}.ext-eml a{background-image:url(../../assets/contao/images/iconEML.svg)}.ext-asp a{background-image:url(../../assets/contao/images/iconASP.svg)}.ext-css a{background-image:url(../../assets/contao/images/iconCSS.svg)}.ext-scss a{background-image:url(../../assets/contao/images/iconSCSS.svg)}.ext-less a{background-image:url(../../assets/contao/images/iconLESS.svg)}.ext-html a{background-image:url(../../assets/contao/images/iconHTML.svg)}.ext-htm a{background-image:url(../../assets/contao/images/iconHTM.svg)}.ext-md a{background-image:url(../../assets/contao/images/iconMD.svg)}.ext-shtml a{background-image:url(../../assets/contao/images/iconSHTML.svg)}.ext-txt a{background-image:url(../../assets/contao/images/iconTXT.svg)}.ext-text a{background-image:url(../../assets/contao/images/iconTEXT.svg)}.ext-log a{background-image:url(../../assets/contao/images/iconLOG.svg)}.ext-rtx a{background-image:url(../../assets/contao/images/iconRTX.svg)}.ext-rtf a{background-image:url(../../assets/contao/images/iconRTF.svg)}.ext-xml a{background-image:url(../../assets/contao/images/iconXML.svg)}.ext-xsl a{background-image:url(../../assets/contao/images/iconXSL.svg)}.ext-mp4 a{background-image:url(../../assets/contao/images/iconMP4.svg)}.ext-m4v a{background-image:url(../../assets/contao/images/iconM4V.svg)}.ext-mov a{background-image:url(../../assets/contao/images/iconMOV.svg)}.ext-wmv a{background-image:url(../../assets/contao/images/iconWMV.svg)}.ext-webm a{background-image:url(../../assets/contao/images/iconWEBM.svg)}.ext-qt a{background-image:url(../../assets/contao/images/iconQT.svg)}.ext-rv a{background-image:url(../../assets/contao/images/iconRV.svg)}.ext-avi a{background-image:url(../../assets/contao/images/iconAVI.svg)}.ext-ogv a{background-image:url(../../assets/contao/images/iconOGV.svg)}.ext-movie a{background-image:url(../../assets/contao/images/iconMOVIE.svg)} .mod_visitors .invisible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; float: left; width:0px; height:0px; } .mobile_menu{position:fixed;z-index:100;display:none}.mobile_menu .inner{height:100%;background:#000;overflow-y:scroll}.mobile_menu.active.position_left{box-shadow:2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_top{box-shadow:0 2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_right{box-shadow:-2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_bottom{box-shadow:0 -2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.no_shadow{box-shadow:none!important}.mobile_menu_trigger{display:none}.mobile_menu_wrapper{position:relative;width:100%;overflow:hidden}.mobile_menu_overlay{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:99}.mobile_menu_overlay.background{background:rgba(0,0,0,.5)}.mobile_menu li.submenu_hide>ul{display:none}.mobile_menu li.submenu_show>ul{display:block}body.ie8 .mobile_menu,body.ie8 .mobile_menu_trigger,body.ie9 .mobile_menu,body.ie9 .mobile_menu_trigger{display:none!important} .rsts-main,.rsts-main *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.rsts-header,.rsts-footer,.rsts-thumbs-header,.rsts-thumbs-footer{overflow:hidden}.rsts-view,.rsts-thumbs-view{position:relative}@media print{.rsts-view,.rsts-thumbs-view{position:static}}.rsts-crop,.rsts-thumbs-crop{position:relative;overflow:hidden}@media print{.rsts-crop,.rsts-thumbs-crop{position:static;overflow:visible;width:auto !important;height:auto !important;transform:none !important}}.rsts-slides,.rsts-slide,.rsts-thumbs-slides,.rsts-thumbs-slide{position:absolute;left:0;top:0}@media print{.rsts-slides,.rsts-slide,.rsts-thumbs-slides,.rsts-thumbs-slide{position:static;width:auto !important;height:auto !important;transform:none !important}.rsts-slides.rsts-slide-image img,.rsts-slides.rsts-slide-video img,.rsts-slides.rsts-thumbs-slide-image img,.rsts-slides.rsts-thumbs-slide-video img,.rsts-slide.rsts-slide-image img,.rsts-slide.rsts-slide-video img,.rsts-slide.rsts-thumbs-slide-image img,.rsts-slide.rsts-thumbs-slide-video img,.rsts-thumbs-slides.rsts-slide-image img,.rsts-thumbs-slides.rsts-slide-video img,.rsts-thumbs-slides.rsts-thumbs-slide-image img,.rsts-thumbs-slides.rsts-thumbs-slide-video img,.rsts-thumbs-slide.rsts-slide-image img,.rsts-thumbs-slide.rsts-slide-video img,.rsts-thumbs-slide.rsts-thumbs-slide-image img,.rsts-thumbs-slide.rsts-thumbs-slide-video img{width:100% !important;height:auto !important;margin:0 !important}}.rsts-slide,.rsts-thumbs-slide{overflow:hidden}@media print{.rsts-slide,.rsts-thumbs-slide{position:static}}.rsts-video-iframe,.rsts-thumbs-video-iframe{position:absolute;top:0;left:0;width:100%;height:100%}.rsts-type-slide .rsts-view,.rsts-thumbs-type-slide .rsts-thumbs-view{cursor:url("../../bundles/rocksolidslider/img/openhand.cur"),default;cursor:-webkit-grab;cursor:-moz-grab;cursor:-ms-grab;cursor:-o-grab;cursor:grab}.rsts-type-slide.rsts-dragging .rsts-view,.rsts-thumbs-type-slide.rsts-thumbs-dragging .rsts-thumbs-view{cursor:url("../../bundles/rocksolidslider/img/closedhand.cur"),default;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:-ms-grabbing;cursor:-o-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rsts-type-slide.rsts-dragging-disabled .rsts-view,.rsts-thumbs-type-slide.rsts-thumbs-dragging-disabled .rsts-thumbs-view{cursor:auto}@media print{.rsts-nav,.rsts-prev,.rsts-next,.rsts-overlay-prev,.rsts-overlay-next,.rsts-progress,.rsts-thumbs-nav,.rsts-thumbs-prev,.rsts-thumbs-next,.rsts-thumbs-overlay-prev,.rsts-thumbs-overlay-next,.rsts-thumbs-progress{display:none !important}} .rsts-skin-default.rsts-main{position:relative}.rsts-skin-default.rsts-type-fade .rsts-slide{background-color:#fff}.rsts-skin-default .rsts-caption{position:absolute;top:20px;left:20px;margin-right:20px;padding:5px 10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#fff;background-color:#000;background-color:rgba(0,0,0,0.4);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transform:translate(0, -20px);-moz-transform:translate(0, -20px);-ms-transform:translate(0, -20px);-o-transform:translate(0, -20px);transform:translate(0, -20px);-webkit-transition:opacity 0.5s,-webkit-transform 0.5s;-moz-transition:opacity 0.5s,-moz-transform 0.5s;-o-transition:opacity 0.5s,-o-transform 0.5s;transition:opacity 0.5s,transform 0.5s}.rsts-skin-default .rsts-active .rsts-caption{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0)}.rsts-skin-default .rsts-prev,.rsts-skin-default .rsts-next,.rsts-skin-default .rsts-video-play,.rsts-skin-default .rsts-video-stop,.rsts-skin-default .rsts-thumbs-prev,.rsts-skin-default .rsts-thumbs-next{position:absolute;right:55px;bottom:15px;overflow:hidden;width:30px;height:30px;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;outline:none;line-height:0;text-align:center;text-decoration:none;text-indent:-9999px;-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAilBMVEUHBwg/QEF5enp5ensCAwQHCAhzdHUAAQEGBwh8fX37+/svMDBub3COjo9yc3NtbW709fWvsLDm5uba2trR0dEuLi6Pj4/Q0NDl5eXZ2toFBgfz8/MuLy/09PT29vb8/Pz6+vp7e3x0dXZzdHT4+Pj39/f9/v3+/v79/f3///8EBQb5+fkAAAD19fVMP6q+AAAALnRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8hTP8QAAAJ1JREFUeNrV0lkPwiAMAOB53zrva2xOxQm0///vWZ4a1o3EN20gNPnSlFASRKVQIS2KFHPKaPvcH8St8WesXYzddVMIZn3NZ1tTZ9Y7QLa7MdfVWlgYZqk9lzML7VZPbGCdDsFekpI14GoN/fGoY6aqkbVaUvVg0lKN7v3wvcuwt/Tg5tIPRjA77I/i1dhX2dnEJnYq4vP+2a/4FX8AsSOXytKixMYAAAAASUVORK5CYII=');-webkit-box-shadow:0 0 2px rgba(0,0,0,0.1);-moz-box-shadow:0 0 2px rgba(0,0,0,0.1);box-shadow:0 0 2px rgba(0,0,0,0.1);background-position:50% 50%;-webkit-transition:opacity 0.05s linear;-moz-transition:opacity 0.05s linear;-o-transition:opacity 0.05s linear;transition:opacity 0.05s linear}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default .rsts-prev,.rsts-skin-default .rsts-next,.rsts-skin-default .rsts-video-play,.rsts-skin-default .rsts-video-stop,.rsts-skin-default .rsts-thumbs-prev,.rsts-skin-default .rsts-thumbs-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAIVBMVEWhoaE7PD15enqVlpaTk5N2d3h0dHVoaWpmZmcGBwj19fXsWX/bAAAAC3RSTlOAgICAgICAgICAgMiF55wAAAB9SURBVHja7dUxEoAgFANRFBTw/ge2YythEivHn/6VmU3XiwUOHPhPuGYf196zjLHPOi0tWsBYtICx/Zxgw4INCzYs2LBgw4INC55ZFadhN+NVbeh9jhf6mGJDgw0NNjTY0GBDgz0NXusiYDRWwGisgNHFL0Yrnwxd4MCBtd3+EosAicYyWQAAAABJRU5ErkJggg==');background-size:30px,30px}}.rsts-skin-default .rsts-prev:hover,.rsts-skin-default .rsts-next:hover,.rsts-skin-default .rsts-video-play:hover,.rsts-skin-default .rsts-video-stop:hover,.rsts-skin-default .rsts-thumbs-prev:hover,.rsts-skin-default .rsts-thumbs-next:hover{background-color:#eee;background-color:rgba(238,238,238,0.7)}.rsts-skin-default .rsts-next,.rsts-skin-default .rsts-thumbs-next{right:20px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAkFBMVEUBAQLPz9AlJiYlJifS0tIsLS0nJyjQ0dDR0tIBAQElJSYrLC2tra39/PwFBQYFBgf6+fmBgYKCgoL9/f339vZBQULIycnIyMiCg4PR0dEmJycmJyjMzMz8/Pzl5eXj4+MCAwQGBwghIiP09PT7+/shIiL6+vrNzs7Nzc0iIyP29vb39/cHCAkAAAD////19fV/WdL3AAAAMHRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICRnvRdAAAAnklEQVR42tXSxw7CMAwG4LL3XqUtLdRQqNPY7/92WEJVDhkSN7B8iPTpl6M4ETMAA0t/ChmwPTELe+uPGKsQKywWflYUJxn5eI9xpOsneXidp7pp3Wa+dHrGbWY6d43bLD673nR9vLsZaL5cNfoAyp0eDyRdntxp6icy+/Ei981HqVGLq3xo1GaFm4kuRb1vvp1mFNzYLrzvn/2KX/MbXNOe099MDj0AAAAASUVORK5CYII=')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default .rsts-next,.rsts-skin-default .rsts-thumbs-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAHlBMVEWhoaE7PD2VlpaTk5N2d3h0dHVoaWpmZmcGBwj19fXtfGSSAAAACnRSTlOAgICAgICAgICAXdxslAAAAHxJREFUeNrt1TEOgDAMxdDSAi33vzBbPVUoZkLE+1O2/HK9KHHixH/A9fS4jnGGMfZZl6VFBzAWHcLHQD9gocFCg4UGCw0WGiw0WGjwum3qEsb7tH1xWViwsGBhwcKChQULC5Z2jRs2itHdfc+GjWB094vR+ieHLnHixK4bjyV89TB6vlgAAAAASUVORK5CYII=');background-size:30px,30px}}.rsts-skin-default .rsts-thumbs-prev,.rsts-skin-default .rsts-thumbs-next{position:absolute;top:50%;right:10px;margin-top:-15px}.rsts-skin-default .rsts-thumbs-prev{right:auto;left:10px}.rsts-skin-default.rsts-direction-y .rsts-prev{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAbFBMVEUgISLDw8MgICGUlZaIiImSk5PCwsP9/f39/PyHh4iUlJWSkpLX2NgAAQIoKSkGBwgdHR7Ly8skJSYEBAXHyMj+/v739/ciIyMhIiImJyfNzc3S0tL8/Pz7+/v29vYHCAnNzs4AAAD////19fVh+HN2AAAAJHRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC401waAAAAiUlEQVR42uXRyQ7CMAwE0LC2QHfaQkji1sP//yNR1csEiXMlfPFI7zCWbN7JCCVmnj9i738x2hbMpHPTzCAmfag+XyAmrWt2QzqV5URuSLWqdHXmsDMRbFHYuPbnkPBw0rtaBzgbw21IWPKjdg6xxHV68ZJ2j9mhXyrRX/34fblgLQyQLf57S/wBI9V2nx3O9QoAAAAASUVORK5CYII=')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default.rsts-direction-y .rsts-prev{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAG1BMVEWjpKQ5OTqVlpaTk5NmZmdoaWp2d3gGBwj19fXoTOf7AAAACXRSTlOAgICAgICAgIC7HeZcAAAAeUlEQVR42u3UMQ6AMAzF0A8BmvufGHVpyOIOFRJI8f5WyxcqXLhw4U9jLeCznYzRNtYi2zsIs2UttqzFlrXYshZb1mLLWmg31iJ7+YVaaJ210GY9x/awWdsc+z5s1uaEQ4cNbY449LChzQFn3W3S9qsBFi5cuPDr+AYQcW8C6kiUiAAAAABJRU5ErkJggg==');background-size:30px,30px}}.rsts-skin-default.rsts-direction-y .rsts-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAbFBMVEUwMTKKi4suLzAGBwja2trR0dEwMDEuLi/Q0NDZ2dmJiYp7e3x6e3t/gIEAAQL09PTn5+f6+vr8/Px0dHVwcHH8/f329vYFBgdzdHT+/v79/v339/f9/f3///90dXb4+Pj5+fkEBQYAAAD19fUC5l8BAAAAJHRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC401waAAAAnElEQVR42uXSyQ4CIQwG4HEddRZmZUSEQnn/d7RkSAi4HI2Jf6AlfIceoHCOMcccrTXcMR5OtInf5k/YyLVL84qHjoHvwLrhmdW+0AJIhT6eVc79YYtYCQBRIZanPmO1QWuxVqr2/aIylqD9fdP4OoLMZ5sb+dK2i8Xr3cTZie+CRk49aOTUcSRNOfo8TXPUnB1QPj0J5z/5Hb7OD7UPdeTEuFeXAAAAAElFTkSuQmCC')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default.rsts-direction-y .rsts-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAG1BMVEWjpKQ5OTqVlpaTk5NmZmdoaWp2d3gGBwj19fXoTOf7AAAACXRSTlOAgICAgICAgIC7HeZcAAAAg0lEQVR42u3UMQ6EMAxE0WVDYu5/YhpLXzBSRkAF8i9tvXZ+24MKFy5c+HP4P06H0RzGRoyjjWgOY1Nj0YLFpsaip7hFNrBog3ug02brDKsWK3imxQqe6EWsxWi1HqOxHqONBTuN9RiN9Vg11mPVWI9V99tL0rEe6/dVA1i4cOHCl9oBak1vAkBKLfwAAAAASUVORK5CYII=');background-size:30px,30px}}.rsts-skin-default.rsts-video-playing .rsts-nav,.rsts-skin-default.rsts-video-playing .rsts-prev,.rsts-skin-default.rsts-video-playing .rsts-next{display:none}.rsts-skin-default.rsts-video-playing .rsts-nav-thumbs{display:block}.rsts-skin-default.rsts-touch .rsts-nav-numbers,.rsts-skin-default.rsts-touch .rsts-nav-tabs{display:none}.rsts-skin-default .rsts-nav{position:absolute;right:95px;bottom:12px;left:10px;text-align:right}.rsts-skin-default .rsts-nav ul{margin:0 !important;padding:0 !important}.rsts-skin-default .rsts-nav li{display:inline}.rsts-skin-default .rsts-nav-numbers a,.rsts-skin-default .rsts-nav-tabs a{display:inline-block;height:30px;min-width:30px;padding:0.65em 0.5em 0.5em;margin:0 2px 3px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;outline:none;font-size:12px;text-align:center;text-decoration:none;color:#fff;background-color:#555;background-color:rgba(85,85,85,0.6);-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 0 2px rgba(0,0,0,0.2);-moz-box-shadow:0 0 2px rgba(0,0,0,0.2);box-shadow:0 0 2px rgba(0,0,0,0.2);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transition:opacity 0.2s ease-in;-moz-transition:opacity 0.2s ease-in;-o-transition:opacity 0.2s ease-in;transition:opacity 0.2s ease-in}.rsts-skin-default .rsts-nav-numbers a:hover,.rsts-skin-default .rsts-nav-numbers a.active,.rsts-skin-default .rsts-nav-tabs a:hover,.rsts-skin-default .rsts-nav-tabs a.active{color:#333;background-color:#fff;background-color:rgba(255,255,255,0.5)}.rsts-skin-default:hover .rsts-nav-numbers a,.rsts-skin-default:hover .rsts-nav-tabs a{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}.rsts-skin-default .rsts-nav-bullets{line-height:0}.rsts-skin-default .rsts-nav-bullets a{display:inline-block;width:9px;height:9px;overflow:hidden;margin:12px 4px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;outline:none;text-align:left;text-indent:-999px;background-color:#fff;background-color:rgba(255,255,255,0.8);-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 0 2px #777;-moz-box-shadow:0 0 2px #777;box-shadow:0 0 2px #777}.rsts-skin-default .rsts-nav-bullets a:hover,.rsts-skin-default .rsts-nav-bullets a.active{background-color:#777;-webkit-box-shadow:inset 0 2px 0 -1px rgba(255,255,255,0.5),inset 0 -2px 0 -1px rgba(0,0,0,0.3),0 0 0 1px #555;-moz-box-shadow:inset 0 2px 0 -1px rgba(255,255,255,0.5),inset 0 -2px 0 -1px rgba(0,0,0,0.3),0 0 0 1px #555;box-shadow:inset 0 2px 0 -1px rgba(255,255,255,0.5),inset 0 -2px 0 -1px rgba(0,0,0,0.3),0 0 0 1px #555}.rsts-skin-default .rsts-nav-thumbs{position:static;padding-top:5px}.rsts-skin-default .rsts-nav .rsts-nav-prev,.rsts-skin-default .rsts-nav .rsts-nav-next{display:none}.rsts-skin-default .rsts-video-play{top:50%;right:auto;bottom:auto;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAAb1BMVEU4ODgGBgbx8fGurq7i4uIODg5QUFD7+/vBwcEUFBQYGBggICC1tbXNzc0JCQkVFRWsrKwTExPExMTS0tImJibv7+9KSkozMzP4+PhYWFj+/v6Dg4MDAwPl5eVycnKenp4MDAza2toPDw////8AAACZ5/RyAAAAJXRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAwmBGiwAAALNJREFUeNrt1kcOwkAQRFFyxsYmBxtDc/8zIrGpA/xaWKhnO9KT5ncvZvCxnGSSSSaZv2GK0sIsFzMHM53MWwPzfkU8OwsT9cHCRHOyMHFpLYwCIUaBEKNAiFEgxCgQYhSIMQrEGAXijAJxJrZrC7NZGZjb/WF41PHqSLw/Owa+q9D6KQthlAUwykIYZSGMsiBGWRCjLIhRFsQoC2Ga0S8LZMqx7gAzLPr0aUsmmWSS6SXzBf8cqwAv1zglAAAAAElFTkSuQmCC')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default .rsts-video-play{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAMAAACZHrEMAAAARVBMVEUJCQlOTk4nJyddXV1gYGD29vbh4eGTk5PAwMA2NjYYGBgGBga3t7dUVFQtLS0SEhKHh4fb29sDAwPz8/NaWlr///8AAACZTZFgAAAAF3RSTlOAgICAgICAgICAgICAgICAgICAgICAgCZn8kAAAAFfSURBVHja7dpZUsMwFAVR5gDRLMT+l8r1Cqjih/5oLyB1kurYlp4evkGXGDFixIgRI0aMGDFixIgRI0aMGDFifseQvsBfPvjrdgdhzvsnCHPePkCY8/oCwpxzu4MwCQeESTggTMIBYa5wQJiEA8IkHBAm4YAwVzggTMIBYRIOCJNwQJgrHBAm4YAwCQeESTggzBUOCJNwQJiEA8IkHBDmCgeESTggTMIBYRIOCHOFA8IkHBAm4YAw5/UZhDn7iYOZjfPLlM5pZizMv2lXzk1vNs4duHTOs2kszFN7V87L1WycN73SOe/AY2FWB7tyFnGzcVaUpXPW2mNhdiF25WwWzcbZuSqds6c3Fma3c1fOpvRsnB3y0jmzg7EwU5VdOcOv2TiTuNI5M8qxMNPbXTlD9tk4E//SOWchxsKcEnmsoMM8qGNOYsRgLjFixIgRI0aMGDFixIgRI0aMGDH/e/0Ai4OJ2+ZcrkwAAAAASUVORK5CYII=');background-size:70px,70px}}.rsts-skin-default .rsts-video-stop{top:20px;right:20px;left:auto;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAbFBMVEWnp6dOTk7x8fHv7+9HR0fw8PDu7u7e3t5NTU3f398UFBQTExP4+PhLS0tvb29xcXH09PRJSUn39/fn5+cWFhampqb29vZISEhMTExLS0ukpKT////r6+sAAAD///8AAABKSkr19fUAAAD///8df9PJAAAAJHRSTlN6e35+e35+e3t7fX1/fHl5fXt/e315fnt7e3p/foGBfnt9gIDdofLFAAAAk0lEQVR42u2SSQ7DIAxF03nKPBEC2Ni9/x3jsMXqsuqiljxITx/8EcX7Y/wxuOmUhmPhIMdlg4akzxGbMscrBu4IyHLANce+Ymb7WKRWPsdyqpCnZJzVzUmUEgvpxmAYA4dxAB3TIanvupqisJdkRwr2O403K9V43bdpgaLuu6/x3KY7sO7VN7+m4TI5+K3v8H28AYM7doAzbo6MAAAAAElFTkSuQmCC')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default .rsts-video-stop{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAALVBMVEXo6OjGxsZjY2PKysq3t7ewsLCOjo7f39+Pj4/l5eVfX19hYWHj4+NRUVH///80A/15AAAAD3RSTlOGkL2PlZemiKWHvr2HyICcCOzTAAAAv0lEQVR42u3VSQ7DIAxA0bRJSBjs+x83mzYfNnatLqpKeM0THmRY9IuYeOKJJ7bwlsdTWwCfUpsS+Smni7EipfVW5PQwtte5iqAdvIvcGiuy25gs0e1ta7YwuqJ76+NRr6P1MbkSTM7HaKyP0QXK1HyMxgaxrjde1cBe1TV4MzZeMxYdm7OvF9OWR7H0YtpDG/ojnDurnc6hfT7Iw9tnImE7ney00bdFJ3Uw+mXpQoq822Nv8/Yf383EE0/8G3wBfh3Bcn7dsMIAAAAASUVORK5CYII=');background-size:30px,30px}}.rsts-skin-default .rsts-video-youtube>.rsts-video-stop{top:25px}.rsts-skin-default .rsts-video-vimeo>.rsts-video-stop{top:10px;right:auto;left:10px}.rsts-skin-default .rsts-progress{position:absolute;top:0;right:0;width:100%;height:2px;background-color:#000;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.rsts-skin-default .rsts-progress div{height:100%;background-color:#fff}.rsts-skin-default .rsts-progress.rsts-progress-active{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity:0.3}.rsts-skin-default .rsts-thumbs-slide{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity:0.8}.rsts-skin-default .rsts-thumbs-slide.rsts-thumbs-active-thumb{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1} .sharebuttons { overflow:hidden; } .sharebuttons > ul.theme { list-style-type:none; margin:-4px; padding:0; } .sharebuttons > ul.theme:after { content:""; display:block; clear:both; } .sharebuttons > ul.theme > li { float:left; } .sharebuttons > ul.theme > li > a { margin:4px; display:block; white-space:nowrap; overflow:hidden; text-indent:101%; background-repeat:no-repeat; background-position:center; } .sharebuttons > ul.text > li > a { text-indent:0; } /* source: http://www.twelveskip.com/resources/icons/1091/boxxed-flat-social-media-icons */ .sharebuttons > ul.boxxed > li > a { width:32px; height:32px; background-image:url('../../system/modules/sharebuttons/assets/boxxed/sprites-32.png'); } .sharebuttons > ul.boxxed > li > a.facebook { background-position:-40px 0; } .sharebuttons > ul.boxxed > li > a.twitter { background-position:-160px 0; } .sharebuttons > ul.boxxed > li > a.gplus { background-position:-80px 0; } .sharebuttons > ul.boxxed > li > a.linkedin { background-position:-120px 0; } .sharebuttons > ul.boxxed > li > a.xing { background-position:-200px 0; } .sharebuttons > ul.boxxed > li > a.mail { background-position:0 0; } .sharebuttons > ul.boxxed > li > a.tumblr { background-position:-240px 0; } .sharebuttons > ul.boxxed > li > a.pinterest { background-position:-280px 0; } .sharebuttons > ul.boxxed > li > a.reddit { background-position:-320px 0; } .sharebuttons > ul.boxxed > li > a.whatsapp { background-position:-360px 0; } #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} .cc-head > *:first-child { margin-top: 0 } .cc-head > *:last-child { margin-bottom: 15px } .contao-cookiebar { --ccb-backdrop: rgba(0, 0, 0, .75); --ccb-anim-duration: .5s; --ccb-checked-clr: #006600; --ccb-checked-bg: #00ff0040; --ccb-disabled-clr: #555555b3; --ccb-disabled-bg: #ddddddd9; --ccb-focus-clr: #00a4f4; position: fixed; inset: 0; z-index: 9999; display: flex; align-items: var(--ccb-align, center); justify-content: var(--ccb-justify, center); letter-spacing: 0; padding: 15px; max-height: 100vh; box-sizing: border-box; pointer-events: none; overflow: hidden; } .contao-cookiebar * { box-sizing: border-box } .contao-cookiebar p { color: var(--font-1); line-height: 1.4 } .cc-group { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: center; position: relative; margin-bottom: 10px; border: 1px solid var(--font-1); border-radius: var(--brd-radius); } .cc-detail-btn { margin: 10px; padding: 8px 10px; line-height: 1.2rem } .cc-detail-btn-details { text-decoration: underline; padding: 0; margin: 0 0 10px } .cc-detail-btn, .cc-detail-btn-details { font-size: 13px; letter-spacing: 0; text-transform: initial; cursor: pointer } .cc-detail-btn span:nth-child(2), .cc-detail-btn-details span:nth-child(2) { display: none } .cc-detail-btn.cc-active span:nth-child(1), .cc-detail-btn-details.cc-active span:nth-child(1) { display: none } .cc-detail-btn.cc-active span:nth-child(2), .cc-detail-btn-details.cc-active span:nth-child(2) { display: inline } .contao-cookiebar label { position: relative; display: block; padding: 8px 13px 8px 0; line-height: 1.2rem } .contao-cookiebar label.group { font-weight: 600; } .contao-cookiebar input { position: absolute; width: 1px; height: 1px; outline: 0 none; opacity: 0 } .contao-cookiebar input + label { padding: 8px 13px 8px 45px; color: var(--font-1); cursor: pointer } .contao-cookiebar input + label:before, .contao-cookiebar input + label:after { content: ""; position: absolute; border-radius: 10px } .contao-cookiebar input + label:before { top: 7px; left: 0; width: 35px; height: 18px; margin: 0; box-sizing: content-box; border: 1px solid var(--font-1); transition: border-color .2s } .contao-cookiebar input + label:after { display: block; top: 11px; left: 4px; width: 12px; height: 12px; background-color: var(--font-1); transition: background .2s, margin-left .2s, padding .2s; } .contao-cookiebar input + label:active:after { padding-left: 5px; } .contao-cookiebar input.cc-group-half + label:after { background: linear-gradient(to right, var(--ccb-unchecked-clr) 0%, var(--ccb-unchecked-clr) 50%, var(--ccb-checked-clr) 50%, var(--ccb-checked-clr) 100%) } .contao-cookiebar input:checked + label:after { background: var(--ccb-checked-clr); margin-left: 17px } .contao-cookiebar input:checked + label:active:after { margin-left: 12px } .contao-cookiebar input:checked + label:before { background: var(--ccb-checked-bg); border-color: var(--ccb-checked-clr); } .contao-cookiebar input:disabled + label { pointer-events: none; } .contao-cookiebar input:disabled + label:after { background-color: var(--ccb-disabled-clr); } .contao-cookiebar input:disabled + label:before { background-color: var(--ccb-disabled-bg); border-color: var(--ccb-disabled-clr); } .contao-cookiebar input:focus-visible:not(.cc-hide-focus) + label:before { outline: 3px dashed var(--ccb-focus-clr); outline-offset: 2px; } .cc-detail-btn, .cc-detail-btn-details, .contao-cookiebar .cc-btn, .cc-info > a { display: inline-block; padding: .25em .4em; border: 1px solid var(--link-normal); border-radius: var(--brd-radius); background-image: var(--gradient-submit-normal); color: var(--link-normal); } .cc-detail-btn:focus, .cc-detail-btn:hover, .cc-detail-btn-details:focus, .cc-detail-btn-details:hover, .contao-cookiebar .cc-btn:focus, .contao-cookiebar .cc-btn:hover, .cc-info > a:focus, .cc-info > a:hover { background-image: var(--gradient-submit-focus); color: var(--link-focus); border-color: var(--link-focus); } .cc-detail-btn:active, .cc-detail-btn-details:active, .contao-cookiebar .cc-btn:active, .cc-info > a:active { background-image: var(--gradient-submit-active); color: var(--link-active); border-color: var(--link-active); } .cc-footer, .cc-info { text-align: center } .cc-info { margin-top: 15px; } .cc-info > p { font-size: .875rem } .cc-info > a { font-size: .82rem; margin-inline: 2px; padding: .1em .4em; text-decoration: none; } .cc-info > a + a:before { content: ""; margin-right: 0; } .contao-cookiebar .cc-btn { margin: 1em .5em; font-size: var(--font-size-h8); } .contao-cookiebar .cc-btn:last-child { margin-bottom: 0 } .contao-cookiebar .grayscale { --ccb-btn-bg: #f1efef; --ccb-btn-bg-hvr: #ececec } .contao-cookiebar .grayscale .success { --ccb-btn-bg: #fbfbfb; --ccb-btn-bg-hvr: #f7f7f7 } .contao-cookiebar .highlight .success { /* --ccb-btn-clr: #fff; --ccb-btn-bg: #4e9e3e; --ccb-btn-bg-hvr: #fdd; --ccb-btn-bdr: #3e7830; --ccb-btn-bg-act: #0f0; --ccb-btn-act: #060; #4c933f;*/ } .cc-focus:not(.cc-hide-focus):focus-visible { outline: 3px dashed var(--ccb-focus-clr); outline-offset: -3px } .cc-invisible { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; float: left } .cc-inner { display: inline-block; overflow-y: auto; max-height: 100%; max-width: 100%; padding: 24px; border-radius: var(--brd-radius); opacity: 0; pointer-events: none; visibility: hidden; font-size: 1rem; text-align: left; background: var(--bg-5-areas); box-shadow: var(--ccb-box-shadow, rgba(99, 99, 99, 0.2)) 0 2px 8px; animation: var(--ccb-anim, cookiebar-middle-in) var(--ccb-anim-duration) ease-in-out forwards } .cc-cookie-info { font-size: .875rem; background: var(--ccb-info-bg, #fff); border: 1px solid var(--ccb-info-bdr, #efefef); padding: 10px; border-radius: 5px } .cc-cookie-info>div>span { font-weight: 600 } .cc-cookie-info > div + div { margin-top: 5px; word-wrap: break-word } .cc-cookie-info + button.cc-detail-btn-details { margin-top: 15px } .cc-cookies { background: var(--ccb-cookies-bg, #fbfbfb); border-radius: 0 0 5px 5px } .cc-cookies > p { font-size: .875rem } .cc-cookies > p, .cc-cookies > .cc-cookie { margin: 0; padding: 15px; border-top: 1px solid var(--ccb-cookies-bdr, #fbfbfb) } .cc-cookie label.cookie + * { margin-top: 10px } .cc-cookie p { margin: 0 0 15px; font-size: .875rem } .cc-cookie-desc p { margin-bottom: 0 } .cc-active .cc-inner { opacity: 1; pointer-events: auto; visibility: visible; } .cc-active.cc-blocked { pointer-events: auto; animation: cookiebar-overlay-in var(--ccb-anim-duration) ease-in-out forwards } .cc-saved.cc-inner { opacity: 0; pointer-events: none; visibility: hidden } .cc-saved.cc-blocked { pointer-events: none; animation: cookiebar-overlay-out var(--ccb-anim-duration) ease-in-out forwards } .cc-left { --ccb-justify: flex-start } .cc-right { --ccb-justify: flex-end } .cc-top { --ccb-align: flex-start } .cc-top.cc-active { --ccb-anim: cookiebar-top-in } .cc-top.cc-saved { --ccb-anim: cookiebar-top-out } .cc-middle.cc-active { --ccb-anim: cookiebar-middle-in } .cc-middle.cc-saved { --ccb-anim: cookiebar-middle-out } .cc-bottom { --ccb-align: flex-end } .cc-bottom.cc-active { --ccb-anim: cookiebar-bottom-in } .cc-bottom.cc-saved { --ccb-anim: cookiebar-bottom-out } @media(min-width: 768px) { .contao-cookiebar .cc-btn { width: auto; margin-bottom: 0 } .cc-inner { max-width: var(--ccb-max-width, 750px) } } @media(forced-colors) { .contao-cookiebar input+label:after { border: 1px solid currentColor } .cc-inner { border: 1px solid currentColor } input.cc-group-half+label:after { margin-left: 9px } } @media(prefers-reduced-motion) { .contao-cookiebar { --ccb-anim-duration: 2s } } @media print { .contao-cookiebar { opacity: 0 } } @keyframes cookiebar-overlay-in { 0% { background: rgba(0, 0, 0, 0) } to { background: var(--ccb-backdrop) } } @keyframes cookiebar-overlay-out { 0% { background: var(--ccb-backdrop) } to { background: rgba(0, 0, 0, 0); visibility: hidden } } @keyframes cookiebar-top-in { 0% { opacity: 0; transform: translateY(-100%) } to { opacity: 1; transform: translateY(0) } } @keyframes cookiebar-top-out { 0% { opacity: 1; visibility: visible; transform: translateY(0) } to { opacity: 0; visibility: hidden; transform: translateY(-100%) } } @keyframes cookiebar-middle-in { 0% { opacity: 0; transform: scale(0) } to { opacity: 1; transform: scale(1) } } @keyframes cookiebar-middle-out { 0% { opacity: 1; visibility: visible; transform: scale(1) } to { opacity: 0; visibility: hidden; transform: scale(0) } } @keyframes cookiebar-bottom-in { 0% { opacity: 0; transform: translateY(100%) } to { opacity: 1; transform: translateY(0) } } @keyframes cookiebar-bottom-out { 0% { opacity: 1; visibility: visible; transform: translateY(0) } to { opacity: 0; visibility: hidden; transform: translateY(100%) } } /* .cc-group { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: center; border: 1px solid var(--font-1); border-radius: var(--brd-radius); } .cc-group > label { flex-grow: 1; margin: 5px 0 5px 10px } */ .cc-cookies { display: none; width: 100% } /* ------------------------------------------------------------------------------------------------------------- */ /* Verschiedene Variablen -------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------- */ body { --brd-radius: 8px; } :root { --font-size-h0: 4.000rem; /* 64px */ --font-size-h1: 2.750rem; /* 44px */ --font-size-h2: 2.250rem; /* 36px */ --font-size-h3: 2.000rem; /* 32px */ --font-size-h4: 1.750rem; /* 28px */ --font-size-h5: 1.625rem; /* 26px */ --font-size-h6: 1.500rem; /* 24px */ --font-size-normal: 1.500rem; /* 24px */ --font-size-h7: 1.250rem; /* 20px */ --font-size-h8: 1.000rem; /* 16px */ } /* ------------------------------------------------------------------------------------------------------------- */ /* Wrapper und Layout ------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------- */ /* Debug-Definitionen * #wrapper, #container, #left, #right, #main, #header, #footer, .inside { outline: medium dotted cornflowerblue; } #wrapper, #container { outline-color: #fff; } .inside { outline-color: green; } .debug #main { background-color: silver; } #main .inside { background-color: rgba(0, 0, 0, .2); } /* Debug-Definitionen END */ /* ... html + body ... -----------------------------------------------*/ html { overflow-y: scroll; scroll-behavior: smooth; /* transition: opacity .05s ease 0s; */ } /* Wenn die Klasse .js im html nicht gesetzt ist, dann wird der button_wrapper nicht angezeigt */ html:not(.js) #button_wrapper { /* Bereich der Barriere-Buttons wird ausgeblendet */ display: none; } body { background-color: var(--bg); background-image: url(/files/bilddateien/system/sm_hintergrund.jpg); background-repeat: no-repeat; background-position: top right; background-size: contain; color: var(--font-1); font-family: Arial,Verdana,sans-serif; border-image-source: url(/files/bilddateien/system/sm_rahmen.png); border-image-repeat: repeat; border-image-slice: 30; border-image-width: 30px; box-sizing: border-box; font-size: var(--font-size-normal); /* 24px */ line-height: 1.5; } /* ... html + body ... END -----------------------------------------------*/ /* ... wrapper ... -----------------------------------------------*/ #wrapper { max-width: 1680px; margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; display: flex; flex-direction: column; } #main, #left, #right, #footer { background-color: var(--bg-5-areas); border-radius: var(--brd-radius); overflow: hidden; } #container { display: flex; flex-direction: row; justify-content: space-between; margin: 0 auto; width: 100%; } #main { flex-grow: 1; margin: 0 50px; } #main .inside { padding: 40px; } #left, #right { width: auto; margin: 0; font-size: var(--font-size-h7); flex-basis: 350px; min-width: 350px; } #left { right: auto; order: -1; overflow: visible; z-index: 1; } #left .inside, #right .inside { padding: 50px 20px; } #footer { margin: 40px 0 60px; } #footer .inside { padding: 80px 40px 40px; } .inside { box-sizing: border-box; } /* ... wrapper ... END -----------------------------------------------*/ /* ... Listen ... -----------------------------------------------*/ ol, ul { margin-right: 20px; } li { margin-left: 25px; list-style-type: disc; color: var(--font-1); } ol li { list-style-type: decimal; } ol p { padding-left: 52px; } /* Abstände von Listen-Unterpunkten */ blockquote li { margin-left: 60px; list-style-type: circle; } /* ... Listen ... END -----------------------------------------------*/ /* ... Absätze ... -----------------------------------------------*/ p, pre { margin: 0 0 1em; } /* Absätze: Umbruch */ pre { white-space: pre-wrap; } /* ... Absätze ... END -----------------------------------------------*/ /* ... Schriften ... -----------------------------------------------*/ strong { font-weight: bold; } em { font-style: italic; } /* ... Schriften ... END -----------------------------------------------*/ /* ... Überschriften ... -----------------------------------------------*/ h1 { margin-top: 0.22em; margin-bottom: 1.25em; border-bottom: 6px solid var(--font-h1-h6); font-size: var(--font-size-h1); /* 44px */ font-weight: bold; } h2 { margin-top: 0; margin-bottom: .75em; font-size: var(--font-size-h2); /* 36px */ font-weight: bold; } h3 { margin-top: 0; margin-bottom: 1.0em; font-size: var(--font-size-h3); /* 32px */ font-weight: bold; } h4 { margin-top: 0; margin-bottom: 1.0em; font-size: var(--font-size-h4); /* 28px */ font-weight: bold; } h5 { margin-top: 0; margin-bottom: 0.75em; font-size: var(--font-size-h5); /* 26px */ font-weight: bold; } h6 { margin-top: 0; margin-bottom: 0.75em; font-size: var(--font-size-h6); /* 24px */ font-weight: bold; } /* ... Überschriften ... END -----------------------------------------------*/ /* ... Links + Buttons ... -----------------------------------------------*/ a { color: var(--link-normal); } a:focus { color: var(--link-focus); } a:hover { color: var(--link-focus); } a:active { background-image: var(--gradient-submit-active); color: var(--link-active); border-radius: var(--brd-radius); } .content-hyperlink { margin-bottom: 60px; } .mod_article .more { margin-bottom: 30px; } /* ... Links + Buttons ... END -----------------------------------------------*/ /* ... Pagination ... -----------------------------------------------*/ .pagination { margin-bottom: 1.25em; padding: 1.25em; background-color: var(--bg-modules-info); border: 1px solid var(--font-1); border-radius: var(--brd-radius); } .pagination :is(li a, strong) { display: inline; float: left; padding-right: 1em; list-style-type: none; } .pagination li a:active { background-image: var(--gradient-submit-active); color: var(--link-active); border: 1px solid var(--link-active); border-radius: var(--brd-radius); margin-right: 1em; padding-inline: .4em; } /* ... Pagination ... END -----------------------------------------------*/ /* ... Bilder + Bildunterschriften ... -----------------------------------------------*/ figure img, figure > a { display: block; margin-left: auto; margin-right: auto; } figure img, img { max-width: 100%; height: auto; display: block; } .media--left img { margin: 8px 20px 0 0; } .media--right img { margin: 8px 0 0 20px; } .media--below { display: grid; } /* Setzen der Reihenfolge des Bildes (z.B. mit 5) */ .media--below > figure { justify-self: center; order: 5; } figure figcaption { margin: 25px 0 50px; text-align: center; background-color: var(--bg-caption); border: 1px solid var(--font-1); } .media--left figcaption { margin: 15px 20px 10px 0; } .media--right figcaption { margin: 15px 0 10px 20px; } .media--above figcaption, .media--below figcaption { margin-top: 15px; } /* ... Bilder + Bildunterschriften ... END -----------------------------------------------*/ /* ... Audio + Video ... -----------------------------------------------*/ audio, video { display: block; width: 100%; margin: 0 auto; } /* Abstand der Audios bei den Hörproben */ #article-129 audio { margin: 0 auto 50px; } /* Zwei hochformatige Videos nebeneinander */ #article-1027 .content-element-group { display: flex; flex-wrap: wrap; justify-content: space-between; } /* ... Audio + Video ... END -----------------------------------------------*/ /* ... Definitionen für bestimmte Klassen ... -----------------------------------------------*/ #main:is([class^=ce_], [class^=content-], [class^=mod_], form) { margin-bottom: calc(var(--font-size-normal) * 1.5); } .article_h3_ul h3 { border-bottom: 3px solid; } .news-blog_h4_weg h4 { display: none; } .news-blog_h4_weg h3 { margin-bottom:0; } .margin-bottom-0 { margin-bottom: 0; } .margin-bottom-50 { margin-bottom: 2.083em; } .padding-bottom-0 { padding-bottom: 0; } .center { text-align: center; } .overflow_visible { overflow: visible; } .alle_downloads { margin-bottom: 3em; padding: 0 1.25em 1.25em; text-align: left; background-color: var(--bg-modules-info); border: 1px solid var(--font-1); border-radius: var(--brd-radius); } .sm-sprueche { padding-top: 0.5em; margin-bottom: 1em; text-align: center; line-height: 1.2; font-size: var(--font-size-h2); font-weight: bold; transform: scale(1,1.1); background-color: var(--bg-modules-info); color: var(--font-2); border: 5px solid var(--font-1); border-radius: var(--brd-radius); text-shadow: 2px 2px 2px var(--font-1); } #brandmayer h3, #brandmayer h4 { color: #fa0; font-weight: bold; } /* ... Definitionen für bestimmte Klassen ... END -----------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------------- */ /* Formulars --------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------- */ /* ... Basics ... -----------------------------------------------*/ .formbody { padding: 1.25em; margin-bottom: 1.25em; background-color: var(--bg-modules-info); border: 1px solid var(--font-1); border-radius: var(--brd-radius); } aside .formbody { padding: 0; border: 0 none; } .widget { margin-bottom: 1em; --input-max-width: 400px; } .widget:last-child { margin-bottom: 0; } .widget-captcha { display: flex; gap: .5em; align-items: baseline; flex-wrap: wrap; } .widget fieldset { border: 0 none; padding: 0; margin: 0; } :is(.checkbox_container, .radio_container) { display: flex; gap: 1em; } :is(.checkbox_container, .radio_container) > span { display: flex; align-items: center; } /* Gästebuch und Kontakt-Formular */ :is(#ctrl_notify_98, #ctrl_17).checkbox_container > span { align-items: baseline; } #opt_notify_98_0.checkbox { width: 1.2em; } #opt_17_0.checkbox { width: 2.4em; } :is(.checkbox_container, .radio_container) label { padding-left: 1.25em; margin-left: -1em; } label { cursor: pointer; display: block; } /* legend { padding-inline: .5em; } .widget legend { padding: 0; } */ :is(legend, label) .mandatory { font-weight: bold; color: var(--font-7); padding-left: .25em; } input:is(.text, .password, .captcha), textarea { display: block; width: 100%; padding: .25em .5em; box-sizing: border-box; border: 1px solid var(--font-1); border-radius: var(--brd-radius); } input.captcha { width: 5ch; text-align: center; } input:is(.checkbox, .radio) { width: 1em; aspect-ratio: 1; } textarea { max-width: 37.5em; } /* ... Basics ... END -----------------------------------------------*/ /* ... Design Inputs + Buttons ... -----------------------------------------------*/ ::placeholder, input.bday { color: var(--font-3); opacity: 1; } :focus::placeholder { opacity: 0; } input, textarea, select { background-image: var(--gradient-input-normal); color: var(--font-1); } :is(input, textarea, select):not(.bday):focus { background-image: var(--gradient-input-focus); } button, div .button, input.submit, .password-reset a { display: block; width: 100%; text-decoration: none; padding: .25em 1em; background-image: var(--gradient-submit-normal); color: var(--link-normal); border: 1px solid var(--link-normal); border-radius: var(--brd-radius); line-height: 1.1; cursor: pointer; box-sizing: border-box; text-align: center; } :is(button, .button, input.submit, .password-reset a):focus, :is(button, .button, input.submit, .password-reset a):hover { background-image: var(--gradient-submit-focus); color: var(--link-focus); border-color: var(--link-focus); } :is(button, .button, input.submit, .password-reset a):active { background-image: var(--gradient-submit-active); color: var(--link-active); border-color: var(--link-active); } /* ... Design Inputs + Buttons ... END -----------------------------------------------*/ /* ... Bestätigungs- und Error-Meldungen ... -----------------------------------------------*/ .form-confirmation, .pw_confirm, .tl_confirm, .confirm, .login_info, .error { margin-block: 1em; padding: .5em; background-image: var(--gradient-submit-active); color: var(--font-4); border: 2px solid var(--font-4); border-radius: var(--brd-radius); } .error { background-image: none; background-color: var(--font-7); color: var(--font-8); border: 2px solid var(--font-8); } /* ... Bestätigungs- und Error-Meldungen ... END -----------------------------------------------*/ /* ... Suchergebnis im Main ... -----------------------------------------------*/ .mod_search .radio_container { display: flex; flex-wrap: wrap; margin-top: 1em; } .mod_search .radio_container label { margin-right: .8em; } .mod_search .radio { margin-right: .25em; } .mod_search .header { margin-bottom: 2em; padding: 1em; background-color: var(--bg-modules-info); color: var(--font-3); border: 1px solid var(--font-1); border-radius: var(--brd-radius); } .mod_search .info { display: none; } .mod_search .context { margin-right: 1em; } .mod_search .url { color: var(--font-2); } .mod_search .relevance { font-weight: bold; color: var(--font-2); } .mod_search .highlight { font-weight: bold; background-color: var(--bg-highlighting); color: var(--font-3); border: 1px solid var(--font-1); } .mod_search .search_default { margin-bottom: 2em; padding: 1em; background-color: var(--bg-modules-info); border: 1px solid var(--font-1); border-radius: var(--brd-radius); } /* ... Suchergebnis im Main ... END -----------------------------------------------*/ /* ... Geburtstag Wochentag ... -----------------------------------------------*/ .widget.bday { position: relative; margin-bottom: 0; } input.bday { margin-bottom: 1em; text-align: center; } input.bday + span { position: absolute; width: 2.5em; height: 1.6em; padding: .25em .5em; right: 1px; top: 1px; background-color: transparent; background-image: var(--gradient-input-normal); background-repeat: no-repeat; border-radius: var(--brd-radius); box-sizing: border-box; } input.bday + span::after { position: absolute; width: 2em; top: .1em; right: .2em; } input.bday:invalid + span::after { /* content: "\2716"; ✖ */ color: red; } input.bday:valid + span::after { content: "\2713"; /* ✓ */ color: var(--font-5); } .bday_output { padding: .25em; background-image: var(--gradient-input-normal); color: var(--font-3); border: 1px solid var(--font-1); border-radius: var(--brd-radius); } .bday_output:empty { display: none; } .bday_output .wday { color: var(--font-5); } .bday_output .error { padding: .2em; margin-bottom: 0; color: var(--font-8); } .hint { position: absolute; top: .1em; right: .1em; height: 1.25em; line-height: 1.25; aspect-ratio: 1; font-size: 1.5em; color: var(--link-normal); border-radius: 50%; cursor: help; } .hint:hover { background-color: var(--link-normal); color: var(--font-8); } /* ... Geburtstag Wochentag ... END -----------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------------- */ /* Alle Navigationen ------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------- */ /* ... Allgemeines ... -----------------------------------------------*/ :is(nav, .mod_sitemap) ul { display: block; } :is(nav, .mod_sitemap) :is(ul, li) { margin: 0; padding: 0; list-style: none; } :where(nav, .mod_sitemap) :is(li a, strong) { display: block; font-weight: normal; text-align: left; text-decoration: none; } /* ... Allgemeines ... END -----------------------------------------------*/ /* ... Haupt- und mobile Navigation links ... -----------------------------------------------*/ .mainnav, .mobilenav { overflow: visible; } .mainnav li, .mobilenav li { --icon-size: .4em; --icon-stroke-width: 2px; --items-padding-left: .5em; --svg-offset-right: .5em; --svg-size: calc( 2 * var(--icon-stroke-width) + var(--icon-size) ); --icon-radius: calc( var(--icon-size) / 2 ); --icon-offset: calc( (var(--svg-size) - var(--icon-size)) / 2 ); --icon-center: calc( var(--svg-size) / 2 ); } .mainnav ul, .mobilenav ul { margin-right: -10px; background-color: var(--navi-level-1); border: 1px solid var(--font-1); border-radius: var(--brd-radius); } .mainnav ul ul, .mobilenav ul ul { margin-right: -23px; margin-left: 1em; background-color: var(--navi-level-2); } .mainnav ul ul ul, .mobilenav ul ul ul { background-color: var(--navi-level-3); } .mainnav ul ul ul ul, .mobilenav ul ul ul ul { background-color: var(--navi-level-4); } .mainnav ul :where(li a, strong), .mobilenav ul :where(li a, strong) { margin: .2em 0; padding: .05em .5em; border: 3px solid transparent; border-radius: var(--brd-radius); background-repeat: no-repeat; text-indent: calc( (var(--svg-offset-right) + var(--svg-size)) * -1); padding-left: calc( var(--items-padding-left) + var(--svg-offset-right) + var(--svg-size)); } .mainnav ul :where(li a, strong) svg, .mobilenav ul :where(li a, strong) svg { stroke-width: var(--icon-stroke-width); margin-right: var(--svg-offset-right); width: var(--svg-size); height: var(--svg-size); vertical-align: baseline; } .mainnav ul strong, .mobilenav ul strong { background-color: var(--link-strong-bg); color: var(--link-strong); border-style: solid; border-radius: var(--brd-radius); border-width: 3px; border-color: inherit; } .mainnav ul svg #svgRect, .mobilenav ul svg #svgRect { width: var(--icon-size); height: var(--icon-size); x: var(--icon-offset); y: var(--icon-offset); } .mainnav ul svg #svgCircle, .mobilenav ul svg #svgCircle { r: var(--icon-radius); cx: var(--icon-center); cy: var(--icon-center); } .mainnav li:first-child > :is(a, strong), .mobilenav li:first-child > :is(a, strong) { margin-top: .25em; } .mainnav li:last-child:not(.has_sub) > :is(a, strong), .mobilenav li:last-child:not(.has_sub) > :is(a, strong) { margin-bottom: .25em; } .mainnav li a:is(:focus, :hover), .mobilenav li a:is(:focus, :hover) { background-color: var(--link-focus-bg); color: var(--link-focus); border: 3px solid var(--link-focus); } .mainnav li a:active, .mobilenav li a:active { background-color: var(--link-active-bg); color: var(--link-active); border: 3px solid var(--link-active); } .mainnav li.has_sub > :is(a, strong), .mobilenav li.has_sub > :is(a, strong) { position: relative; padding-right: 1.25em; } .mainnav li.has_sub > :is(a, strong)::after, .mobilenav li.has_sub > :is(a, strong)::after { content: '\25B9'; display: flex; justify-content: center; position: absolute; top: -.125em; bottom: 0; right: 0; font-size: 1.5em; } .mainnav li.has_sub:is(.trail, .active) > :is(a, strong)::after, .mobilenav li.has_sub:is(.trail, .active) > :is(a, strong)::after { content: '\25BE'; } /* ... Haupt- und mobile Navigation links ... END -----------------------------------------------*/ /* ... Mobile Navigation ... -----------------------------------------------*/ /* ... 1100px und weniger ... -----------------------------------------------*/ @media (max-width: 1100px) { .mod_mobile_menu { --stroke-width: 6px; --border-radius: calc(var(--stroke-width) / 2); --open-time: .6s; --close-time: .3s; --hamburger-time: .5s; } .mobile_menu_active .mod_mobile_menu { /* z-index: 100; */ } .mobile_menu { width: auto !important; height: calc(100dvh) !important; padding-right: 10px; background-color: var(--bg); background-color: #00000080; transform: translate3d(-100%, 0, 0) scale3d(1, 1, 1) !important; transition: transform var(--close-time) ease-out 0s !important; } .mobile_menu.active { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important; transition: transform var(--open-time) ease-in 0s !important; } .mobile_menu .inner { height: calc(100% - .75em); background-color: transparent; overflow-y: scroll; padding-right: 5em; } .mobile_menu_overlay.background { background-color: #000000cc; } .mobile_menu_trigger { position: fixed; width: 54px; height: 54px; padding: 5px; top: 6px; left: 10px; background-color: var(--bg-5-areas); border-width: 2px; border-style: solid; border-color: var(--font-7); border-radius: var(--brd-radius); cursor: pointer; z-index: 101; box-sizing: border-box; transition: left var(--close-time) ease-out 0s; } .mobile_menu_trigger.active { left: calc(100% - 58px); transition: left var(--open-time) ease-in 0s; } .mobile_menu_button { height: 100%; position: relative; } .mobile_menu_button span { display: block; position: absolute; height: var(--stroke-width); width: 50%; background-color: var(--font-9); opacity: 1; transform: rotate(0deg); transition: var(--hamburger-time) ease-in-out var(--close-time); } .mobile_menu_active .mobile_menu_button span { transition-delay: var(--open-time); } .mobile_menu_button span:nth-child(even) { left: 50%; border-radius: 0 var(--border-radius) var(--border-radius) 0; } .mobile_menu_button span:nth-child(odd) { left: 0; border-radius: var(--border-radius) 0 0 var(--border-radius); } .mobile_menu_button span:nth-child(1), .mobile_menu_button span:nth-child(2) { top: 5px; } .mobile_menu_button span:nth-child(3), .mobile_menu_button span:nth-child(4) { top: 17px; } .mobile_menu_button span:nth-child(5), .mobile_menu_button span:nth-child(6) { top: 29px; } .mobile_menu_active .mobile_menu_button span:nth-child(1), .mobile_menu_active .mobile_menu_button span:nth-child(6) { transform: rotate(45deg); } .mobile_menu_active .mobile_menu_button span:nth-child(2), .mobile_menu_active .mobile_menu_button span:nth-child(5) { transform: rotate(-45deg); } .mobile_menu_active .mobile_menu_button span:nth-child(1) { left: 5px; top: 12px; } .mobile_menu_active .mobile_menu_button span:nth-child(2) { left: calc(50% - 5px); top: 12px; } .mobile_menu_active .mobile_menu_button span:nth-child(3) { left: -50%; opacity: 0; } .mobile_menu_active .mobile_menu_button span:nth-child(4) { left: 100%; opacity: 0; } .mobile_menu_active .mobile_menu_button span:nth-child(5) { left: 5px; top: 22px; } .mobile_menu_active .mobile_menu_button span:nth-child(6) { left: calc(50% - 5px); top: 22px; } .mobile_menu_active { overflow-y: hidden; } .submenu_hide strong { cursor: pointer; } .mobilenav { display: flex; line-height: 1.2; margin-bottom: 20px; } .mobilenav a, .mobilenav strong { text-decoration: none; } } /* ... Mobile Navigation ... END -----------------------------------------------*/ /* ... Brotkrumen ... -----------------------------------------------*/ .mod_breadcrumb { position: absolute; bottom: 15px; font-weight: bold; font-size: var(--font-size-h7); padding: 5px; background-color: var(--navi-bread-bg); border-radius: var(--brd-radius); z-index: 1; } .mod_breadcrumb ul { display: flex; margin: 0; align-items: baseline; } .mod_breadcrumb li { list-style-type: none; padding: 2px 4px; } .mod_breadcrumb li:after { color: var(--font-2); content: ">>"; padding-left: 0.5em; } .mod_breadcrumb li.active { background-color: var(--link-strong-bg); border: 3px solid var(--link-strong); border-radius: var(--brd-radius); color: var(--link-strong); margin-left: 6px; } .mod_breadcrumb li.active:after { display: none; } .mod_breadcrumb a { display: inline; font-weight: bold; text-decoration: underline; } .mod_breadcrumb a:visited { color: var(--link-normal); } .mod_breadcrumb a:hover { color: var(--link-focus); } /* ... Brotkrumen ... END -----------------------------------------------*/ /* ... Sitemap (erbt von mainnav) ... -----------------------------------------------*/ .mod_sitemap ul { margin-right: 0; } .mod_sitemap ul ul { margin-right: 1.042em; } /* Die "has_submenu"-Pfeile werden hier ausgeblendet */ .mod_sitemap :is(a, strong)::after { opacity: 0; } /* ... Sitemap ... END -----------------------------------------------*/ /* ... Footer ... -----------------------------------------------*/ .mod_customnav ul { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; } .mod_customnav :is(li a, strong) { padding: .1em .5em; border: 3px solid transparent; border-radius: var(--brd-radius); text-decoration: none; } .mod_customnav :is(li a:focus, li a:hover) { background-color: var(--link-focus-bg); color: var(--link-focus); border-color: var(--link-focus); } .mod_customnav li a:active { background-color: var(--link-active-bg); color: var(--link-active); border-color: var(--link-active); } .mod_customnav li strong { background-color: var(--link-strong-bg); color: var(--link-strong); border-color: var(--link-strong); } /* ... Footer ... END -----------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------------- */ /* Header ------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------- */ /* ... Allgemein ... -----------------------------------------------*/ #header { position: relative; } #header .inside { position: static; } header :is([class^=ce_], [class^=content-], [class^=mod_], form) { margin-bottom: 0; } /* ... Allgemein ... END -----------------------------------------------*/ /* ... Ansicht- und Kontrast-Buttons ... -----------------------------------------------*/ #button_wrapper { position: absolute; display: flex; gap: 10px; padding: 5px; background-image: var(--gradient-submit-normal); border-width: 2px; border-style: solid; border-color: var(--font-7); border-radius: var(--brd-radius); top: 28px; right: 28px; z-index: 0; } .button_wrapper button { background-repeat: no-repeat; background-size: contain; border-width: 4px; border-style: solid; border-color: var(--font-5); width: 40px; aspect-ratio: 1; overflow: hidden; text-indent: 40px; white-space: nowrap; padding: 0; z-index: 1; } .button_wrapper button.active-size, .button_wrapper button.active-theme { border: 4px solid var(--font-7); } button#sizeNormal { background-image: url(../../files/css-dateien/img/sm_size_normal.png); } button#sizeSmaller { background-image: url(../../files/css-dateien/img/sm_size_smaller.png); } button#sizeBigger { background-image: url(../../files/css-dateien/img/sm_size_bigger.png) } button#themeColor { background-image: url(../../files/css-dateien/img/sm_theme_colored.png); } button#themeBOnW { background-image: url(../../files/css-dateien/img/sm_theme_b_on_w.png); } button#themeWOnB { background-image: url(../../files/css-dateien/img/sm_theme_w_on_b.png); } /* ... Ansicht- und Kontrast-Buttons ... END -----------------------------------------------*/ /* ... Hintergrundmusik ... -----------------------------------------------*/ #play, #pause, #continue, #stop { position: absolute; top: 88px; padding-top: 5px; padding-bottom: 9px; border: 2px solid var(--font-7); border-radius: var(--brd-radius); text-align: center; } #play { right: 28px; width: 300px; } #pause, #continue { right: 28px; width: 143px; } #stop { right: 185px; width: 143px; } :is(#play, #pause, #continue, #stop), :is(#play, #pause, #continue, #stop) a { background-image: var(--gradient-submit-normal); color: var(--link-normal); border-color: var(--link-normal); } :is(#play, #pause, #continue, #stop):focus, :is(#play, #pause, #continue, #stop) a:focus, :is(#play, #pause, #continue, #stop):hover, :is(#play, #pause, #continue, #stop) a:hover { background-image: var(--gradient-submit-focus); color: var(--link-focus); border-color: var(--link-focus); } :is(#play, #pause, #continue, #stop):active, :is(#play, #pause, #continue, #stop) a:active { background-image: var(--gradient-submit-active); color: var(--link-active); border-color: var(--link-active); } .hidden { display: none; } /* ... Hintergrundmusik ... END -----------------------------------------------*/ /* ... Logos ... -----------------------------------------------*/ .logo_sz { width: fit-content; margin-top: 108px; margin-left: auto; margin-right: auto; z-index: 1; } .logo_sm { position: relative; margin-top: -22px; margin-bottom: 4px; width: fit-content; margin-left: auto; z-index: 0; } /* ... Logos ... END -----------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------------- */ /* Linke Spalte ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------- */ /* ... Definitionen ... -----------------------------------------------*/ aside [class^=mod_] h2 { font-size: var(--font-size-h6); } .globals_left > *, .globals_right > * { position: relative; width: auto; text-align: center; margin-bottom: 50px; padding: 1em; background-color: var(--bg-modules-info); border: 1px solid var(--font-1); border-radius: var(--brd-radius); box-sizing: border-box; } /* ... Definitionen ... END -----------------------------------------------*/ /* ... Zufallstexte links und rechts ... -----------------------------------------------*/ .padding-bottom-20 { padding-bottom: 20px; } /* ... Zufallstexte links und rechts ... END -----------------------------------------------*/ /* ... Zufallsgalerien links und rechts ... -----------------------------------------------*/ .mod_rocksolid_slider { max-width: 100%; height: auto; padding: 20px; text-align: center; background-color: var(--bg-modules-info); border: 1px solid var(--font-1); border-radius: var(--brd-radius); } /* ... Zufallsgalerien links und rechts ... END -----------------------------------------------*/ /* ... Counter ... -----------------------------------------------*/ .visitor_name, .visitor_countsince { display: none; } .mod_visitors { display: grid; font-size: var(--font-size-h8); font-weight: bold; color: var(--font-1); padding: 20px; } .visitor_pagehits { grid-row: 3/4; } .visitor_hitstoday { grid-row: 5/6; } .visitor_visitsyesterday { grid-row: 6/7; } .visitor_hitsyesterday { grid-row: 7/8; } .visitor_useronline, .visitor_pagehits, .visitor_visitstoday, .visitor_hitstoday, .visitor_visitsyesterday, .visitor_hitsyesterday, .visitor_visitstotal, .visitor_hitstotal { width: 100%; max-width: 400px; margin-right: auto; margin-left: auto; padding: 5px; text-align: right; box-sizing: border-box; } .visitor_useronline { background-color: var(--bg-counter-online); border: 1px solid var(--font-1); border-top-left-radius: var(--brd-radius); border-top-right-radius: var(--brd-radius); } .visitor_pagehits { background-color: var(--bg-counter-pagehits); border-right: 1px solid var(--font-1); border-bottom: 1px solid var(--font-1); border-left: 1px solid var(--font-1); } .visitor_visitstoday, .visitor_visitsyesterday, .visitor_visitstotal { background-color: var(--bg-counter-visitors); border-right: 1px solid var(--font-1); border-bottom: 1px solid var(--font-1); border-left: 1px solid var(--font-1); } .visitor_hitstoday, .visitor_hitsyesterday, .visitor_hitstotal { background-color: var(--bg-counter-hits); border-right: 1px solid var(--font-1); border-bottom: 1px solid var(--font-1); border-left: 1px solid var(--font-1); } .visitor_hitstotal { border-bottom-right-radius: var(--brd-radius); border-bottom-left-radius: var(--brd-radius); } #VisitorsOnlineCountLegend, #PageHitCountLegend, #TodayVisitCountLegend, #TodayHitCountLegend, #YesterdayVisitCountLegend, #YesterdayHitCountLegend, #TotalVisitCountLegend, #TotalHitCountLegend { float: left; text-align: left; font-weight: normal; } /* ... Counter ... END -----------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------------- */ /* Mittlere Spalte --------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------- */ /* ... Aktuelles: Mein Blog ... -----------------------------------------------*/ .mod_ticker .tickertext { background-color: var(--bg-5-areas); } .mod_ticker .msg-yellow { background-color: var(--bg-5-areas); color: var(--font-h1-h6); border-bottom: 6px solid var(--font-h1-h6); margin-top: 0.12em; margin-bottom: 1.25em; font-size: var(--font-size-h1); font-weight: bold; } .mod_ticker .telex > div { padding: 0; } .module-feed-reader h3 { font-size: var(--font-size-h4); margin-bottom: 3rem; } /* ... Aktuelles: Mein Blog ... END -----------------------------------------------*/ /* ... Newsletter-Archive ... -----------------------------------------------*/ .p_list_item { background-color: var(--bg-modules-info); border: 2px solid var(--font-1); border-radius: var(--brd-radius); } .mod_newsletterlist li { margin: 1.5em 1em 1.5em .5em; padding: .2em 0 .2em .5em; background-color: var(--bg-text-links-odd); border-radius: var(--brd-radius); } .mod_newsletterlist p { margin: 1.5em 0 -1.25em; } /* ... Newsletter-Archive ... END -----------------------------------------------*/ /* ... Akkordeon ... -----------------------------------------------*/ .handorgel__header { margin-bottom: .5em; } button.handorgel__header__button { text-align: left; padding: .2em .5em; background-image: var(--gradient-submit-normal); color: var(--link-normal); font-weight: bold; border: 1px solid var(--font-1); border-radius: var(--brd-radius); cursor: pointer; } .handorgel__content__inner { margin-bottom: 50px; padding: 1em; background-color: var(--bg-modules-info); border: 1px solid var(--font-1); border-radius: var(--brd-radius); box-sizing: border-box; } .content-accordion { border-bottom: 0; } /* ... Akkordeon ... END -----------------------------------------------*/ /* ... Minikalender / My daily soap ... -----------------------------------------------*/ #minicalendar { margin: 0 5px 20px; padding: 5px 5px 10px; } .minicalendar { width: 100%; border: 1px solid var(--font-1); margin-bottom: 2em; } .minicalendar .head { text-align: center; background-color: var(--bg-cal-arrows); border: 1px solid var(--font-1); } .minicalendar :is(th, td) { padding-block: 3px 2px; } .minicalendar .current { background-color: var(--bg-cal-header); color: var(--font-1); padding-top: 5px; } .minicalendar a { display: block; } th.head.previous a, th.head.next a { padding-bottom: 5px; } .minicalendar .label, .minicalendar .label.weekend { text-align: center; background-color: var(--bg-cal-wedays); border: 1px solid var(--font-1); color: var(--font-1); font-weight: normal; } .minicalendar .label.weekend { background-color: var(--bg-cal-weends); } .minicalendar td { width: 14%; text-align: center; background-color: var(--bg-modules-info); border-right: 1px solid var(--font-1); border-bottom: 1px solid var(--font-1); } .minicalendar td.weekend { background-color: var(--bg-cal-weends-fields); } .minicalendar .active, .minicalendar .active.weekend { background-color: var(--bg-cal-event-fields); } .module_events { margin-bottom: 20px; padding-top: 20px; padding-right: 20px; padding-left: 20px; background-color: var(--bg-modules-info); border: 1px solid var(--font-1); border-radius: var(--brd-radius); } .module_events .header { width: max-content; margin-bottom: 20px; padding-right: 20px; padding-left: 20px; background-color: var(--bg-5-areas); border: 1px solid var(--font-7); border-radius: var(--brd-radius); } /* ... Minikalender / My daily soap ... END -----------------------------------------------*/ /* ... Galerien ... -----------------------------------------------*/ .content-gallery h1 { margin-top: 29px; } .content-gallery ul, .content-gallery li { margin-left: 0; margin-right: 0; list-style-type: none; } .content-gallery img { width: 100%; } .content-gallery figcaption { margin: 10px 0 70px; } /* Haupt-Übersicht */ .content-gallery--cols-3 > ul { display: flex; justify-content : space-between; margin-bottom: 40px; } @media screen and (min-width: 50px) { .content-gallery--cols-3 li { width: 32%; } } /* Themen-Auswahl */ .content-gallery--cols-1 > ul { display: flex; flex-direction: column; } /* Galerien-Auswahl */ .content-gallery--cols-2 > ul { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; } @media screen and (min-width: 50px) { .content-gallery--cols-2 li { width: 48%; } } /* Tipps zur Orientierung + Fanten */ #article-831 .content-gallery--cols-2 > ul, #article-1472 .content-gallery--cols-2 > ul { flex-direction: row; flex-wrap: wrap; } /* Fanten */ #article-1472 .content-gallery--cols-2 img { margin-bottom: 30px; } /* MSS */ .monoslideshow { background-color: transparent !important; width: 100% !important; /* width: 600px !important; */ /* max-width: 100% !important; */ height: auto !important; max-height: calc(100dvh - 40px); aspect-ratio: 3/4; /* border: 2px solid blue; */ box-sizing: border-box; } /* ... Galerien ... END -----------------------------------------------*/ /* ... Adventskalender ... -----------------------------------------------*/ .advent_2011 a { float: left; margin: 20px; padding: 44px 4px 40px; background-image: url(/files/bilddateien/textbilder/2011_advent/ak_2011_00_toerchen.jpg); } .advent_2014 a { float: left; margin: 20px; padding: 48px 13px 40px; background-image: url(/files/bilddateien/textbilder/2014_advent/ak_2014_00_toerchen.jpg); } .advent_2011 p, .advent_2014 p { padding-bottom: 0; } /* ... Adventskalender ... END -----------------------------------------------*/ /* ... Downloads Texte und andere Texte ... -----------------------------------------------*/ .content-downloads h3, .content-download h3, .content-download h2 { margin: 10px 0; } .download-element { padding: 0; } .content-downloads, .content-download { margin-bottom: 50px; } .content-downloads li, .content-download .single-download { display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-end; background-size: 1.6em auto; padding-left: 2.1em; } /* Download-Links nach links */ .content-downloads a, .content-download a { flex-grow: 1; } .ext-pdf, .ext-docx { background-size: 1.6em auto; background-position: left bottom; } .dlstats { width: 6ch; text-align: right; color: var(--font-2); display: inline-block; } /* ... Downloads Texte und andere Texte ... END -----------------------------------------------*/ /* ... Abstände und Ausrichtung von Bildern und Links bei Hautnah ... -----------------------------------------------*/ #article-888 figcaption { margin-bottom: 80px; } #article-888 .content-hyperlink { text-align: center; margin-top: -60px; margin-bottom: 80px; } /* ... Abstände und Ausrichtung von Bildern und Links bei Hautnah ... END -----------------------------------------------*/ /* ... Banner ... -----------------------------------------------*/ .content-code { margin-top: 20px; margin-bottom: 40px; padding-right: 20px; padding-left: 20px; background-color: var(--bg-modules-info); border: 1px solid var(--font-1); border-radius: var(--brd-radius); font-size: var(--font-size-h8); } code.hljs { color: var(--font-1); border: 1px solid var(--font-1); border-radius: var(--brd-radius); } .hljs { background-color: var(--bg-5-areas); } /* ... Banner ... END -----------------------------------------------*/ /* ... Gästebuch ... -----------------------------------------------*/ .comment_default { margin-bottom: 40px; background-color: var(--bg-modules-info); border: 1px solid var(--font-1); border-radius: var(--brd-radius); } .comment_default .info { margin: 1.25em; padding: 0.375em 0.625em; background-color: var(--bg-5-areas); color: var(--font-3); border: 2px solid var(--font-7); border-radius: var(--brd-radius); font-size: var(--font-size-h8); } .comment { margin-top: 30px; margin-right: 20px; margin-left: 20px; } .comment h3 { margin-right: 20px; margin-left: 10px; } .comment p { margin-inline: 10px; } /* ... Definitionen für bestimmte Artikel ... -----------------------------------------------*/ /* Meine Link-Tipps */ #article-1410 h3, #article-1412 h3, #article-1414 h3, #article-1415 h3 { margin-bottom: 40px; } #brandmayer { background-color: #dde; padding: 20px; margin: 10px 0 40px; } /* ... Definitionen für bestimmte Artikel ... END -----------------------------------------------*/ /* ... Back-Link und Top-Link ... -----------------------------------------------*/ .lyrics-navigation-container { display: flex; gap: 1rem; align-items: flex-start; } .backto { flex: 0 0 auto; /* nicht wachsen, nicht schrumpfen - passt sich nur dem Inhalt an */ } .prev, .next { flex: 1 1 0; /* dürfen wachsen (und bei Bedarf gleichmäßig teilen) */ min-width: 0; } .backto, .back, .prev, .next { margin-block: 1em; } .content-toplink { position: fixed; right: -200px; bottom: 20px; transition: all .5s ease 0s; z-index: 3; white-space: nowrap; overflow: visible; } .js .content-toplink { opacity: 0; } .js .content-toplink.show { opacity: 1; right: 40px; bottom: 20px; } .mod_newsreader .back a { background-image: var(--gradient-submit-normal); border: 6px solid var(--link-normal); border-radius: var(--brd-radius); padding: 3px 5px 5px; text-decoration: none; } .backto a, .prev a, .next a, .content-toplink a { display: inline-block; /* damit Padding + Hintergrund um beide Zeilen geht */ background-image: var(--gradient-submit-normal); border: 6px solid var(--link-normal); border-radius: var(--brd-radius); padding: 3px 5px 5px; line-height: 1.3; /* für etwas Abstand zwischen den Zeilen */ text-decoration: none; } .backto :is(a:focus, a:hover), .back :is(a:focus, a:hover), .prev :is(a:focus, a:hover), .next :is(a:focus, a:hover), .content-toplink :is(a:focus, a:hover) { background-image: var(--gradient-submit-focus); color: var(--link-focus); border: 6px solid var(--link-focus); } .backto a:active, .back a:active, .prev a:active, .next a:active, .content-toplink a:active { background-image: var(--gradient-submit-active); color: var(--link-active); border: 6px solid var(--link-active); } .backto a { display: inline-block; white-space: nowrap; max-width: 100%; box-sizing: border-box; } .prev a, .next a { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; text-align: left; box-sizing: border-box; } .backto a::before { content: "← Zurück zur Auswahl"; white-space: nowrap; } .prev a::before { content: "↑ Voriger Text:"; white-space: nowrap; } .next a::before { content: "↓ Nächster Text:"; white-space: nowrap; } .prev a .news-title, .next a .news-title { margin-top: 2px; white-space: normal; overflow-wrap: break-word; } /* ... Back-Link und Top-Link ... END -----------------------------------------------*/ /* ... Sharebuttons ... -----------------------------------------------*/ .mod_sharebuttons { display: flex; justify-content: center; margin-top: 7em; } .sharebuttons li { list-style-type: none; margin-inline: .56em; } .sharebuttons > ul.boxxed > li > a { width: 32px; height: 32px; background-image: url(../../files/css-dateien/img/sprites-32.png); } .sharebuttons > ul.boxxed > li > a.facebook { background-position: 0; } .sharebuttons > ul.boxxed > li > a.x { background-position: -40px 0; } .sharebuttons > ul.boxxed > li > a.linkedin { background-position: -80px 0; } .sharebuttons > ul.boxxed > li > a.xing { background-position: -120px 0; } .sharebuttons > ul.boxxed > li > a.tumblr { background-position: -160px 0; } .sharebuttons > ul.boxxed > li > a.pinterest { background-position: -200px 0; } .sharebuttons > ul.boxxed > li > a.reddit { background-position: -240px 0; } .sharebuttons > ul.boxxed > li > a.whatsapp { background-position: -280px 0; } .sharebuttons > ul.boxxed > li > a.mail { background-position: -320px 0; } .sharebuttons > ul.boxxed > li > a.print { background-position: -360px 0; } .syndication { display: none; } /* ... Sharebuttons ... END -----------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------------- */ /* Nachrichten ------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------- */ /* ... Newslist ... -----------------------------------------------*/ .mod_newslist .layout_full { margin-bottom: 2.083em; padding: .833em; background-color: var(--bg-modules-info); border: 1px solid var(--font-1); border-radius: var(--brd-radius); } /* ... Newslist ... END -----------------------------------------------*/ /* ... Newscategories Filter allgemein ... -----------------------------------------------*/ div.mod_newscategories_cumulative { overflow: visible; margin-bottom: 2em; } .mod_newscategories_cumulative a { text-decoration: none; } .categories { display: flex; flex-wrap: wrap; justify-content: space-between; } .has_empty_ul { display: none; opacity: 0; } .categories ul { margin: 0; padding-left: 0; } .categories li { list-style-type: none; margin: 0; } .categories h2 { width: 100%; font-size: var(--font-size-h4); margin-bottom: 0.5em; } .categories h3 { font-size: var(--font-size-h6); font-weight: normal; margin: 0; } /* ... Newscategories Filter allgemein ... END -----------------------------------------------*/ /* ... Newscategories Filter aktive Kategorien ... -----------------------------------------------*/ .active-categories { margin-bottom: 1em; } .active-categories ul { background-image: var(--gradient-submit-normal); border: 1px solid var(--font-1); border-radius: var(--brd-radius); padding-inline: .5em; } .active-categories li { display: inline-block; } .active-categories strong { font-weight: normal; color: var(--font-3); } .active-categories strong::after { content: '/'; } .active-categories li:last-child strong::after { content: ''; } /* ... Newscategories Filter aktive Kategorien ... END -----------------------------------------------*/ /* ... Newscategories Filter inaktive Kategorien ... -----------------------------------------------*/ .inactive-categories { margin-bottom: 1.5em; } .inactive-categories .content-accordion { --themen-width: 50%; --gap: 1em; display: flex; flex-wrap: wrap; width: 100%; gap: 0 var(--gap); border: 0; position: relative; overflow: visible; margin-bottom: 0; } .inactive-categories .handorgel__content { box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0); border: 1px solid transparent; border-radius: var(--brd-radius); margin-top: 1px; background-color: var(--bg-modules-info); } .inactive-categories .handorgel__content--opened { border-color: var(--font-1); box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, .8); } .inactive-categories .handorgel__content__inner { background-color: var(--bg-cat-filter); overflow-y: auto; border: 0 none; max-height: 18.4em; margin-bottom: 0; padding: .5em; box-sizing: border-box; } .inactive-categories .content-accordion li { list-style-type: none; margin: 0 0 .4em; padding-inline: .5em; border-radius: var(--brd-radius); } .inactive-categories .content-accordion li:nth-child(odd) { background-color: var(--bg-text-links-odd); } .inactive-categories .content-accordion li:nth-child(even) { background-color: var(--bg-text-links-even); } .inactive-categories .content-accordion > .theme { width: calc( var(--themen-width) - (var(--gap) / 2) ); } .inactive-categories .content-accordion > .year { width: calc( 100% - (var(--themen-width) + (var(--gap) / 2)) ); } .inactive-categories .content-accordion > div.year { margin-left: calc( var(--themen-width) + (var(--gap) / 2) ); } .inactive-categories .content-accordion > :nth-child(even) { overflow: hidden; box-sizing: border-box; position: absolute; top: min(3.25em, 110%); z-index: 1; } .inactive-categories .content-accordion .quantity { color: var(--font-1); } /* ... Newscategories Filter inaktive Kategorien ... END -----------------------------------------------*/ /* ... Newscategories JS-Filter ... -----------------------------------------------*/ .mod_catfilter { display: flex; flex-wrap: wrap; gap: 1em; justify-content: space-between; font-size: var(--font-size-h7); margin-bottom: 50px; } .mod_catfilter div { flex-grow: 1; margin-bottom: 0; } .mod_catfilter > div:not(.news_search) { background-image: var(--gradient-submit-normal); border: 1px solid var(--font-1); border-radius: var(--brd-radius); padding: .15em .8em; box-sizing: border-box; flex-grow: 0; } .mod_catfilter > div:not(.news_search) span { align-items: center; } .mod_catfilter .news_sort .radio_container { display: flex; gap: 1em; } .mod_catfilter label { white-space: nowrap; font-weight: bold; } #newstitle { height: 100%; width: 100%; max-width: none; } #newstitle::placeholder { text-align: center; font-weight: bold; } /* ... Newscategories JS-Filter ... END -----------------------------------------------*/ /* ... Lyrische Texte: Liste ... -----------------------------------------------*/ #meineTexte h2 { font-size: var(--font-size-h3); } .result_counter { color: var(--font-7); font-size: var(--font-size-normal); } .ly { display: flex; gap: 0 1em; padding: .5em; } .ly time + a { flex-grow: 1; } .ly.c72 { padding-right: calc(32px + .5em + .5em); position: relative; } .ly.c72 a::after { content: url(../../files/css-dateien/img/has_video_black.svg); position: absolute; top: 0; bottom: 0; right: .5em; display: flex; justify-content: center; align-items: center; margin: auto; } .ly:where(:nth-child(odd)), .ly.odd-plus { background-color: var(--bg-text-links-odd); } .ly:where(:nth-child(even)), .ly.even-plus { background-color: var(--bg-text-links-even); } /* ... Lyrische Texte: Liste ... END -----------------------------------------------*/ /* ... Lyrische Texte: Nachrichten-Leser ... -----------------------------------------------*/ .hl_centered h2 { text-align: center; } .mod_newsreader .layout_full h3 { display: none; } .mod_newsreader .content-text h3, .mod_newsreader .content-image h3 { display: block; } .mod_newsreader .info { width: max-content; max-width: 150px; height: auto; padding: 0 0.5em; background-color: var(--bg-modules-info); border: 2px solid var(--font-7); border-radius: var(--brd-radius); } /* ... Lyrische Texte: Nachrichten-Leser ... END -----------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------------- */ /* Rechte Spalte ----------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------- */ /* ... Headline right ... -----------------------------------------------*/ .headline_right { padding-top: .842em; } /* ... Headline right ... END -----------------------------------------------*/ /* ... Datum + Uhrzeit + Änderung ... -----------------------------------------------*/ #datum, #uhrzeit { padding-bottom: 0.75em; font-size: var(--font-size-h7); font-weight: bold; color: var(--font-h1-h6); } .last_update { padding-top: 1.125em; font-size: var(--font-size-h8); font-weight: bold; } /* ... Datum + Uhrzeit + Änderung ... END -----------------------------------------------*/ /* ... Alter von der Homepage und mir ... -----------------------------------------------*/ #hpalterinsekunden, #meinalterinsekunden { font-weight: bold; font-size: var(--font-size-h7); color: var(--font-3); } /* ... Alter von der Homepage und mir ... END -----------------------------------------------*/ /* ... Zeit bis Neujahr ... -----------------------------------------------*/ #neujahrinsekunden { font-weight: bold; font-size: var(--font-size-h7); color: var(--font-3); } .sekunden_nj span#c1, .sekunden_nj span#c2 { font-weight: bold; color: var(--font-3); } .sekunden_nj .time_nj { color: var(--font-1); } /* ... Zeit bis Neujahr ... END -----------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------------- */ /* Footer ------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------- */ /* ... Definitionen ... -----------------------------------------------*/ .globals_footer > * { border: 1px solid var(--font-1); border-radius: var(--brd-radius); max-width: 880px; margin: 0 auto 40px; padding: .5em .75em; text-align: center; background-color: var(--navi-footer-bg); width: auto; box-sizing: border-box; } .globals_footer p:last-child { margin-bottom: 0; } .mod_banner figcaption { display: none; } #footer-grafiken img { padding: 10px 5px 0; } /* ... Definitionen ... END -----------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------------- */ /* Responsive Design ------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------- */ /* ... 1720px und weniger ... -----------------------------------------------*/ @media (max-width: 1720px) { body { border-image: none; } #wrapper { /* width: 100%; */ padding: 0 16px; } #button_wrapper { top: 6px; right: 8px; } #play, #pause, #continue { top: 66px; right: 8px; } #stop { top: 66px; right: 165px; } #main { margin: 0 16px; /* max-width: calc(100vw - 2 * 350px - 4 * 16px); */ } #main .inside { padding: 0 24px; } #footer { margin: 16px 0; } } /* ... 1720px und weniger ... END -----------------------------------------------*/ /* ... 1280px und weniger ... -----------------------------------------------*/ @media (max-width: 1280px) { body { background-image: url(/files/bilddateien/system/sm_hintergrund_mobile.jpg); background-repeat: no-repeat; background-size: contain; } #play, #stop, #pause, #continue { position: absolute; height: 34px; top: 66px; padding: 0; border: 2px solid var(--font-7); border-radius: var(--brd-radius); background-image: var(--gradient-submit-normal); text-align: center; z-index: 1; } #stop { right: 165px; } #container { flex-wrap: wrap; } #main { max-width: calc(100% - 350px - 16px); margin-right: 0; } #right { flex-grow: 1; margin-top: 16px; } } /* ... 1280px und weniger ... END -----------------------------------------------*/ /* ... 1100px und weniger ... -----------------------------------------------*/ @media (max-width: 1100px) { #wrapper { padding: 0 10px; } .logo_sm img { margin-right: 4vw; } .mod_breadcrumb { display: none; } #left { order: 0; width: 100%; flex-basis: 100%; margin-top: 16px; } #left .mod_navigation { display: none; } #main { width: 100%; flex-grow: 1; max-width: none; margin: 0; } #main .inside { padding: 16px; } #right .inside { padding: 50px 10px; } #tl_login_314, #request_password { display: flex; flex-direction: column; } #tl_login_314 label { display: block; } } /* ... 1100px und weniger ... END -----------------------------------------------*/ /* ... 600px und weniger ... -----------------------------------------------*/ @media (max-width: 600px) { .logo_sm img { margin-right: 5vw; } .l { flex-flow: column; } } /* ... 600px und weniger ... END -----------------------------------------------*/ /* ... 480px und weniger ... -----------------------------------------------*/ @media (max-width: 480px) { .logo_sm img { margin-right: 6vw; } .content-gallery .cols_4 li { width: 50%; } } /* ... 480px und weniger ... END -----------------------------------------------*/ /* ... 384px und weniger ... -----------------------------------------------*/ @media (max-width: 384px) { #button_wrapper { display: none; } #play, #pause, #continue, #stop { display: none; } } /* ... 384px und weniger ... END -----------------------------------------------*/ /* ... 320px und weniger ... -----------------------------------------------*/ @media (max-width: 320px) { #header { max-height: 114vmin; } #left, #right { /* flex-basis: 350px; /* evtl. auf auto stellen */ min-width: 0; } .logo_sz { margin-top: 65px; } .logo_sm img { width: 72vw; margin-right: 10vw; } } /* ... 320px und weniger ... END -----------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------------- */ /* Druck-Definitionen ------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------- */ @media print { * { all: revert !important; } #header, #left, #right, #footer, #button_wrapper, #play, .back, .content-toplink, .sm-sprueche, .sharebuttons, img, audio, video, figcaption, #wrapper ~ * { display: none !important; } /* Inspired by bootstrap */ abbr[title]::after { content: " (" attr(title) ")" !important; } pre { white-space: pre-wrap !important; } pre, blockquote { border: 1px solid #adb5bd !important; page-break-inside: avoid !important; } tr, img { page-break-inside: avoid !important; } p, h1, h2, h3, h4, h5, h6 { orphans: 3 !important; widows: 3 !important; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid !important; } .table { border-collapse: collapse !important; } .table td, .table th { background-color: #fff !important; border: 1px solid #dee2e6 !important; } }