/* --- Haupt-CSS --- */ /* --- Last Update: 02.05.2025 wr --- */ /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Webfonts (fuer alle Browser ausser IE) --- */ /* * OTF (Open Type Font) now works in most browsers. * However if you want to support a wide variety of browsers i would recommend you to switch to WOFF and TTF font types. * WOFF type is implemented by every major desktop browser, while the TTF type is a fallback for older Safari, Android and iOS browsers. * * If the font is a free font, it can be converted using for example 'transfonter': * https://transfonter.org/ */ /* --- Elza Text -- */ @font-face {font-family:'Elza Text Light'; font-style:normal; font-weight:100; src:url('../webfonts/ElzaText/ElzaText-Light.woff2') format('woff2'), /* WOFF2: Super Modern Browsers */ url('../webfonts/ElzaText/ElzaText-Light.woff') format('woff'), /* WOFF: Pretty Modern Browsers */ url('../webfonts/ElzaText/ElzaText-Light.ttf') format('truetype'), /* TTF: Safari, Android, iOS */ url('../webfonts/ElzaText/ElzaText-Light.otf') format('opentype');} /* OTF: Safari, Firefox, Opera, Chrome */ @font-face {font-family:'Elza Text'; font-style:normal; font-weight:100; src:url('../webfonts/ElzaText/ElzaText-Regular.woff2') format('woff2'), /* WOFF2: Super Modern Browsers */ url('../webfonts/ElzaText/ElzaText-Regular.woff') format('woff'), /* WOFF: Pretty Modern Browsers */ url('../webfonts/ElzaText/ElzaText-Regular.ttf') format('truetype'), /* TTF: Safari, Android, iOS */ url('../webfonts/ElzaText/ElzaText-Regular.otf') format('opentype');} /* OTF: Safari, Firefox, Opera, Chrome */ @font-face {font-family:'Elza Text Medium'; font-style:normal; font-weight:100; src:url('../webfonts/ElzaText/ElzaText-Medium.woff2') format('woff2'), /* WOFF2: Super Modern Browsers */ url('../webfonts/ElzaText/ElzaText-Medium.woff') format('woff'), /* WOFF: Pretty Modern Browsers */ url('../webfonts/ElzaText/ElzaText-Medium.ttf') format('truetype'), /* TTF: Safari, Android, iOS */ url('../webfonts/ElzaText/ElzaText-Medium.otf') format('opentype');} /* OTF: Safari, Firefox, Opera, Chrome */ @font-face {font-family:'Elza Text Semibold'; font-style:normal; font-weight:100; src:url('../webfonts/ElzaText/ElzaText-Semibold.woff2') format('woff2'), /* WOFF2: Super Modern Browsers */ url('../webfonts/ElzaText/ElzaText-Semibold.woff') format('woff'), /* WOFF: Pretty Modern Browsers */ url('../webfonts/ElzaText/ElzaText-Semibold.ttf') format('truetype'), /* TTF: Safari, Android, iOS */ url('../webfonts/ElzaText/ElzaText-Semibold.otf') format('opentype');} /* OTF: Safari, Firefox, Opera, Chrome */ @font-face {font-family:'Elza Text Bold'; font-style:normal; font-weight:100; src:url('../webfonts/ElzaText/ElzaText-Bold.woff2') format('woff2'), /* WOFF2: Super Modern Browsers */ url('../webfonts/ElzaText/ElzaText-Bold.woff') format('woff'), /* WOFF: Pretty Modern Browsers */ url('../webfonts/ElzaText/ElzaText-Bold.ttf') format('truetype'), /* TTF: Safari, Android, iOS */ url('../webfonts/ElzaText/ElzaText-Bold.otf') format('opentype');} /* OTF: Safari, Firefox, Opera, Chrome */ /* --- Roc Grotesk -- */ @font-face {font-family:'Roc Grotesk Regular'; font-style:normal; font-weight:100; src:url('../webfonts/RocGrotesk/roc-grotesk-regular.otf') format('opentype');} /* OTF: Safari, Firefox, Opera, Chrome */ @font-face {font-family:'Roc Grotesk Black'; font-style:normal; font-weight:100; src:url('../webfonts/RocGrotesk/roc-grotesk-black.otf') format('opentype');} /* OTF: Safari, Firefox, Opera, Chrome */ @font-face {font-family:'Roc Grotesk Condensed Light'; font-style:normal; font-weight:100; src:url('../webfonts/RocGrotesk/roc-grotesk-condensed-light.otf') format('opentype');} /* OTF: Safari, Firefox, Opera, Chrome */ /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Formatierung von HTML-Elementen --- */ * {margin:0; padding:0;} *, *:before, *:after {box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box;} .elementStandard {} .elementHide {display:none;} /* --- Breakpoint XXS (Mobile) --- */ html {overflow-x:hidden; overflow-y:scroll; font-size:13px; -webkit-text-size-adjust:100%;} body {margin:0; padding:0; font-family:'Elza Text Light', Helvetica, Arial, sans-serif; color:#000000; text-align:left; font-size:1.2rem; line-height:150%; font-weight:normal;} /* --- Breakpoint XS bis S (Desktop) --- */ @media only screen and (min-width:480px){ html {font-size:13px;} body {font-size:1.3rem; line-height:150%;} } /* --- Breakpoint S bis M (Desktop) --- */ @media only screen and (min-width:544px){ html {} body {} } /* --- Breakpoint M bis L (Desktop) --- */ @media only screen and (min-width:768px){ html {} body {} } /* --- Breakpoint L bis XL (Desktop) --- */ @media only screen and (min-width:992px){ html {font-size:15px;} body {font-size:1.3rem; line-height:150%;} } /* --- Breakpoint XL bis XXL (Desktop) --- */ @media only screen and (min-width:1200px){ html {} body {} } /* --- Breakpoint XXL bis XXXL (Desktop) --- */ @media only screen and (min-width:1500px){ html {} body {} } /* --- Breakpoint XXXL bis ... (Desktop) --- */ @media only screen and (min-width:1600px){ html {} body {} } /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Grundgeruest --- */ #blockWindowSize {position:fixed; top:0; left:10px; min-width:20px; height:20px; margin:0; padding:0; border:1px solid #CCCCCC; background-color:rgba(255,255,255,.8); display:none; } /* TEST [display:inline-block;] VOLLBETRIEB [display:none;] */ #blockWindowSizeInner {margin:-4px 0 0 0; padding:4px 4px 0 4px;} /* --- Breakpoint XXS (Mobile) --- */ #blockPage {margin:0 0 0 0; padding:0 0 0 0; background-color:transparent;} /* rgba(255,255,255,1) */ #blockPageMain {margin:10px auto 0 auto; padding:0 0 0 0;} #blockPageMainInner {margin:0 0 0 0; padding:0 0 0 0;} #blockHeader {margin:0 auto 32px auto; padding:0 0 0 0; max-width:1600px;} #blockHeaderMain {margin:0 10px 0 10px; padding:0 0 0 0;} #blockHeaderMainInner {} #blockLogo {width:230px;} /* [230] 200.025 x 21.978 mm -> 230 x 26 (25.271541) px */ #blockLogo img {width:100%;} #blockBody {margin:45px auto 24px auto; padding:0 0 0 0; max-width:1600px; clear:both;} #blockBodyMain {margin:0 10px 0 10px; padding:0 0 0 0;} #blockBodyMainInner {margin:0 0 0 0; padding:0 0 0 0;} #blockFooter {margin:10px 0 0 0; padding:0 0 0 0; background-color:rgba(0,0,0,1);} #blockFooterMain {margin:0 0 0 0; padding:0 0 0 0;} #blockFooterMainInner {margin:0 auto; padding:10px 10px 20px 10px; max-width:1560px; color:#FFFFFF; font-size:1.3rem; line-height:140%; font-weight:normal;} #footerInfo {font-size:1rem; line-height:140%;} /* --- Special Breakpoint 340 --- */ @media only screen and (min-width:340px){ #blockPage {} #blockPageMain {} #blockPageMainInner {} #blockHeader {} #blockHeaderMain {} #blockHeaderMainInner {} #blockLogo {width:300px;} /* [300] 200.025 x 21.978 mm -> 300 x 33 (32.962879) px */ #blockLogo img {} #blockBody {margin:39px auto 24px auto;} #blockBodyMain {} #blockBodyMainInner {} #blockFooter {} #blockFooterMain {} #blockFooterMainInner {} #footerInfo {} } /* --- Breakpoint XS bis S (Desktop) --- */ @media only screen and (min-width:480px){ #blockPage {} #blockPageMain {} #blockPageMainInner {} #blockHeader {} #blockHeaderMain {} #blockHeaderMainInner {} #blockLogo {width:400px;} /* [400] 200.025 x 21.978 mm -> 400 x 44 (43.950506) px */ #blockLogo img {} #blockBody {} #blockBodyMain {} #blockBodyMainInner {} #blockFooter {} #blockFooterMain {} #blockFooterMainInner {} #footerInfo {} } /* --- Breakpoint S bis M (Desktop) --- */ @media only screen and (min-width:544px){ #blockPage {} #blockPageMain {margin:20px auto 0 auto;} #blockPageMainInner {} #blockHeader {} #blockHeaderMain {margin:0 20px 0 20px;} #blockHeaderMainInner {} #blockLogo {} #blockLogo img {} #blockBody {margin-top:71px;} #blockBodyMain {margin:0 20px 0 20px;} #blockBodyMainInner {} #blockFooter {} #blockFooterMain {} #blockFooterMainInner {padding:10px 20px 20px 20px;} #footerInfo {} } /* --- Breakpoint M bis L (Desktop) --- */ @media only screen and (min-width:768px){ #blockPage {} #blockPageMain {} #blockPageMainInner {} #blockHeader {} #blockHeaderMain {} #blockHeaderMainInner {} #blockLogo {} #blockLogo img {} #blockBody {} #blockBodyMain {} #blockBodyMainInner {} #blockFooter {} #blockFooterMain {} #blockFooterMainInner {} #footerInfo {} } /* --- Breakpoint L bis XL (Desktop) --- */ @media only screen and (min-width:992px){ #blockPage {} #blockPageMain {} #blockPageMainInner {} #blockHeader {} #blockHeaderMain {} #blockHeaderMainInner {} #blockLogo {} #blockLogo img {} #blockBody {margin-top:80px;} #blockBodyMain {} #blockBodyMainInner {} #blockFooter {} #blockFooterMain {} #blockFooterMainInner {} #footerInfo {} } /* --- Breakpoint XL bis XXL (Desktop) --- */ @media only screen and (min-width:1200px){ #blockPage {} #blockPageMain {} #blockPageMainInner {} #blockHeader {} #blockHeaderMain {} #blockHeaderMainInner {} #blockLogo {} #blockLogo img {} #blockBody {} #blockBodyMain {} #blockBodyMainInner {} #blockFooter {} #blockFooterMain {} #blockFooterMainInner {} #footerInfo {} } /* --- Breakpoint XXL bis XXXL (Desktop) --- */ @media only screen and (min-width:1500px){ #blockPage {} #blockPageMain {} #blockPageMainInner {} #blockHeader {} #blockHeaderMain {} #blockHeaderMainInner {} #blockLogo {} #blockLogo img {} #blockBody {} #blockBodyMain {} #blockBodyMainInner {} #blockFooter {} #blockFooterMain {} #blockFooterMainInner {} #footerInfo {} } /* --- Breakpoint XXXL bis ... (Desktop) --- */ @media only screen and (min-width:1600px){ #blockPage {} #blockPageMain {} #blockPageMainInner {} #blockHeader {} #blockHeaderMain {} #blockHeaderMainInner {} #blockLogo {} #blockLogo img {} #blockBody {} #blockBodyMain {} #blockBodyMainInner {} #blockFooter {} #blockFooterMain {} #blockFooterMainInner {} #footerInfo {} } /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Ueberschriften --- */ /* --- Breakpoint XXS (Mobile) --- */ h1, div.h1 {font-family:'Roc Grotesk Black', 'Elza Text Bold', Helvetica, Arial, sans-serif; font-size:3.0rem; line-height:110%; font-weight:normal; margin:0; padding:0 0 1rem 0;} h2, div.h2 {font-family:'Roc Grotesk Black', 'Elza Text Bold', Helvetica, Arial, sans-serif; font-size:2.0rem; line-height:120%; font-weight:normal; margin:0; padding:0 0 0.75rem 0;} h3, div.h3 {font-family:'Roc Grotesk Black', 'Elza Text Bold', Helvetica, Arial, sans-serif; font-size:1.7rem; line-height:130%; font-weight:normal; margin:0; padding:0 0 0.25rem 0;} h1, div.h1, h2, div.h2, h3, div.h2 {overflow-wrap:break-word;} /* Verhinderung eines 'overflow' durch Erzwingung einer Wort-Trennung an beliebiger Stelle! */ /* --- Breakpoint XS bis S (Desktop) --- */ @media only screen and (min-width:480px){ h1, div.h1 {font-size:3.4rem;} h2, div.h2 {font-size:2.3rem;} h3, div.h3 {font-size:1.9rem;} } /* --- Breakpoint S bis M (Desktop) --- */ @media only screen and (min-width:544px){ h1, div.h1 {} h2, div.h2 {} h3, div.h3 {} } /* --- Breakpoint M bis L (Desktop) --- */ @media only screen and (min-width:768px){ h1, div.h1 {} h2, div.h2 {} h3, div.h3 {} } /* --- Breakpoint L bis XL (Desktop) --- */ @media only screen and (min-width:992px){ h1, div.h1 {font-size:3.6rem;} h2, div.h2 {font-size:2.4rem;} h3, div.h3 {font-size:2.0rem;} } /* --- Breakpoint XL bis XXL (Desktop) --- */ @media only screen and (min-width:1200px){ h1, div.h1 {} h2, div.h2 {} h3, div.h3 {} } /* --- Breakpoint XXL bis XXXL (Desktop) --- */ @media only screen and (min-width:1500px){ h1, div.h1 {} h2, div.h2 {} h3, div.h3 {} } /* --- Breakpoint XXXL bis ... (Desktop) --- */ @media only screen and (min-width:1600px){ h1, div.h1 {} h2, div.h2 {} h3, div.h3 {} } /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Textbloecke --- */ #blockWindowSize p {margin:0; padding:0; font-size:12px; line-height:150%;} p {margin:0 0 1rem 0;} .pZero {margin-bottom:0;} .pHalf {margin-bottom:0.5rem;} p b {font-family:'Elza Text', Helvetica, Arial, sans-serif; font-style:normal; font-weight:900;} p strong {font-family:'Elza Text', Helvetica, Arial, sans-serif; font-style:normal; font-weight:900;} .light {font-family:'Elza Text Light', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} .normal {font-family:'Elza Text', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} .medium {font-family:'Elza Text Medium', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} .semibold {font-family:'Elza Text Semibold', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} .bold {font-family:'Elza Text Bold', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} .colGreen {color:#57AB27;} /* 51AE32 */ .colWhite {color:#FFFFFF;} /* FFFFFF */ .colDarkGray {color:#4D4D4D;} /* 4D4D4D */ .colAnthrazit {color:#707173;} /* 707173 */ .textShadowBlack {text-shadow:1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;} .bgColGray {background-color:#EEEEEE;} /* 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; 5% = F2F2F2. */ .bgColLightGray {background-color:#F2F2F2;} /* 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; [5% = F2F2F2]. */ .bgColMediumGray {background-color:#CCCCCC;} /* 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; [20% = #CCCCCC]; 10% = #E6E6E6; 5% = F2F2F2. */ .elementText {} .elementText_var0 {} .elementTextListStyle_var0 {} .alignLeft {text-align:left;} .alignRight {text-align:right;} .alignCenter {text-align:center;} .alignJustify {text-align:justify;} .superscript {position:relative; bottom:0.5em; font-size:0.8em;} .subscript {position:relative; top:0.3em; font-size:0.8em;} .textSmall {font-size:1.1rem; font-family:'Elza Text', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100; line-height:140%;} ul {margin:0 0 1rem 0; padding:0; list-style:none;} ul li {margin:0; padding:0;} ul li:before {position:relative; content:'■'; padding-right:0.5em; bottom:0px; color:#57AB27;} /* color:#57AB27; */ ol {margin:0 0 1rem 1.75em; padding:0;} ol li {margin:0; padding:0;} ol li:before {} /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Teaser --- */ .teaserBox {min-height:120px;} /* --- Breakpoint L bis ... (Desktop) --- */ @media only screen and (min-width:992px){ .teaserBox {min-height:180px;} } .teaserHeadline_poster {white-space:normal;} /* SPEZIALFALL: Startseite: Teaser-Headline 'Poster & Folie': bis width 990 px normales Umbruch-Verhalten für White Space */ @media only screen and (min-width:990px){ .teaserHeadline_poster {white-space:nowrap;} /* SPEZIALFALL: Startseite: Teaser-Headline 'Poster & Folie': von width 990 bis 1030 px Umbruch bei White Space verhindern! */ } @media only screen and (min-width:1030px){ .teaserHeadline_poster {white-space:nowrap;} /* SPEZIALFALL: Startseite: Teaser-Headline 'Poster & Folie': ab width 1030 px Normales Umbruch-Verhalten für White Space */ } /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Linien --- */ hr {margin:0 0 10px 0; border-color:#B3B3B3; border-style:solid none none none; height:0px;} /* 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; 5% = F2F2F2. */ .line_col1 {display:none;} .line_col2 {display:block;} .line_col3 {display:block;} .line_col4 {display:block;} /* --- Breakpoint M bis ... (Desktop) --- */ @media only screen and (min-width:768px){ .line_col1 {display:none;} .line_col2 {display:none;} .line_col3 {display:block;} .line_col4 {display:block;} } /* --- Breakpoint L bis ... (Desktop) --- */ @media only screen and (min-width:992px){ .line_col1 {display:none;} .line_col2 {display:none;} .line_col3 {display:none;} .line_col4 {display:none;} } /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Leerzeilen --- */ .elementClearer {margin:0; height:0px; clear:both;} .elementSpace {margin:0; height:1rem;} .elementClearerWithSpace {margin:0; height:1rem; clear:both;} .spacerTenth {height:0.1rem;} .spacerFifth {height:0.2rem;} .spacerQuarter {height:0.25rem;} .spacerHalf {height:0.5rem;} .spacerThreeQuarters {height:0.75rem;} .spacer1 {height:1rem;} .spacer2 {height:2rem;} .spacer3 {height:3rem;} .spacer4 {height:4rem;} .spacer5 {height:5rem;} .spacer6 {height:6rem;} .spacer7 {height:7rem;} .spacer8 {height:8rem;} .spacer1negativ {margin-top:-1rem;} .spacer2negativ {margin-top:-2rem;} .spacer3negativ {margin-top:-3rem;} /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Bilder --- */ .elementPicture {} a img {border:none;} img {} img.picture { margin:0; height:auto; max-width:100%; vertical-align:bottom;} img.pictureLeft {float:left; margin:0 10px 0 0; height:auto; max-width:100%; vertical-align:bottom;} img.pictureCenter {float:left; margin:0 10px 0 0; height:auto; max-width:100%; vertical-align:bottom;} img.pictureRight {float:right; margin:0 0 0 10px; height:auto; max-width:100%; vertical-align:bottom;} img.pictureBorder {border:1px solid #BBBBBB;} img.pictureShadow {box-shadow:10px 10px 11px -1px #BCBCBC; -webkit-box-shadow:10px 10px 11px -1px #BCBCBC; -moz-box-shadow:10px 10px 11px -1px #BCBCBC;} .elementPicture figure {clear:both; margin:0 0 0 0; padding:0 0 0 0;} .elementPicture figcaption {clear:both; margin:0 0 1rem 0; padding:.25rem 0 0 0;} div.pictureTitle {font-family:'Elza Text', Helvetica, Arial, sans-serif; font-size:1.1rem; line-height:150%; font-style:normal; font-weight:100;} /* * Screen pagePicture * Breakpoint min-width max-width img width * --------------------------------------------------------------- * XXS 300px 300px (600px) 600px * XS bis S 480px * S bis M 544px 1200px * M bis L 768px * L bis XL 992px 1000px (2000px) 1800px * XL bis XXL 1200px * XXL bis XXXL 1500px * XXXL bis ... 1600px 1460px (2920px) */ .elementPagePicture {margin:0 0 10px 0; width:100%; height:200px; background-position:center center; background-origin:border-box; background-size:cover;} /* div height: 200px */ .pagePictureDefault {background-image:url(../../../../bpm11-wAssets/img/default/cham_1200x800.jpg);} /* [OK] img height: 800px [Default] */ .pagePictureGrafik {background-image:url(../../../../bpm11-wAssets/img/grafik/colorflower_1200x800.jpg);} /* [OK] img height: 800px */ .pagePicturePoster {background-image:url(../../../../bpm11-wAssets/img/poster/beach-sunset_ret2_1200x700.jpg);} /* [OK] img height: 700px */ .pagePictureInternet {background-image:url(../../../../bpm11-wAssets/img/internet/internet_1200x800.jpg);} /* [OK] img height: 800px */ .pagePictureReferenzen {background-image:url(../../../../bpm11-wAssets/img/referenzen/referenzen_1600x532.jpg);} /* [OK] img height: 638px */ .pagePictureKontakt {background-image:url(../../../../bpm11-wAssets/img/kontakt/cham_1200x800.jpg);} /* [OK] img height: 532px */ .pagePictureImpressum {background-image:url(../../../../bpm11-wAssets/img/impressum/impressum_2560x1067.jpg);} /* [XX] img height: 1067px */ .pagePictureDatenschutz {background-image:url(../../../../bpm11-wAssets/img/datenschutz/datenschutz_2540x675.jpg);} /* [XX] img height: 675px */ /* --- Breakpoint S bis M (Desktop) --- */ @media only screen and (min-width:544px){ .elementPagePicture {} /* div height: 200px */ .pagePictureDefault {background-image:url(../../../../bpm11-wAssets/img/default/cham_1200x800.jpg);} /* [OK] img height: 800px [Default] */ .pagePictureGrafik {background-image:url(../../../../bpm11-wAssets/img/grafik/colorflower_1200x800.jpg);} /* [OK] img height: 800px */ .pagePicturePoster {background-image:url(../../../../bpm11-wAssets/img/poster/beach-sunset_ret2_1200x700.jpg);} /* [OK] img height: 700px */ .pagePictureInternet {background-image:url(../../../../bpm11-wAssets/img/internet/internet_1200x800.jpg);} /* [OK] img height: 800px */ .pagePictureReferenzen {background-image:url(../../../../bpm11-wAssets/img/referenzen/referenzen_1600x532.jpg);} /* [OK] img height: 532px */ .pagePictureKontakt {background-image:url(../../../../bpm11-wAssets/img/kontakt/cham_1200x800.jpg);} /* [OK] img height: 800px */ .pagePictureImpressum {background-image:url(../../../../bpm11-wAssets/img/impressum/impressum_2560x1067.jpg);} /* [XX] img height: 1067px */ .pagePictureDatenschutz {background-image:url(../../../../bpm11-wAssets/img/datenschutz/datenschutz_2540x675.jpg);} /* [XX] img height: 675px */ } /* --- Breakpoint L bis XL (Desktop) --- */ @media only screen and (min-width:992px){ .elementPagePicture {margin:0 0 16px 0; height:320px;} /* div height: 320px */ .pagePictureDefault {background-image:url(../../../../bpm11-wAssets/img/default/cham_1600x1067.jpg);} /* [OK] img height: 1067px [Default] */ .pagePictureGrafik {background-image:url(../../../../bpm11-wAssets/img/grafik/colorflower_1600x1066.jpg);} /* [OK] img height: 1066px */ .pagePicturePoster {background-image:url(../../../../bpm11-wAssets/img/poster/beach-sunset_ret2_1600x933.jpg);} /* [OK] img height: 933px */ .pagePictureInternet {background-image:url(../../../../bpm11-wAssets/img/internet/internet_1600x1066.jpg);} /* [OK] img height: 1066px */ .pagePictureReferenzen {background-image:url(../../../../bpm11-wAssets/img/referenzen/referenzen_1920x638.jpg);} /* [OK] img height: 638px */ .pagePictureKontakt {background-image:url(../../../../bpm11-wAssets/img/kontakt/cham_1600x1067.jpg);} /* [OK] img height: 1067px */ .pagePictureImpressum {background-image:url(../../../../bpm11-wAssets/img/impressum/impressum_2560x1067.jpg);} /* [XX] img height: 1067px */ .pagePictureDatenschutz {background-image:url(../../../../bpm11-wAssets/img/datenschutz/datenschutz_2540x675.jpg);} /* [XX] img height: 675px */ } /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Picture Slider --- */ @keyframes moveUp {from {height:0;} to {height:60px;}} /* Animation */ .elementSlider {position:relative;} div.pictureSlider {position:absolute; bottom:5px; left:1px; vertical-align:bottom; width:100%; height:0; padding:0; overflow:hidden; background-color:rgb(255,255,255); /* Fallback Color */ background-color:rgba(255,255,255,.4); /* Original Color */ font-size:1.2rem; line-height:130%;} .elementPicture:hover .pictureSlider {display:block;height:60px; margin:0; padding:4px 8px 0 8px; animation-name:moveUp; animation-duration:0.5s;} /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Logos (Content) --- */ /* --- Breakpoint XXS (Mobile) --- */ .logoWrapper {width:100%; height:120px;} .logoMain {max-width:180px; box-sizing:border-box; resize:horizontal;} /* Main Wrapper for maximal logo width [180px] */ .logoInner {width:100%; padding-bottom:14%;} /* Inner Wrapper for proportional logo height [14%] */ .logo {margin-top:0%; margin-bottom:-0%;} /* Wrapper for vertical adjustment of logo (margin-top:0%; margin-bottom: -0%;) */ .logoWrapper {border:1px solid transparent;} /* [TEST] */ .logoMain {border:0px solid #FF0000;} /* [TEST] */ .logo {border:0px solid #00FF00;} /* [TEST] */ .logoElement {width:260px;} /* Special Logo on page 'Impressum' */ /* --- Special Breakpoint 340 --- */ @media only screen and (min-width:340px){ .logoMain {max-width:260px;} /* [260px] */ .logoElement {width:300px;} /* [300px] */ } /* --- Breakpoint XS bis S (Desktop) --- */ @media only screen and (min-width:480px){ .logoMain {} .logoElement {width:400px;} /* [400px] */ } /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Links --- */ a {color:#000000; text-decoration:underline;} a:hover {color:#57AB27; text-decoration:underline;} /* color:#777777; */ #blockFooter a {color:#FFFFFF; text-decoration:underline;} #blockFooter a:hover {color:#57AB27; text-decoration:underline;} /* color:#999999; */ /* --- Breakpoint XXS --- */ a.downloadIcon > span, a.iconUrl > span, a.intern:before, a.extern:before, a.box:before, a.boxPicture:before, a.download:before, a.file:before, a.pdf:before, a.doc:before, a.xls:before, a.audio:before, a.video:before, a.next:before, a.back:before, a.up:before, a.down:before, a.mail:before, span.phone:before, a.phone:before, span.fax:before, a.fax:before, span.mobile:before, a.mobile:before, a.vcf:before, a.ical:before, a.cart:before, a.infocart:before, a.book:before {content:''; display:inline-block; outline:none; margin:0.1rem 0.2rem 0 0; width:1.4rem; height:1.4rem; vertical-align:top; background-position:0 0; background-repeat:no-repeat; flex:none;} /* --- Breakpoint L bis XL (Desktop) --- */ @media only screen and (min-width:992px){ a.downloadIcon > span, a.iconUrl > span, a.intern:before, a.extern:before, a.box:before, a.boxPicture:before, a.download:before, a.file:before, a.pdf:before, a.doc:before, a.xls:before, a.audio:before, a.video:before, a.next:before, a.back:before, a.up:before, a.down:before, a.mail:before, span.phone:before, a.phone:before, span.fax:before, a.fax:before, span.mobile:before, a.mobile:before, a.vcf:before, a.ical:before, a.cart:before, a.infocart:before, a.book:before {width:1.5rem; height:1.5rem;} } a.intern, a.extern, a.box, a.boxPicture, a.download, a.file, a.pdf, a.doc, a.xls, a.audio, a.video, a.next, a.back, a.up, a.down, a.mail, span.phone, a.phone, span.fax, a.fax, span.mobile, a.mobile, a.vcf, a.ical, a.cart, a.infocart, a.book {> span {display:inline-block; text-decoration:inherit; color:inherit; font:inherit; max-width:calc(100% - 20px);} } a.intern:before {background-image:url('../images/links/intern.svg');} a.extern:before {background-image:url('../images/links/extern.svg');} a.box:before {background-image:url('../images/links/box.svg');} a.boxPicture:before {background-image:url('../images/links/box.svg');} a.download:before {background-image:url('../images/links/download.svg');} a.file:before {background-image:url('../images/links/file.svg');} a.pdf:before {background-image:url('../images/links/pdf.svg');} a.doc:before {background-image:url('../images/links/doc.svg');} a.xls:before {background-image:url('../images/links/xls.svg');} a.audio:before {background-image:url('../images/links/audio.svg');} a.video:before {background-image:url('../images/links/video.svg');} a.next:before {background-image:url('../images/links/next.svg');} a.back:before {background-image:url('../images/links/back.svg');} a.up:before {background-image:url('../images/links/up.svg');} a.down:before {background-image:url('../images/links/down.svg');} a.mail:before {background-image:url('../images/links/mail.svg');} span.phone:before, a.phone:before {background-image:url('../images/links/phone.svg');} span.fax:before, a.fax:before {background-image:url('../images/links/fax.svg');} span.mobile:before, a.mobile:before {background-image:url('../images/links/mobile.svg');} a.vcf:before {background-image:url('../images/links/vcf.svg');} a.ical:before {background-image:url('../images/links/ical.svg');} a.cart:before {background-image:url('../images/links/cart.svg');} a.infocart:before {background-image:url('../images/links/infocart.svg');} a.book:before {background-image:url('../images/links/book.svg');} /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Schaltflaechen --- */ .linkButton {display:inline-block; text-decoration:none; border:solid 1px #000000; margin:0 0.3rem 1% 0; padding:5px 16px; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; color:#FFFFFF; background-color:#000000;} .linkButton:before {transform:scale(1); margin-right:8px;} .linkButton:hover {color:#FFFFFF; background-color:#333333; border-color:#333333; text-decoration:none;} /* 100% = #000000; 90% = #1A1A1A; [80% = #333333]; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ .linkButton:active {color:#FFFFFF; background-color:#000000; border-color:#000000;} .linkButtonWhite {display:inline-block; text-decoration:none; border:solid 1px #000000; margin:0 0.3rem 1% 0; padding:5px 16px; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; color:#000000; background-color:#FFFFFF;} .linkButtonWhite:before {transform:scale(1); margin-right:8px;} .linkButtonWhite:hover {color:#666666; background-color:#FFFFFF; border-color:#000000; text-decoration:none;} /* 100% = #FFFFFF; 90% = #E6E6E6; 80% = #CCCCCC; 70% = #B3B3B3; 60% = #999999; 50% = #808080; [40% = #666666]; 30% = #4D4D4D; 20% = #333333; 10% = #1A1A1A. */ .linkButtonWhite:active {color:#000000; background-color:#FFFFFF; border-color:#000000;} .linkButtonRed {display:inline-block; text-decoration:none; border:solid 1px #E41F18; margin:0 0.3rem 1% 0; padding:5px 16px; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; color:#FFFFFF; background-color:#E41F18;} .linkButtonRed:before {transform:scale(1); margin-right:8px;} .linkButtonRed:hover {color:#FFFFFF; background-color:#E94C46; border-color:#E94C46; text-decoration:none;} /* 100% = #E41F18; 90% = #E73630; [80% = #E94C46]; 70% = #EC635E; 60% = #EF7974; 50% = #F28f8C; 40% = #F28F8C; 30% = #F7BCBA; 20% = #FAD2D1; 10% = #FCE9E8. */ .linkButtonRed:active {color:#FFFFFF; background-color:#E41F18; border-color:#E41F18;} .linkButtonGreen {display:inline-block; text-decoration:none; border:solid 1px #57AB27; margin:0 0.3rem 1% 0; padding:3px 16px; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; color:#FFFFFF; background-color:#57AB27; border-color:#57AB27;} .linkButtonGreen:before {transform:scale(1); margin-right:8px;} .linkButtonGreen:hover {color:#FFFFFF; background-color:#68B43D; border-color:#68B43D; text-decoration:none;} /* 100% = #57AB27; [90% = #68B43D]; 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ .linkButtonGreen:active {color:#FFFFFF; background-color:#57AB27; border-color:#57AB27;} .linkButtonNeutral {display:inline-block; text-decoration:none; border:solid 1px #000000; margin:0 0.3rem 1% 0; padding:5px 16px; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; color:#000000; background-color:transparent;} .linkButtonNeutral:before {transform:scale(1); margin-right:8px;} .linkButtonNeutral:hover {color:#666666; background-color:transparent; border-color:#000000; text-decoration:none;} /* 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; [60% = #666666]; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ .linkButtonNeutral:active, .linkButtonNeutral.selected {color:#000000; background-color:transparent; border-color:#000000;} .linkButtonNegative {display:inline-block; text-decoration:none; border:solid 1px #FFFFFF; margin:0 0.3rem 1% 0; padding:5px 16px; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; color:#000000; background-color:#FFFFFF;} .linkButtonNegative:before {transform:scale(1); margin-right:8px;} .linkButtonNegative:hover {color:#666666; background-color:#FFFFFF; border-color:#FFFFFF; text-decoration:none;} /* 100% = #FFFFFF; 90% = #E6E6E6; 80% = #CCCCCC; 70% = #B3B3B3; 60% = #999999; 50% = #808080; [40% = #666666]; 30% = #4D4D4D; 20% = #333333; 10% = #1A1A1A. */ .linkButtonNegative:active {color:#000000; background-color:#FFFFFF; border-color:#FFFFFF;} .linkButtonGhost {} .linkButtonGhostWhite {} .linkButtonImportant {} /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Tabellen --- */ .elementTable {width:100%; margin:0 0 1rem 0; padding:0; border-collapse:collapse;} .elementTable_var0 {} .elementTable thead {} .elementTable tbody {} .elementTable th, td {border-bottom:1px solid #666666; padding:4px 0 4px 0;} .elementTable tr {vertical-align:top;} .elementTable th {font-family:'Elza Text Medium', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100; text-align:left;} /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Inhaltsboxen --- */ /* --- Breakpoint XXS (Mobile) --- */ .elementBox {max-width:100%;} .elementBox_var0 {margin:0.2rem 0 1.5rem 0;} /* Inhaltsbox Standard: [X] Padding, [X] Background, [ ] Border */ .elementBox_var1 {margin:0.2rem 0 1.5rem 0;} /* Inhaltsbox Eingerahmt: [X] Padding, [X] Background, [X] Border */ .elementBox_var10 {margin:0 0 0 0;} /* Inhaltsbox Neutral [ ] Padding, [ ] Background, [ ] Border */ .elementBoxPadding_var0 {padding:0 0 0 0;} /* Padding: ohne */ .elementBoxPadding_var10 {padding:6px 10px 1px 10px;} /* Padding: 10px */ .elementBoxPadding_var20 {padding:12px 20px 1px 20px;} /* Padding: 20px */ .elementBoxPadding_var110 {padding:10px 10px 1px 10px;} /* Padding: 10px (bei mehrspaltigem Container wird oben mehr Abstand benötigt! 6 + 4px) */ .elementBoxPadding_var120 {padding:16px 20px 1px 20px;} /* Padding: 20px (bei mehrspaltigem Container wird oben mehr Abstand benötigt! 12 + 4px) */ .elementBoxColor_var0 {background-color:transparent;} /* Background: Transparent */ .elementBoxColor_var10 {background-color:rgb(255,255,255);} /* Background: Weiss */ .elementBoxColor_var20 {background-color:#F2F2F2;} /* Background: Hellgrau 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; [5% = F2F2F2]. */ .elementBoxColor_var30 {background-color:#CCCCCC;} /* Background: Mittelgrau 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; [20% = #CCCCCC]; 10% = #E6E6E6; 5% = F2F2F2. */ .elementBoxColor_var80 {background-color:#4D4D4D;} /* Background: Dunkelgrau 100% = #000000; 90% = #1A1A1A; 80% = #333333; [70% = #4D4D4D]; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; 5% = F2F2F2. */ .elementBoxColor_var90 {background-color:#000000;} /* Background: Schwarz [100% = #000000]; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; 5% = F2F2F2. */ .elementBoxColor_var320 {background-color:#EFF7EA;} /* Background: Hellgruen 100% = #57AB27; 90% = #68B43D; 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; [10% = #EFF7EA]. */ .elementBoxColor_var330 {background-color:#BCDDA9;} /* Background: Mittelgruen 100% = #57AB27; 90% = #68B43D; 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; [40% = #BCDDA9]; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ .elementBoxColor_var390 {background-color:#57AB27;} /* Background: Gruen [100% = #57AB27]; 90% = #68B43D; 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ .elementBoxColor_var115 {background-color:rgb(255,255,255); /* Fallback Color */ background-color:rgba(255,255,255,.8); /* Original Color */ } /* Background: Weiss 80% [100% = #FFFFFF (255,255,255)] */ .elementBoxColor_var115 {background-color:#FFFFFF; filter:alpha(opacity=80); /* IE */ -moz-opacity:0.8; /* Mozilla */ opacity:0.8; /* CSS3 */ } /* WORKAROUND to fix Safari rgba() issue: Background: Weiss 80% [100% = #FFFFFF (255,255,255)] */ .elementBoxBorder_var0 {border:none;} /* Border: ohne */ .elementBoxBorder_var10 {border:1px solid #666666;} /* Border: Dunkelgrau 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; [60% = #666666]; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; 5% = F2F2F2. */ .elementBoxBorder_var310 {border:1px solid #79BC52;} /* Border: Dunkelgruen 100% = #57AB27; 90% = #68B43D; [80% = #79BC52]; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ .elementBoxRounded_var10 {border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;} /* Radius: 10px */ .elementBoxRounded_var20 {border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px;} /* Radius: 20px */ .elementBoxShadow_var0 {box-shadow:6px 6px 12px -3px #DDDDDD; -webkit-box-shadow:6px 6px 12px -3px #DDDDDD; -moz-box-shadow:6px 6px 12px -3px #DDDDDD;} .elementBoxShadow_var10 {box-shadow:6px 6px 12px -3px #CCCCCC; -webkit-box-shadow:6px 6px 12px -3px #CCCCCC; -moz-box-shadow:6px 6px 12px -3px #CCCCCC;} /* --- Breakpoint L bis XL (Desktop) --- */ @media only screen and (min-width:992px){ .elementBoxPadding_var0 {} /* Padding: ohne */ .elementBoxPadding_var10 {padding:10px 16px 2px 16px;} /* Padding: 16px */ .elementBoxPadding_var20 {padding:20px 32px 2px 32px;} /* Padding: 32px */ .elementBoxPadding_var110 {padding:18px 16px 2px 16px;} /* Padding: 16px (bei mehrspaltigem Container wird oben mehr Abstand benötigt! 10 + 8px)*/ .elementBoxPadding_var120 {padding:28px 32px 2px 32px;} /* Padding: 32px (bei mehrspaltigem Container wird oben mehr Abstand benötigt! 20 + 8px)*/ .elementBoxRounded_var10 {border-radius:16px; -webkit-border-radius:16px; -moz-border-radius:16px;} /* Radius: 16px */ .elementBoxRounded_var20 {border-radius:32px; -webkit-border-radius:32px; -moz-border-radius:32px;} /* Radius: 32px */ .elementBoxShadow_var0 {box-shadow:8px 8px 16px -4px #DDDDDD; -webkit-box-shadow:8px 8px 16px -4px #DDDDDD; -moz-box-shadow:8px 8px 16px -4px #DDDDDD;} .elementBoxShadow_var10 {box-shadow:8px 8px 16px -4px #CCCCCC; -webkit-box-shadow:8px 8px 16px -4px #CCCCCC; -moz-box-shadow:8px 8px 16px -4px #CCCCCC;} } /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Bildboxen --- */ /* --- Breakpoint XXS (Mobile) --- */ .elementPicBox {max-width:100%;} .elementPicBox_var10 {margin:0 0 0 0;} /* Inhaltsbox Neutral [ ] Padding, [ ] Background, [ ] Border */ .elementPicBoxPadding_var0 {padding:0 0 0 0;} /* Padding: ohne */ .elementPicBoxPadding_var10 {padding:6px 10px 1px 10px;} /* Padding: 10px */ .elementPicBoxPadding_var20 {padding:12px 20px 1px 20px;} /* Padding: 20px */ .elementPicBoxPadding_var110 {padding:10px 10px 1px 10px;} /* Padding: 10px (bei mehrspaltigem Container wird oben mehr Abstand benötigt! 6 + 4px) */ .elementPicBoxPadding_var120 {padding:16px 20px 1px 20px;} /* Padding: 20px (bei mehrspaltigem Container wird oben mehr Abstand benötigt! 12 + 4px) */ .elementPicBoxColor_var0 {background-color:transparent;} /* Background: Transparent */ .elementPicBoxColor_var10 {background-color:#FFFFFF;} /* Background: Weiss */ .elementPicBoxColor_var20 {background-color:#F2F2F2;} /* Background: Hellgrau 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; [5% = F2F2F2]. */ .elementPicBoxColor_var30 {background-color:#CCCCCC;} /* Background: Mittelgrau 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; [20% = #CCCCCC]; 10% = #E6E6E6; 5% = F2F2F2. */ .elementPicBoxColor_var80 {background-color:#4D4D4D;} /* Background: Dunkelgrau 100% = #000000; 90% = #1A1A1A; 80% = #333333; [70% = #4D4D4D]; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; 5% = F2F2F2. */ .elementPicBoxColor_var90 {background-color:#000000;} /* Background: Schwarz [100% = #000000]; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; 5% = F2F2F2. */ .elementPicBoxColor_var320 {background-color:#EFF7EA;} /* Background: Hellgruen 100% = #57AB27; 90% = #68B43D; 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; [10% = #EFF7EA]. */ .elementPicBoxColor_var330 {background-color:#BCDDA9;} /* Background: Mittelgruen 100% = #57AB27; 90% = #68B43D; 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; [40% = #BCDDA9]; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ .elementPicBoxColor_var390 {background-color:#57AB27;} /* Background: Gruen [100% = #57AB27]; 90% = #68B43D; 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ .elementPicBoxColor_var400 {background-color:#FF5734;} /* Background: Orange [100% = #FF8734]; */ .elementPicBoxBorder_var0 {border:none;} /* Border: ohne */ /* --- Breakpoint L bis XL (Desktop) --- */ @media only screen and (min-width:992px){ .elementPicBoxPadding_var0 {} /* Padding: ohne */ .elementPicBoxPadding_var10 {padding:10px 16px 2px 16px;} /* Padding: 16px */ .elementPicBoxPadding_var20 {padding:20px 32px 2px 32px;} /* Padding: 32px */ .elementPicBoxPadding_var110 {padding:18px 16px 2px 16px;} /* Padding: 16px (bei mehrspaltigem Container wird oben mehr Abstand benötigt! 10 + 8px)*/ .elementPicBoxPadding_var120 {padding:28px 32px 2px 32px;} /* Padding: 32px (bei mehrspaltigem Container wird oben mehr Abstand benötigt! 20 + 8px)*/ } /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Mehrspaltiger Inhaltscontainer --- */ .elementContainerStandard {} /* --- Breakpoint XXS (Mobile) --- */ .elementContainerStandardColumns_var3070 {} .elementContainerStandardColumns_var3070 .col {padding:0;} .elementContainerStandardColumns_var3070 .col1 {float:left; width:100%; clear:both;} .elementContainerStandardColumns_var3070 .col2 {float:right; width:100%; clear:both;} .elementContainerStandardColumns_var4060 {} .elementContainerStandardColumns_var4060 .col {padding:0;} .elementContainerStandardColumns_var4060 .col1 {float:left; width:100%; clear:both;} .elementContainerStandardColumns_var4060 .col2 {float:right; width:100%; clear:both;} .elementContainerStandardColumns_var5050 {} .elementContainerStandardColumns_var5050 .col {padding:0;} .elementContainerStandardColumns_var5050 .col1 {float:left; width:100%; clear:both;} .elementContainerStandardColumns_var5050 .col2 {float:right; width:100%; clear:both;} .elementContainerStandardColumns_var6040 {} .elementContainerStandardColumns_var6040 .col {padding:0;} .elementContainerStandardColumns_var6040 .col1 {float:left; width:100%; clear:both;} .elementContainerStandardColumns_var6040 .col2 {float:right; width:100%; clear:both;} .elementContainerStandardColumns_var7030 {} .elementContainerStandardColumns_var7030 .col {padding:0;} .elementContainerStandardColumns_var7030 .col1 {float:left; width:100%; clear:both;} .elementContainerStandardColumns_var7030 .col2 {float:right; width:100%; clear:both;} .elementContainerStandardColumns_var333333 {} .elementContainerStandardColumns_var333333 .col {padding:0;} .elementContainerStandardColumns_var333333 .col1 {float:left; width:100%; clear:both;} .elementContainerStandardColumns_var333333 .col2 {float:left; width:100%; clear:both;} .elementContainerStandardColumns_var333333 .col3 {float:right; width:100%; clear:both;} .elementContainerStandardColumns_var25252525 {} .elementContainerStandardColumns_var25252525 .col {padding:0;} .elementContainerStandardColumns_var25252525 .col1 {float:left; width:100%; clear:both;} .elementContainerStandardColumns_var25252525 .col2 {float:left; width:100%; clear:both;} .elementContainerStandardColumns_var25252525 .col3 {float:left; width:100%; clear:both;} .elementContainerStandardColumns_var25252525 .col4 {float:right; width:100%; clear:both;} .elementContainerStandardColumns_var5050reverse {display:flex; flex-wrap:wrap; flex-direction:column-reverse;} .elementContainerStandardColumns_var5050reverse .col {padding:0;} .elementContainerStandardColumns_var5050reverse .col1 {float:left; width:100%; clear:both;} .elementContainerStandardColumns_var5050reverse .col2 {float:right; width:100%; clear:both;} .elementContainerStandardColumns_var6040reverse {display:flex; flex-wrap:wrap; flex-direction:column-reverse;} .elementContainerStandardColumns_var6040reverse .col {padding:0;} .elementContainerStandardColumns_var6040reverse .col1 {float:left; width:100%; clear:both;} .elementContainerStandardColumns_var6040reverse .col2 {float:right; width:100%; clear:both;} .elementContainerStandardColumns_var7030reverse {display:flex; flex-wrap:wrap; flex-direction:column-reverse;} .elementContainerStandardColumns_var7030reverse .col {padding:0;} .elementContainerStandardColumns_var7030reverse .col1 {float:left; width:100%; clear:both;} .elementContainerStandardColumns_var7030reverse .col2 {float:right; width:100%; clear:both;} /* --- Breakpoint M bis L (Desktop) --- */ @media only screen and (min-width:768px){ .elementContainerStandardColumns_var4060 {} .elementContainerStandardColumns_var4060 .col {padding:0;} .elementContainerStandardColumns_var4060 .col1 {float:left; width:39%; margin-right:1%; clear:none;} .elementContainerStandardColumns_var4060 .col2 {float:right; width:59%; margin-left:1%; clear:none;} .elementContainerStandardColumns_var5050 {} .elementContainerStandardColumns_var5050 .col {padding:0;} .elementContainerStandardColumns_var5050 .col1 {float:left; width:49%; margin-right:1%; clear:none;} .elementContainerStandardColumns_var5050 .col2 {float:right; width:49%; margin-left:1%; clear:none;} .elementContainerStandardColumns_var6040 {} .elementContainerStandardColumns_var6040 .col {padding:0;} .elementContainerStandardColumns_var6040 .col1 {float:left; width:59%; margin-right:1%; clear:none;} .elementContainerStandardColumns_var6040 .col2 {float:right; width:39%; margin-left:1%; clear:none;} .elementContainerStandardColumns_var25252525 {} .elementContainerStandardColumns_var25252525 .col {padding:0;} .elementContainerStandardColumns_var25252525 .col1 {float:left; width:49%; margin-right:1%; clear:none;} .elementContainerStandardColumns_var25252525 .col2 {float:right; width:49%; margin-left:1%; clear:none;} .elementContainerStandardColumns_var25252525 .col3 {float:left; width:49%; margin-right:1%; clear:both;} .elementContainerStandardColumns_var25252525 .col4 {float:right; width:49%; margin-left:1%; clear:none;} .elementContainerStandardColumns_var5050reverse {display:block;} .elementContainerStandardColumns_var5050reverse .col {padding:0;} .elementContainerStandardColumns_var5050reverse .col1 {float:left; width:49%; margin-right:1%; clear:none;} .elementContainerStandardColumns_var5050reverse .col2 {float:right; width:49%; margin-left:1%; clear:none;} .elementContainerStandardColumns_var6040reverse {display:block;} .elementContainerStandardColumns_var6040reverse .col {padding:0;} .elementContainerStandardColumns_var6040reverse .col1 {float:left; width:59%; margin-right:1%; clear:none;} .elementContainerStandardColumns_var6040reverse .col2 {float:right; width:39%; margin-left:1%; clear:none;} } /* --- Breakpoint L bis XL (Desktop) --- */ @media only screen and (min-width:992px){ .elementContainerStandardColumns_var3070 {} .elementContainerStandardColumns_var3070 .col {padding:0;} .elementContainerStandardColumns_var3070 .col1 {float:left; width:29%; margin-right:1%; clear:none;} .elementContainerStandardColumns_var3070 .col2 {float:right; width:69%; margin-left:1%; clear:none;} .elementContainerStandardColumns_var7030 {} .elementContainerStandardColumns_var7030 .col {padding:0;} .elementContainerStandardColumns_var7030 .col1 {float:left; width:69%; margin-right:1%; clear:none;} .elementContainerStandardColumns_var7030 .col2 {float:right; width:29%; margin-left:1%; clear:none;} .elementContainerStandardColumns_var333333 {} .elementContainerStandardColumns_var333333 .col {padding:0;} .elementContainerStandardColumns_var333333 .col1 {float:left; width:32%; margin-right:2%; clear:none;} .elementContainerStandardColumns_var333333 .col2 {float:left; width:32%; margin-right:2%; clear:none;} .elementContainerStandardColumns_var333333 .col3 {float:right; width:32%; margin-left:0%; clear:none;} .elementContainerStandardColumns_var25252525 {} .elementContainerStandardColumns_var25252525 .col {padding:0;} .elementContainerStandardColumns_var25252525 .col1 {float:left; width:22%; margin-right:2%; clear:none;} .elementContainerStandardColumns_var25252525 .col2 {float:left; width:22%; margin-left:2%; margin-right:2%; clear:none;} .elementContainerStandardColumns_var25252525 .col3 {float:left; width:22%; margin-left:2%; margin-right:2%; clear:none;} .elementContainerStandardColumns_var25252525 .col4 {float:right; width:22%; margin-left:2%; clear:none;} .elementContainerStandardColumns_var7030reverse {display:block;} .elementContainerStandardColumns_var7030reverse .col {padding:0;} .elementContainerStandardColumns_var7030reverse .col1 {float:left; width:69%; margin-right:1%; clear:none;} .elementContainerStandardColumns_var7030reverse .col2 {float:right; width:29%; margin-left:1%; clear:none;} } /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Mehrspaltiger Spezial-Inhaltscontainer --- */ .elementContainerSpecial {} .elementContainerSpecialColumns_var5050 {} .elementContainerSpecialColumns_var5050 .col {padding:0;} .elementContainerSpecialColumns_var5050 .col1 {float:left; width:100%;} .elementContainerSpecialColumns_var5050 .col2 {float:right; width:100%;} /* --- Breakpoint M bis ... (Desktop) --- */ @media only screen and (min-width:768px){ .elementContainerSpecialColumns_var5050 {} .elementContainerSpecialColumns_var5050 .col {padding:0;} .elementContainerSpecialColumns_var5050 .col1 {float:left; width:50%;} .elementContainerSpecialColumns_var5050 .col2 {float:right; width:50%;} } /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Navigation --- */ /* --- Hauptnavigation --- */ /* --- Breakpoint XXS (Mobile) --- */ #navigationMain {} /* --- Toggler --- */ #navMainToggler {display:block; margin:0; padding:0; cursor:pointer; z-index:2500; position:relative; float:right; width:24px; height:24px; top:-31px;} /* Toggler 24 x 24 px, Logo [230] */ #togglerMenu {margin:0; padding:0;} /* Toggler Menu: 24 x 24 px */ #togglerMenu_item1 {margin:0 0 9px 0; padding:0; width:100%; height:2px; background-color:#000000;} #togglerMenu_item2 {margin:0 0 9px 0; padding:0; width:100%; height:2px; background-color:#000000;} #togglerMenu_item3 {margin:0 ; padding:0; width:100%; height:2px; background-color:#000000;} #togglerClose {margin:0; padding:0;} /* Toggler Close: 24 x 24 px */ #togglerClose_item1 {margin:12px 0 0 -5px; padding:0; width:33px; height:2px; background-color:#000000; transform:rotate(45deg);} #togglerClose_item2 {margin:-3px 0 0 -5px; padding:0; width:33px; height:2px; background-color:#000000; transform:rotate(-45deg);} /* --- Overlay --- */ #bannerMargin {} #navOverlay {top:80px; background-color:#CCCCCC; z-index:2000; display:block; position:absolute; left:0; width:100%; height:100%; line-height:175%;} #navOverlay:after {content:''; background-color:#CCCCCC; position:absolute; height:3000px; width:100%; top:0px; z-index:-1;} /* Background extension for scrolling */ #navOverlayOuter {margin:0; padding:0 0 0 0;} #navOverlayMain {margin:0 auto; padding:0 0 0 0; max-width:1600px;} #navOverlayInner {margin:0 10px 0 10px; padding:5px 0 10px 0;} #navOverlayLeft {float:left;} #navOverlayRight {float:right;} /* --- Navigation Header --- */ #navigationHeader {margin:0 0 0 0; padding:0 0 0 0; display:none; text-transform:uppercase;} #navigationHeader ul {margin:0; padding:0; list-style:none; color:#000000;} #navigationHeader ul li {margin:0; padding-right:16px; float:left;} #navigationHeader ul li:last-child {padding:0;} #navigationHeader ul li:before {position:relative; content:none; padding-right:0;} #navigationHeader a {text-decoration:none; border-bottom:none;} #navigationHeader a:hover {color:#57AB27; border-bottom:none;} #navigationHeader .selected a {border-bottom:1.5px solid #000000;} #navigationHeader .selected a:hover {border-bottom:1.5px solid #57AB27;} /* --- Special Breakpoint 340 (Mobile) --- */ @media only screen and (min-width:340px){ #navigationMain {} /* --- Toggler --- */ #navMainToggler {top:-39px;} /* Toggler 24 x 24 px, Logo [300] */ #togglerMenu {} #togglerMenu_item1 {} #togglerMenu_item2 {} #togglerMenu_item3 {} #togglerClose {} #togglerClose_item1 {} #togglerClose_item2 {} /* --- Overlay --- */ #bannerMargin {} #navOverlay {top:82px;} #navOverlay:after {} /* Background extension for scrolling */ #navOverlayOuter {} #navOverlayMain {} #navOverlayInner {} #navOverlayLeft {} #navOverlayRight {} /* --- Navigation Header --- */ #navigationHeader {} } /* --- Breakpoint XS bis S (Desktop) --- */ @media only screen and (min-width:480px){ #navigationMain {} /* --- Toggler --- */ #navMainToggler {width:32px; height:32px; top:-50px;} /* Logo [400] */ #togglerMenu {margin:0; padding:0;} /* Toggler Menu: 32 x 32 px */ #togglerMenu_item1 {margin:0 0 13px 0; padding:0; width:100%; height:2px; background-color:#000000;} #togglerMenu_item2 {margin:0 0 13px 0; padding:0; width:100%; height:2px; background-color:#000000;} #togglerMenu_item3 {margin:0 ; padding:0; width:100%; height:2px; background-color:#000000;} #togglerClose {margin:0; padding:0;} /* Toggler Close: 32 x 32 px */ #togglerClose_item1 {margin:14px 0 0 -5px; padding:0; width:43px; height:2px; background-color:#000000; transform:rotate(45deg);} #togglerClose_item2 {margin:-2px 0 0 -5px; padding:0; width:43px; height:2px; background-color:#000000; transform:rotate(-45deg);} /* --- Overlay --- */ #bannerMargin {} #navOverlay {top:93px;} #navOverlay:after {} /* Background extension for scrolling */ #navOverlayOuter {} #navOverlayMain {} #navOverlayInner {} #navOverlayLeft {} #navOverlayRight {} /* --- Navigation Header --- */ #navigationHeader {} } /* --- Breakpoint S bis M (Desktop) --- */ @media only screen and (min-width:544px){ #navigationMain {} /* --- Toggler --- */ #navMainToggler {} #togglerMenu {} #togglerMenu_item1 {} #togglerMenu_item2 {} #togglerMenu_item3 {} #togglerClose {} #togglerClose_item1 {} #togglerClose_item2 {} /* --- Overlay --- */ #bannerMargin {} #navOverlay {top:130px;} #navOverlay:after {} /* Background extension for scrolling */ #navOverlayOuter {} #navOverlayMain {} #navOverlayInner {margin:0 20px 0 20px; padding:10px 0 20px 0;} #navOverlayLeft {} #navOverlayRight {} /* --- Navigation Header --- */ #navigationHeader {} } /* --- Special Breakpoint 680 --- */ @media only screen and (min-width:680px){ #navigationHeader {display:block;} } /* --- Breakpoint M bis L (Desktop) --- */ @media only screen and (min-width:768px){ #navigationMain {} /* --- Toggler --- */ #navMainToggler {} #togglerMenu {} #togglerMenu_item1 {} #togglerMenu_item2 {} #togglerMenu_item3 {} #togglerClose {} #togglerClose_item1 {} #togglerClose_item2 {} /* --- Overlay --- */ #bannerMargin {} #navOverlay {} #navOverlay:after {} /* Background extension for scrolling */ #navOverlayOuter {} #navOverlayMain {} #navOverlayInner {} #navOverlayLeft {} #navOverlayRight {} /* --- Navigation Header --- */ #navigationHeader {} } /* --- Breakpoint L bis XL (Desktop) --- */ @media only screen and (min-width:992px){ #navigationMain {} /* --- Toggler --- */ #navMainToggler {} #togglerMenu {} #togglerMenu_item1 {} #togglerMenu_item2 {} #togglerMenu_item3 {} #togglerClose {} #togglerClose_item1 {} #togglerClose_item2 {} /* --- Overlay --- */ #bannerMargin {} #navOverlay {top:140px;} #navOverlay:after {} /* Background extension for scrolling */ #navOverlayOuter {} #navOverlayMain {} #navOverlayInner {} #navOverlayLeft {} #navOverlayRight {} /* --- Navigation Header --- */ #navigationHeader {} } /* --- Breakpoint XL bis XXL (Desktop) --- */ @media only screen and (min-width:1200px){ #navigationMain {} /* --- Toggler --- */ #navMainToggler {} #togglerMenu {} #togglerMenu_item1 {} #togglerMenu_item2 {} #togglerMenu_item3 {} #togglerClose {} #togglerClose_item1 {} #togglerClose_item2 {} /* --- Overlay --- */ #bannerMargin {} #navOverlay {} #navOverlay:after {} /* Background extension for scrolling */ #navOverlayOuter {} #navOverlayMain {} #navOverlayInner {} #navOverlayLeft {} #navOverlayRight {} /* --- Navigation Header --- */ #navigationHeader {} } /* --- Breakpoint XXL bis XXXL (Desktop) --- */ @media only screen and (min-width:1500px){ #navigationMain {} /* --- Toggler --- */ #navMainToggler {} #togglerMenu {} #togglerMenu_item1 {} #togglerMenu_item2 {} #togglerMenu_item3 {} #togglerClose {} #togglerClose_item1 {} #togglerClose_item2 {} /* --- Overlay --- */ #bannerMargin {} #navOverlay {} #navOverlay:after {} /* Background extension for scrolling */ #navOverlayOuter {} #navOverlayMain {} #navOverlayInner {} #navOverlayLeft {} #navOverlayRight {} /* --- Navigation Header --- */ #navigationHeader {} } /* --- Breakpoint XXXL bis ... (Desktop) --- */ @media only screen and (min-width:1600px){ #navigationMain {} /* --- Toggler --- */ #navMainToggler {} #togglerMenu {} #togglerMenu_item1 {} #togglerMenu_item2 {} #togglerMenu_item3 {} #togglerClose {} #togglerClose_item1 {} #togglerClose_item2 {} /* --- Overlay --- */ #bannerMargin {} #navOverlay {} #navOverlay:after {} /* Background extension for scrolling */ #navOverlayOuter {} #navOverlayMain {} #navOverlayInner {} #navOverlayLeft {} #navOverlayRight {} /* --- Navigation Header --- */ #navigationHeader {} } /* --- Overlay --- */ #navOverlay ul {list-style:none;} #navOverlay ul li:before {content:none;} #navOverlay ul li a {text-decoration:none;} #navOverlayLeft .childs {margin-right:32px; float:left;} #navOverlayLeft .childs:last-child {margin-right:0px;} span.navpointToggler {font-family:'Elza Text Bold', Helvetica, Arial, sans-serif; font-weight:normal; font-size:1.5rem;} span.navpointToggler:before {} .level1 {} .level1 ul {margin:0; padding:0;} .level1 ul li {margin:0; padding:0;} .level1 ul li:before {} .level1 ul li a {text-decoration:none;} .level1 a:hover {color:#57AB27;} .level2 {} .level3 {} #navOverlay .selected {font-family:'Elza Text Medium', Helvetica, Arial, sans-serif; font-weight:normal;} /* --- Metanavigation --- */ /* --- Breakpoint XXS (Mobile) --- */ #navigationMeta {margin:0 0 0 0; padding:0 0 0 0; text-transform:uppercase;} #navigationMeta ul {margin:0; padding:0; list-style:none;} #navigationMeta ul li {margin:0; padding-left:16px; float:right;} #navigationMeta ul li:last-child {padding:0} #navigationMeta ul li:before {position:relative; content:none; padding-right:0;} #navigationMeta a {text-decoration:none; border-bottom:none;} #navigationMeta a:hover {text-decoration:none; color:#57AB27; border-bottom:none;} #navigationMeta .selected a {border-bottom:1.5px solid #FFFFFF;} #navigationMeta .selected a:hover {border-bottom:1.5px solid #57AB27;} /* ----------------------------------------------------------------------------------------------------------------- */ /* --- Listverzeichnisse --- */ /* --- Breakpoint XXS (Mobile) --- */ .listDefault {margin:0 0 0 0; padding:0 0 0 0;} .listDefault ul {margin:0 0 0 0; padding:0 0 0 0; list-style:none;} .listDefault li:before {margin:0 0 0 0; padding:0 0 0 0; content:none;} .listDefault a {text-decoration:none;} .listDefault .listEntry {background:transparent; float:left; position:relative; margin-bottom:20px; overflow:hidden;} .listDefault .listEntry:nth-child(odd) {width:100%; margin-right:0%; clear:none;} .listDefault .listEntry:nth-child(even) {width:100%; margin-left:0%; clear:none;} .listDefault .listEntry:last-child {margin-bottom:0px;} .listDefault .listEntryInner {} .listDefault .clickable {cursor:pointer;} .listDefault .clickable:hover {box-shadow:8px 8px 16px -4px #DDDDDD; -webkit-box-shadow:8px 8px 16px -4px #DDDDDD; -moz-box-shadow:8px 8px 16px -4px #DDDDDD;} .listDefault .listEntryThumbnail {display:block;} .listDefault .listEntryTopic {display:inline-block; position:absolute; top:0; left:0; background-color:rgba(0,0,0,0.4); opacity:1; z-index:1000; font-family:'Elza Text Bold', Helvetica, Arial, sans-serif; color:#FFFFFF; font-size:1.1rem; line-height:130%; font-weight:normal; opacity:1; transition:all 0.3s ease-in-out;} .listDefault .listEntryTopic:hover {opacity:1; transition:all 0.3s ease-in-out;} .listDefault .listEntryTopicInner {padding:8px 10px 8px 10px;} .listDefault .listImageContainer {} /* ohne Aspect ratio */ .listDefault .listEntryThumbnail picture {z-index:500;} .listDefault .listEntryLayer {width:100%; margin-top:8px;} .listDefault .listEntryTitle {font-family:'Elza Text Bold', Helvetica, Arial, sans-serif; color:#000000; font-size:1.3rem; line-height:130%; font-weight:normal; margin:0 0 0 0; padding:0 0 0 0;} .listDefault .listEntryTitle:hover {color:#57AB27;} .listDefault .listEntryDescription {font-family:'Elza Text Light', Helvetica, Arial, sans-serif; color:#000000; font-size:1.1rem; line-height:150%; font-weight:normal; margin:0 0 0 0; padding:0 0 0.5rem 0;} .listDefault .listEntryButtons {} .listThumbnail_var10 .listImageContainer {aspect-ratio:1/1; overflow:hidden; display:flex; justify-content:center; align-items:center;} /* Aspect ratio 1:1 (1:1) */ .listThumbnail_var20 .listImageContainer {aspect-ratio:4/3; overflow:hidden; display:flex; justify-content:center; align-items:center;} /* Aspect ratio 4:3 (1:0.75) */ .listThumbnail_var30 .listImageContainer {aspect-ratio:3/2; overflow:hidden; display:flex; justify-content:center; align-items:center;} /* Aspect ratio 3:2 (1:0.666) */ .listThumbnail_var50 .listImageContainer {aspect-ratio:16/9; overflow:hidden; display:flex; justify-content:center; align-items:center;} /* Aspect ratio 16:9 (1:0.5625) */ .listThumbnail_var40 .listImageContainer {aspect-ratio:2/1; overflow:hidden; display:flex; justify-content:center; align-items:center;} /* Aspect ratio 2:1 (1:0.5) */ /* --- Breakpoint XS bis S (Desktop) --- */ @media only screen and (min-width:480px){ .listDefault .listEntryTopic {font-size:1.2rem;} .listDefault .listEntryTitle {font-size:1.4rem;} .listDefault .listEntryDescription {font-size:1.2rem;} } /* --- Breakpoint L bis XL (Desktop) --- */ @media only screen and (min-width:992px){ .listDefault .listEntryTopic {font-size:1.2rem;} .listDefault .listEntryTitle {font-size:1.4rem;} .listDefault .listEntryDescription {font-size:1.2rem;} } /* --- Breakpoint M bis L (Desktop) --- */ @media only screen and (min-width:768px){ .listColumns_var2 .listEntry:nth-child(odd) {width:49%; margin-right:1%; clear:both;} /* Ungerade Spalten (1, 3, 5, ...) */ .listColumns_var2 .listEntry:nth-child(even) {width:49%; margin-left:1%; clear:none;} /* Gerade Spalten (2, 4, 6, ...) */ .listColumns_var4 .listEntry:nth-child(odd) {width:49%; margin-right:1%; clear:both;} /* Ungerade Spalten (1, 3, 5, ...) */ .listColumns_var4 .listEntry:nth-child(even) {width:49%; margin-left:1%; clear:none;} /* Gerade Spalten (2, 4, 6, ...) */ } /* --- Breakpoint L bis XL (Desktop) --- */ @media only screen and (min-width:992px){ .listColumns_var4 .listEntry:nth-child(4n+1) {width:23.5%; margin-right:0%; clear:both;} /* Spalten 1, 5, 9, ... */ .listColumns_var4 .listEntry:nth-child(4n+2) {width:23.5%; margin-left:2%; clear:none;} /* Spalten 2, 6, 10, ... */ .listColumns_var4 .listEntry:nth-child(4n+3) {width:23.5%; margin-left:2%; clear:none;} /* Spalten 3, 7, 11, ... */ .listColumns_var4 .listEntry:nth-child(4n) {width:23.5%; margin-left:1%; clear:none;} /* Spalten 4, 8, 12, ... */ } /* ----------------------------------------------------------------------------------------------------------------- */ /* --- News-Listverzeichnis --- */ /* --- Breakpoint XXS (Mobile) --- */ .listNews {margin:0 0 0 0; padding:0 0 0 0;} .listNews ul {margin:0 0 0 0; padding:0 0 0 0; list-style:none;} .listNews li:before {margin:0 0 0 0; padding:0 0 0 0; content:none;} .listNews a {text-decoration:none;} .listNews .listEntry {background:transparent; float:left; position:relative; margin-top:4px; margin-bottom:0.5rem; overflow:hidden;} .listNews .listEntry:last-child {margin-bottom:10px;} .listNews .listEntryInner {} .listNews .clickable {cursor:pointer;} .listNews .clickable:hover {} .listNews .listEntryThumbnail {display:block; margin-bottom:6px;} .listNews .listEntryTopic {display:inline-block; position:absolute; top:0; left:0; background-color:rgba(0,0,0,0.4); opacity:1; z-index:1000; font-family:'Elza Text Bold', Helvetica, Arial, sans-serif; color:#FFFFFF; font-size:1.1rem; line-height:130%; font-weight:normal; opacity:1; transition:all 0.3s ease-in-out;} .listNews .listEntryTopic:hover {opacity:1; transition:all 0.3s ease-in-out;} .listNews .listEntryTopicInner {padding:8px 10px 8px 10px;} .listNews .listImageContainer {} /* ohne Aspect ratio */ .listNews .listEntryThumbnail picture {z-index:500;} .listNews .listEntryLayer {width:100%; margin-top:0px;} .listNews .listEntryTitle {font-family:'Elza Text Bold', Helvetica, Arial, sans-serif; color:#000000; font-size:1.1rem; line-height:130%; font-weight:normal; margin:0 0 0 0; padding:0 0 0 0;} .listNews .listEntryTitle:hover {color:#57AB27;} .listNews .listEntryDescription {font-family:'Elza Text Light', Helvetica, Arial, sans-serif; color:#000000; font-size:1.1rem; line-height:150%; font-weight:normal; margin:0 0 0 0; padding:0 0 0 0;} .listNews .listEntryButtons {} .listNewsThumbnail_var10 .listImageContainer {aspect-ratio:1/1; overflow:hidden; display:flex; justify-content:center; align-items:center;} /* Aspect ratio 1:1 (1:1) */ .listNewsThumbnail_var20 .listImageContainer {aspect-ratio:4/3; overflow:hidden; display:flex; justify-content:center; align-items:center;} /* Aspect ratio 4:3 (1:0.75) */ .listNewsThumbnail_var30 .listImageContainer {aspect-ratio:3/2; overflow:hidden; display:flex; justify-content:center; align-items:center;} /* Aspect ratio 3:2 (1:0.666) */ .listNewsThumbnail_var50 .listImageContainer {aspect-ratio:16/9; overflow:hidden; display:flex; justify-content:center; align-items:center;} /* Aspect ratio 16:9 (1:0.5625) */ .listNewsThumbnail_var40 .listImageContainer {aspect-ratio:2/1; overflow:hidden; display:flex; justify-content:center; align-items:center;} /* Aspect ratio 2:1 (1:0.5) */ /* --- Breakpoint XS bis S (Desktop) --- */ @media only screen and (min-width:480px){ .listNews .listEntryTopic {font-size:1.2rem;} .listNews .listEntryTitle {font-size:1.2rem;} .listNews .listEntryDescription {font-size:1.2rem;} } /* --- Breakpoint L bis XL (Desktop) --- */ @media only screen and (min-width:992px){ .listNews .listEntryTopic {font-size:1.2rem;} .listNews .listEntryTitle {font-size:1.2rem;} .listNews .listEntryDescription {font-size:1.2rem;} } /* ----------------------------------------------------------------------------------------------------------------- */ /* --- WCA-Formulare --- */ /* --- WCA: Label --- */ #wcaForm label {font:inherit; font-size:.9rem; line-height:inherit; font-weight:100; text-transform:none; color:rgba(51,51,51,.4); padding:0 0 0 14px; margin:0; background-color:transparent;} /* Input (Text, Select, Textarea) */ #wcaForm section label { font-size:.9rem; line-height:inherit; font-weight:100; text-transform:none; padding:0 0 0 0; margin:0;} /* Input (Checkbox, Radio)*/ #wcaForm label {display:block !important; float:left;} #wcaForm section.XS, #wcaForm section.XM, #wcaForm section.SS, #wcaForm section.S, #wcaForm section.M, #wcaForm section.L, #wcaForm section.XL, #wcaForm section.XXL {display:block; float:left; padding-left:10px;} #wcaForm label.XS {width:14%; margin-left:1%;} /* Kombination: XS (15%) + XL (85%) */ #wcaForm label.XS:first-child {width:15%; margin-left:0;} #wcaForm input.XS, #wcaForm textarea.XS, #wcaForm select.XS, #wcaForm section.XS {width:14%; margin-left:1%;} #wcaForm input.XS:first-child, #wcaForm textarea.XS:first-child, #wcaForm select.XS:first-child, #wcaForm section.XS.firstChild {width:15%; margin-left:0;} #wcaForm label.XM {width:19%; margin-left:1%;} /* Kombination: 5x XM (20%); XM (20%) + S (30%) + M (50%) */ #wcaForm label.XM:first-child {width:20%; margin-left:0;} #wcaForm input.XM, #wcaForm textarea.XM, #wcaForm select.XM, #wcaForm section.XM {width:19%; margin-left:1%;} #wcaForm input.XM:first-child, #wcaForm textarea.XM:first-child, #wcaForm select.XM:first-child, #wcaForm section.XM.firstChild {width:20%; margin-left:0;} #wcaForm label.SS {width:24%; margin-left:1%;} /* Kombination: 4x SS (25%); 2x SS (25%) + M (50%) */ #wcaForm label.SS:first-child {width:25%; margin-left:0;} #wcaForm input.SS, #wcaForm textarea.SS, #wcaForm select.SS, #wcaForm section.SS {width:24%; margin-left:1%;} #wcaForm input.SS:first-child, #wcaForm textarea.SS:first-child, #wcaForm select.SS:first-child, #wcaForm section.SS.firstChild {width:25%; margin-left:0;} #wcaForm label.S {width:29%; margin-left:1%;} /* Kombination: S (30%) + L (70%) */ #wcaForm label.S:first-child {width:30%; margin-left:0;} #wcaForm input.S, #wcaForm textarea.S, #wcaForm select.S, #wcaForm section.S {width:29%; margin-left:1%;} #wcaForm input.S:first-child, #wcaForm textarea.S:first-child, #wcaForm select.S:first-child, #wcaForm section.S.firstChild {width:30%; margin-left:0;} #wcaForm label.M {width:49%; margin-left:1%;} /* Kombination: 2x M (50%); M (50% + 2x SS (25%) */ #wcaForm label.M:first-child {width:50%; margin-left:0;} #wcaForm input.M, #wcaForm textarea.M, #wcaForm select.M, #wcaForm section.M {width:49%; margin-left:1%;} #wcaForm input.M:first-child, #wcaForm textarea.M:first-child, #wcaForm select.M:first-child, #wcaForm section.M.firstChild {width:50%; margin-left:0;} #wcaForm label.L {width:69%; margin-left:1%;} /* Kombination: L (70%) + S (30%) */ #wcaForm label.L:first-child {width:70%; margin-left:0;} #wcaForm input.L, #wcaForm textarea.L, #wcaForm select.L, #wcaForm section.L {width:69%; margin-left:1%;} #wcaForm input.L:first-child, #wcaForm textarea.L:first-child, #wcaForm select.L:first-child, #wcaForm section.L.firstChild {width:70%; margin-left:0;} #wcaForm label.XL {width:84%; margin-left:1%;} /* Kombination: XL (85%) + XS (15%) */ #wcaForm label.XL:first-child {width:85%; margin-left:0;} #wcaForm input.XL, #wcaForm textarea.XL, #wcaForm select.XL, #wcaForm section.XL {width:84%; margin-left:1%;} #wcaForm input.XL:first-child, #wcaForm textarea.XL:first-child, #wcaForm select.XL:first-child, #wcaForm section.XL.firstChild {width:85%; margin-left:0;} #wcaForm label.XXL {width:99%; margin-left:1%;} /* Kombination: XXL (100%) */ #wcaForm label.XXL:first-child {width:100%; margin-left:0;} #wcaForm input.XXL, #wcaForm textarea.XXL, #wcaForm select.XXL, #wcaForm section.XXL {width:99%; margin-left:1%;} #wcaForm input.XXL:first-child, #wcaForm textarea.XXL:first-child, #wcaForm select.XXL:first-child, #wcaForm section.XXL.firstChild {width:100%; margin-left:0;} /* --- WCA: Label-Status --- */ #wcaForm label.wglIsInvalid {background-color:#FFFFFF; color:#C20736;} /* Rot 100% = #C20736. */ #wcaForm label.wglIsValid {background-color:#FFFFFF;} #wcaForm label.wglIsNeutral {background-color:#FFFFFF; color:rgba(51,51,51,.4);} /* 100% = #1D1D1D. */ #wcaForm label.wglIsActive {background-color:#FFFFFF; color:#22AE38;} /* Gruen 100% = #22AE38. */ #wcaForm label.wglIsHighlighted {background-color:#FFFFFF;} /* --- WCA: Label-Stern --- */ #wcaForm .formLabelStar {color:#808080; padding-left:2px;} /* 50% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; [50% = #808080;] 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ /* --- WCA: Input-Elemente (Text, File, Select, Textarea, Section) --- */ #wcaForm input {font:inherit; font-size:1rem; line-height:inherit; font-weight:100; padding:0 14px; margin:0 0 10px 0; border:1px solid transparent; background-color:#FEFEFE; border-radius:20px; height:40px;} #wcaForm input[type='text'] {-webkit-appearance:none; -moz-appearance:none;} #wcaForm input[type='number'] {-webkit-appearance:none; -moz-appearance:none;} #wcaForm input[type='password'] {-webkit-appearance:none; -moz-appearance:none;} #wcaForm input[type='file'] {padding:0 !important;} #wcaForm select {font:inherit; font-size:1rem; line-height:inherit; font-weight:100; padding:0 14px; margin:0 0 10px 0; border:1px solid transparent; background-color:#FEFEFE; border-radius:20px; height:40px; cursor:pointer; /* background-color:#FEFEFE; (Element SELECT benoetigt im Minimum einen leichten Grauton!) */ -webkit-appearance:none; -moz-appearance:none; background-image:url('../images/links/down.svg'); background-repeat:no-repeat; background-position:calc(100% - 10px) 50%; background-size:1.3em;} #wcaForm textarea {font:inherit; font-size:1rem; line-height:inherit; font-weight:100; padding:7px 14px; margin:0 0 10px 0; border:1px solid transparent; background-color:#FEFEFE; border-radius:20px; resize:none;} #wcaForm section {font:inherit; font-size:1rem; line-height:inherit; font-weight:100; padding:7px 0; margin:0 0 10px 0; border:1px solid transparent; background-color:#FEFEFE; border-radius:20px;} /* Checkbox und Radio */ /* --- WCA: Input-Element (Radio) --- */ #wcaForm .wglRadioWrapper {margin:0 0 0 0; padding:0; clear:both;} #wcaForm .wglRadioWrapperFloat {margin-right:10px; padding:0; float:left;} #wcaForm .wglRadioFloat label, #wcaForm .wglRadio label {margin:0;} /* --- WCA: Input-Element (Checkbox) --- */ #wcaForm .wglCheckboxWrapper {margin:0 0 0 0; padding:0; clear:both;} #wcaForm .wglCheckboxWrapperFloat {margin-right:10px; padding:0; float:left;} #wcaForm input[type='checkbox']:not(:checked), #wcaForm input[type='checkbox']:checked {opacity:0;} /* Standard Checkbox verbergen */ #wcaForm .wglCheckbox {margin:0 0 0 -10px; padding:0; cursor:pointer; content:'';} /* Eigene Checkbox */ #wcaForm .wglCheckbox + label::before {display:block; width:16px; height:16px; border-radius:2px; background-color:#FFFFFF; float:left; margin-top:5px; margin-right:7px; content:'';} /* Eigene Checkbox */ #wcaForm .wglCheckbox:hover + label::before {background-color:#CCCCCC; content:'';} /* Checkbox (Hover) 20% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; [20% = #CCCCCC;] 10% = #E6E6E6. */ #wcaForm .wglCheckbox:checked + label::before {background-color:#000000; content:'';} /* Checkbox (Angeklickt) 100% Schwarz [100% = #000000;] 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm .wglCheckbox:focus + label::before {outline:rgb(59, 153, 252) auto 5px;} /* Mit :focus Checkbock klickbar machen! */ #wcaForm .wglCheckbox:checked + label {color:#000000; content:'';} /* Label (Angeklickt) 100% Schwarz [100% = #000000;] 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm .wglCheckboxFloat label, #wcaForm .wglCheckbox label {margin:0;} /* --- WCA: Input-Element (Container) --- */ #wcaForm .wglSectionWrapper {margin:0; padding:7px 14px 0 3px;} #wcaForm .wglSectionWrapper .elementPicture {margin:0; padding:0;} #wcaForm .wglSectionWrapper .formElementText {font:inherit; font-size:1.2rem;} /* --- WCA: Input-Platzhalter --- */ input::-webkit-input-placeholder {color:#808080;} /* Webkit browsers 50% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; [50% = #808080;] 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ input:-moz-placeholder {color:#808080;} /* Mozilla Firefox 4 to 18 50% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; [50% = #808080;] 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ input::-moz-placeholder {color:#808080;} /* Mozilla Firefox 19+ 50% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; [50% = #808080;] 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ input:-ms-input-placeholder {color:#808080;} /* Internet Explorer 10+ 50% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; [50% = #808080;] 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ textarea::-webkit-input-placeholder {color:#808080;} /* Webkit browsers 50% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; [50% = #808080;] 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ textarea:-moz-placeholder {color:#808080;} /* Mozilla Firefox 4 to 18 50% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; [50% = #808080;] 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ textarea::-moz-placeholder {color:#808080;} /* Mozilla Firefox 19+ 50% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; [50% = #808080;] 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ textarea:-ms-input-placeholder {color:#808080;} /* Internet Explorer 10+ 50% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; [50% = #808080;] 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ /* --- WCA: Input-Status (Border) --- */ #wcaForm input.wglIsInvalid {border:1px solid #C20736;} /* Input (Text) 100% Rot 100% = #C20736. */ #wcaForm input.wglIsValid {border:1px solid #D3EFD7;} /* Input (Text) 20% Gruen 100% = #22AE38. 20% = #D3EFD7. */ #wcaForm input.wglIsNeutral {border:1px solid #F2F2F2;} /* Input (Text) 5% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; [5% = F2F2F2]. */ #wcaForm input.wglIsActive {border:1px solid #22AE38;} /* Input (Text) 100% Gruen 100% = #22AE38. */ #wcaForm input.wglIsHighlighted {border:1px solid #CCCCCC;} /* Input (Text) 20% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; [20% = #CCCCCC;] 10% = #E6E6E6. */ #wcaForm select.wglIsInvalid {border:1px solid #C20736;} /* Input (Select) 100% Rot 100% = #C20736. */ #wcaForm select.wglIsValid {border:1px solid #D3EFD7;} /* Input (Select) 20% Gruen 100% = #22AE38. 20% = #D3EFD7. */ #wcaForm select.wglIsNeutral {border:1px solid #F2F2F2;} /* Input (Select) 5% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; [5% = F2F2F2]. */ #wcaForm select.wglIsActive {border:1px solid #22AE38;} /* Input (Select) 100% Gruen 100% = #22AE38. */ #wcaForm select.wglIsHighlighted {border:1px solid #CCCCCC;} /* Input (Select) 20% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; [20% = #CCCCCC;] 10% = #E6E6E6. */ #wcaForm textarea.wglIsInvalid {border:1px solid #C20736;} /* Input (Textarea) 100% Rot 100% = #C20736. */ #wcaForm textarea.wglIsValid {border:1px solid #D3EFD7;} /* Input (Textarea) 20% Gruen 100% = #22AE38. 20% = #D3EFD7. */ #wcaForm textarea.wglIsNeutral {border:1px solid #F2F2F2;} /* Input (Textarea) 5% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; [5% = F2F2F2]. */ #wcaForm textarea.wglIsActive {border:1px solid #22AE38;} /* Input (Textarea) 100% Gruen 100% = #22AE38. */ #wcaForm textarea.wglIsHighlighted {border:1px solid #CCCCCC;} /* Input (Textarea) 20% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; [20% = #CCCCCC;] 10% = #E6E6E6. */ #wcaForm section.wglIsInvalid {border:1px solid #C20736;} /* Input (Checkbox, Radio) 100% Rot 100% = #C20736. */ #wcaForm section.wglIsValid {border:1px solid #D3EFD7;} /* Input (Checkbox, Radio) 20% Gruen 100% = #22AE38. 20% = #D3EFD7. */ #wcaForm section.wglIsNeutral {border:1px solid #F2F2F2;} /* Input (Checkbox, Radio) 5% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; [5% = F2F2F2]. */ #wcaForm section.wglIsActive {border:1px solid #22AE38;} /* Input (Checkbox, Radio) 100% Gruen 100% = #22AE38. */ #wcaForm section.wglIsHighlighted {border:1px solid #CCCCCC;} /* Input (Checkbox, Radio) 20% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; [20% = #CCCCCC;] 10% = #E6E6E6. */ /* --- WCA: Input-Status (Background) --- */ #wcaForm .wglIsInvalid {background-color:#F9E7EB;} /* Input (Text, Select, Textarea) 10% Rot 100% = #C20736. 20% = #F3CDD7. 10% = #F9E7EB. */ #wcaForm .wglIsValid {background-color:#D3EFD7;} /* Input (Text, Select, Textarea) 20% Gruen 100% = #22AE38. 20% = #D3EFD7. */ #wcaForm .wglIsNeutral {background-color:#F2F2F2;} /* Input (Text, Select, Textarea) 5% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; [5% = F2F2F2]. */ #wcaForm .wglIsActive {background-color:#D3EFD7;} /* Input (Text, Select, Textarea) 20% Gruen 100% = #22AE38. 20% = #D3EFD7. */ #wcaForm .wglIsHighlighted {background-color:#CCCCCC;} /* Input (Text, Select, Textarea) 20% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; [20% = #CCCCCC;] 10% = #E6E6E6. */ #wcaForm section.wglIsInvalid {background-color:#F9E7EB;} /* Input (Checkbox, Radio) 10% Rot 100% = #C20736. 20% = #F3CDD7. 10% = #F9E7EB. */ #wcaForm section.wglIsValid {background-color:#D3EFD7;} /* Input (Checkbox, Radio) 20% Gruen 100% = #22AE38. 20% = #D3EFD7. */ #wcaForm section.wglIsNeutral {background-color:#F2F2F2;} /* Input (Checkbox, Radio) 5% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; [5% = F2F2F2]. */ #wcaForm section.wglIsActive {background-color:#D3EFD7;} /* Input (Checkbox, Radio) 20% Gruen 100% = #22AE38. 20% = #D3EFD7. */ #wcaForm section.wglIsHighlighted {background-color:#CCCCCC;} /* Input (Checkbox, Radio) 20% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; [20% = #CCCCCC;] 10% = #E6E6E6. */ /* --- WCA: Input-Font --- */ #wcaForm input.wglLight {font-family:'Elza Text Light', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} #wcaForm input.wglNormal {font-family:'Elza Text', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} #wcaForm input.wglMedium {font-family:'Elza Text Medium', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} #wcaForm input.wglSemibold {font-family:'Elza Text Semibold', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} #wcaForm input.wglBold {font-family:'Elza Text Bold', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} #wcaForm select.wglLight {font-family:'Elza Text Light', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} #wcaForm select.wglNormal {font-family:'Elza Text', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} #wcaForm select.wglMedium {font-family:'Elza Text Medium', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} #wcaForm select.wglSemibold {font-family:'Elza Text Semibold', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} #wcaForm select.wglBold {font-family:'Elza Text Bold', Helvetica, Arial, sans-serif; font-style:normal; font-weight:100;} /* --- WCA: Formulare: Einstellungen für alle ausser iOS Geräte --- */ @supports not (-webkit-overflow-scrolling:touch) { #wcaForm .wglCheckboxWrapper label {padding-left:1em; display:block;} /* Verhindert Umbruch bzw. vertikale Verschiebung von LABEL und CHECKBOX bei mehreren Zeilen */ #wcaForm .wglCheckboxWrapperFloat label {padding-left:1em; display:block;} /* Verhindert Umbruch bzw. vertikale Verschiebung von LABEL und CHECKBOX bei mehreren Zeilen */ #wcaForm .wglCheckboxWrapper label span {vertical-align:middle;} #wcaForm .wglCheckboxWrapperFloat label span {vertical-align:middle;} #wcaForm .wglCheckboxWrapper input[type='checkbox'] {position:absolute; vertical-align:middle; margin-top:0;} /* Verhindert Umbruch bzw. vertikale Verschiebung von LABEL und CHECKBOX bei mehreren Zeilen */ } /* --- WCA: Formulare: Spezial-Einstellungen nur für iOS Geräte: Korrektur damit CHECKBOX bei iOS Geräten nicht zu weit oben dargestellt wird --- */ @supports (-webkit-overflow-scrolling:touch) { #wcaForm .wglCheckboxWrapper label {padding-left:1.2em; display:block;} /* Verhindert Umbruch bzw. vertikale Verschiebung von LABEL und CHECKBOX bei mehreren Zeilen */ #wcaForm .wglCheckboxWrapperFloat label {padding-left:1.2em; display:block;} /* Verhindert Umbruch bzw. vertikale Verschiebung von LABEL und CHECKBOX bei mehreren Zeilen */ #wcaForm .wglCheckboxWrapper label span {vertical-align:middle;} #wcaForm .wglCheckboxWrapperFloat label span {vertical-align:middle;} #wcaForm .wglCheckboxWrapper input[type='checkbox'] {position:absolute; vertical-align:middle; margin-top:0.8rem;} /* Verhindert Umbruch bzw. vertikale Verschiebung von LABEL und CHECKBOX bei mehreren Zeilen */ } /* --- WCA: Button --- */ #wcaForm button {width:100%; display:block; cursor:pointer; font:inherit; font-size:inherit; font-weight:100; border:solid 1px #000000; margin:0; padding:5px 16px; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; background-color:#333333; color:#FFFFFF; border-color:#333333;} /* 80% Schwarz 100% = #000000; 90% = #1A1A1A; [80% = #333333]; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm button:hover {background-color:#000000; color:#FFFFFF; border-color:#000000;} /* 100% Schwarz [100% = #000000;] 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm button:active {background-color:#333333; color:#FFFFFF; border-color:#333333;} /* 80% Schwarz 100% = #000000; 90% = #1A1A1A; [80% = #333333]; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm button.buttonMain {background-color:#57AB27; color:#FFFFFF; border-color:#57AB27;} /* 100% Gruen [100% = #57AB27]; 90% = #68B43D; 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ #wcaForm button.buttonMain:hover {background-color:#68B43D; color:#FFFFFF; border-color:#68B43D;} /* 90% Gruen 100% = #57AB27; [90% = #68B43D;] 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ #wcaForm button.buttonMain:active {background-color:#57AB27; color:#FFFFFF; border-color:#57AB27;} /* 100% Gruen [100% = #57AB27]; 90% = #68B43D; 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ #wcaForm button.buttonGray {background-color:#666666; color:#FFFFFF; border-color:#666666;} /* 60% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; [60% = #666666;] 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm button.buttonGray:hover {background-color:#808080; color:#FFFFFF; border-color:#808080;} /* 50% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; [50% = #808080;] 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm button.buttonGray:active {background-color:#666666; color:#FFFFFF; border-color:#666666;} /* 60% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; [60% = #666666;] 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm button.buttonWhite {background-color:#FFFFFF; color:#000000; border-color:#000000;} /* Weiss 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm button.buttonWhite:hover {background-color:#FFFFFF; color:#666666; border-color:#000000;} /* Weiss 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm button.buttonWhite:active {background-color:#FFFFFF; color:#000000; border-color:#000000;} /* Weiss 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm button.buttonNeutral {background-color:transparent; color:#000000; border-color:#000000;} /* Transp. 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm button.buttonNeutral:hover {background-color:transparent; color:#666666; border-color:#000000;} /* Transp. 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm button.buttonNeutral:active {background-color:transparent; color:#000000; border-color:#000000;} /* Transp. 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm button.buttonShort {width:unset;} #wcaForm a.button {cursor:pointer; font:inherit; font-size:16px; font-weight:100; text-decoration:none; border:solid 1px #000000; margin:0; padding:10px 14px; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; background-color:#333333; color:#FFFFFF; border-color:#333333;} /* 80% Schwarz 100% = #000000; 90% = #1A1A1A; [80% = #333333]; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm a.button:hover {background-color:#000000; color:#FFFFFF; border-color:#000000;} /* 100% Schwarz [100% = #000000;] 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm a.button:active {background-color:#333333; color:#FFFFFF; border-color:#333333;} /* 80% Schwarz 100% = #000000; 90% = #1A1A1A; [80% = #333333]; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm a.button.buttonMain {background-color:#57AB27; color:#FFFFFF; border-color:#57AB27;} /* 100% Gruen [100% = #57AB27]; 90% = #68B43D; 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ #wcaForm a.button.buttonMain:hover {background-color:#68B43D; color:#FFFFFF; border-color:#68B43D;} /* 90% Gruen 100% = #57AB27; [90% = #68B43D;] 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ #wcaForm a.button.buttonMain:active {background-color:#57AB27; color:#FFFFFF; border-color:#57AB27;} /* 100% Gruen [100% = #57AB27]; 90% = #68B43D; 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ #wcaForm a.button.buttonGray {background-color:#666666; color:#FFFFFF; border-color:#666666;} /* 60% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; [60% = #666666;] 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm a.button.buttonGray:hover {background-color:#808080; color:#FFFFFF; border-color:#808080;} /* 50% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; [50% = #808080;] 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm a.button.buttonGray:active {background-color:#666666; color:#FFFFFF; border-color:#666666;} /* 60% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; [60% = #666666;] 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm a.button.buttonWhite {background-color:#FFFFFF; color:#000000; border-color:#000000;} /* Weiss 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm a.button.buttonWhite:hover {background-color:#FFFFFF; color:#666666; border-color:#000000;} /* Weiss 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm a.button.buttonWhite:active {background-color:#FFFFFF; color:#000000; border-color:#000000;} /* Weiss 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm a.button.buttonNeutral {background-color:transparent; color:#000000; border-color:#000000;} /* Transp. 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm a.button.buttonNeutral:hover {background-color:transparent; color:#666666; border-color:#000000;} /* Transp. 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm a.button.buttonNeutral:active {background-color:transparent; color:#000000; border-color:#000000;} /* Transp. 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ /* --- WCA: Clearer, Spacer --- */ #wcaForm .elementClearer {margin:0; height:0px; clear:both;} #wcaForm .elementSpace {margin:0; height:1rem;} #wcaForm .elementClearerWithSpace {margin:0; height:1rem; clear:both} #wcaForm .spacer1 {height:1rem;} #wcaForm .spacer2 {height:2rem;} #wcaForm .spacer3 {height:3rem;} #wcaForm .spacer4 {height:4rem;} #wcaForm .spacer5 {height:5rem;} #wcaForm .spacer6 {height:6rem;} #wcaForm .spacer7 {height:7rem;} #wcaForm .spacer8 {height:8rem;} /* --- WCA: Form Spacer --- */ #wcaForm dd.formElementSpacer, #wcaForm div.formElementSpacer {margin-bottom:3rem;} /* --- WCA: Tab-Container --- */ #wcaForm .elementTabContainer {} #wcaForm .elementTabContainer .tabs {} /* height:32px; border-bottom:2px solid #C20736; */ $wcaForm .elementTabContainer .tab {} #wcaForm .containerEntries2 .tab {padding:0; float:left; overflow:hidden;} #wcaForm .containerEntries2 .tab1 {width:50%; margin-left:0%;} #wcaForm .containerEntries2 .tab2 {width:49%; margin-left:1%;} #wcaForm .containerEntries4 .tab {padding:0; float:left; overflow:hidden;} #wcaForm .containerEntries4 .tab1 {width:25%; margin-left:0%;} #wcaForm .containerEntries4 .tab2 {width:24%; margin-left:1%;} #wcaForm .containerEntries4 .tab3 {width:24%; margin-left:1%;} #wcaForm .containerEntries4 .tab4 {width:24%; margin-left:1%;} #wcaForm .tabs button {width:100%; height:30px; display:block; cursor:pointer; font:inherit; font-size:14px; font-weight:100; border:none; padding:0 3px; margin:0; border-radius:4px 4px 0 0; background-color:#000000; color:#FFFFFF;} /* 100% Schwarz [100% = #000000;] 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6. */ #wcaForm .tabs button.tabMain {background-color:#57AB27; color:#FFFFFF;} /* 100% Gruen [100% = #57AB27]; 90% = #68B43D; 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ #wcaForm .tabs button.tabMain:hover {background-color:#68B43D; color:#FFFFFF;} /* 90% Gruen 100% = #57AB27; [90% = #68B43D;] 80% = #79BC52; 70% = #8AC468; 60% = #9ACD7D; 50% = #ABD593; 40% = #BCDDA9; 30% = #CDE6BF; 20% = #DDEED4; 10% = #EFF7EA. */ #wcaForm .tabs button.tabNeutral {background-color:#F2F2F2; color:#1D1D1B;} /* 5% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; [5% = F2F2F2]. */ #wcaForm .tabs button.tabNeutral:hover {background-color:#F2F2F2; color:#8E8E8D;} /* 5% Schwarz 100% = #000000; 90% = #1A1A1A; 80% = #333333; 70% = #4D4D4D; 60% = #666666; 50% = #808080; 40% = #999999; 30% = #B3B3B3; 20% = #CCCCCC; 10% = #E6E6E6; [5% = F2F2F2]. */ /* --- WCA: Info-Boxen --- */ #wcaForm .wcaBox {font:inherit; font-size:14px; line-height:1.2rem; font-weight:400; padding:9px 14px 10px 14px; margin:0 0 10px 0; border:1px solid transparent; background-color:#FEFEFE; border-radius:20px;} #wcaForm .wcaBox_var0 {background-color:#FFFFFF; border-color:#e0e0e0;} /* Grau 100% = #F0F0F0. */ #wcaForm .wcaBox_var1 {background-color:#F9E7EB; border-color:#C20736;} /* 10% Rot 100% = #C20736. 20% = #F3CDD7. 10% = #F9E7EB. */ #wcaForm .wcaBox_var2 {background-color:#e3f2e3; border-color:#c4e3c4;} /* Green */ #wcaForm .wcaBox_var3 {background-color:#fff9e3; border-color:#fff3c4;} /* Yellow */ #wcaForm .wcaBox_var4 {background-color:#e3eeff; border-color:#c4dcff;} /* Blue */ /* --- WCA: Debug-Box --- */ #blockDebug {font:inherit; font-size:14px; line-height:1.2rem; font-weight:100;} #blockDebug p {margin-bottom:8px;} #blockDebug .wglIsInvalid {font-weight:bold; background-color:transparent;} #blockDebug .wglIsValid {font-weight:normal; background-color:transparent;} #blockDebug .wglIsNeutral {font-weight:normal; background-color:transparent;} #blockDebug .wglIsActive {font-weight:normal; background-color:transparent;} #blockDebug .wglIsHighlighted {font-weight:normal; background-color:transparent;} /* --- WCA: Galerie --- */ /* --- WCA: Formulare --- */ #wcaForm .requiredFormfield {display:none !important;} #wcaForm dl.form, #wcaForm div.form {margin:0; padding:0; width:100%;}