header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px} #mbOverlay{position:fixed;z-index:9998;top:0;left:0;width:100%;height:150%;background-color:#000;cursor:pointer}#mbOverlay.mbOverlayOpaque{background:url(../../assets/mediabox/images/80.png)}#mbOverlay.mbOverlayAbsolute{position:absolute}#mbOverlay.mbMobile{position:absolute;background-color:transparent}#mbBottom.mbMobile{line-height:24px;font-size:16px}#mbCenter{position:absolute;z-index:9999;left:50%;padding:10px;background-color:#000;-webkit-border-radius:10px;-khtml-border-radius:10px;-moz-border-radius:10px;border-radius:10px;filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000');-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000')";-webkit-box-shadow:0 5px 20px rgba(0,0,0,.5);-khtml-box-shadow:0 5px 20px rgba(0,0,0,.5);-moz-box-shadow:0 5px 20px rgba(0,0,0,.5);box-shadow:0 5px 20px rgba(0,0,0,.5)}#mbCenter.mbLoading{background:#000 url(../../assets/mediabox/images/loading-dark.gif) no-repeat center;-webkit-box-shadow:none;-khtml-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#mbMedia{position:relative;left:0;top:0;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;line-height:20px;font-size:12px;color:#fff;text-align:left;background-position:center center;background-repeat:no-repeat}#mbBottom{line-height:20px;font-size:12px;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;text-align:left;color:#999;min-height:20px;padding:10px 0 0}#mbTitle,#mbPrevLink,#mbNextLink,#mbCloseLink{display:inline;color:#fff;font-weight:700}#mbNumber{display:inline;color:#999;font-size:.8em;margin:auto 10px}#mbCaption{display:block;color:#999;line-height:1.6em;font-size:.8em}#mbPrevLink,#mbNextLink,#mbCloseLink{float:right;outline:0;margin:0 0 0 10px;font-weight:400}#mbPrevLink b,#mbNextLink b,#mbCloseLink b{color:#eee;font-weight:700;text-decoration:underline}#mbPrevLink big,#mbNextLink big,#mbCloseLink big{color:#eee;font-size:1.4em;font-weight:700}#mbBottom a,#mbBottom a:link,#mbBottom a:visited{text-decoration:none;color:#ddd}#mbBottom a:hover,#mbBottom a:active{text-decoration:underline;color:#fff}#mbError{position:relative;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;line-height:20px;font-size:12px;color:#fff;text-align:center;border:10px solid #700;padding:10px 10px 10px;margin:20px;-webkit-border-radius:5px;-khtml-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#mbError a,#mbError a:link,#mbError a:visited,#mbError a:hover,#mbError a:active{color:#d00;font-weight:700;text-decoration:underline} /* playfair-display-sc-regular - latin */ @font-face { font-family: 'Playfair Display SC'; font-style: normal; font-weight: 400; src: url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-regular.svg#PlayfairDisplaySC') format('svg'); /* Legacy iOS */ } /* playfair-display-sc-italic - latin */ @font-face { font-family: 'Playfair Display SC'; font-style: italic; font-weight: 400; src: url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-italic.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-italic.svg#PlayfairDisplaySC') format('svg'); /* Legacy iOS */ } /* playfair-display-sc-700 - latin */ @font-face { font-family: 'Playfair Display SC'; font-style: normal; font-weight: 700; src: url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-700.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-700.svg#PlayfairDisplaySC') format('svg'); /* Legacy iOS */ } /* playfair-display-sc-700italic - latin */ @font-face { font-family: 'Playfair Display SC'; font-style: italic; font-weight: 700; src: url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-700italic.svg#PlayfairDisplaySC') format('svg'); /* Legacy iOS */ } /* playfair-display-sc-900 - latin */ @font-face { font-family: 'Playfair Display SC'; font-style: normal; font-weight: 900; src: url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-900.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-900.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-900.svg#PlayfairDisplaySC') format('svg'); /* Legacy iOS */ } /* playfair-display-sc-900italic - latin */ @font-face { font-family: 'Playfair Display SC'; font-style: italic; font-weight: 900; src: url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-900italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-900italic.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-sc-v15-latin-900italic.svg#PlayfairDisplaySC') format('svg'); /* Legacy iOS */ } /* playfair-display-regular - latin */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: url('../../files/lsFiles/fonts/playfair-display-v30-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-500 - latin */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; src: url('../../files/lsFiles/fonts/playfair-display-v30-latin-500.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-500.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-500.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-600 - latin */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; src: url('../../files/lsFiles/fonts/playfair-display-v30-latin-600.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-v30-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-600.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-600.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-700 - latin */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; src: url('../../files/lsFiles/fonts/playfair-display-v30-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-700.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-700.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-800 - latin */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 800; src: url('../../files/lsFiles/fonts/playfair-display-v30-latin-800.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-v30-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-800.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-800.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-900 - latin */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; src: url('../../files/lsFiles/fonts/playfair-display-v30-latin-900.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-v30-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-900.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-900.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-italic - latin */ @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; src: url('../../files/lsFiles/fonts/playfair-display-v30-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-italic.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-500italic - latin */ @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500; src: url('../../files/lsFiles/fonts/playfair-display-v30-latin-500italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-v30-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-500italic.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-500italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-600italic - latin */ @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 600; src: url('../../files/lsFiles/fonts/playfair-display-v30-latin-600italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-v30-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-600italic.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-600italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-700italic - latin */ @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 700; src: url('../../files/lsFiles/fonts/playfair-display-v30-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-v30-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-700italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-800italic - latin */ @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 800; src: url('../../files/lsFiles/fonts/playfair-display-v30-latin-800italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-v30-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-800italic.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-800italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-900italic - latin */ @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 900; src: url('../../files/lsFiles/fonts/playfair-display-v30-latin-900italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/lsFiles/fonts/playfair-display-v30-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-900italic.woff') format('woff'), /* Modern Browsers */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/lsFiles/fonts/playfair-display-v30-latin-900italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* * ls_asg ALbert-Schweizer-Gymnasium Leonberg * author leading-systems * 2017 2025 02-2026 */ /*-----------------------------------------------------------------------------------*/ /* Reset /*-----------------------------------------------------------------------------------*/ .bfs p, .bfs li { font-size: 20px; } .bfs h1{ margin-bottom: 1.8rem; } .bfs h2, .bfs h3 { margin-bottom: 1.5rem; font-family: Helvetica, Tahoma, Arial, sans-serif !important; } .bfs-s h2{ margin-bottom: 1.2rem; } .bfs-s a, .bfs a { text-decoration: underline; color: inherit; } .bfs a:focus, .bfs-s a:focus { outline: 1px solid currentColor !important; outline-offset: 1px !important; } .mod_article.m-t-standard{ margin-top:2rem; } .aktuell--box-wrapper { .aktuell--box-image { max-width: 50%; margin-bottom: 1rem; margin-left: 25%; } .aktuell--box-text { max-width: 100%; } @media screen and (min-width: 802px) { display: flex; .aktuell--box-image { max-width: 30%; flex: 0 0 30%; margin-right: 1rem; margin-left:0; } .aktuell--box-text { flex: 1; } } } .boxenGrid { margin: -0.2rem; } .boxGridWrapper { display: flex; flex-wrap: wrap; >div { display: flex; flex: 1; flex-direction: column; flex-basis: calc(100% - 0.8rem); max-width: calc(100% - 0.8rem); margin: 0.4rem; min-height: 180px; &.ce_text { padding: 1rem; } a{ text-decoration: underline; text-underline-offset: 2px; display: block; padding-top: 0.3rem; padding-bottom: 0.3rem; } &.bg-red { padding: 1rem 0.75rem; } &.textCenter { justify-content: center; } .image_container { display: block; width: 100%; height: 100%; max-height: 300px; position: relative; overflow: hidden; img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } } } @media (min-width: 699px) { >div { flex-basis: calc(50% - 0.8rem); max-width: calc(50% - 0.8rem); } } @media (min-width: 1099px) { >div { flex-basis: calc(25% - 0.8rem); max-width: calc(25% - 0.8rem); .image_container{ max-height:unset; } } } } .imageCenter ul { align-items: center; } .text--attention * { font-size: 1.2rem; } .border-info-b-red{ border-bottom: 1px solid #ce000c; padding-bottom: 0.5rem; } .border-info-b{ border-bottom: 1px solid #000; padding-bottom: 0.5rem; } .mgb-0{ margin-bottom:0; &.fullwidth-content{ margin-bottom:0; } } .ce_gallery.gallery-partner { ul { display: flex; flex-direction: row; justify-content: end; flex-wrap: wrap; li{ list-style:none; max-width: 25%; } @media screen and (min-width:768px){ flex-wrap: nowrap; li{ list-style:none; max-width: 16%; } } } } .newsBildText { &.mod_newslist { display: flex; flex-wrap: wrap; margin: -8px; .layout_latest { display: flex; width: 100%; margin: 8px; .image_container { flex: 0 0 20%; max-width: 20%; box-sizing: border-box; img { width: 100%; height: 100%; object-fit: cover; display: block; } } .textWrapper { flex: 1; h2{ margin-bottom: 0.5rem; } p.more { margin-top: 1rem; } } } &.column02 { .layout_latest { @media (min-width: 889px) { flex-direction: row; width: calc(50% - 16px); } } } } } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } .clear,#clear,.clearFloat { height:0.1px; font-size:0.1px; line-height:0.1px; clear:both; } .clearing { clear: both; } .block { overflow:hidden; } .invisible { border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; } /*-----------------------------------------------------------------------------------*/ /* General Styles /*-----------------------------------------------------------------------------------*/ body{ -webkit-animation:fadein 2s; -moz-animation:fadein 2s; -ms-animation:fadein 2s; -o-animation:fadein 2s; animation:fadein 2s} @keyframes fadein{ from{opacity:0}to{opacity:1} } @-moz-keyframes fadein{ from{opacity:0}to{opacity:1} } @-webkit-keyframes fadein{ from{opacity:0}to{opacity:1} } @-ms-keyframes fadein{ from{opacity:0}to{opacity:1} } @-o-keyframes fadein{ from{opacity:0}to{opacity:1}} body #wrapper, #footer-bottom { padding: 0 1rem; max-width: 1400px; margin: 0 auto; position: relative; } body,html, wrapper{ height: 100%; } #header{ position: relative; } .inside { position: static; } #main { float: none; } /* links */ a { text-decoration: none; color: #CE000C; } #header a { color: #FFFFFF; } ul {margin: 0;} li { list-style: inside; line-height: 173%; } /* --- Font Sizes + Weight -- */ h1, h2, h3, h4, h5, h6, .headfont p, p.headfont { margin:0; padding:0; font-family: 'Playfair Display', 'Times', serif !important; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-size: 1.5rem; line-height: 120%; margin-bottom: 0.3rem; } h1,h2,h3,h4,h5,h6, p.mega { word-wrap: break-word; /* Fallback fuer Chrome und IE < 10 */ -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .headfont h2, .headfont h3, .headfont h4, .headfont h5, .headfont h6 { font-size: 1.8rem; } p.mega, .mega , .mega, h2.mega, .mega h2, h3.mega, .mega h3, h4.mega, .mega h4,h5.mega, .mega h5 { font-size: 2.5rem; line-height: 100%; } p.xsmall , .xsmall p { font-size: 1.2rem; } .middle p, p.middle{ font-size: 1.2rem; } h1.fat, .fat h1, h2.fat, .fat h2, h3.fat, .fat h3, h4.fat, .fat h4, h5.fat, .fat h5, p.fat-font, .fat-font p { font-size: 1.5rem; line-height: 105%; } h1.large, .large h1, h2.large,.large h2, h3.large,.large h3, .large h4, h4.large, .large h5, h5.large, .larger p{ font-size: 1.2rem; line-height: 125%; } .larger p{ margin-bottom: 1rem; } .mega h1, h1.mega{ font-size: 2.5rem; line-height: 100%; } strong, .strong { font-weight: bold !important; } /* navigation */ .mod_navigation li, nav.mod_customnav li { list-style: none; } p, nav.mod_customnav li,li { line-height: 150%; font-size: 1rem; } nav.mod_customnav li,li { line-height: 150%; font-size: 1rem; } p, nav.mod_customnav li,li { font-family:"Helvetica", "Tahoma", sans-serif !important; font-weight: 300; margin: 0; padding: 0; } nav.mod_customnav { background: transparent !important; color: #000000!important; } nav.mod_customnav li strong { font-weight: normal !important; } /* -- img + logo -- */ #logo { max-width: 680px; padding: 0.5rem 2.5rem 0.5rem 0.2rem; display: inline-block; } #logo img{ width: 100%; height: auto; } img { max-width:100%; height:auto; } .ce_image.half.box.box-right img { display: block; } /* -- classes -- */ .top-distance { padding-top: 1.5rem; } .bottom-distance { margin-bottom:1.5rem; } .float-right{ float: right; } .float-none { float: none !important; } .nowrap { white-space:nowrap; } /*-----------------------------------------------------------------------------------*/ /* grid generals /*-----------------------------------------------------------------------------------*/ .fullwidth { margin: 1rem 0 3rem 0; } .site-fullwidth { padding: 2% 0 0 0; } .layout_full { width: 100%; } .site-right { padding-right: 2rem; } .side-left { margin-bottom: 1rem; } .half { width: 50%; float: left; } .half.box{width: 100%; float: left; } .half.box:not(.ce_image){ padding: 0.5rem; } .half.box.box-right { margin-top: 1%; } .half.box.box-left { margin-right: 1%; margin-top: 1%; } .contentbox { padding: 1rem 1rem; margin-bottom: 1rem; &.pd-0{ padding: 0 0 0 1rem; } } .box-distance { padding: 2rem 1rem 2rem; } p.back, p.more { background: #ce000c; display: inline-block; padding: 5px 10px; color: #ffffff; margin-bottom: 1%; } p.back a, p.more a { color: #FFFFFF; } .newsbox { background: #ce000c; color: #ffffff; padding: 3rem 1rem; } /* -- footer --*/ footer#footer { display: inline-block; width: 100%; border-bottom: 2px solid #ce000c; border-top: 2px solid #ce000c; padding: 1rem 0; position: relative; margin: 4rem 0 7rem; } #footer .side-right { padding-right: 1rem; } #footer .side-left.padding.footertextwrapper{ width:100%; } .footercoloumn01 { padding-right: 4rem; float: left; } .footercoloumn02 { float: left; } .fullwidth.footernavigation { padding-left: 1rem; bottom: -100px; position: absolute; } #footer .box-distance { padding: 2rem 2rem; } .footernavigation p { font-size: 0.7rem; } #footer a { text-decoration: none; } /*-----------------------------------------------------------------------------------*/ /* Underline-Styles /*-----------------------------------------------------------------------------------*/ .underlineLink p{ a{ text-decoration: underline; text-underline-offset: 2px; display: block; padding-top: 0.3rem; padding-bottom: 0.3rem; } } .border { padding: 0.5rem 0 !important; border-bottom: 2px solid #ce000c; border-top: 2px solid #ce000c; margin-top: 1rem !important; margin-bottom: 1rem !important; } .border-top-red { border-top: 2px solid #ce000c; padding: 3rem 0 0rem 0 !important; } .border-bottom-red { border-bottom: 2px solid #ce000c; padding: 2rem 0!important; } .border-top-black { border-top: 2px solid #000000; padding: 0.5rem 0; } .border-bottom-black { border-bottom: 2px solid #000000; padding: 0.5rem 0 !important; } .mod_newslist h3 { border-bottom: 2px solid #ce000c; padding-bottom: 5px; } .underline p:not(.not) { border-bottom: 2px solid #ce000c; color: #ce000c; } .underlineblack p:not(.not) { border-bottom: 2px solid #000000; color: #000000; } .underlinewhite p:not(.not) { border-bottom: 2px solid #ffffff; } /* border mit line-height bei Unterrichtszeiten */ .underlineblack-LH p:not(.not) { border-bottom: 2px solid #000000; color: #000000; line-height: 2.5rem; } /* line black + red */ .hr { padding-top: 10px; border-bottom: 1px solid #000; margin-bottom: 10px; } .hrred { padding-top: 10px; border-bottom: 2px solid #ce000c; margin-bottom: 10px; } /*-----------------------------------------------------------------------------------*/ /* Colors /*-----------------------------------------------------------------------------------*/ .bg-red { background: #ce000c; } .bg-red h1, h1 .bg-red, .bg-red h2, h2.bg-red, h3.bg-red,.bg-red h3, h4.bg-red,.bg-red h4, h5.bg-red, .bg-red h5, .bg-red p, .bg-red a, .white { color: #ffffff; } .red p, .red, h2.red { color: #ce000c; } .black p, p.black { color: #000000; } /* * <-colors */ /*-----------------------------------------------------------------------------------*/ /* form - contactform /*-----------------------------------------------------------------------------------*/ .contactform .formbody { margin-top: 1rem; } .contactform label { color: #ce000c; } span.captcha_text { display: block; margin: 5px 0; color: #8c8a8a } .captcha, textarea#ctrl_5 { background: rgba(206, 0, 12, 0.09); } .contactform table { width: 100%; } .contactform td { display: block; padding: 5px 0 0px 0; } .contactform tr { border-top: 1px solid #ce000c; } textarea, input { width: 100%; background: rgba(206, 0, 12, 0.09); border:0px solid red; } .submit, .button { border: none; cursor: pointer; color: #ffffff; background: #ce000c; } .submit { width: 71px; border-radius: 0px; } input { padding: 6px; } /* * <-contactform */ /*-----------------------------------------------------------------------------------*/ /* Calendar /*-----------------------------------------------------------------------------------*/ .mod_calendar.padding { padding: 0 3% 0 10%; } table.calendar { width: 98%; border-collapse: separate; background: #ffffff; } table.calendar .head { padding: 0.2rem 0; text-align: center; background: #555450; font-size: 12px; color: #ffffff; } table.calendar th.head.current { width: 60%; } table.calendar th.previous { width: 20%; padding-left: 3px; text-align: left; border-left: 1px solid #d9d9d9; } table.calendar th.next { width: 20%; padding-right: 3px; text-align: right; border-right: 1px solid #d9d9d9; } table.calendar th a { font-weight: normal; text-decoration: none; color: #ffffff; } table.calendar th a:hover, table.calendar th a:focus { text-decoration: underline; } table.calendar .label { padding:5px 2px; text-align: center; background: #ffffff; border-right: 1px solid #d9d9d9; border-bottom: 1px solid #bbb; font-size: 12px; color:#444; } table.calendar .label:first-child { border-left: 1px solid #d9d9d9; } table.calendar .label span { display: none; } table.calendar .weekend { background: #f1f1f1; color: #8e8e8e; } table.calendar td{ width: 13%; height: 8rem; border-right: 1px solid #d9d9d9; border-bottom: 1px solid #ce000c; } thead .label{ width: 13%; border-right: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; } /* thead .label, td { display: inline-block; } */ table.calendar .col_first { border-left: 1px solid #d9d9d9; } table.calendar .header { margin: 1px; padding: 1px; background: #e6e6e6; font-size: 11px; color: #666666; } table.calendar .today { background: #ce000c; color: #fff; } table.calendar .event { margin: 3px; line-height: 1.1; } table.calendar .event a { font-size: 9px; color: #444; text-decoration: none; } /*-----------------------------------------------------------------------------------*/ /* Newsliste /*-----------------------------------------------------------------------------------*/ .mod_newslist .layout_latest { border: 1px solid #ce000c; margin-bottom: 20px; padding: 10px; } /*-----------------------------------------------------------------------------------*/ /* video /*-----------------------------------------------------------------------------------*/ .video_wrapper { position: relative; height: 0; padding-bottom: 56.25%; padding-top: 0; color: #fff; } .video_trigger { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -40%); line-height: 1.1; padding: 0 3rem; background:rgba(255, 255, 255, 0.7); padding: 1rem; width: 100%; } input[type="button"].ls_button_03, .ls_headerBox_01 .ce_text a { background: #ce000c; color: #fff; font-size: 0.8rem; border: 2px solid rgba(255, 255, 255, 0.23); padding: 0.2rem 1rem; border-radius: 22px; width: unset; cursor: pointer; margin-top: 1rem; } .video_wrapper .video_layer { position: absolute; display: none; height: 100%; width: 100%; margin: auto; } .video_wrapper video, .video_wrapper iframe, .video_wrapper object, .video_wrapper embed { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .video_wrapper { background-image: url('/files/lsFiles/img/videoPlaceholderImage/asgDefaultImage.jpg'); background-size: cover; background-position: top; background-repeat: no-repeat; } .video-placeholder-overlay h2 { margin-bottom: 0.6rem; line-height: 1; font-size: 1rem; color:#000; } .video-placeholder-overlay h3 { margin-bottom: 1rem; line-height: 1; font-size: 0.9rem; font-size: 1rem; color:#000; } .video-placeholder-overlay .ls_txs_small { color: #000; font-size:0.8rem; } /*-----------------------------------------------------------------------------------*/ /* media queries /*-----------------------------------------------------------------------------------*/ @media screen and (min-width:500px){ .half.box { width: 49.5%; min-height: 200px; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; } .flex { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap:wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } table.calendar .event a { font-size: 11px; } } @media screen and (min-width:802px) { body #wrapper{ padding: 0rem; } p { line-height: 173%; } p.mega, .mega, h2.mega, .mega h2, h3.mega, .mega h3, h4.mega, .mega h4, h5.mega, .mega h5 { font-size: 1.9rem; } p.fat-font, .fat-font p, h1.fat, .fat h1, h2.fat, .fat h2, h3.fat, .fat h3, h4.fat, .fat h4, h5.fat, .fat h5 { font-size: 2rem; } #header{ background: #ce000c; margin-bottom: 5rem; position: relative; } .fullwidth { width:100%; } .side-left.padding, .fullwidth.image-wrapper, .content-padding { padding: 0 3% 0 10%; } .site-fullwidth { padding: 2% 3% 0 10%; } .side-left { width: 48%; float: left; } .side-right{ width: 52%; float: left; } .side-right.padding, .side-left.padding-right { padding-right: 3%; } .box-distance p { padding: 0 0 0 3rem; } .middle p, p.middle { font-size: 1.4rem; } .half.box { min-height: 180px; } .fullwidth-content { margin: 6rem 2rem 4rem 0; } .contentbox { padding: 3rem 1rem; width: 30%; float: left; margin: 0 1rem 0 0; } .box-distance { padding: 4rem 2rem 2rem; } .image-column{ width: 32%; float: left; } .image-column.image-column-center { margin: 0 2%; } textarea, .contactform input { width: 100%; } /*css für Beitragsseiten */ .newsbox { margin: 2% 0 2% 10%; } .layout_full { width: 90%; float: right; } .layout_full .ce_image { width: 47%; float: left; padding-right: 2%; } .layout_full .ce_image { display: inline; } .layout_full .ce_image, .layout_full .ce_text { margin-top: 2rem; margin-bottom: 2rem; } .layout_full .ce_headline { margin-top: 1rem; } .layout_full p { width: 90%; } .video_trigger { top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2rem; } .video-placeholder-overlay h2 { margin-bottom: 0.6rem; font-size: 1.4rem; } .video-placeholder-overlay h3 { margin-bottom: 1rem; line-height: 1; font-size: 1.1rem; } } @media screen and (min-width:870px){ .mega h1, h1.mega { font-size: 3.4rem; } p.mega, .mega, h2.mega, .mega h2, h3.mega, .mega h3, h4.mega, .mega h4, h5.mega, .mega h5 { font-size: 2.2rem; line-height: 100%; } p.fat-font, .fat-font p, h1.fat, .fat h1, h2.fat, .fat h2, h3.fat, .fat h3, h4.fat, .fat h4, h5.fat, .fat h5 { font-size: 2.4rem; line-height: 110%; } .box-distance p { padding: 0 0 0 3rem; } .middle p, p.middle { font-size: 1.35rem; } h1.large, .large h1, h2.large,.large h2, h3.large,.large h3, .large h4, h4.large, .large h5, h5.large, .larger p{ font-size: 1.7rem; line-height: 125%; } } @media screen and (min-width:1024px){ nav.mod_customnav { background: transparent; padding: 0.5rem 1rem !important; color: #ffffff !important; margin-right: 0 !important; } nav.mod_customnav li, li { line-height: 173%; font-size: 0.9rem; font-size: 1rem; } p.xsmall, .xsmall p { font-size: 1.35rem; } .mega h1, h1.mega { font-size: 3.5rem; } p.mega, .mega, h2.mega, .mega h2, h3.mega, .mega h3, h4.mega, .mega h4, h5.mega, .mega h5 { font-size: 2.6rem; } p.fat-font, .fat-font p, h1.fat, .fat h1, h2.fat, .fat h2, h3.fat, .fat h3, h4.fat, .fat h4, h5.fat, .fat h5 { font-size: 2.8rem; } h1.large,.large h1, h2.large,.large h2, h3.large,.large h3, .large h4, h4.large, .large h5, h5.large, .larger p{ font-size: 1.8rem; } .half.box { min-height: 230px; } .contentbox { padding: 3rem 0.5rem 2rem 0.5rem; width: 30%; float: left; } input[type="button"].ls_button_03, .ls_headerBox_01 .ce_text a { font-size: 1rem; padding: 0.5rem 2rem; } } @media screen and (min-width:1090px){ h1.large,.large h1, h2.large,.large h2, h3.large,.large h3, .large h4, h4.large, .large h5, h5.large, .larger p{ font-size: 1.9rem; } } @media screen and (min-width:1200px){ .middle p, p.middle { font-size: 1.8rem; } .contentbox { padding: 3rem 1rem 2rem 1rem; } .half.box { min-height: 270px; } p.fat-font, .fat-font p, h1.fat, .fat h1, h2.fat, .fat h2, h3.fat, .fat h3, h4.fat, .fat h4, h5.fat, .fat h5 { font-size: 3rem; } h1.large, .large h1, h2.large,.large h2, h3.large,.large h3, h4.large ,.large h4, .large h5, h5.large { font-size: 2.1rem; } .contentbox { padding: 3rem 1rem 2rem 1rem; } } @media screen and (min-width:1224px){ #header { margin-bottom: 6rem; } .half.box { min-height: 275px; } } @media screen and (min-width:1336px){ .half.box { min-height: 270px; } table.calendar td { width: 14%; } thead .label{ width: 14%; } } @media screen and (min-width:1350px){ .mega h1, h1.mega { font-size: 4.7rem; } p.mega, .mega, h2.mega, .mega h2, h3.mega, .mega h3, h4.mega, .mega h4, h5.mega, .mega h5 { font-size: 3.5rem; } p.fat-font, .fat-font p, h1.fat, .fat h1, h2.fat, .fat h2, h3.fat, .fat h3, h4.fat, .fat h4, h5.fat, .fat h5 { font-size: 3.4rem; } .half.box { min-height: 300px; } } @media screen and (min-width:1405px){ .fullwidth.footernavigation { padding-left: 0rem; } .contentbox { &.pd-0{ padding: 0 0 0 1rem; } } } footer#footer { border-top:0; } .footertextwrapper { margin-top: 3rem; margin-bottom: 3rem; display: flex; flex-direction: column; flex: 1 1 100%; max-width: 100%; .ce_text { margin-bottom: 2rem; } @media screen and (min-width:798px) { flex-direction: row; .column-01, .column-02 { flex: 1 1 50%; max-width: 50%; } .column-03 { flex: 1 1 100%; max-width: 100%; } } @media screen and (min-width:998px) { .column-01, .column-02, .column-03 { flex: 1 1 25%; max-width: 25%; } } } .p-r-l-2{ div{ @media screen and (min-width:798px){ padding: 0 2rem; } @media screen and (min-width:1410px){ padding: 0; } } } /* * NAVIGATION -> */ /* * breadcrum navi/navigation path -> */ .mod_breadcrumb { margin-top: 7px; line-height: normal; font-size: 0.7rem; } .mod_breadcrumb ul { margin: 0; } .mod_breadcrumb ul li { display: inline-block; white-space: nowrap; font-family: 'Oswald', 'Helvetica','Arial', sans-serif; } .mod_breadcrumb ul li:not(:last-child):after { padding-left: 10px; padding-right: 10px; content: ">"; } /* * <- breadcrum navi/navigation path */ /* * main navigation in header (big screen) -> */ nav.mod_customnav { background: #ce000c; padding: 5px; color: #ffffff; margin-right: 3rem; } #header nav.mod_customnav { text-align: right; color: #ffffff; padding: 0 1rem; display: inline-block; float: right; /* display:block;*/ } #header .mod_navigation { margin-top: 10px; overflow: visible; position: absolute; text-align: right; z-index: 9997; bottom: -70px; left: 30px; } /*isi darüber hier oben right*/ #header .mod_navigation ul { margin: 0; } #header .mod_navigation ul li { position: relative; } #header .mod_navigation ul li span, #header .mod_navigation ul li a, #header .mod_navigation ul li strong { color: #000000; font-size: 130%; font-size: 1rem; text-decoration: none; padding-right: 15px; } /* #header .mod_navigation ul li.last a { padding-right: 0px; } */ #header .mod_navigation ul.level_1 > li.last { margin-right: 0px; } #header .mod_navigation ul.level_1 > li { display: inline-block; margin-right: 15px; padding-bottom: 10px; padding-top: 10px; } #header .mod_navigation strong.active, #header .mod_navigation strong.trail { font-weight: normal !important; } #header .mod_navigation span:hover, #header .mod_navigation a:hover, #header .mod_navigation span.active, #header .mod_navigation a.active, #header .mod_navigation strong.active, #header .mod_navigation span.trail, #header .mod_navigation a.trail, #header .mod_navigation strong.trail { color: #ce000c; } #header .mod_navigation span.submenu, #header .mod_navigation a.submenu, #header .mod_navigation strong.submenu { background-image: url("../../files/lsFiles/images/misc/arrow_right.png"); background-size: 10px; background-position: right center; background-repeat: no-repeat; } #header .mod_navigation span.trail, #header .mod_navigation a.trail, #header .mod_navigation strong.trail { background-image: url("../../files/lsFiles/images/misc/arrow_down.png"); background-size: 10px; background-position: right center; background-repeat: no-repeat; } #header .mod_navigation .submenu ul { position: absolute; display: none; background-color: rgba(255,255,255,1.0); box-shadow: 3px 15px 10px rgba(0,0,0,0.8); padding: 20px; padding-right: 10px; } #header .mod_navigation .submenu:hover > ul { display: block; } #header .mod_navigation .submenu ul.level_2 { top: 100%; left: 0px; border-top: 1px solid #ce000c; text-align: left; } #header .mod_navigation .submenu ul.level_2 ul { top: 0px; left: 100%; } #header .mod_navigation .submenu ul li { padding-top: 5px; padding-bottom: 5px; padding-right: 10px; margin-right: 0px; white-space: nowrap; } /* * <- main navigation in header (big screen) */ /* * main navigation submenu (big screen) -> */ .mainNavigationSubmenu { margin-bottom: 20px; } .mainNavigationSubmenu ul { margin-bottom: -5px; } .mainNavigationSubmenu ul li { position: relative; padding-top: 5px; padding-bottom: 5px; } .mainNavigationSubmenu ul li:not(:last-child) { border-bottom: 1px solid #CDCDCD; } .mainNavigationSubmenu ul.level_2 li:first-child { border-top: 1px solid #CDCDCD; } .mainNavigationSubmenu ul li:last-child { margin-bottom: 10px; } .mainNavigationSubmenu ul.level_2 li { margin-left: 15px; margin-right: 0px; margin-bottom: 0px; } .mainNavigationSubmenu ul.level_1 > li > a, .mainNavigationSubmenu ul.level_1 > li > span { font-weight: normal; } .mainNavigationSubmenu ul li span, .mainNavigationSubmenu ul li a { color: #777777; font-size: 100%; font-size: 0.85rem; text-decoration: none; padding-right: 15px; } .mainNavigationSubmenu span:hover, .mainNavigationSubmenu a:hover, .mainNavigationSubmenu span.active, .mainNavigationSubmenu a.active, .mainNavigationSubmenu span.trail, .mainNavigationSubmenu a.trail { color: #ce000c; } .mainNavigationSubmenu ul li .ocSubnaviToggler { display: block; height: 23px; width: 20px; position: absolute; top: 0px; right: 0px; cursor: pointer; background-size: 10px; background-position: center center; background-repeat: no-repeat; background-color: #F4F4F4; } .mainNavigationSubmenu ul li.lsUnfoldClosed > .ocSubnaviToggler { background-image: url("../../files/lsFiles/images/misc/arrow_down.png"); } .mainNavigationSubmenu ul li.lsUnfoldOpen > .ocSubnaviToggler { background-image: url("../../files/lsFiles/images/misc/arrow_up.png"); } .mainNavigationSubmenu ul li.lsUnfoldOpen.lsUnfoldRunning > .ocSubnaviToggler { background-image: url("../../files/lsFiles/images/misc/arrow_down.png"); } .mainNavigationSubmenu ul li.lsUnfoldClosed.lsUnfoldRunning > .ocSubnaviToggler { background-image: url("../../files/lsFiles/images/misc/arrow_up.png"); } /* * If the body class "useOcNavi" is set by the javascript off canvas navigation * module, we know that javascript is active. Therefore, in this case we hide * navigation levels below level_1 because we know that the unfolding script will * be used to show them. */ body.useOcNavi .mainNavigationSubmenu ul.level_1 ul { margin-top: 5px; overflow: hidden; display: none; } /* * <- main navigation submenu (big screen) */ /* * second navigation in header (big screen) -> */ #header .secondNavigation { float: right; text-align: right; margin-bottom: 20px; padding-top: 5px; } #header .secondNavigation ul li { display: inline-block; margin-left: 10px; } #header .secondNavigation span:hover, #header .secondNavigation a:hover, #header .secondNavigation span.active, #header .secondNavigation a.active, #header .secondNavigation span.trail, #header .secondNavigation a.trail { color: #ce000c; } #header .secondNavigation span.submenu, #header .secondNavigation a.submenu { background-image: url("../../files/lsFiles/images/misc/arrow_right.png"); background-size: 10px; background-position: right center; background-repeat: no-repeat; } #header .secondNavigation span.trail, #header .secondNavigation a.trail { background-image: url("../../files/lsFiles/images/misc/arrow_down.png"); background-size: 10px; background-position: right center; background-repeat: no-repeat; } /* * <- second navigation in header (big screen) */ /* * -> small screen navigation (containing main navigation, second navigation * and a few other things, e.g. languageSelector and search form) */ #smallScreenNaviToggler { width: 36px; height: 36px; cursor: pointer; background-image: url("../../files/lsFiles/images/misc/hamburger.png"); background-size: contain; background-repeat: no-repeat; display: none; position: absolute; z-index: 10100; top: 10px; right: 10px; } #merconisSmallScreenNavigation .mod_navigation ul li span, #merconisSmallScreenNavigation .mod_navigation ul li a, #merconisSmallScreenNavigation .mod_navigation ul li strong { padding-left: 5px; } #merconisSmallScreenNavigation { padding: 10px; padding-top: 50px; position: relative; overflow: hidden; display: none; box-shadow: 0 4px 10px #666666; margin-bottom: 20px !important; } .useFoldedNavi .foldedNaviToggler { position: absolute; right: 13px; padding: 2px; top: 0px; width: 0px; cursor: pointer; height: 18px; } .foldedNaviToggler.lsUnfoldClosed:after { content: url("../../files/lsFiles/images/misc/plus.png") !important; } .useFoldedNavi .foldedNaviToggler.lsUnfoldOpen::after { content: url("../../files/lsFiles/images/misc/minus.png") !important; } .useFoldedNavi .foldedNaviToggler { border: none; } /* * language selector in small screen navi -> */ #merconisSmallScreenNavigation .ls_languageSelector { margin-left: -5px; margin-bottom: 20px; overflow: visible; } #merconisSmallScreenNavigation .ls_languageSelector img { padding: 5px; display: inline-block; } /* * <- language selector in small screen navi */ /* * product search form in small screen navi -> */ #merconisSmallScreenNavigation .template_productSearch_default { text-align: right; } /* * <- product search form in small screen navi */ /* * navigation modules in small screen navi -> */ #merconisSmallScreenNavigation .mainNavigation { padding-bottom: 20px; } #merconisSmallScreenNavigation .mod_navigation ul { margin-bottom: -5px; } #merconisSmallScreenNavigation .mod_navigation ul li { position: relative; padding-top: 10px; padding-bottom: 5px; } #merconisSmallScreenNavigation .mod_navigation ul li:not(:last-child) { border-bottom: 1px solid #ce000c; } #merconisSmallScreenNavigation .mod_navigation ul.level_2 li:first-child { border-top: 1px solid #ce000c; } #merconisSmallScreenNavigation .mod_navigation ul li:last-child { margin-bottom: 10px; } #merconisSmallScreenNavigation .mod_navigation ul.level_2 li { margin-left: 15px; margin-right: 0px; margin-bottom: 0px; } #merconisSmallScreenNavigation .mod_navigation ul.level_1 > li > a, #merconisSmallScreenNavigation .mod_navigation ul.level_1 > li > span { font-weight: normal; } #merconisSmallScreenNavigation .mod_navigation ul li strong { font-weight: normal !important; } #merconisSmallScreenNavigation .mod_navigation ul li span, #merconisSmallScreenNavigation .mod_navigation ul li a, #merconisSmallScreenNavigation .mod_navigation ul li strong { color: #000000; font-size: 120%; font-size: 1rem; text-decoration: none; padding-right: 15px; } #merconisSmallScreenNavigation .mod_navigation span:hover, #merconisSmallScreenNavigation .mod_navigation a:hover, #merconisSmallScreenNavigation .mod_navigation span.active, #merconisSmallScreenNavigation .mod_navigation a.active, #merconisSmallScreenNavigation .mod_navigation strong.active, #merconisSmallScreenNavigation .mod_navigation span.trail, #merconisSmallScreenNavigation .mod_navigation a.trail, #merconisSmallScreenNavigation .mod_navigation strong.trail { color: #ce000c; } #merconisSmallScreenNavigation .mod_navigation ul li .ocSubnaviToggler { display: block; height: 28px; width: 40px; position: absolute; top: 0px; right: 0px; cursor: pointer; background-size: 16px; background-position: center center; background-repeat: no-repeat; background-color: rgba(255, 255, 255, 0); } #merconisSmallScreenNavigation .mod_navigation ul li.lsUnfoldClosed > .ocSubnaviToggler { background-image: url("../../files/lsFiles/images/misc/arrow_down.png"); } #merconisSmallScreenNavigation .mod_navigation ul li.lsUnfoldOpen > .ocSubnaviToggler { background-image: url("../../files/lsFiles/images/misc/arrow_up.png"); } #merconisSmallScreenNavigation .mod_navigation ul li.lsUnfoldOpen.lsUnfoldRunning > .ocSubnaviToggler { background-image: url("../../files/lsFiles/images/misc/arrow_down.png"); } #merconisSmallScreenNavigation .mod_navigation ul li.lsUnfoldClosed.lsUnfoldRunning > .ocSubnaviToggler { background-image: url("../../files/lsFiles/images/misc/arrow_up.png"); } /* * If the body class "useOcNavi" is set by the javascript off canvas navigation * module, we know that javascript is active. Therefore, in this case we hide * navigation levels below level_1 because we know that the unfolding script will * be used to show them. */ body.useOcNavi #merconisSmallScreenNavigation .mod_navigation ul.level_1 ul { margin-top: 5px; overflow: hidden; display: none; } /* * <- navigation modules in small screen navi */ /* * Show the small screen navi toggler regardless of the screen size if * the ocNavi is open. Otherwise the ocNavi could not be closed if the screen * has increased while the ocNavi has been open. */ body.useOcNavi.lsOcNaviOpen #smallScreenNaviToggler { display: block; } /* * <- small screen navigation */ /*isi 820*/ @media only screen and (max-width: 1024px) { /* hide the big screen navigation elements */ #header .secondNavigation, #header .mod_navigation, #header nav.mod_customnav, .mainNavigationSubmenu, .mod_breadcrumb { display: none; } /* show the small screen navigation */ #merconisSmallScreenNavigation { display: block; } /* * hide the small screen navi if the javascript * off canvas navigation is active */ body.useOcNavi #merconisSmallScreenNavigation { display: none; margin-bottom: 0; } /* * show the small screen navi toggler if the * javascript off canvas navigation is active */ body.useOcNavi #smallScreenNaviToggler { display: block; } } /* * <- NAVIGATION */ /*styles 2021*/ .headerBox-01.box { padding: 0.5rem; margin-bottom: 1.5rem; } .layout_full .ce_image, .layout_full .ce_text { margin-top: 1.5rem; margin-bottom: 1.5rem; } .mod_newslist h3 { margin-top: 1rem; } .ls_gallery_01 { margin-top: -1%; margin-left: -1%; margin-right: -1%; } .ls_gallery_02 { flex-basis: 100%; margin-left: -1%; margin-right: -1%; } .ls_gallery_01 #mbCenter, #mbCenter { overflow: hidden; background-color: #8f8f8f; border-radius: 0; box-shadow: none; padding: 0; } .ls_gallery_01 #mbCenter img, #mbCenter img { width: 100%; } #mbMedia { padding: 10px; } #mbPrevLink, #mbNextLink, #mbCloseLink { margin-right: 10px; } #mbBottom { padding-bottom: 10px; } #mbTitle, #mbPrevLink, #mbNextLink, #mbCloseLink { line-height: 20px; font-size: 12px; } .ls_gallery_01 ul, .ls_gallery_02 ul{ display:flex; flex-wrap: wrap; } .ls_gallery_01 li, .ls_gallery_02 li { list-style: none; padding: 1%; flex-basis: 33.33333%; } .ls_gallery_02 ul { padding-right: 3% } .full .box { padding: 0.5rem; margin-bottom: 1rem; } .headlineBox_001 { padding: 0.5rem; margin-bottom: 1.5rem; } .ls_klickHeroWrapper { position: relative; } .ls_klickWrapper_01 { position: relative; } .ls_klickWrapper_02 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .klick, .klick a{ padding: 0; background: #ce000d; color: #fff; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; line-height: 0; } .klick p { line-height: 0; } .klick_01, .klick_02, .klick_03, .klick_04, .klick_05, .klick_06, .klick_07, .klick_08, .klick_09, .klick_10, .klick_11, .klick_12, .klick_13, .klick_14 { position: absolute; } .klick_01 { top: 40%; left: 3%; } .klick_02 { top: 55%; left: 5%; } .klick_03 { top: 40%; left: 15%; } .klick_04 { top: 55%; left: 15%; } .klick_05 { top: 49%; left: 25%; } .klick_06 { top: 49%; left: 37%; } .klick_07 { top: 41%; right: 50%; } .klick_08 { top: 37%; right: 42%; } .klick_09 { top: 46%; right: 38%; } .klick_10 { top: 40%; right: 31%; } .klick_11 { top: 48%; right: 27%; } .klick_12 { top: 40%; right: 19%; } .klick_13 { top: 51%; right: 15%; } .klick_14 { top: 51%; right: 5%; } @media screen and (max-width: 1780px){ .break-01 .klick_01 { top: 31%; left: 3%; } .break-01 .klick_02 { top: 57%; left: 3%; } .break-01 .klick_03 { top: 31%; left: 18%; } .break-01 .klick_04 { top: 57%; left: 18%; } .break-01 .klick_05 { top: 29%; left: 35%; } .break-01 .klick_06 { top: 66%; left: 35%; } .break-01 .klick_07 { top: 37%; right: 47%; } .break-01 .klick_08 { top: 66%; right: 47%; } .break-01 .klick_09 { top: 26%; right: 32%; } .break-01 .klick_10 { top: 66%; right: 32%; } .break-01 .klick_11 { top: 26%; right: 16%; } .break-01 .klick_12 { top: 65%; right: 16%; } .break-01 .klick_13 { top: 31%; right: 3%; } .break-01 .klick_14 { top: 65%; right: 3%; } } @media screen and (max-width: 800px){ .klick_01 { top: 31%; left: 3%; } .klick_02 { top: 57%; left: 3%; } .klick_03 { top: 31%; left: 18%; } .klick_04 { top: 57%; left: 18%; } .klick_05 { top: 29%; left: 35%; } .klick_06 { top: 66%; left: 35%; } .klick_07 { top: 37%; right: 47%; } .klick_08 { top: 66%; right: 47%; } .klick_09 { top: 26%; right: 32%; } .klick_10 { top: 66%; right: 32%; } .klick_11 { top: 26%; right: 16%; } .klick_12 { top: 65%; right: 16%; } .klick_13 { top: 31%; right: 3%; } .klick_14 { top: 65%; right: 3%; } .ls_gallery_02 ul { padding-right: 0; } } @media screen and (max-width: 800px){ .fullwidth-content { margin: 2rem 2rem 3rem 0; } .fullwidth-content.box-distance { padding: 1rem 0; } } @media screen and (max-width: 579px){ .ls_gallery_01 li, .ls_gallery_02 li { list-style: none; padding: 1%; flex-basis: 49.9%; } } @media screen and (max-width: 400px){ .klick_01, .break-01 .klick_01 { top: 11%; left: 2%; } .break-01 .klick_02, .klick_02 { top: 68%; left: 2%; } .break-01 .klick_03 .klick_03 { top: 26%; left: 16%; } .break-01 .klick_04, .klick_04 { top: 57%; left: 16%; } .break-01 .klick_05, .klick_05 { top: 11%; left: 29%; } .break-01 .klick_06, .klick_06 { top: 68%; left: 29%; } .break-01 .klick_07, .klick_07 { top: 26%; right: 46%; } .break-01 .klick_08, .klick_08 { top: 57%; right: 46%; } .break-01 .klick_09, .klick_09 { top: 11%; right: 31%; } .break-01 .klick_10, .klick_10 { top: 68%; right: 31%; } .break-01 .klick_11, .klick_11 { top: 26%; right: 16%; } .break-01 .klick_12, .klick_12 { top: 57%; right: 16%; } .break-01 .klick_13, .klick_13 { top: 11%; right: 3%; } .break-01 .klick_14, .klick_14 { top: 68%; right: 3%; } .ls_gallery_02 ul { padding-right: 0; } }