/* ============================================================================= * mod_pageimage * ========================================================================== */ .mod_pageimage .inside { background-repeat: no-repeat; background-size: cover; background-position: center center; line-height: normal; } .mod_pageimage .container { display: flex; align-items: center; position: relative; z-index: 20; } .mod_pageimage .inside .content { padding: 20px 0; } .mod_pageimage .headline { color: rgb(255,255,255); font-size: 3rem; } .mod_pageimage .subheadline { color: rgb(255,255,255); font-size: 1.3rem; } .mod_pageimage .mod_breadcrumb { display: none; } .mod_pageimage .inside > .container { height: 300px; } /* styles */ .mod_pageimage .style2 > .container { height: 380px; } .mod_pageimage .style2 > .container .content { width: 100%; text-align: center; } .mod_pageimage .style3 > .container { height: 380px; } .mod_pageimage .style3 > .container .content { width: 100%; text-align: center; } .mod_pageimage .style3 .mod_breadcrumb { display: inline-block!important; border: 1px solid rgba(255,255,255,0.4); padding: 5px 10px; border-radius: 3px; line-height: normal; margin-top: 20px; } .mod_pageimage .style3 .mod_breadcrumb ul { padding: 0; } .mod_pageimage .style3 .mod_breadcrumb .container { padding: 0; max-width: none; display: block; } .mod_pageimage .style3 .mod_breadcrumb, .mod_pageimage .style3 .mod_breadcrumb a { color: rgb(255,255,255); } .mod_pageimage .style3 .mod_breadcrumb a:hover { text-decoration: underline; } .mod_pageimage .style3 .headline { font-size: 4rem; } /* option height */ .mod_pageimage .inside.height-xxl > .container { height: 800px; } .mod_pageimage .inside.height-xl > .container { height: 700px; } .mod_pageimage .inside.height-l > .container { height: 600px; } .mod_pageimage .inside.height-m > .container { height: 500px; } .mod_pageimage .inside.height-s > .container { height: 400px; } .mod_pageimage .inside.height-xs > .container { height: 300px; } .mod_pageimage .inside.height-xxs > .container { height: 160px; } /* ============================================================================= * smart phones (s / small screens) * ========================================================================== */ @media only screen and (max-width: 767px) { .mod_pageimage .headline { font-size: 1.3rem; } .mod_pageimage .inside .content { padding: 10px 0; } .mod_pageimage .subheadline { font-size: 1rem; } .mod_pageimage .style1 > .container { height: 150px; } .mod_pageimage .style2 > .container { height: 150px; } .mod_pageimage .style3 > .container { height: auto; } .mod_pageimage .style3 .headline { font-size: 2rem; } .mod_pageimage .inside.height-xxl > .container { height: 400px; } .mod_pageimage .inside.height-xl > .container { height: 300px; } .mod_pageimage .inside.height-l > .container { height: 200px; } .mod_pageimage .inside.height-m > .container { height: 200px; } .mod_pageimage .inside.height-s > .container { height: 200px; } .mod_pageimage .inside.height-xs > .container { height: 150px; } .mod_pageimage .inside.height-xxs > .container { height: 0; } } .mod_privacy_optin_medium p.privacy,p.privacy{color:#fff;background:red;font-weight:700;padding:20px;text-align:center;margin:20px}.mod_privacy_optin h1,.mod_privacy_optin h2,.mod_privacy_optin h3,.mod_privacy_optin h4,.mod_privacy_optin h5,.mod_privacy_optin h6,.mod_privacy_optin_medium h1,.mod_privacy_optin_medium h2,.mod_privacy_optin_medium h3,.mod_privacy_optin_medium h4,.mod_privacy_optin_medium h5,.mod_privacy_optin_medium h6{background-repeat:no-repeat;background-position:left center;background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjkuNzZweCIgaGVpZ2h0PSIzNC4yNTlweCIgdmlld0JveD0iMCAwIDI5Ljc2IDM0LjI1OSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjkuNzYgMzQuMjU5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNCM0M0MSIgc3Ryb2tlLXdpZHRoPSIxLjQ0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIyMi45MjU2IiBkPSINCglNMTQuODgxLDMzLjU0QzYuNDI3LDI5Ljg4LDAuNzIsMjEuOTM4LDAuNzIsMTMuOTc1YzAtNC4wODEsMC4wNDktOS4xNywwLjA0OS0xMy4yNTVDMi4wMzYsMi4yMTEsNC41ODgsNC4yMzEsNy41Myw0LjIzMQ0KCWMzLjUxOSwwLDYuNDgtMS40NTgsNy4zNTEtMy40MzljMC44NzIsMS45ODEsMy44MzIsMy40MzksNy4zNTEsMy40MzljMi45NDIsMCw1LjQ5NC0yLjAyLDYuNzYxLTMuNTExDQoJYzAsNC4wODUsMC4wNDgsOS4xNzQsMC4wNDgsMTMuMjU1QzI5LjA0MSwyMS45MzgsMjMuMzMzLDI5Ljg4LDE0Ljg4MSwzMy41NEwxNC44ODEsMzMuNTR6Ii8+DQo8cG9seWxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM0IzQzQxIiBzdHJva2Utd2lkdGg9IjEuNDQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjIyLjkyNTYiIHBvaW50cz0iDQoJOC45MjgsMTYuNzk0IDE0LjQxMSwyMy4xNDYgMjMuMTM3LDkuNzggIi8+DQo8L3N2Zz4NCg==");font-family:Arial,Verdana,sans-serif}.mod_privacy_optin *{font-family:Arial,Verdana,sans-serif;line-height:20px;font-size:13px;margin:0;padding:0;border:0;outline:0;box-sizing:border-box}.mod_privacy_optin,.mod_privacy_optin .privacy.hidden,.mod_privacy_optin .privacy_help,.mod_privacy_optin .view_help .privacy_settings,.mod_privacy_optin_medium,.mod_privacy_optin_medium .privacy.hidden,.mod_privacy_optin_medium .privacy_help,.mod_privacy_optin_medium .view_help .privacy_settings,.privacy.hidden{display:none}.mod_privacy_optin .privacy_label input:checked~.privacy_checkmark:after,.mod_privacy_optin .view_help .privacy_help,.mod_privacy_optin.open,.mod_privacy_optin_medium .privacy_label input:checked~.privacy_checkmark:after,.mod_privacy_optin_medium .view_help .privacy_help,.mod_privacy_optin_medium.open,.mod_privacy_optin_slim.open{display:block}.mod_privacy_optin h1,.mod_privacy_optin h2,.mod_privacy_optin h3,.mod_privacy_optin h4,.mod_privacy_optin h5,.mod_privacy_optin h6{margin:0 0 10px;padding:10px 0 10px 45px}.mod_privacy_optin h1,.mod_privacy_optin_medium h1{font-size:26px}.mod_privacy_optin h2,.mod_privacy_optin_medium h2{font-size:24px}.mod_privacy_optin h3,.mod_privacy_optin_medium h3{font-size:22px}.mod_privacy_optin h4,.mod_privacy_optin_medium h4{font-size:20px}.mod_privacy_optin h5,.mod_privacy_optin_medium h5{font-size:18px}.mod_privacy_optin h6,.mod_privacy_optin_medium h6{font-size:16px}.mod_privacy_optin .privacy_buttons input,.mod_privacy_optin_medium .privacy_buttons input{background:green;padding:0 15px;line-height:35px;color:#fff;border-radius:5px;width:100%;cursor:pointer;display:block;border:0}.mod_privacy_optin .privacy_overlay,.mod_privacy_optin_medium .privacy_overlay{z-index:10000000;position:fixed;left:0;top:0;right:0;bottom:0;width:100%;background:rgba(0,0,0,.6)}.mod_privacy_optin .privacy_popup{position:fixed;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);z-index:20000000;width:90%;max-width:475px;max-height:100vh;overflow:auto}.mod_privacy_optin.optin_bottom .privacy_popup,.mod_privacy_optin_medium.optin_bottom .privacy_popup{bottom:10px;top:auto}.mod_privacy_optin .privacy_content{padding:20px 20px 15px;background:#f8f8f8}.mod_privacy_optin .privacy_popup.view_help,.mod_privacy_optin_medium .privacy_popup.view_help{position:absolute}.mod_privacy_optin .privacy_option_info{font-size:12px;color:rgba(0,0,0,.6);line-height:1.4;margin-bottom:0;cursor:pointer;display:block}.mod_privacy_optin .privacy_text p{line-height:19px;font-size:12px;margin-bottom:15px}.mod_privacy_optin .privacy_help p,.mod_privacy_optin .privacy_item{margin-bottom:15px}.mod_privacy_optin .privacy_label,.mod_privacy_optin_medium .privacy_label{display:block;position:relative;padding-left:28px;font-size:14px;line-height:18px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mod_privacy_optin .privacy_label input,.mod_privacy_optin_medium .privacy_label input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.mod_privacy_optin .privacy_label .privacy_checkmark{position:absolute;top:0;left:0;height:18px;width:18px;background-color:#eee;border:1px solid rgba(0,0,0,.1);transition:background .3s;-webkit-transition:background .3s}.mod_privacy_optin .privacy_label:hover input~.privacy_checkmark,.mod_privacy_optin_medium .privacy_label:hover input~.privacy_checkmark{background-color:#ccc}.mod_privacy_optin .privacy_label input:checked~.privacy_checkmark,.mod_privacy_optin_medium .privacy_label input:checked~.privacy_checkmark{background-color:#2196f3}.mod_privacy_optin .privacy_label .privacy_checkmark:after{content:"";position:absolute;display:none;left:4px;top:0;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.mod_privacy_optin .privacy_buttons{margin-top:20px}.mod_privacy_optin .submit{margin-bottom:10px}.mod_privacy_optin .submit:active,.mod_privacy_optin_medium .submit:active{opacity:.8}.mod_privacy_optin .submit.readonly,.mod_privacy_optin .submit.readonly:focus,.mod_privacy_optin .submit.readonly:hover,.mod_privacy_optin_medium .submit.readonly,.mod_privacy_optin_medium .submit.readonly:focus,.mod_privacy_optin_medium .submit.readonly:hover{background:#ddd;color:#9a9a9a}.mod_privacy_optin .headline,.mod_privacy_optin_medium .headline{font-size:1.3rem;margin-bottom:10px}.mod_privacy_optin .privacy_help_close,.mod_privacy_optin .privacy_help_link,.mod_privacy_optin_medium .privacy_help_close,.mod_privacy_optin_medium .privacy_help_link{font-size:.85rem;text-align:center;color:rgba(0,0,0,.5);margin-top:5px;cursor:pointer;text-decoration:underline}.mod_privacy_optin .ajax_info,.mod_privacy_optin_medium .ajax_info{background:#107e10;border-radius:3px;margin:10px 0;padding:3px 15px;color:#fff;font-size:.9rem;display:none}.mod_privacy_optin .privacy_help *,.mod_privacy_optin_medium .privacy_help,.mod_privacy_optin_medium .privacy_help *,.mod_privacy_optin_medium .privacy_help p{font-size:11px}.mod_privacy_optin .privacy_help a{text-decoration:underline}.mod_privacy_optin p.privacy a,.mod_privacy_optin_medium p.privacy a{text-decoration:underline;color:rgba(255,255,255)!important}.mod_privacy_optin .privacy_links{text-align:center;margin-top:10px}.mod_privacy_optin .privacy_links a,.mod_privacy_optin_medium .privacy_links a{font-size:12px;text-align:center;color:rgba(0,0,0,.5);margin-top:5px;cursor:pointer;text-decoration:underline;display:inline-block;margin-left:3px;margin-right:3px}.mod_privacy_optin table,.mod_privacy_optin_medium table{width:100%;margin-bottom:25px}.mod_privacy_optin table td,.mod_privacy_optin_medium table td{padding:5px;vertical-align:top;border-bottom:1px solid #ddd;font-size:11px}.mod_privacy_optin table td:first-of-type,.mod_privacy_optin_medium table td:first-of-type{width:30%!important}.mod_privacy_optin table td:last-of-type,.mod_privacy_optin_medium table td:last-of-type{width:70%!important}.mod_privacy_optin_medium *{font-family:Arial,Verdana,sans-serif;line-height:19px;font-size:13px;box-sizing:border-box}.mod_privacy_optin_medium h1,.mod_privacy_optin_medium h2,.mod_privacy_optin_medium h3,.mod_privacy_optin_medium h4,.mod_privacy_optin_medium h5,.mod_privacy_optin_medium h6{margin:0 0 10px;padding:5px 0 5px 35px;background-size:25px}.mod_privacy_optin_medium .privacy_buttons{margin:25px 0 15px}.mod_privacy_optin_medium .privacy_popup{position:fixed;top:10px;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);z-index:20000000;width:90%;max-width:420px;max-height:100vh;overflow:auto}.mod_privacy_optin_medium .privacy_content{padding:15px 15px 10px;background:#f8f8f8;border-radius:5px}.mod_privacy_optin_medium .privacy_option_info{font-size:12px;color:rgba(0,0,0,.6);line-height:1.4;margin-bottom:0;cursor:pointer}.mod_privacy_optin_medium .privacy_text{line-height:1.2;font-size:.9rem}.mod_privacy_optin_medium .privacy_checkboxes{display:flex;justify-content:center;margin-bottom:10px}.mod_privacy_optin_medium .privacy_item{display:inline-block;margin:0 10px}.mod_privacy_optin_medium .privacy_label .privacy_checkmark{position:absolute;top:0;left:0;height:18px;width:18px;border:1px solid rgba(0,0,0,.4);background-color:#eee;transition:background .3s;-webkit-transition:background .3s}.mod_privacy_optin_medium .privacy_label .privacy_checkmark:after{content:"";position:absolute;display:none;left:4px;top:1px;width:5px;height:8px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.mod_privacy_optin_medium .submit{margin-top:10px;padding:12px;width:100%}.mod_privacy_optin_medium .privacy_links{text-align:center}.mod_privacy_optin_slim *{font-family:Arial,Verdana,sans-serif;line-height:20px;font-size:13px;box-sizing:border-box}.mod_privacy_optin_slim{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:100000000000}.mod_privacy_optin_slim .privacy_inside{color:#fff;background:#000;box-shadow:0 0 2px 2px rgba(0,0,0,.1);position:absolute;bottom:0;left:0;width:100%;z-index:100;overflow:hidden;padding:15px}.mod_privacy_optin_slim .privacy_overlay{z-index:10;width:inherit;height:inherit;position:inherit;background-color:rgba(0,0,0,.4)}.mod_privacy_optin_slim .privacy_buttons{float:right;width:40%;text-align:right}.mod_privacy_optin_slim .privacy_button{display:inline-block}.mod_privacy_optin_slim .privacy_button a{margin:5px 0}.mod_privacy_optin_slim .privacy_content{float:left;width:60%;line-height:1.5}.mod_privacy_optin_slim .privacy_content a{color:#fff;text-decoration:underline}.mod_privacy_optin_slim .privacy_content p{margin-bottom:0}.mod_privacy_optin_slim .privacy_button a{background:green;color:#fff;text-decoration:none;padding:0 15px;line-height:35px;display:inline-block;text-align:center;min-width:140px}a.privacy_optout_click{cursor:pointer}.hide_optin .mod_privacy_optin,.hide_optin .mod_privacy_optin_medium,.hide_optin .mod_privacy_optin_slim{display:none!important}@media only screen and (max-width:767px){.mod_privacy_optin_slim .privacy_buttons,.mod_privacy_optin_slim .privacy_content{float:none;width:100%;text-align:left}.mod_privacy_optin_slim .privacy_content{margin-bottom:10px}.mod_privacy_optin_slim .privacy_button,.mod_privacy_optin_slim .privacy_button a{display:block}} /* ============================================================================= * offcanvas-top * ========================================================================== */ .offcanvas-trigger { overflow: hidden; position: absolute; right: 0; top: 0; z-index: 10; cursor: pointer; height: 36px; width: 36px; } .offcanvas-trigger:after { position: absolute; right: -25px; top:-25px; width: 50px; content:''; height: 50px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: rgba(255,255,255,0.8); box-shadow: 0 0 2px 2px rgba(0,0,0,0.1); } .offcanvas-trigger .line1, .offcanvas-trigger .line2 { position: absolute; top: 50%; background: rgba(0,0,0,0.9); height: 1px; width: 10px; z-index: 10; right: 5px; margin-top: -7px; } .offcanvas-trigger .line2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); transition: All 0.3s ease; -webkit-transition: All 0.3s ease; } #offcanvas-top { max-height: 0; transition: All 0.5s ease; -webkit-transition: All 0.5s ease; overflow: hidden; font-size: 0.95rem; line-height: 1.6; } #offcanvas-top, #offcanvas-top a { color: rgba(255,255,255,0.8); } #offcanvas-top.offcanvas-top-open { display: block; max-height: 1000px; } .offcanvas-top-open.offcanvas-trigger .line2 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } #offcanvas-top .offcanvas-top-inside { padding-top: 40px; padding-bottom: 40px; overflow: hidden; } #offcanvas-top .mod_login { background: none; box-shadow: none; padding: 0; margin: 0; border: 0; } #offcanvas-top .mod_login input.submit, #offcanvas-top .mod_login button.submit { width: auto; background: rgba(0,0,0,0.1); } #offcanvas-top .autogrid.block { padding-left: 2%; padding-right: 2%; } #offcanvas-top .autogrid_wrapper { margin-left: -2%; margin-right: -2%; } #offcanvas-top h1, #offcanvas-top h2, #offcanvas-top h3, #offcanvas-top h4, #offcanvas-top h5, #offcanvas-top h6 { color: rgb(255,255,255); font-size: 1.6rem; } #offcanvas-top .mod_socials { overflow: hidden; display: inline-block; } #offcanvas-top .mod_socials a i { padding: 0.6667rem; margin-right: 1px; background: rgba(255,255,255,0.05); font-size: 1.333rem; display: inline-block; height: 2.667rem; width: 2.667rem; text-align: center; float: left; margin-bottom: 1px; } .offcanvas-top-inside .autogrid_wrapper, .offcanvas-top-inside .autogrid { overflow: visible; } .offcanvas-top-inside .mod_login { border-radius: 0; } /* ============================================================================= * smart phones (s / small screens) * ========================================================================== */ @media only screen and (max-width: 767px) { .offcanvas-trigger { display: none; } } .autogrid_grid{display:grid;margin-left:-15px;margin-right:-15px}.autogrid_grid .column{padding-left:15px;padding-right:15px}.autogrid_grid.gutter_none{margin-left:0;margin-right:0}.autogrid_grid.gutter_none>.column{padding-left:0;padding-right:0}.autogrid_grid.gutter_s{margin-left:-15px;margin-right:-15px}.autogrid_grid.gutter_s>.column{padding-left:15px;padding-right:15px}.autogrid_grid.gutter_m{margin-left:-30px;margin-right:-30px}.autogrid_grid.gutter_m>.column{padding-left:30px;padding-right:30px}.autogrid_grid.gutter_l{margin-left:-40px;margin-right:-40px}.autogrid_grid.gutter_l>.column{padding-left:40px;padding-right:40px}.autogrid_grid.same_height>.column>.attributes{height:100%}.autogrid_grid .column .attributes{background-size:cover}.autogrid_grid .column .attributes.p-xl{padding:200px 40px 200px 40px}.autogrid_grid .column .attributes.p-l{padding:160px 40px 160px 40px}.autogrid_grid .column .attributes.p-m{padding:115px 40px 115px 40px}.autogrid_grid .column .attributes.p-s{padding:80px 40px 80px 40px}.autogrid_grid .column .attributes.p-xs{padding:40px 40px 40px 40px}.autogrid_grid .column.align_left_top{text-align:left}.autogrid_grid .column.align_left_center{text-align:left;align-self:center}.autogrid_grid .column.align_left_bottom{text-align:left;align-self:flex-end}.autogrid_grid .column.align_center_top{text-align:center}.autogrid_grid .column.align_center_center{text-align:center;align-self:center}.autogrid_grid .column.align_center_bottom{text-align:center;align-self:flex-end}.autogrid_grid .column.align_right_top{text-align:right}.autogrid_grid .column.align_right_center{text-align:right;align-self:center}.autogrid_grid .column.align_right_bottom{text-align:right;align-self:flex-end}.autogrid_grid.same_height>.column{align-self:unset}.autogrid_grid.same_height>.column>.attributes{display:flex;flex-wrap:wrap;height:100%}.autogrid_grid.same_height>.column>.attributes>.same-height-wrap{width:100%;flex:0 0 100%}.autogrid_grid.same_height>.column.align_left_center>.attributes{align-items:center}.autogrid_grid.same_height>.column.align_left_bottom>.attributes{align-items:flex-end}.autogrid_grid.same_height>.column.align_center_center>.attributes{align-items:center}.autogrid_grid.same_height>.column.align_center_bottom>.attributes{align-items:flex-end}.autogrid_grid.same_height>.column.align_right_center>.attributes{align-items:center}.autogrid_grid.same_height>.column.align_right_bottom>.attributes{align-items:flex-end}.autogrid_grid .column>.attributes .image_mob{display:none}.autogrid_row,.autogrid_wrapper{margin-left:-15px;margin-right:-15px;display:flex;flex-wrap:wrap;box-sizing:border-box}.autogrid,.autogrid_row>.column{padding-left:15px;padding-right:15px;flex-basis:1;flex-grow:1;width:100%;position:relative;box-sizing:border-box}.autogrid_clear{flex:0 0 100%;height:0}.col_1{flex:0 0 calc((100% / 12) * 1);max-width:calc((100% / 12) * 1)}.col_2{flex:0 0 calc((100% / 12) * 2);max-width:calc((100% / 12) * 2)}.col_3{flex:0 0 calc((100% / 12) * 3);max-width:calc((100% / 12) * 3)}.col_4{flex:0 0 calc((100% / 12) * 4);max-width:calc((100% / 12) * 4)}.col_5{flex:0 0 calc((100% / 12) * 5);max-width:calc((100% / 12) * 5)}.col_6{flex:0 0 calc((100% / 12) * 6);max-width:calc((100% / 12) * 6)}.col_7{flex:0 0 calc((100% / 12) * 7);max-width:calc((100% / 12) * 7)}.col_8{flex:0 0 calc((100% / 12) * 8);max-width:calc((100% / 12) * 8)}.col_9{flex:0 0 calc((100% / 12) * 9);max-width:calc((100% / 12) * 9)}.col_10{flex:0 0 calc((100% / 12) * 10);max-width:calc((100% / 12) * 10)}.col_11{flex:0 0 calc((100% / 12) * 11);max-width:calc((100% / 12) * 11)}.col_12{flex:0 0 calc((100% / 12) * 12);max-width:calc((100% / 12) * 12)}.autogrid_row>.column>.attributes{background-size:cover}.autogrid_row>.column>.attributes.p-xl{padding:200px 40px 200px 40px}.autogrid_row>.column>.attributes.p-l{padding:160px 40px 160px 40px}.autogrid_row>.column>.attributes.p-m{padding:115px 40px 115px 40px}.autogrid_row>.column>.attributes.p-s{padding:80px 40px 80px 40px}.autogrid_row>.column>.attributes.p-xs{padding:40px 40px 40px 40px}.autogrid_row.gutter_none,.autogrid_wrapper.gutter_none{margin-left:0;margin-right:0}.autogrid_row.gutter_none>div,.autogrid_wrapper.gutter_none>div{padding-left:0;padding-right:0}.autogrid_row.gutter_s,.autogrid_wrapper.gutter_s{margin-left:-15px;margin-right:-15px}.autogrid_row.gutter_s>div,.autogrid_wrapper.gutter_s>div{padding-left:15px;padding-right:15px}.autogrid_row.gutter_m,.autogrid_wrapper.gutter_m{margin-left:-30px;margin-right:-30px}.autogrid_row.gutter_m>div,.autogrid_wrapper.gutter_m>div{padding-left:30px;padding-right:30px}.autogrid_row.gutter_l,.autogrid_wrapper.gutter_l{margin-left:-40px;margin-right:-40px}.autogrid_row.gutter_l>div,.autogrid_wrapper.gutter_l>div{padding-left:40px;padding-right:40px}.autogrid_row>.column.align_left_top{text-align:left}.autogrid_row>.column.align_left_center{text-align:left;align-self:center}.autogrid_row>.column.align_left_bottom{text-align:left;align-self:flex-end}.autogrid_row>.column.align_center_top{text-align:center}.autogrid_row>.column.align_center_center{text-align:center;align-self:center}.autogrid_row>.column.align_center_bottom{text-align:center;align-self:flex-end}.autogrid_row>.column.align_right_top{text-align:right}.autogrid_row>.column.align_right_center{text-align:right;align-self:center}.autogrid_row>.column.align_right_bottom{text-align:right;align-self:flex-end}.autogrid_row.same_height>.column{align-self:unset}.autogrid_row.same_height>.column>.attributes{display:flex;flex-wrap:wrap;height:100%}.autogrid_row.same_height>.column>.attributes>.same-height-wrap{width:100%;flex:0 0 100%}.autogrid_row.same_height>.column.align_left_center>.attributes{align-items:center}.autogrid_row.same_height>.column.align_left_bottom>.attributes{align-items:flex-end}.autogrid_row.same_height>.column.align_center_center>.attributes{align-items:center}.autogrid_row.same_height>.column.align_center_bottom>.attributes{align-items:flex-end}.autogrid_row.same_height>.column.align_right_center>.attributes{align-items:center}.autogrid_row.same_height>.column.align_right_bottom>.attributes{align-items:flex-end}.autogrid_row .column>.attributes .image_mob{display:none}.order_1{order:1}.order_2{order:2}.order_3{order:3}.order_4{order:4}.order_5{order:5}.order_6{order:6}.full{flex:0 0 100%}.one_half{flex:0 0 calc(100% / 2)}.one_third{flex:0 0 calc(100% / 3)}.one_fourth{flex:0 0 calc(100% / 4)}.one_fifth{flex:0 0 calc(100% / 5)}.one_sixth{flex:0 0 calc(100% / 6)}.two_third{flex:0 0 calc((100% / 3) * 2)}.two_fourth{flex:0 0 calc((100% / 4) * 2)}.three_fourth{flex:0 0 calc((100% / 4) * 3)}.two_fifth{flex:0 0 calc((100% / 5) * 2)}.three_fifth{flex:0 0 calc((100% / 5) * 3)}.four_fifth{flex:0 0 calc((100% / 5) * 4)}.two_sixth{flex:0 0 calc((100% / 6) * 2)}.three_sixth{flex:0 0 calc((100% / 6) * 3)}.four_sixth{flex:0 0 calc((100% / 6) * 4)}.five_sixth{flex:0 0 calc((100% / 6) * 5)}.offset_col_1{margin-left:calc((100% / 12) * 1)}.offset_col_2{margin-left:calc((100% / 12) * 2)}.offset_col_3{margin-left:calc((100% / 12) * 3)}.offset_col_4{margin-left:calc((100% / 12) * 4)}.offset_col_5{margin-left:calc((100% / 12) * 5)}.offset_col_6{margin-left:calc((100% / 12) * 6)}.offset_col_7{margin-left:calc((100% / 12) * 7)}.offset_col_8{margin-left:calc((100% / 12) * 8)}.offset_col_9{margin-left:calc((100% / 12) * 9)}.offset_col_10{margin-left:calc((100% / 12) * 10)}.offset_col_11{margin-left:calc((100% / 12) * 11)}.autogrid.no_gutter{padding-left:0;padding-right:0}@media only screen and (min-width :768px) and (max-width :1024px){.col_1_t{flex:0 0 calc((100% / 12) * 1);max-width:calc((100% / 12) * 1)}.col_2_t{flex:0 0 calc((100% / 12) * 2);max-width:calc((100% / 12) * 2)}.col_3_t{flex:0 0 calc((100% / 12) * 3);max-width:calc((100% / 12) * 3)}.col_4_t{flex:0 0 calc((100% / 12) * 4);max-width:calc((100% / 12) * 4)}.col_5_t{flex:0 0 calc((100% / 12) * 5);max-width:calc((100% / 12) * 5)}.col_6_t{flex:0 0 calc((100% / 12) * 6);max-width:calc((100% / 12) * 6)}.col_7_t{flex:0 0 calc((100% / 12) * 7);max-width:calc((100% / 12) * 7)}.col_8_t{flex:0 0 calc((100% / 12) * 8);max-width:calc((100% / 12) * 8)}.col_9_t{flex:0 0 calc((100% / 12) * 9);max-width:calc((100% / 12) * 9)}.col_10_t{flex:0 0 calc((100% / 12) * 10);max-width:calc((100% / 12) * 10)}.col_11_t{flex:0 0 calc((100% / 12) * 11);max-width:calc((100% / 12) * 11)}.col_12_t{flex:0 0 calc((100% / 12) * 12);max-width:calc((100% / 12) * 12)}.order_1_t{order:1}.order_2_t{order:2}.order_3_t{order:3}.order_4_t{order:4}.order_5_t{order:5}.order_6_t{order:6}}@media only screen and (max-width:767px){.five_sixth,.four_fifth,.one_fifth,.one_fourth,.one_half,.one_sixth,.one_third,.three_fifth,.three_fourth,.three_sixth .four_sixth,.two_fifth,.two_fourth,.two_sixth,.two_third,[class*=col_]{flex:0 0 100%;max-width:none}.autogrid_grid .column,.column[class*=col_]{padding-left:0!important;padding-right:0!important;margin-bottom:25px}.autogrid[class*=offset_],.autogrid_grid[class*=offset_],.column[class*=offset_]{margin-left:0}.autogrid_grid,.autogrid_row,.autogrid_wrapper{margin-left:0!important;margin-right:0!important}.autogrid_grid>.column>.attributes.has-image.empty>.image_mob,.autogrid_grid>.column>.attributes.has-image.empty>.same-height-wrap>.image_mob,.autogrid_row>.column>.attributes.has-image.empty>.image_mob,.autogrid_row>.column>.attributes.has-image.empty>.same-height-wrap>.image_mob{display:block}.autogrid_grid>.column>.attributes.has-image.empty,.autogrid_row>.column>.attributes.has-image.empty{background:0 0!important}.col_1_m{flex:0 0 calc((100% / 12) * 1);max-width:calc((100% / 12) * 1)}.col_2_m{flex:0 0 calc((100% / 12) * 2);max-width:calc((100% / 12) * 2)}.col_3_m{flex:0 0 calc((100% / 12) * 3);max-width:calc((100% / 12) * 3)}.col_4_m{flex:0 0 calc((100% / 12) * 4);max-width:calc((100% / 12) * 4)}.col_5_m{flex:0 0 calc((100% / 12) * 5);max-width:calc((100% / 12) * 5)}.col_6_m{flex:0 0 calc((100% / 12) * 6);max-width:calc((100% / 12) * 6)}.col_7_m{flex:0 0 calc((100% / 12) * 7);max-width:calc((100% / 12) * 7)}.col_8_m{flex:0 0 calc((100% / 12) * 8);max-width:calc((100% / 12) * 8)}.col_9_m{flex:0 0 calc((100% / 12) * 9);max-width:calc((100% / 12) * 9)}.col_10_m{flex:0 0 calc((100% / 12) * 10);max-width:calc((100% / 12) * 10)}.col_11_m{flex:0 0 calc((100% / 12) * 11);max-width:calc((100% / 12) * 11)}.col_12_m{flex:0 0 calc((100% / 12) * 12);max-width:calc((100% / 12) * 12)}.order_1_m{order:1}.order_2_m{order:2}.order_3_m{order:3}.order_4_m{order:4}.order_5_m{order:5}.order_6_m{order:6}.autogrid_grid>.column>.attributes.p-l,.autogrid_grid>.column>.attributes.p-m,.autogrid_grid>.column>.attributes.p-s,.autogrid_grid>.column>.attributes.p-xl,.autogrid_grid>.column>.attributes.p-xs,.autogrid_row>.column .attributes.p-l,.autogrid_row>.column .attributes.p-m,.autogrid_row>.column .attributes.p-s,.autogrid_row>.column .attributes.p-xl,.autogrid_row>.column .attributes.p-xs{padding:20px}.autogrid_grid .column.m_align_left_top{text-align:left}.autogrid_grid .column.m_align_left_center{text-align:left;align-self:center}.autogrid_grid .column.m_align_left_bottom{text-align:left;align-self:flex-end}.autogrid_grid .column.m_align_center_top{text-align:center}.autogrid_grid .column.m_align_center_center{text-align:center;align-self:center}.autogrid_grid .column.m_align_center_bottom{text-align:center;align-self:flex-end}.autogrid_grid .column.m_align_right_top{text-align:right}.autogrid_grid .column.m_align_right_center{text-align:right;align-self:center}.autogrid_grid .column.m_align_right_bottom{text-align:right;align-self:flex-end}.autogrid_row>.column.m_align_left_top{text-align:left}.autogrid_row>.column.m_align_left_center{text-align:left;align-self:center}.autogrid_row>.column.m_align_left_bottom{text-align:left;align-self:flex-end}.autogrid_row>.column.m_align_center_top{text-align:center}.autogrid_row>.column.m_align_center_center{text-align:center;align-self:center}.autogrid_row>.column.m_align_center_bottom{text-align:center;align-self:flex-end}.autogrid_row>.column.m_align_right_top{text-align:right}.autogrid_row>.column.m_align_right_center{text-align:right;align-self:center}.autogrid_row>.column.m_align_right_bottom{text-align:right;align-self:flex-end}}body.edge column[class*=col_]{flex-basis:1}@media only screen and (max-width:767px){body.edge column[class*=col_]{flex-basis:100%}} #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center} .content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666} /* ============================================================================= * ce_gallery * ========================================================================== */ .ce_gallery .cols_2 li { width: calc(100% / 2); float: left; } .ce_gallery .cols_3 li { width: calc(100% / 3); float: left; } .ce_gallery .cols_4 li { width: calc(100% / 4); float: left; } .ce_gallery .cols_5 li { width: calc(100% / 5); float: left; } .ce_gallery .cols_6 li { width: calc(100% / 6); float: left; } .ce_gallery .cols_7 li { width: calc(100% / 7); float: left; } .ce_gallery .cols_8 li { width: calc(100% / 8); float: left; } .ce_gallery .cols_9 li { width: calc(100% / 9); float: left; } .ce_gallery .cols_10 li { width: calc(100% / 10); float: left; } .ce_gallery .cols_11 li { width: calc(100% / 11); float: left; } .ce_gallery .cols_12 li { width: calc(100% / 12); float: left; } .edge .ce_gallery .cols_2 li { width: 49.8%; float: left; } .edge .ce_gallery .cols_3 li { width: 33.20%; float: left; } .edge .ce_gallery .cols_4 li { width: 24.98%; float: left; } .edge .ce_gallery .cols_5 li { width: 19.98%; float: left; } .edge .ce_gallery .cols_6 li { width: 16.65%; float: left; } .edge .ce_gallery .cols_7 li { width: 14.285%; float: left; } .edge .ce_gallery .cols_8 li { width: 12.46%; float: left; } .edge .ce_gallery .cols_9 li { width: 11.11%; float: left; } .edge .ce_gallery .cols_10 li { width: 10%; float: left; } .edge .ce_gallery .cols_11 li { width: 9.09%; float: left; } .edge .ce_gallery .cols_12 li { width: 8.33%; float: left; } .ce_gallery .gallery-margin { margin-left: -10px; margin-right: -10px; } .ce_gallery .gallery-margin .image_container { margin: 0 5px 10px; } .ce_gallery .image_container { margin: 0; } .ce_gallery a { width: 100%; height: 100%; display: block; } .ce_gallery .content { position: absolute; left: 0; top: 0; bottom: 0; right: 0; height: 100%; background: rgba(152,152,152,0.8); opacity: 0; transition: All 0.5s ease; -webkit-transition: All 0.5s ease; } .ce_gallery li:hover .content { opacity: 1; } .ce_gallery li img { transition: All 0.5s ease; -webkit-transition: All 0.5s ease; } .ce_gallery .image_container { overflow: hidden; } .ce_gallery .content-outside { display: table; width: 100%; height: 100%; } .ce_gallery .content-inside { display: table-cell; vertical-align: middle; text-align: center; color: rgb(255,255,255); line-height: 1.5; } .ce_gallery .capt h1, .ce_gallery .capt h2, .ce_gallery .capt h3, .ce_gallery .capt h4, .ce_gallery .capt h5, .ce_gallery .capt h6 { font-size: 1.067rem; font-weight: bold; letter-spacing: 1px; color: rgb(255,255,255); margin: 0; } .ce_gallery .capt h1:after, .ce_gallery .capt h2:after, .ce_gallery .capt h3:after, .ce_gallery .capt h4:after, .ce_gallery .capt h5:after, .ce_gallery .capt h6:after { content: ''; width: 50px; height: 2px; display: block; margin: 8px auto 15px auto; background: rgb(255,255,255); } .ce_gallery .capt { font-size: 0.8rem; } .ce_gallery .borders li { border-right: 1px solid rgb(229,229,229); border-bottom: 1px solid rgb(229,229,229); } .ce_gallery .borders li.row_last { border-bottom: 1px solid transparent; } .ce_gallery .borders li.col_last { border-right-color: transparent; } .ce_gallery .borders li:hover img { transform: none; -webkit-transform: none; } .ce_gallery .borders figcaption { width: 100% !important; border-radius: 0; text-align: center; } .ce_gallery .image_container i.fa.fa-plus-circle { position: relative; height: 50px; width: 50px; } .ce_gallery .image_container i.fa.fa-plus-circle:before { content: ''; width: 50px; height: 1px; background: rgb(255,255,255); display: inline-block; position: absolute; top: 25px; left: 0; -webkit-transition: all 0.2s; transition: all 0.2s; } .ce_gallery .image_container i.fa.fa-plus-circle:after { content: ''; width: 50px; height: 1px; background: rgb(255,255,255); display: inline-block; position: absolute; top: 25px; left: 0; } .ce_gallery li:hover .image_container i.fa.fa-plus-circle:before { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .ce_gallery .capt { font-size: inherit; } /* ============================================================================= * ce_gallery flex-gallery * ========================================================================== */ .ce_gallery ul.flex-gallery { display: flex; flex-wrap: wrap; align-items: center; } .ce_gallery ul.flex-gallery li { max-width: none; line-height: 0; text-align: center; } .ce_gallery ul.flex-gallery.cols_1 li { flex: 0 0 100%; } .ce_gallery ul.flex-gallery.cols_2 li { flex: 0 0 calc(100% / 2); } .ce_gallery ul.flex-gallery.cols_3 li { flex: 0 0 calc(100% / 3); } .ce_gallery ul.flex-gallery.cols_4 li { flex: 0 0 calc(100% / 4); } .ce_gallery ul.flex-gallery.cols_5 li { flex: 0 0 calc(100% / 5); } .ce_gallery ul.flex-gallery.cols_6 li { flex: 0 0 calc(100% / 6); } .ce_gallery ul.flex-gallery.cols_7 li { flex: 0 0 calc(100% / 7); } .ce_gallery ul.flex-gallery.cols_8 li { flex: 0 0 calc(100% / 8); } .ce_gallery ul.flex-gallery.cols_9 li { flex: 0 0 calc(100% / 9); } .ce_gallery ul.flex-gallery.cols_10 li { flex: 0 0 calc(100% / 10); } .ce_gallery ul.flex-gallery.cols_11 li { flex: 0 0 calc(100% / 11); } .ce_gallery ul.flex-gallery.cols_12 li { flex: 0 0 calc(100% / 12); } .ce_gallery .borders.flex-gallery { align-items: inherit; } /* ============================================================================= * smart phones (s / small screens) * ========================================================================== */ @media only screen and (max-width: 767px) { .ce_gallery .gallery-margin .image_container { margin-bottom: 10px; } .ce_gallery [class*='cols_'] li { width: 49.8%; } .ce_gallery .borders li, .ce_gallery .borders li.col_last { border-right: 1px solid transparent; width: 50%; } .ce_gallery .borders li.row_last { border-bottom: 1px solid rgb(229,229,229); } .ce_gallery .borders li:nth-child(odd) { border-right: 1px solid rgb(229,229,229); } .ce_gallery ul.flex-gallery li { flex: 0 0 50%!important; } } /* ============================================================================= * ce_iconbox default * ========================================================================== */ .ce_iconbox { text-align: center; display: block; position: relative; overflow: visible; } .ce_iconbox.padding:hover { z-index: 100; } .ce_iconbox.default i { font-size: 3rem; } .ce_iconbox .ce_iconbox_inside { position: relative; } .ce_iconbox .ce_iconbox_outside { width:100%; } .ce_iconbox .ce_iconbox_outside.padding { padding: 25px; transition: All 0.3s ease; -webkit-transition: All 0.3s ease; } .ce_iconbox:hover .ce_iconbox_outside.padding { opacity: 1; box-shadow: 0 40px 70px rgba(0,0,0,.2); z-index: 100; } .ce_iconbox .ce_iconbox_outside.padding .content { opacity: 0.6; } .ce_iconbox a.link { margin-top: 10px; display: inline-block; } .ce_iconbox .image_container { text-align: center; margin-bottom: 0; } .ce_iconbox .image_container img { width: auto; display: inline-block; } .ce_iconbox h3 { font-size: 1.2rem; letter-spacing: 1px; position: relative; line-height: 1.4; margin-bottom: 10px; } .ce_iconbox .headline { margin-bottom: 0; } .ce_iconbox .content { margin-top: 10px; } .ce_iconbox:not(.version2):not(.version3) .ce_iconbox_cwrapper { margin-top: 20px; } .ce_iconbox .link:before { content: "\f101"; font-family:FontAwesome; font-weight: normal; display: inline-block; margin-right: 5px; } .ce_iconbox.version2 .link:before { transition: All 0.3s ease; -webkit-transition: All 0.3s ease; } .ce_iconbox.version2:hover .link:before { margin-right: 10px; } .ce_iconbox.same-height { display: flex!important; } .ce_iconbox.default .image_container, .ce_iconbox.default i { padding-top: 5px; transition: All 0.3s ease; -webkit-transition: All 0.3s ease; position: relative; top: 0; } .ce_iconbox.default:hover .image_container, .ce_iconbox.default:hover i { top: -5px; } .ce_iconbox li { list-style-type: circle; list-style-position: inside; } .ce_iconbox.right-align .ce_iconbox_inside { justify-content: right; } /* ============================================================================= * ce_iconbox.version2 * ========================================================================== */ .ce_iconbox.version2 .ce_iconbox_inside { text-align: left; display: flex; align-items: center; } .ce_iconbox.version2 .ce_iconbox_icon { flex: 0 0 80px; align-self: flex-start; } .ce_iconbox.version2 .headline { padding-top: 0; } .ce_iconbox.version2 .image_container { line-height: 1.4; } .ce_iconbox.version2 .image_container img { width: 60px; } .ce_iconbox.version2 i { font-size: 1.733rem; border-radius: 100%; text-align: center; width: 60px; max-width: 60px; height: 60px; line-height: 60px; color: rgb(255,255,255); background: rgb(229,229,229); } .ce_iconbox.version2 .ce_iconbox_inside:after { position: absolute; left: 30px; top: 0; width: 1px; height: 100%; content:''; border-right: 1px dashed rgb(229,229,229); z-index: 1; } .ce_iconbox.version2:last-of-type .ce_iconbox_inside:after { display:none; } .ce_iconbox.version2 .image_container { text-align: left; } .ce_iconbox.version2 a.link { margin-top: 0; } /* ============================================================================= * ce_iconbox.version2.right * ========================================================================== */ .ce_iconbox.version2.right-align .ce_iconbox_inside { text-align: right; display: flex; align-items: center; } .ce_iconbox.version2.right-align .ce_iconbox_icon { flex: 0 0 80px; align-self: flex-start; order: 2; } .ce_iconbox.version2 .ce_iconbox_cwrapper { order: 1; } .ce_iconbox.version2.right-align:last-of-type .ce_iconbox_inside:after { display:none; } .ce_iconbox.version2.right-align .image_container { text-align: right; } .ce_iconbox.version2 .ce_iconbox_inside:after { display: none; } /* ============================================================================= * ce_iconbox.version3 * ========================================================================== */ .ce_iconbox.version3 .ce_iconbox_inside { text-align: left; display: flex; align-items: center; } .ce_iconbox.version3 .ce_iconbox_icon { flex: 0 0 50px; align-self: flex-start; } .ce_iconbox.version3 .headline { padding-top: 0; } .ce_iconbox.version3 .image_container { line-height: 1.4; } .ce_iconbox.version3 .image_container img { width: 30px; } .ce_iconbox.version3 i { font-size: 2.2rem; line-height: 2.2rem; text-align: center; width: 40px; } .ce_iconbox.version3:last-of-type .ce_iconbox_inside:after { display:none; } .ce_iconbox.version3 a.link { margin-top: 0; } .ce_iconbox.version3.xsmall i { font-size: inherit; line-height: inherit; text-align: left; width: 25px; } .ce_iconbox.version3.xsmall p { margin-bottom: 0; line-height: inherit; } .ce_iconbox.version3.xsmall .ce_iconbox_icon { flex: 0 0 25px; } .ce_iconbox.version3.xsmall .content { margin-top: 0; } /* ============================================================================= * ce_iconbox.version4 * ========================================================================== */ .ce_iconbox.version4 { text-align: left; } .ce_iconbox.version4 .image_container { text-align: left; } /* ============================================================================= * ce_iconbox same-height * ========================================================================== */ .autogrid_row.same_height .ce_iconbox, .autogrid_row.same_height .ce_iconbox .ce_iconbox_outside { height: 100%; } /* ============================================================================= * smart phones (s / small screens) * ========================================================================== */ @media only screen and (max-width: 767px) { .ce_iconbox:not(.no_gutter):not(.version3.xsmall) { margin-bottom: 30px; } .ce_iconbox.version2.right-align .ce_iconbox_inside { text-align: left; } .ce_iconbox.version2.right-align .image_container { text-align: left; } .ce_iconbox.version2.right-align .ce_iconbox_icon { order: 1; } .ce_iconbox.version2 .ce_iconbox_cwrapper { order: 2; } .ce_iconbox.same-height { display: block!important; } } /* ═════════ Schrift: Inter (selbst gehostet, DSGVO-konform) ═════════ Die Schriftdateien müssen auf den Server geladen werden. Erwarteter Ort: files/spielplan/fonts/ — falls abweichend, die url() unten anpassen. Pfade mit führendem / sind absolut ab Server-Root und funktionieren unabhängig davon, wo diese CSS-Datei liegt. */ @font-face { font-family: 'Inter Variable'; src: url('../../files/cto_layout/fonts/inter/Inter-VariableFont_opsz,wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter Variable'; src: url('../../files/cto_layout/fonts/inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'FontAwesome'; src: url('../../files/cto_layout/fonts/fontawesome/fontawesome-webfont.eot'); src: url('../../files/cto_layout/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../../files/cto_layout/fonts/fontawesome/fontawesome-webfont.woff2') format('woff2'), url('../../files/cto_layout/fonts/fontawesome/fontawesome-webfont.woff') format('woff'), url('../../files/cto_layout/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'), url('../../files/cto_layout/fonts/fontawesome/fontawesome-webfont.svg#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'noway_roundicons'; src: url('../../files/cto_layout/fonts/nowayround/nowayround-icons-webfont.eot'); src: url('../../files/cto_layout/fonts/nowayround/nowayround-icons-webfont.eot?#iefix') format('embedded-opentype'), url('../../files/cto_layout/fonts/nowayround/nowayround-icons-webfont.woff2') format('woff2'), url('../../files/cto_layout/fonts/nowayround/nowayround-icons-webfont.woff') format('woff'), url('../../files/cto_layout/fonts/nowayround/nowayround-icons-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } [class^="ni-"], [class*=" ni-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'noway_roundicons' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: annialiased; -moz-osx-font-smoothing: grayscale; } .ni::before { font-size: x-large; } .ni-top { font-size: xxx-large; } .ni-icon0:before { content:"0"; } .ni-icon1:before { content:"1"; } .ni-icon2:before { content:"2"; } .ni-icon3:before { content:"3"; } .ni-icon4:before { content:"4"; } .ni-icon5:before { content:"5"; } .ni-icon6:before { content:"6"; } .ni-icon7:before { content:"7"; } .ni-icon8:before { content:"8"; } .ni-icon9:before { content:"9"; } .ni-icona:before { content:"a"; } .ni-iconb:before { content:"b"; } .ni-iconc:before { content:"c"; } .ni-icond:before { content:"d"; } .ni-icone:before { content:"e"; } .ni-iconf:before { content:"f"; } .ni-icong:before { content:"g"; } .ni-iconh:before { content:"h"; } .ni-iconi:before { content:"i"; } .ni-iconj:before { content:"j"; } .ni-iconk:before { content:"k"; } .ni-iconl:before { content:"l"; } .ni-iconm:before { content:"m"; } .ni-iconn:before { content:"n"; } .ni-icono:before { content:"o"; } .ni-iconp:before { content:"p"; } .ni-iconq:before { content:"q"; } .ni-iconr:before { content:"r"; } .ni-icons:before { content:"s"; } .ni-icont:before { content:"t"; } .ni-iconu:before { content:"u"; } .ni-iconv:before { content:"v"; } .ni-iconw:before { content:"w"; } .ni-iconx:before { content:"x"; } .ni-icony:before { content:"y"; } .ni-iconz:before { content:"z"; } .ni-iconA:before { content:"A"; } .ni-iconB:before { content:"B"; } .ni-iconC:before { content:"C"; } .ni-iconD:before { content:"D"; } .ni-iconE:before { content:"E"; } .ni-iconF:before { content:"F"; } .ni-iconG:before { content:"G"; } .ni-iconH:before { content:"H"; } .ni-iconI:before { content:"I"; } .ni-iconJ:before { content:"J"; } .ni-iconK:before { content:"K"; } .ni-iconL:before { content:"L"; } .ni-iconM:before { content:"M"; } .ni-iconN:before { content:"N"; } .ni-iconO:before { content:"O"; } .ni-iconP:before { content:"P"; } .ni-iconQ:before { content:"Q"; } .ni-iconR:before { content:"R"; } .ni-iconS:before { content:"S"; } .ni-iconT:before { content:"T"; } .ni-iconU:before { content:"U"; } .ni-iconV:before { content:"V"; } .ni-iconW:before { content:"w"; } .ni-iconX:before { content:"X"; } .ni-iconY:before { content:"Y"; } .ni-iconZ:before { content:"Z"; } .ni-icon01:before { content:"!"; } .ni-icon03:before { content:"#"; } .ni-icon04:before { content:"$"; } .ni-icon05:before { content:"%"; } .ni-icon07:before { content:"'"; } .ni-icon08:before { content:"("; } .ni-icon09:before { content:")"; } .ni-icon10:before { content:"*"; } .ni-icon11:before { content:"+"; } .ni-icon12:before { content:","; } .ni-icon13:before { content:"-"; } .ni-icon14:before { content:"."; } .ni-icon15:before { content:"/"; } .ni-icon16:before { content:":"; } .ni-icon17:before { content:";"; } .ni-icon19:before { content:"="; } .ni-icon21:before { content:"?"; } .ni-icon22:before { content:"@"; } .ni-icon23:before { content:"["; } .ni-icon25:before { content:"]"; } .ni-icon26:before { content:"^"; } .ni-icon27:before { content:"_"; } .ni-icon28:before { content:"{"; } .ni-icon29:before { content:"|"; } .ni-icon30:before { content:"}"; } .ni-icon31:before { content:"¡"; } .ni-icon32:before { content:"¢"; } .ni-icon33:before { content:"£"; } .ni-icon34:before { content:"¦"; } .ni-icon35:before { content:"§"; } .ni-icon36:before { content:"©"; } .ni-icon37:before { content:"ª"; } .ni-icon38:before { content:"«"; } .ni-icon39:before { content:"¬"; } .ni-icon40:before { content:"®"; } .ni-icon41:before { content:"°"; } .ni-icon42:before { content:"²"; } .ni-icon43:before { content:"³"; } .ni-icon44:before { content:"¶"; } .ni-icon45:before { content:"·"; } .ni-icon46:before { content:"¹"; } .ni-icon47:before { content:"º"; } .ni-icon48:before { content:"»"; } .ni-icon49:before { content:"¼"; } .ni-icon50:before { content:"½"; } .ni-icon51:before { content:"¾"; } .ni-icon52:before { content:"¿"; } .ni-icon53:before { content:"ß"; } .ni-icon54:before { content:"à"; } .ni-icon55:before { content:"á"; } .ni-icon56:before { content:"â"; } .ni-icon57:before { content:"ã"; } .ni-icon58:before { content:"ä"; } .ni-icon59:before { content:"å"; } .ni-icon60:before { content:"è"; } .ni-icon61:before { content:"é"; } .ni-icon62:before { content:"ê"; } .ni-icon63:before { content:"ë"; } .ni-icon64:before { content:"ì"; } .ni-icon65:before { content:"í"; } .ni-icon66:before { content:"î"; } .ni-icon67:before { content:"ï"; } .ni-icon68:before { content:"ñ"; } .ni-icon69:before { content:"ò"; } .ni-icon70:before { content:"ó"; } .ni-icon71:before { content:"ô"; } .ni-icon72:before { content:"õ"; } .ni-icon73:before { content:"ö"; } .ni-icon74:before { content:"÷"; } .ni-icon75:before { content:"ù"; } .ni-icon76:before { content:"ú"; } .ni-icon77:before { content:"û"; } .ni-icon78:before { content:"ü"; } .ni-icon79:before { content:"ƒ"; } .ni-icon80:before { content:"‐"; } .ni-icon81:before { content:"‑"; } .ni-icon82:before { content:"‒"; } .ni-icon83:before { content:"–"; } .ni-icon84:before { content:"—"; } .ni-icon85:before { content:"‘"; } .ni-icon86:before { content:"’"; } .ni-icon87:before { content:"‚"; } .ni-icon88:before { content:"“"; } .ni-icon89:before { content:"”"; } .ni-icon90:before { content:"„"; } .ni-icon91:before { content:"•"; } .ni-icon92:before { content:"…"; } .ni-icon93:before { content:"‰"; } .ni-icon94:before { content:"‹"; } .ni-icon95:before { content:"›"; } .ni-icon96:before { content:"⁄"; } .ni-icon97:before { content:"€"; } .ni-icon98:before { content:"™"; } .ni-icon99:before { content:"−"; } .ni-icon100:before { content:"≠"; } .ni-icon101:before { content:"◼"; } /* ═══════════════════════════════════════════════════════════════════ KÜCHWALDBÜHNE — DESIGN-TOKENS (zentrale Variablen) ─────────────────────────────────────────────────────────────────── Die EINZIGE Quelle für Farben, Schrift und Maße. Muss als ERSTES Stylesheet geladen werden (vor allen kb-*.css). Kanonisch sind die --color-*. Die --kb-* sind Aliase darauf, damit die Komponenten kb-neuigkeiten.css und kb-rueckblicke.css ohne jede Umbenennung weiterlaufen. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Flächen ── */ --color-paper: #F4F1E8; --color-card: #FDFCF5; --color-card-hover: #FFFFFA; --color-header: #D2DEE0; /* Alternativen aus dem Mockup: --color-header: #DDE3D7; --color-header: #E1E0D6; */ /* ── Text ── */ --color-text: #24211D; --color-muted: #6F675E; --color-faint: #B0A89D; /* ── Linien ── */ --color-line: rgba(36, 33, 29, 0.16); --color-line-soft: rgba(36, 33, 29, 0.08); /* ── Akzentfarben ── */ --color-green: #17483F; --color-green-hover: #0E342D; --color-green-light: #4a6140; /* war hartkodiert in Teambox + Abschnittsstrich */ --color-burgund: #8B2E1F; --color-gold: #C9A227; /* ── Schrift & Maße ── */ --font-body: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif; --max-width: 1280px; --radius: 6px; /* ── Komponenten-Tokens ── */ --kb-gap: 8px; /* Fugenbreite im Rückblicke-Mosaik */ /* ── Aliase für die --kb-*-Komponenten (Neuigkeiten, Rückblicke) ── */ --kb-paper: var(--color-paper); --kb-text: var(--color-text); --kb-muted: var(--color-muted); --kb-faint: var(--color-faint); --kb-line: var(--color-line); --kb-green: var(--color-green); --kb-green-hover: var(--color-green-hover); --kb-font: var(--font-body); } /* ═══════════════════════════════════════════════════════════════════ KÜCHWALDBÜHNE — BASIS / GRUNDGERÜST ─────────────────────────────────────────────────────────────────── Globale Resets und Seiten-Grundlagen. Lädt direkt nach kb-tokens.css. Enthält bewusst KEINE Contao-Overrides (die liegen in kb-theme-overrides.css) und KEINE !important-Regeln. ═══════════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-paper); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; } img { display: block; max-width: 100%; } /* ═════════ Inhalts-Container ═════════ */ .kb-content { max-width: var(--max-width); margin: 0 auto; padding: 0 28px 88px 28px; } /* ═══════════════════════════════════════════════════════════════════ KÜCHWALDBÜHNE — THEME-ÜBERSCHREIBUNGEN ─────────────────────────────────────────────────────────────────── Überschreibt das Contao-Theme-CSS (49_*.css, animate/t.css usw.), damit die neuen Seiten den Mockup-Look bekommen — beigefarbener Seitenhintergrund, Himmelblau-Header, Inter als Schrift. Wirkt nur auf den neuen Seitenlayouts, weil diese Datei nur dort eingebunden wird. Die alten öffentlichen Seiten nutzen ein anderes Layout und bleiben unberührt. !important ist hier nötig, weil das Theme-CSS an vielen Stellen selbst !important bzw. sehr spezifische Selektoren verwendet. Lädt nach kb-base.css. ═══════════════════════════════════════════════════════════════════ */ /* ─── Schrift: Theme-Font durch Inter ersetzen ─── */ body, #wrapper, #main, #header, #header a, .kb-pagehead, .kb-pagehead h1, .kb-toolbar, .kb-list, .kb-event, .kb-event h2, .kb-footer { font-family: var(--font-body) !important; } /* ─── Seitenhintergrund ─── */ html, body { background: var(--color-paper) !important; background-image: none !important; } #contentwrapper, #fix-wrapper, #wrapper, .body { background: var(--color-paper) !important; } /* ─── Obere Leiste / Header ─── */ #top-wrapper, #header, #header.header, #header.header.original { background: var(--color-header) !important; border-bottom: 1px solid var(--color-green); } /* Falls der Header beim Scrollen fixiert wird (Body-Klasse "fixed-header" / "#top-wrapper.fixed"): Hintergrund konsistent halten, nicht das dunkle Theme-Overlay zeigen */ #top-wrapper.fixed { background: var(--color-header) !important; box-shadow: 0 1px 6px rgba(36, 33, 29, 0.08) !important; } /* Header-Innencontainer transparent lassen, damit die Hintergrundfarbe vom Header durchscheint */ #header .inside { background: transparent !important; } /* ─── Nachjustierung Header (weiße Schrift, schwarze Linie weg) ─── Hinweis: Diese Selektoren sind breit angelegt, weil die exakte Farbquelle ohne Browser-Inspektor nicht eindeutig ist. Sobald die echten Selektoren bekannt sind, kann das verschlankt werden. */ /* Schwarze Trennlinie am Header entfernen. */ #header, #header.header, #header.header.original, #top-wrapper, #header .inside { border: 0 !important; box-shadow: none !important; } /* Falls die "schwarze Linie" ein Trennstrich vor den Social-Icons ist (.header .mod_socials:before) — den ausblenden */ #header .mod_socials:before { display: none !important; } /* Seitenhintergrund — breiter gefasst, falls das Theme die Farbe an einem zusätzlichen Container setzt */ #main, #container, .mod_article, .body_top, .body_bottom { background: var(--color-paper) !important; } /* Header-Schrift dunkel statt weiß. Navigation, Metanavigation, Logo-Text, alle Links im Header. */ #header, #header a, #header .mainmenu ul li a, #header .mainmenu ul li a.active, #header .mainmenu ul li a.trail, #header .header_metanavi a, #header .mod_socials a { color: var(--color-text) !important; } /* Aktiver / aktueller Menüpunkt im Forest-Green hervorheben */ #header .mainmenu ul li a.active, #header .mainmenu ul li a.trail { color: var(--color-green) !important; } /* Social-Media-Icons (Font-Awesome) ebenfalls dunkel */ #header .mod_socials a i, #header .mod_socials .fa { color: var(--color-text) !important; } /* ─── Hero-Bild: gleiche Breite wie das Inhalts-Modul ─── Das Hero-Bild soll nicht über den Content-Bereich hinausstehen. Falls die Breite nicht exakt stimmt, muss der Selektor an die tatsächliche Klasse des Hero-Containers angepasst werden. */ .ce_headerimage, .ce_pageimage, .mod_pageimage { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden; } /* ─── Hauptmenü (Contao .mainmenu) ─── */ .mainmenu ul li a { font-family: var(--font-body) !important; text-transform: none !important; font-size: 18px !important; } .mainmenu ul li a.active { font-weight: 700; } li a.a-level_1.active::before { background-color: var(--color-green) !important; } /* ═════════ Menüband ═════════ */ .kb-header { background: var(--color-header); border-bottom: 1px solid var(--color-green); } .kb-header-inner { max-width: var(--max-width); margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .kb-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; } .kb-logo-img { height: 48px; width: auto; display: block; } .kb-logo-text { font-size: 17px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.1; } .kb-logo-place { display: block; color: var(--color-muted); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; margin-top: 2px; } .kb-nav { display: flex; gap: 26px; align-items: center; } .kb-nav a { font-size: 14px; font-weight: 500; color: var(--color-muted); text-decoration: none; transition: color 0.15s; } .kb-nav a:hover { color: var(--color-text); } .kb-nav a.active { color: var(--color-text); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════ HEADERBILD (Hero) — Küchwaldbühne ─────────────────────────────────────────────────────────────────── Gehört zum Inhaltselement "Headerbild" (Template ce_kb_headerimage). SKALIERUNGSLOGIK Die Hero-Höhe wird über clamp() bestimmt: · Wunschwert: 60vh — 60 % der Bildschirmhöhe · Untergrenze: 100vw / 3.5 — Höhe ist mindestens Breite ÷ 3,5 (verhindert zu flachen Hero auf breiten Bildschirmen) · Obergrenze: 100vw / 1.25 — Höhe ist höchstens Breite ÷ 1,25 (verhindert riesigen Hero auf schmalen Bildschirmen) Der Browser wählt automatisch die passende Höhe zwischen diesen Grenzen. Das Bild wird per object-fit: cover formatfüllend eingepasst und je nach Bildschirm links/rechts oder oben/unten leicht beschnitten. HINWEIS — diese Datei MUSS in der Datei landen, die das Template einbindet: cto_layout/css/customelements/ce_kb_headerimage.css ═══════════════════════════════════════════════════════════════════ */ /* ─── Volle Bildschirmbreite ─── Der 100vw-Trick bricht den Hero aus einem evtl. schmaleren Inhaltscontainer aus, sodass er randlos über den ganzen Bildschirm läuft. Liegt das Element ohnehin in einem vollbreiten Layout- Bereich, schadet der Trick nicht (margin wird dann 0). Mögliche Nebenwirkung: 100vw zählt die vertikale Scrollleiste mit — auf manchen Systemen entsteht ein minimaler horizontaler Versatz. Falls das stört, 100vw durch 100% ersetzen und das Element in einen vollbreiten Layout-Bereich legen. */ .kb-hero-frame { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* visible, damit ein nachfolgender Pagehead optisch in den Hero hineinragen kann (über negativen margin-top). Der Bildbeschnitt selbst regelt die innere .kb-hero per overflow: hidden. */ overflow: visible; } .kb-hero { position: relative; width: 100%; /* Höhe per clamp: min = 100vw / 3.5 (Untergrenze für breite Schirme) Wunsch = 60vh max = 100vw / 1.25 (Obergrenze für schmale Schirme) */ height: clamp( calc(100vw / 3.5), 60vh, calc(100vw / 1.25) ); background: #C8D5D8; overflow: hidden; } .kb-hero-picture, .kb-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; } .kb-hero-picture { display: block; } .kb-hero-img { /* cover füllt den Hero randlos und schneidet die überstehende Achse ab — je nach Bildschirm oben/unten oder links/rechts. */ object-fit: cover; /* center = symmetrischer Beschnitt. Sitzt bei einem Bild das Wichtige weiter oben, hier 'top' bzw. '50% 35%' setzen. */ object-position: center center; } .kb-hero-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; /*overscroll-behavior: contain;*/ } /* ═══════════════════════════════════════════════════════════════════ KÜCHWALDBÜHNE — SEITENKOPF & ABSCHNITTSÜBERSCHRIFT ─────────────────────────────────────────────────────────────────── .kb-pagehead — große Seitenüberschrift mit Eyebrow und Lead .kb-sectionhead — kleinere Abschnittsüberschrift mit Akzentstrich Hinweis: In der alten spielplan-style.css war der Abschnitts-Block doppelt vorhanden. Hier steht er nur noch einmal (die zuletzt gültige Fassung). Klassennamen unverändert. ═══════════════════════════════════════════════════════════════════ */ /* ═════════ Seitenkopf ═════════ */ .kb-pagehead { margin-top: 40px; padding: 0 0 36px 0; border-bottom: 1px solid var(--color-line); } @media (max-width: 860px) { .kb-pagehead { padding: 0 0 30px 0; } } .kb-eyebrow { color: var(--color-green); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 14px 0; } .kb-page-title { margin: 0; color: var(--color-text); font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.04em; } .kb-lead { margin: 22px 0 0 0; max-width: 640px; font-size: clamp(1rem, 1.3vw, 1.15rem); color: #3C3833; line-height: 1.55; } /* ═════════ Abschnittsüberschrift ═════════ Etwas mehr Abstand nach oben, da sie einen neuen Bereich vom vorigen Inhalt absetzt. */ .kb-sectionhead { margin-top: 56px; margin-bottom: 22px; } .kb-sectionhead::before { content: ""; display: block; width: 44px; height: 3px; background: var(--color-green-light); border-radius: 2px; margin-bottom: 15px; } .kb-section-title { font-size: 1.6rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: #2c2823; margin: 0; } /* ═══════════════════════════════════════════════════════════════════ KÜCHWALDBÜHNE — FOOTER ─────────────────────────────────────────────────────────────────── Partner-Logos, Sponsoren-Raster, Kontaktspalten und Bottom-Leiste. ═══════════════════════════════════════════════════════════════════ */ .kb-footer { background: var(--color-paper); padding: 64px 28px 32px 28px; border-top: 1px solid var(--color-line); margin-top: 56px; } .kb-footer-inner { max-width: var(--max-width); margin: 0 auto; } .kb-footer-heading { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; text-align: center; margin: 0 0 28px 0; } .kb-footer-section { margin-bottom: 56px; } .kb-partner-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 32px 24px; align-items: center; justify-items: center; max-width: 1100px; margin: 0 auto; } .kb-partner-logo { position: relative; width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; } .kb-partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; position: relative; z-index: 1; } .kb-partner-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; font-size: 10px; color: #B0B0AB; letter-spacing: 0.05em; border: 1px dashed rgba(36,33,29,0.12); z-index: 0; } .kb-sponsor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 24px; align-items: center; justify-items: center; background: #EBE7DA; padding: 32px 24px; max-width: 1100px; margin: 0 auto; border-radius: var(--radius); } @media (min-width: 800px) { .kb-sponsor-grid { grid-template-columns: repeat(4, 1fr); } } .kb-sponsor-logo { position: relative; width: 100%; height: 70px; display: flex; align-items: center; justify-content: center; } .kb-sponsor-logo img { max-width: 100%; max-height: 100%; object-fit: contain; position: relative; z-index: 1; } .kb-sponsor-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6px; text-align: center; font-size: 10px; color: #A8A89F; letter-spacing: 0.04em; border: 1px dashed rgba(36,33,29,0.12); z-index: 0; } .kb-footer-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding: 48px 0 32px 0; border-top: 1px solid var(--color-line); } .kb-footer-col h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-green); margin: 0 0 14px 0; } .kb-footer-col p { font-size: 13px; line-height: 1.6; margin: 0; } .kb-footer-col strong { font-weight: 700; } .kb-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--color-line); font-size: 12px; color: var(--color-muted); } .kb-footer-bottom a { margin-left: 18px; text-decoration: none; } .kb-footer-bottom a:hover { color: var(--color-green); } @media (max-width: 600px) { .kb-footer-bottom { flex-direction: column; gap: 8px; } .kb-footer-bottom a { margin-left: 0; } } /* =========================================================== Teambox – Küchwaldbühne Eigenständiges Element: bringt seine eigene Breite mit, sodass 6 Stück nebeneinander passen (Desktop) und auf schmalen Bildschirmen untereinander stehen. Standard-Schema: rundes Portrait, ohne Kasten, zentriert. Farben: das Akzent-Grün kommt aus kb-tokens.css (--color-green-light). Die übrigen Grautöne sind bewusst eigenständig gehalten. =========================================================== */ /* --- Das Element selbst kachelt sich --- */ .ce_teambox{ box-sizing:border-box; float:left; width:calc(100% / 6); /* 6 nebeneinander */ padding:0 8px 30px; } /* Tablet: 3 nebeneinander */ @media (max-width:900px){ .ce_teambox{ width:calc(100% / 3); } } /* Mobil: untereinander */ @media (max-width:560px){ .ce_teambox{ width:100%; float:none; } } .teambox_inside{ display:flex; flex-direction:column; align-items:center; text-align:center; } /* --- Portrait rund, direkt auf dem Seitenhintergrund --- */ .teambox_inside .image{ width:100%; max-width:170px; aspect-ratio:1 / 1; margin-bottom:16px; } .teambox_inside .image img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:1px solid rgba(44,40,35,.12); transition:transform .18s ease, border-color .18s ease; } /* --- Textblock --- */ .teambox_content{ display:flex; flex-direction:column; align-items:center; } .teambox_content .amt{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:500; color:var(--color-green-light); margin-bottom:3px; } .teambox_content .name{ font-size:1.12rem; font-weight:500; color:#2c2823; line-height:1.3; margin:0 0 2px; } .teambox_content .function, .teambox_content .description{ font-size:.9rem; color:#6f685c; margin-bottom:10px; } /* --- Kontaktzeilen mit Icon --- */ .teambox_content .contact{ display:flex; flex-direction:column; gap:4px; align-items:center; margin-top:2px; } .teambox_content .contact a{ display:inline-flex; align-items:center; gap:7px; font-size:.86rem; color:#5d564b; text-decoration:none; transition:color .15s ease; } .teambox_content .contact a:hover{ color:var(--color-green-light); } .teambox_content .contact i{ font-size:14px; color:#9a9384; width:15px; text-align:center; flex-shrink:0; transition:color .15s ease; } .teambox_content .contact a:hover i{ color:var(--color-green-light); } /* --- Social-Links --- */ .teambox_content .socials{ display:flex; gap:12px; margin-top:12px; } .teambox_content .socials a{ color:#9a9384; font-size:18px; text-decoration:none; transition:color .15s ease; } .teambox_content .socials a:hover{ color:var(--color-green-light); } /* ═══════════════════════════════════════════════════════════════════ NEUIGKEITEN — Timeline-Darstellung (Linie links, Bild rechts) ─────────────────────────────────────────────────────────────────── Stilfamilie wie der Spielplan (Inter, Paper-Hintergrund, Forest- Green). Durchgehende Zeitleiste statt Kacheln. Desktop — Die vertikale Linie verläuft links außen. Rechts davon der Inhalt (Datum, Titel, Teaser, Weiter), ganz rechts das Bild (Querformat A4). Der Marker sitzt auf der Linie. Mobile — Einspaltig, Linie links außen: Datum, Titel, Bild, Teaser, Weiter untereinander. Variablen (--kb-*) kommen aus kb-tokens.css. ═══════════════════════════════════════════════════════════════════ */ /* Breite der Bildspalte (rechts). Querformat A4 (1,414:1) → bei 283px Breite ergibt sich ca. 200px Höhe. */ .kb-news-list { --kb-img-w: 283px; } /* ─── Liste: die durchgehende Zeitleiste ─── Die vertikale Linie liegt links außen. Jeder Eintrag hängt mit seinem Marker daran. */ .kb-news-list { position: relative; margin: 28px 0 36px 0; padding-left: 30px; /* Absicherung gegen vom Theme/Modul gesetzte feste Höhe */ height: auto !important; } .kb-news-list::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--kb-line); } /* ─── Einzelner Eintrag ─── */ .kb-news { position: relative; padding: 0 0 40px 0; font-family: var(--kb-font); } .kb-news:last-child { padding-bottom: 0; } /* Marker — Punkt auf der Linie */ .kb-news-marker { position: absolute; left: -30px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--kb-green); border: 3px solid var(--kb-paper); z-index: 1; } /* ─── Desktop-Layout: zwei Spalten ─── Linke Spalte = Inhalt, rechte Spalte = Bild (feste Breite). */ .kb-news-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--kb-img-w); column-gap: 32px; align-items: start; } /* Inhaltsspalte */ .kb-news-content { min-width: 0; } /* Bild — Querformat A4, cover-Zuschnitt. Oberkante bündig mit dem Datum (ganz oben, kein Versatz). */ .kb-news-image { aspect-ratio: 1.414 / 1; border-radius: 2px; overflow: hidden; background: #ECE8DC; } .kb-news-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Datum */ .kb-news-date { margin: 0 0 6px 0; font-size: 13px; font-weight: 700; color: var(--kb-green); } /* Optionale Unter-Überschrift */ .kb-news-sub { margin: 0 0 4px 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--kb-faint); } /* Titel */ .kb-news-title { margin: 0 0 8px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; color: var(--kb-text); overflow-wrap: normal; word-break: normal; hyphens: none; } /* Teaser */ .kb-news-teaser { font-size: 14.5px; line-height: 1.6; color: var(--kb-muted); } .kb-news-teaser p { margin: 0 0 8px 0; } .kb-news-teaser p:last-child { margin-bottom: 0; } .kb-news-teaser a { color: var(--kb-green); text-decoration: none; } .kb-news-teaser a:hover { color: var(--kb-green-hover); } /* "Weiter"-Link mit wachsendem Pfeil */ .kb-news-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--kb-green); text-decoration: none; transition: color 0.15s; } .kb-news-more:hover { color: var(--kb-green-hover); } .kb-news-more-arrow { display: inline-flex; align-items: center; width: 1.6em; height: 1em; overflow: visible; } .kb-news-more-arrow::before { content: ''; display: block; width: 0.9em; height: 1.5px; background: currentColor; flex-shrink: 0; transition: width 0.25s ease; } .kb-news-more-arrow::after { content: ''; display: block; width: 0.35em; height: 0.35em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); margin-left: -0.48em; flex-shrink: 0; } .kb-news-more:hover .kb-news-more-arrow::before { width: 1.4em; } /* ─── Tablet — Bild etwas schmaler ─── */ @media (max-width: 900px) { .kb-news-list { --kb-img-w: 220px; } .kb-news-row { column-gap: 26px; } } /* ─── Mobile ─── Einspaltig, Linie links außen. Reihenfolge: Datum, Titel, Bild, Teaser, Weiter. */ @media (max-width: 600px) { .kb-news-list { padding-left: 26px; } .kb-news { padding-bottom: 32px; } .kb-news-marker { left: -26px; } /* Eine Spalte; Bild per Reihenfolge zwischen Titel und Teaser */ .kb-news-row { grid-template-columns: 1fr; column-gap: 0; } .kb-news-content { display: contents; /* Kinder rücken direkt ins Grid */ } .kb-news-date { order: 1; } .kb-news-sub { order: 2; } .kb-news-title { order: 3; } .kb-news-image { order: 4; margin: 4px 0 13px 0; } .kb-news-teaser{ order: 5; } .kb-news-more { order: 6; } .kb-news-title { font-size: 1.45rem; line-height: 1.14; } .kb-news-teaser { font-size: 15px; } .kb-news-more { font-size: 14px; } } /* ═════════ Toolbar ═════════ */ .kb-toolbar { padding: 28px 0 24px 0; display: grid; grid-template-columns: 1fr minmax(220px, 320px); gap: 24px; align-items: center; } @media (max-width: 860px) { .kb-toolbar { grid-template-columns: 1fr; } } .kb-chips { display: flex; flex-wrap: wrap; gap: 8px; } .kb-chip { appearance: none; border: 1px solid var(--color-line); background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 9px 14px; cursor: pointer; border-radius: var(--radius); transition: border-color 0.15s, background 0.15s, color 0.15s; } .kb-chip:hover, .kb-chip.active { border-color: var(--color-green); background: var(--color-green); color: var(--color-card); } .kb-search { position: relative; } .kb-search input { width: 100%; padding: 10px 14px 10px 38px; border: 0; background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 14px; outline: none; border-radius: 0; transition: border-color 0.15s; } .kb-search input::placeholder { color: var(--color-faint); transition: color 0.15s; } .kb-search input:hover { border: 0 !important; background-color: transparent !important; } .kb-search input:hover::placeholder { color: var(--color-muted); } .kb-search input:focus { border: 0 !important; background-color: transparent !important; } .kb-search input:focus::placeholder { color: transparent; } .kb-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--color-muted); pointer-events: none; } /* ═════════ Liste ═════════ */ .kb-list { display: flex; flex-direction: column; gap: 18px; } .kb-empty { text-align: center; padding: 64px 24px; color: var(--color-muted); font-style: italic; display: none; } /* ═════════ Veranstaltungs-Karte ═════════ */ .kb-event { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; border-radius: var(--radius); padding: 28px; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .kb-event:hover { } @media (max-width: 720px) { .kb-event { grid-template-columns: 1fr; gap: 20px; padding: 22px; } } /* Titel + Untertitel sind klickbar (Link zur Detailseite), wenn event_url gesetzt ist. Nur dieser Bereich verlinkt — nicht mehr die ganze Karte. Der Link erbt die Textfarbe und bekommt keinen Unterstrich; der Hover-Effekt sitzt auf dem Titel. */ .kb-event-titlelink { display: block; text-decoration: none; color: inherit; } .kb-event-titlelink:hover .kb-event-title { color: var(--color-green); } .kb-event-org, .kb-event-expand { position: relative; z-index: 2; } /* ─── Plakat ─── */ .kb-event-poster { position: relative; width: 100%; aspect-ratio: 1 / 1.414; background: #FFFFFF; border: 1px solid var(--color-line-soft); overflow: hidden; border-radius: 3px; } @media (max-width: 720px) { .kb-event-poster { max-width: 240px; margin: 0 auto; } } @media (max-width: 480px) { .kb-event-poster { max-width: 66%; margin: 0; } } .kb-event-poster img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: center; } .kb-event-poster .placeholder { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; font-size: 10px; color: #B0B0AB; letter-spacing: 0.10em; text-transform: uppercase; } .kb-event-poster .placeholder code { font-family: ui-monospace, monospace; font-size: 10px; color: #8A8A85; text-transform: none; letter-spacing: 0; } /* ─── Fällt-aus-Zustand ─── */ .kb-event--out { pointer-events: none; } .kb-event--out .kb-event-poster::after { content: 'Fällt aus'; position: absolute; top: 38%; left: -8%; right: -8%; z-index: 4; background: var(--color-muted); color: var(--color-card); font-family: var(--font-body); font-size: clamp(15px, 2.2vw, 17px); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; padding: 10px 0; transform: rotate(-7deg); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; } .kb-event--out .kb-event-poster img, .kb-event--out .kb-event-poster .placeholder, .kb-event--out .kb-event-title, .kb-event--out .kb-event-sub, .kb-event--out .kb-event-location, .kb-event--out .kb-event-kicker { filter: grayscale(1); opacity: 0.55; } .kb-event--out .kb-event-dates { color: var(--color-muted); } .kb-event--out .kb-event-date-text span, .kb-event--out .kb-event-date-celltext { text-decoration: line-through; } .kb-event--out:hover { background: var(--color-card); transform: none; box-shadow: none; } .kb-event--out:hover .kb-event-title { color: var(--color-text); } /* ─── Body ─── */ .kb-event-body { display: flex; flex-direction: column; min-width: 0; } .kb-event-foot { display: flex; flex-direction: column; padding-top: 18px; position: relative; z-index: 2; } /* ─── Veranstalter — Eyebrow oben ─── */ .kb-event-kicker { margin: 0 0 10px 0; } .kb-event-org { color: var(--color-green); text-decoration: none; font-weight: 800; text-transform: uppercase; letter-spacing: 0.10em; font-size: 11px; transition: color 0.15s; } a.kb-event-org:hover { color: var(--color-green-hover); } /* ─── Titel ─── */ .kb-event-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 0 0 12px 0; } .kb-event-title { margin: 0; color: var(--color-text); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; overflow-wrap: normal; word-break: normal; word-wrap: normal; hyphens: none; } /* ─── Untertitel ─── */ .kb-event-sub { margin: 0; font-size: 15px; color: var(--color-muted); line-height: 1.5; max-width: 600px; overflow-wrap: normal; word-break: normal; hyphens: none; } .kb-event-more { font-weight: 700; color: var(--color-green); white-space: nowrap; } .kb-event-titlelink:hover .kb-event-more { color: var(--color-green-hover); } /* ─── Ortsangabe ─── */ .kb-event-location { margin: 14px 0 0 0; font-size: 13px; color: var(--color-muted); } .kb-event-location strong { font-weight: 700; color: var(--color-text); } /* ─── Aufklapp-Schalter ─── */ .kb-event-expand { appearance: none; align-self: flex-start; margin: 14px 0 0 0; padding: 0; border: 0 !important; background: transparent; color: var(--color-muted); font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; transition: color 0.15s; } .kb-event-expand::after { content: ' ▾'; font-size: 10px; } .kb-event-expand.is-open::after { content: ' ▴'; } .kb-event-expand:hover { color: var(--color-green); } .kb-event-dates { margin: 0; align-self: start; border-collapse: collapse; font-size: 17px; color: var(--color-text); font-weight: 600; letter-spacing: -0.003em; } /* ─── Termin-Marker (Premiere, Heute, Letzte, eigene, Fällt aus) ─── Variante 1: kleine farbige Versalzeile direkt ÜBER dem Datum, ohne Hintergrund (die Karten haben keinen eigenen Hintergrund). Die Marker-Zeile ist absolut positioniert und aus dem normalen Fluss genommen — dadurch beeinflusst ihre Breite NICHT die Spaltenbreite der Tabelle. Eine lange Auszeichnung würde sonst die erste Spalte breit ziehen und die Uhrzeit nach rechts schieben. Die Zelle ist position: relative (siehe unten), die Marker sitzen per bottom: 100% oberhalb des Zelleninhalts. */ .kb-event-markers { position: absolute; left: 0; bottom: 62%; margin-bottom: 2px; display: flex; flex-wrap: nowrap; gap: 4px 10px; white-space: nowrap; } .kb-event-markers:empty { display: none; } .kb-event-marker { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.2; white-space: nowrap; } .kb-event-marker--premiere { color: var(--color-burgund); } /* rot */ .kb-event-marker--letzte { color: var(--color-green); } /* grün */ .kb-event-marker--heute { color: #2B5C8A; } /* blau */ .kb-event-marker--eigen { color: var(--color-green); } .kb-event-marker--aus { color: var(--color-burgund); } /* rot */ /* Das Datum sitzt als eigener Block; die Zelle ist relativ positioniert, damit die absoluten Marker sich daran ausrichten. */ .kb-event-date-text { display: block; } .kb-event-date td { vertical-align: bottom; padding: 5px 0; white-space: nowrap; } /* Die erste Zelle ist relativ positioniert (Anker für die absoluten Marker). Alle Zellen unten ausgerichtet, damit Datum, Zeit und Aktion fluchten. */ .kb-event-date .kb-event-date-day { position: relative; vertical-align: bottom; } /* Nur wenn die Zeile wirklich Marker hat, oben Platz reservieren, damit die absolute Marker-Zeile nicht in die obere Zeile ragt. Über :has() — fällt der Browser darauf zurück, schadet das Fehlen nur minimal (Marker säßen dann sehr nah am Datum). */ .kb-event-date:has(.kb-event-markers .kb-event-marker) .kb-event-date-day { padding-top: 18px; } .kb-event-date { border-top: 1px solid var(--color-line-soft); border-bottom: 1px solid var(--color-line-soft); padding-top: 9px; padding-bottom: 9px; } .kb-event-date:first-child td { } .kb-event-date-weekday { display: none; } .kb-event-date-time::before, .kb-event-date-place::before, .kb-event-date-action::before { content: ''; color: var(--color-faint); margin: 0 12px; } .kb-event-date-place { color: var(--color-text); font-weight: 600; } .kb-event-date-info { color: var(--color-muted); font-weight: 500; font-style: italic; } .kb-event-date-out { color: var(--color-burgund); font-style: italic; font-weight: 600; } .kb-event-tlink { color: var(--color-green); font-weight: 700; white-space: nowrap; transition: color 0.15s; } .kb-event-date--link:hover .kb-event-tlink { color: var(--color-green-hover); } .kb-event-tlink-arrow { --arrow-line: 0.01em; --arrow-line-hover: 1em; --arrow-head: 0.30em; --arrow-thickness: 1.5px; --arrow-overlap: 0.38em; position: relative; display: inline-block; width: calc(var(--arrow-line-hover) + var(--arrow-head)); height: 1em; margin-left: 0.4em; vertical-align: middle; overflow: visible; } .kb-event-tlink-arrow::before { content: ''; position: absolute; left: 0; top: 50%; width: var(--arrow-line); height: var(--arrow-thickness); background: currentColor; transform: translateY(-50%); transition: width 0.25s ease; } .kb-event-tlink-arrow::after { content: ''; position: absolute; left: calc(var(--arrow-line) - var(--arrow-overlap)); top: 50%; width: var(--arrow-head); height: var(--arrow-head); border-top: var(--arrow-thickness) solid currentColor; border-right: var(--arrow-thickness) solid currentColor; transform: translateY(-50%) rotate(45deg); transition: left 0.25s ease; } .kb-event-date--link:hover .kb-event-tlink-arrow { --arrow-line: var(--arrow-line-hover); } .kb-event-date--aus .kb-event-date-text span, .kb-event-date--aus .kb-event-date-celltext { text-decoration: line-through; color: var(--color-muted); } .kb-event-date--link { position: relative; cursor: pointer; } .kb-event-rowlink { position: absolute; inset: 0; z-index: 3; } .kb-event-date { transition: color 0.15s, background 0.15s; } .kb-event-date:hover { color: var(--color-green); background: rgba(23, 72, 63, 0.04); } .kb-event-date--link:hover { color: var(--color-green-hover); background: rgba(23, 72, 63, 0.06); } @keyframes kb-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .kb-event-date--reveal { animation: kb-reveal 0.25s ease forwards; } .show-on-mobile { display: none; } @media (max-width: 540px) { .hide-on-mobile { display: none !important; } .show-on-mobile { display: inline; } } @media (max-width: 540px) { .kb-event-foot { margin-top: 0; padding-top: 16px; } .kb-event-dates { font-size: 17px; } .kb-event-date td { padding: 6px 0; } .kb-event-date-time::before, .kb-event-date-place::before, .kb-event-date-action::before { margin: 0 10px; } .kb-event-date-weekday { display: inline; } .kb-event-date:has(.kb-event-date-place) .kb-event-date-weekday { display: none; } .kb-event-expand { align-self: flex-start; } } @media (max-width: 400px) { .kb-event-date-time::before, .kb-event-date-place::before, .kb-event-date-action::before { margin: 0 6px; } .kb-event-dates { font-size: 16px; } } /* ═══════════════════════════════════════════════════════════════════ RÜCKBLICKE — Foto-Galerien vergangener Veranstaltungen ─────────────────────────────────────────────────────────────────── Stilfamilie wie der Spielplan (Inter, Paper-Hintergrund, Forest- Green). Pro Event ein Block: knappe Kopfzeile + Foto-Mosaik. Das Mosaik passt seine Form an die Bildanzahl an — gesteuert über das Attribut data-count am .kb-gallery-Container (1–10 Bilder). Variablen (--kb-*, --kb-gap) kommen aus kb-tokens.css. ═══════════════════════════════════════════════════════════════════ */ /* ─── Liste ─── */ .kb-rueckblick-list { margin: 28px 0 36px 0; height: auto !important; /* Absicherung gegen feste Höhe */ } /* ─── Einzelner Event-Block ─── */ .kb-rueckblick { margin: 0 0 46px 0; font-family: var(--kb-font); } .kb-rueckblick:last-child { margin-bottom: 0; } /* ─── Kopfzeile: Datum · Titel · Veranstalter ─── */ .kb-rueckblick-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px 0; } .kb-rueckblick-date { font-size: 13px; font-weight: 700; color: var(--kb-green); } .kb-rueckblick-title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--kb-text); } .kb-rueckblick-org { font-size: 13px; color: var(--kb-muted); } /* Optionaler Teaser-Text über der Galerie */ .kb-rueckblick-body > p { margin: 0 0 14px 0; font-size: 14.5px; line-height: 1.6; color: var(--kb-muted); } /* ═══════════ Foto-Mosaik ═══════════ Der Galerie-Container .kb-gallery ist ein CSS-Grid mit fester Spaltenzahl. Die ZEILENHÖHE wird nicht über ein aspect-ratio am Container gesteuert (das setzen Browser bei Grids unzuverlässig um), sondern die KACHELN selbst tragen ein aspect-ratio. Daraus ergibt sich automatisch die Zeilenhöhe. Für jede Bildanzahl (1–10) ist ein Layout definiert, das ein lückenlos gefülltes Rechteck ergibt. Einzelne Kacheln werden über mehrere Zellen gestreckt (echtes Mosaik). Contao verschachtelt jedes Bild: .kb-gallery-item > figure.image_container > a > img und kann zusätzlich eine
einfügen. Das trägt feste width/height-Attribute. Damit die Bilder die Kacheln formatfüllend ausfüllen, werden die inneren Ebenen absolut positioniert und die festen Maße per CSS überschrieben. */ .kb-gallery { display: grid; gap: var(--kb-gap); width: 100%; /* dense: füllt entstehende Lücken automatisch mit nachfolgenden Kacheln — sichert das lückenlose Rechteck ab. */ grid-auto-flow: row dense; } .kb-gallery + .kb-gallery { margin-top: var(--kb-gap); } /* ─── Bildkachel ─── Jede Kachel trägt ein aspect-ratio (quer, 3:2). Da alle Kacheln einer Zeile gleich hoch sind, ergibt sich die Zeilenhöhe von selbst. Kacheln, die über 2 Zeilen gehen, brauchen ein dazu passendes Verhältnis (siehe Akzent-Kacheln weiter unten). */ .kb-gallery-item { margin: 0; position: relative; overflow: hidden; border-radius: 3px; background: #ECE8DC; min-width: 0; min-height: 0; aspect-ratio: 3 / 2; } /* Alle inneren Ebenen füllen die Kachel absolut — kein Bild kann seine festen height-Attribute durchdrücken. */ .kb-gallery-item .image_container, .kb-gallery-item .image_container > a, .kb-gallery-item > figure { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; } .kb-gallery-item img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; display: block; } /* Bildunterschrift (figcaption) — enthält die Bildrechte. Klein unten auf dem Bild. Schrift kräftig genug zum Lesen, mit dunklem Verlauf darunter als Kontrastgrund. !important, weil das Theme-/Contao-CSS eigene caption-Regeln mitbringt, die sonst gewinnen würden. */ .kb-gallery-item figcaption, .kb-gallery-item figcaption.caption, .kb-gallery .image_container figcaption { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; z-index: 2 !important; margin: 0 !important; padding: 18px 8px 5px 8px !important; font-size: 9.5px !important; line-height: 1.3 !important; color: rgba(255, 255, 255, 0.96) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) !important; text-align: left !important; pointer-events: none; } /* sanfter Hover auf den klickbaren Bildern */ .kb-gallery-item .image_container > a { transition: opacity 0.15s; z-index: 1; } .kb-gallery-item .image_container > a:hover { opacity: 0.9; } /* ─── Layouts je Bildanzahl ─── Jedes Raster bildet ein geschlossenes Rechteck. Eine "Akzent-Kachel" überspannt 2×2 Zellen. Damit sie exakt so hoch ist wie zwei kleine Kacheln plus die Lücke dazwischen, bekommt sie ein eigenes aspect-ratio: kleine Kachel = 3:2 → Höhe = Breite × 2/3 große Kachel = überspannt 2 Spalten + 1 gap Höhe = 2 × (kleine Höhe) + 1 gap In der Praxis genügt ein quadratisches Verhältnis (1:1) für die Akzent-Kachel — die minimale Abweichung fängt das Grid ab, weil die übrigen Kacheln sich an der Zeilenhöhe ausrichten. */ /* 1 Bild — ein breites Einzelbild */ .kb-gallery[data-count="1"] { grid-template-columns: 1fr; } .kb-gallery[data-count="1"] .kb-gallery-item { aspect-ratio: 5 / 2; } /* 2 Bilder — zwei nebeneinander */ .kb-gallery[data-count="2"] { grid-template-columns: repeat(2, 1fr); } /* 3 Bilder — drei gleiche Kacheln nebeneinander, alle quer (3:2) */ .kb-gallery[data-count="3"] { grid-template-columns: repeat(3, 1fr); } /* 4 Bilder — 2×2-Raster */ .kb-gallery[data-count="4"] { grid-template-columns: repeat(2, 1fr); } /* 5 Bilder — erstes Bild groß als 2×2-Block, vier kleine. 4 Spalten × 2 Zeilen = 8 Zellen; Block belegt 4 → 4 frei. */ .kb-gallery[data-count="5"] { grid-template-columns: repeat(4, 1fr); } .kb-gallery[data-count="5"] .kb-gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } /* 6 Bilder — erstes und viertes Bild breit (je 2 Spalten, 1 Zeile), diagonal angeordnet: erstes breites Bild oben links, zweites unten rechts. Vier kleine füllen die übrigen Zellen. 4 Spalten × 2 Zeilen = 8 Zellen; 2 breite belegen 4 → 4 frei. Die kleinen Kacheln sind hier quadratisch (statt 3:2) — dadurch wird das ganze Mosaik höher und die breiten Bilder wirken als angenehmes 2:1-Querformat statt als flacher Streifen. */ .kb-gallery[data-count="6"] { grid-template-columns: repeat(4, 1fr); } .kb-gallery[data-count="6"] .kb-gallery-item { aspect-ratio: 1 / 1; } .kb-gallery[data-count="6"] .kb-gallery-item:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; aspect-ratio: auto; } .kb-gallery[data-count="6"] .kb-gallery-item:nth-child(4) { grid-column: 3 / span 2; grid-row: 2; aspect-ratio: auto; } /* 7 Bilder — erstes Bild groß als 2×2-Block, sechs kleine. 5 Spalten × 2 Zeilen = 10 Zellen; Block belegt 4 → 6 frei. */ .kb-gallery[data-count="7"] { grid-template-columns: repeat(5, 1fr); } .kb-gallery[data-count="7"] .kb-gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } /* 8 Bilder — erstes Bild breit (2 Spalten, 1 Zeile), sieben kleine. 3 Spalten × 3 Zeilen = 9 Zellen; breites Bild belegt 2 → 7 frei. Die kleinen Kacheln sind hier quadratisch (statt 3:2) — dadurch wird das ganze Mosaik höher und das breite Bild wirkt als angenehmes 2:1-Querformat statt als flacher Streifen. */ .kb-gallery[data-count="8"] { grid-template-columns: repeat(3, 1fr); } .kb-gallery[data-count="8"] .kb-gallery-item { aspect-ratio: 1 / 1; } .kb-gallery[data-count="8"] .kb-gallery-item:nth-child(1) { grid-column: span 2; aspect-ratio: auto; } /* 9 Bilder — erstes Bild groß als 2×2-Block, acht kleine füllen den Rest. 4 Spalten × 3 Zeilen = 12 Zellen; Block belegt 4 → 8 frei. */ .kb-gallery[data-count="9"] { grid-template-columns: repeat(4, 1fr); } .kb-gallery[data-count="9"] .kb-gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } /* 10 Bilder — erstes und sechstes Bild groß als 2×2-Block, diagonal angeordnet: erster Block oben links, zweiter Block unten rechts. Acht kleine füllen die übrigen Zellen. 4 Spalten × 4 Zeilen = 16 Zellen; 2 Blöcke belegen 8 → 8 frei. */ .kb-gallery[data-count="10"] { grid-template-columns: repeat(4, 1fr); } .kb-gallery[data-count="10"] .kb-gallery-item:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; aspect-ratio: auto; } .kb-gallery[data-count="10"] .kb-gallery-item:nth-child(6) { grid-column: 3 / span 2; grid-row: 3 / span 2; aspect-ratio: auto; } /* Sicherheitsnetz: mehr als 10 Bilder → gleichmäßiges 5er-Raster */ .kb-gallery:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]):not([data-count="4"]):not([data-count="5"]):not([data-count="6"]):not([data-count="7"]):not([data-count="8"]):not([data-count="9"]):not([data-count="10"]) { grid-template-columns: repeat(5, 1fr); } /* ─── Tablet ─── Die sehr breiten Raster (4–5 Spalten) werden verschmälert. Es werden nur Aufteilungen gewählt, die lückenlos aufgehen. */ @media (max-width: 760px) { /* 8 Bilder → 4×2 ist auch auf Tablet noch ok, bleibt. 10 Bilder → 5×2 wird zu eng → 5 Spalten beibehalten, da 10 durch 5 teilbar ist, geht es lückenlos auf. */ /* 7 Bilder: hochkant-Erstkachel beibehalten, aber im 4-Spalten-Raster bleibt es wie auf Desktop — passt. */ /* Nichts zu ändern: alle Desktop-Raster für 5–10 gehen auch auf Tablet lückenlos auf. Lediglich die Kachelgröße wird durch die schmalere Seite kleiner — das ist akzeptabel. */ .kb-gallery { --kb-gap: 6px; } } /* ─── Mobile ─── Gleichmäßiges 2-Spalten-Raster, alle Kacheln quer (3:2). Bei ungerader Bildzahl wird das erste Bild über beide Spalten breit gezogen — so bleibt das Rechteck geschlossen. */ @media (max-width: 540px) { .kb-rueckblick { margin-bottom: 38px; } .kb-rueckblick-title { font-size: 1.35rem; } .kb-gallery { grid-template-columns: repeat(2, 1fr) !important; } .kb-gallery .kb-gallery-item { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 3 / 2 !important; } .kb-gallery[data-count="1"] { grid-template-columns: 1fr !important; } /* ungerade Bildzahl: erstes Bild über beide Spalten */ .kb-gallery[data-count="1"] .kb-gallery-item:first-child, .kb-gallery[data-count="3"] .kb-gallery-item:first-child, .kb-gallery[data-count="5"] .kb-gallery-item:first-child, .kb-gallery[data-count="7"] .kb-gallery-item:first-child, .kb-gallery[data-count="9"] .kb-gallery-item:first-child { grid-column: span 2 !important; } } /* === KALKSTEIN-TEXTUR (optional) — START ============================ */ /* Voraussetzung: die Kalkstein-Hintergrundfarbe ist bereits gesetzt, z. B. body { background-color: #e7e1d2; } AUSSCHALTEN: --stein-textur auf 0 setzen ODER diesen Block löschen. Die Grundfarbe bleibt dabei in beiden Fällen erhalten. */ /* 0 = aus … 1 = maximal · empfohlen 0.20–0.35 */ /* :root { --stein-textur: 0.28; } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--stein-textur); background-repeat: repeat; background-size: 260px 170px, 300px 300px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='170'%3E%3Cg stroke='%238a7e5c' stroke-width='2' stroke-opacity='0.2' fill='none'%3E%3Cpath d='M0 1H260 M0 85H260 M0 169H260'/%3E%3Cpath d='M0 0V85 M130 0V85 M260 0V85'/%3E%3Cpath d='M65 85V170 M195 85V170'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.055' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.45' intercept='0.4'/%3E%3CfeFuncG type='linear' slope='0.45' intercept='0.4'/%3E%3CfeFuncB type='linear' slope='0.45' intercept='0.4'/%3E%3CfeFuncA type='table' tableValues='0.7 0.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E"); }*/ /* === KALKSTEIN-TEXTUR — ENDE ======================================== */ #footer li::before { content: ""; display:none; } #footer li::after { border: none; } #footer li { padding: 0; } .info { display: none; } /* LOGO korrekt */ .logo { margin-bottom: -1cqw; margin-top: 5px; height:90px !important; } @media only screen and (max-width: 767px) { .header .logo { height: 65px !important; } } /* ═══════════════════════════════════════════════════════════════════ KÜCHWALDBÜHNE — OPENSTREETMAP-ANFAHRTSKARTE ─────────────────────────────────────────────────────────────────── Styling für das CustomElement der Anfahrtskarte (Leaflet). Wirkt über die Klasse .kb-osm am äußeren Container — dadurch ist diese Datei statisch und unabhängig von der Element-ID. Das Template muss dem Container die Klasse "kb-osm" geben. Die Karte sitzt in der Hero-Hülle (.kb-hero-frame / .kb-hero); deren Größe/Skalierung kommt aus der Hero-CSS, nicht von hier. ═══════════════════════════════════════════════════════════════════ */ /* Leaflet-Kachelbilder nicht vom Theme-CSS verformen lassen */ .kb-osm .leaflet-container img { max-width: none !important; max-height: none !important; padding: 0 !important; margin: 0 !important; border: none !important; background: none !important; box-shadow: none !important; } /* Das Karten-Div füllt die Hero-Hülle vollständig. Leaflet vergibt dem Karten-Element automatisch .leaflet-container. */ .kb-osm .leaflet-container { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } /* ═══════════ Popup im Seitenstil ═══════════ Überschreibt das Standard-Leaflet-Popup: Card-Hintergrund, Inter-Schrift, weiche Ecken, dezenter Schatten, grüner Akzent. */ .kb-osm .leaflet-popup-content-wrapper { background: #FDFCF5; color: #24211D; border-radius: 8px; box-shadow: 0 6px 24px rgba(36, 33, 29, 0.18); border: 0; padding: 0; } .kb-osm .leaflet-popup-content { margin: 0; padding: 16px 18px; font-family: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; } .kb-osm .leaflet-popup-content p { margin: 0; } .kb-osm .leaflet-popup-content strong { display: block; font-size: 15px; font-weight: 700; color: #17483F; margin-bottom: 3px; letter-spacing: -0.01em; } /* kleiner grüner Akzentstrich oben im Popup */ .kb-osm .leaflet-popup-content::before { content: ''; display: block; width: 32px; height: 3px; background: #17483F; border-radius: 2px; margin-bottom: 11px; } /* Popup-Spitze (kleines Dreieck) in derselben Farbe wie der Body */ .kb-osm .leaflet-popup-tip { background: #FDFCF5; box-shadow: 0 6px 24px rgba(36, 33, 29, 0.10); } /* Schließkreuz dezenter */ .kb-osm .leaflet-popup-close-button { color: #B0A89D; font-size: 20px; padding: 8px 9px 0 0; transition: color 0.15s; } .kb-osm .leaflet-popup-close-button:hover { color: #17483F; background: transparent; } /* ═══════════ Datenschutz-Hinweis ═══════════ Erscheint, falls OpenStreetMap nicht freigegeben ist. Wichtig: Der Block ist per Default ausgeblendet (display: none) und wird NUR über die zusätzliche Klasse .is-visible eingeblendet, die das Template-JavaScript setzt. Dadurch hängt die Sichtbarkeit nicht mehr an einer fremden .hidden-Regel aus dem Theme- oder Eclipse-CSS (deren Spezifität sonst mit diesem Selektor kollidiert). Schlichte Gestaltung: dezenter Card-Hintergrund, kein knalliges Rot. Die .privacy-Einfärbung aus dem Theme/Eclipse-CSS wird hier bewusst neutralisiert. */ .kb-osm .kwb-hero-privacy { display: none; } .kb-osm .kwb-hero-privacy.is-visible { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 24px; text-align: center; /* dezenter, neutraler Hintergrund statt Theme-Rot */ background: var(--color-paper, #F4F1E8); color: var(--color-text, #24211D); font-family: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.55; } /* etwaige rote Theme-Einfärbung des .privacy-Elements überschreiben */ .kb-osm .kwb-hero-privacy.privacy { background: var(--color-paper, #F4F1E8); } /* Link „Datenschutz-Einstellungen“ im Forest-Green */ .kb-osm .kwb-hero-privacy a { color: var(--color-green, #17483F); font-weight: 700; text-decoration: underline; cursor: pointer; } .kb-osm .kwb-hero-privacy a:hover { color: var(--color-green-hover, #0E342D); }