/* ============================================================================= * 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) ─────────────────────────────────────────────────────────────────── Grundlage: alte Tokens. Ergänzt nur um Alias-/Kompatibilitätswerte, damit neuere Dateien keine fehlenden Variablen haben. Muss als ERSTES Stylesheet geladen werden (vor allen kb-*.css). ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Flächen ── */ --color-paper: #F6EFE4; --color-travertin: var(--color-paper); --color-card: #FFFDF7; --color-card-hover: #FFFFFA; --color-calendar-sheet: #FFFFFF; --color-event-card: #EFE4D2; --color-event-card-hover: #F3EADB; --color-header: #D2DEE0; --color-header-hover: rgba(210, 222, 224, 0.86); /* ── 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; --color-burgund: #8B2E1F; --color-burgund-hover:#A83D28; --color-gold: #C9A227; --color-blue: #2B5C8A; --color-next-blue: #1F3142; --color-next-blue-hover: #172330; /* ── Schrift & Maße ── */ --font-body: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif; --max-width: 1280px; --radius: 0; /* ── Komponenten-Tokens ── */ --kb-gap: 8px; /* ── Aliase für die --kb-*-Komponenten (Neuigkeiten, Rückblicke) ── */ --kb-travertin: var(--color-travertin); --kb-paper: var(--color-paper); --kb-card: var(--color-card); --kb-event-card: var(--color-event-card); --kb-text: var(--color-text); --kb-muted: var(--color-muted); --kb-faint: var(--color-faint); --kb-line: var(--color-line); --kb-line-soft: var(--color-line-soft); --kb-green: var(--color-green); --kb-green-hover: var(--color-green-hover); --kb-green-light: var(--color-green-light); --kb-burgund: var(--color-burgund); --kb-burgund-hover:var(--color-burgund-hover); --kb-gold: var(--color-gold); --kb-blue: var(--color-blue); --kb-next-blue: var(--color-next-blue); --kb-font: var(--font-body); /* ── alte Neuigkeiten-/Timeline-Tokens ── */ --kb-news-card: var(--color-card); --kb-news-line: rgba(23, 72, 63, 0.22); --kb-news-marker: var(--color-green); --kb-news-image-bg: #ECE8DC; --kb-news-gap: clamp(24px, 4vw, 48px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-travertin); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } body { position: relative; overflow-x: hidden; } a { color: inherit; } img { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; } .kb-content { max-width: var(--max-width); margin: 0 auto; padding: 0 28px 88px; } .kb-card { background: var(--color-card); color: var(--color-text); border-radius: var(--radius); } .kb-action, .kb-event-detailbox, .kb-dateagenda-action:not(.kb-dateagenda-cell--empty), .kb-calendar-eventbox-link, .kb-detail-button, .kb-next-button { display: inline-flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--radius); background: var(--color-burgund); color: var(--color-card); font-weight: 850; line-height: 1.1; text-align: center; text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, opacity 0.15s ease; } .kb-action:hover, .kb-action:focus-visible, .kb-event-detailbox:hover, .kb-event-detailbox:focus-visible, .kb-dateagenda-action[href]:hover, .kb-dateagenda-action[href]:focus-visible, .kb-calendar-eventbox-link:hover, .kb-calendar-eventbox-link:focus-visible, .kb-detail-button:hover, .kb-detail-button:focus-visible, .kb-next-button:hover, .kb-next-button:focus-visible { background: var(--color-burgund-hover); color: var(--color-card); } .kb-action:active, .kb-event-detailbox:active, .kb-dateagenda-action[href]:active, .kb-calendar-eventbox-link:active, .kb-detail-button:active, .kb-next-button:active { transform: translateY(1px); } /* ═══════════════════════════════════════════════════════════════════ KÜCHWALDBÜHNE — CONTAO-THEME-OVERRIDES ─────────────────────────────────────────────────────────────────── Überschreibt Vorgaben des gekauften/mitgelieferten Contao-Themes (Hintergründe, Header, Hauptnavigation, Schriftfamilie). Die !important sind hier bewusst: sie müssen Theme-Regeln mit höherer Spezifität bzw. eigenen !important schlagen. ═══════════════════════════════════════════════════════════════════ */ /* ─── Schriftfamilie vereinheitlichen ─── */ 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 auf Travertin setzen ─── */ html, body, #contentwrapper, #fix-wrapper, #wrapper, .body, #main, #container, .mod_article, .body_top, .body_bottom { background: var(--color-travertin) !important; background-image: none !important; } /* ─── Header-Fläche ─── */ #top-wrapper, #top-wrapper.fixed, #header, #header.header, #header.header.original { background: var(--color-header) !important; border: 0 !important; box-shadow: none !important; } #top-wrapper.fixed { box-shadow: 0 1px 6px rgba(var(--color-text-rgb), 0.08) !important; } #header .inside { background: transparent !important; border: 0 !important; box-shadow: none !important; } #header .mod_socials:before { display: none !important; } /* ─── Header-Farben (Navigation, Meta, Socials) ─── */ #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, #header .mod_socials a i, #header .mod_socials .fa { color: var(--color-text) !important; } #header .mainmenu ul li a.active, #header .mainmenu ul li a.trail { color: var(--color-green) !important; } /* ─── Vollbreite Kopfbilder ─── */ .ce_headerimage, .ce_pageimage, .mod_pageimage { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden; } /* ─── Hauptnavigation: Typografie ─── */ .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 ═══════════════════════════════════════════════════════════════════ */ /* ─── Seitenkopf ─── */ .kb-pagehead { margin-top: 40px; padding: 0 0 36px 0; } @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(4rem, 7vw, 7rem); 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: var(--color-text-soft); line-height: 1.55; } /* ─── Abschnittsüberschrift ─── Etwas mehr Abstand nach oben, da sie einen neuen Bereich vom vorigen Inhalt absetzt. */ .kb-sectionhead { margin-top: 30px; 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: -0.01em; line-height: 1.2; color: var(--color-text); 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; } } /* =========================================================== KÜCHWALDBÜHNE — TEAMBOX ─────────────────────────────────────────────────────────── Drei Templates teilen sich diese Datei: ce_teambox.html5 → Standard: rundes Portrait, zentriert (Personenkachel, 6 nebeneinander) ce_teambox_quer.html5 → Quer: Kontaktkarte, Bild links (volle Inhaltsbreite, eine pro Reihe) ce_teambox_anfrage.html5 → Anfrage: kompakte Kontaktzeile (Foto + Name + Telefon + E-Mail nebeneinander, als Anschluss an einen Erklärtext) Anker-Klasse am Wrapper: .kb-teambox Modifier: .kb-quer / .kb-anfrage =========================================================== */ /* ───────────────────────────────────────────────────────── 1) Standard – kachelt sich selbst ───────────────────────────────────────────────────────── */ .kb-teambox{ box-sizing:border-box; padding:0 8px 30px; } .kb-teambox-inside{ display:flex; flex-direction:column; align-items:center; text-align:center; } /* Portrait rund, direkt auf dem Seitenhintergrund */ .kb-teambox-inside .kb-teambox-image{ width:100%; max-width:170px; aspect-ratio:1 / 1; margin-bottom:16px; } .kb-teambox-inside .kb-teambox-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 */ .kb-teambox-content{ display:flex; flex-direction:column; align-items:center; } .kb-teambox-content .kb-teambox-amt{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:500; color:#4a6140; margin-bottom:3px; } .kb-teambox-content .kb-teambox-name{ font-size:1.12rem; font-weight:500; color:#2c2823; line-height:1.3; margin:0 0 2px; } .kb-teambox-content .kb-teambox-function, .kb-teambox-content .kb-teambox-description{ font-size:.9rem; color:#6f685c; margin-bottom:10px; } /* Kontaktzeilen mit Icon */ .kb-teambox-content .kb-teambox-contact{ display:flex; flex-direction:column; gap:4px; align-items:center; margin-top:2px; } .kb-teambox-content .kb-teambox-contact a{ display:inline-flex; align-items:center; gap:7px; font-size:.86rem; color:#5d564b; text-decoration:none; transition:color .15s ease; } .kb-teambox-content .kb-teambox-contact a:hover{ color:#4a6140; } .kb-teambox-content .kb-teambox-contact i{ font-size:14px; color:#9a9384; width:15px; text-align:center; flex-shrink:0; transition:color .15s ease; } .kb-teambox-content .kb-teambox-contact a:hover i{ color:#4a6140; } /* Social-Links */ .kb-teambox-content .kb-teambox-socials{ display:flex; gap:12px; margin-top:12px; } .kb-teambox-content .kb-teambox-socials a{ color:#9a9384; font-size:18px; text-decoration:none; transition:color .15s ease; } .kb-teambox-content .kb-teambox-socials a:hover{ color:#4a6140; } /* ───────────────────────────────────────────────────────── 2) Quer – Kontaktkarte ───────────────────────────────────────────────────────── */ .kb-teambox.kb-quer{ box-sizing:border-box; float:none; width:100%; padding:0; margin-bottom:30px; } .kb-teambox.kb-quer .kb-teambox-inside{ display:grid; grid-template-columns:140px 1fr; gap:30px; align-items:center; text-align:left; } .kb-teambox.kb-quer .kb-teambox-image{ width:140px; max-width:140px; aspect-ratio:1 / 1; margin:0; } .kb-teambox.kb-quer .kb-teambox-content{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; } .kb-teambox.kb-quer .kb-teambox-content .kb-teambox-name{ font-size:1.25rem; line-height:1.25; margin:0 0 4px; } .kb-teambox.kb-quer .kb-teambox-content .kb-teambox-function, .kb-teambox.kb-quer .kb-teambox-content .kb-teambox-description{ font-size:.92rem; margin-bottom:12px; } .kb-teambox.kb-quer .kb-teambox-content .kb-teambox-contact{ align-items:flex-start; gap:5px; margin-top:6px; } .kb-teambox.kb-quer .kb-teambox-content .kb-teambox-contact a{ font-size:.92rem; } @media (max-width:560px){ .kb-teambox.kb-quer .kb-teambox-inside{ grid-template-columns:1fr; gap:18px; align-items:start; } .kb-teambox.kb-quer .kb-teambox-image{ width:120px; max-width:120px; } } /* ───────────────────────────────────────────────────────── 3) Anfrage – kompakte Kontaktzeile Foto + Person + Telefon + E-Mail nebeneinander. Bricht ohne weiteres Zutun, wenn der Platz nicht reicht. Sitzt visuell unter einem Erklärtext, mit feiner Trennlinie als Übergang. ───────────────────────────────────────────────────────── */ .kb-teambox.kb-anfrage{ box-sizing:border-box; float:none; width:100%; padding:0; } .kb-teambox.kb-anfrage .kb-anfrage-eye{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#7a7264; font-weight:500; margin:0 0 18px; } .kb-teambox.kb-anfrage .kb-anfrage-row{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px; } /* Foto klein und rund */ .kb-teambox.kb-anfrage .kb-anfrage-photo{ width:54px; height:54px; flex-shrink:0; } .kb-teambox.kb-anfrage .kb-anfrage-photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:1px solid rgba(44,40,35,.12); } /* Person: Name + Funktion gestapelt */ .kb-teambox.kb-anfrage .kb-anfrage-person{ display:flex; flex-direction:column; } .kb-teambox.kb-anfrage .kb-anfrage-name{ font-size:1.05rem; font-weight:500; line-height:1.2; margin:0; color:#2c2823; } .kb-teambox.kb-anfrage .kb-anfrage-role{ font-size:.82rem; color:#6f685c; margin:0; } /* Kontakt-Blöcke (Telefon, E-Mail) */ .kb-teambox.kb-anfrage .kb-anfrage-item{ display:flex; flex-direction:column; gap:2px; } .kb-teambox.kb-anfrage .kb-anfrage-clabel{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#7a7264; font-weight:500; } .kb-teambox.kb-anfrage .kb-anfrage-cvalue{ font-size:.97rem; } .kb-teambox.kb-anfrage .kb-anfrage-cvalue a{ color:#2c2823; text-decoration:none; transition:color .15s ease, border-color .15s ease; } .kb-teambox.kb-anfrage .kb-anfrage-cvalue a:hover{ color:#4a6140; border-bottom-color:#4a6140; } @media (max-width:560px){ .kb-teambox.kb-anfrage .kb-anfrage-row{ gap:14px 22px; } } /* ═══════════════════════════════════════════════════════════════════ 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; } } /* ═══════════════════════════════════════════════════════════════════ KÜCHWALDBÜHNE — SPIELPLAN (Liste, Posterwand, Agenda, Kalender, Detailseite kb-detail-flow) ─────────────────────────────────────────────────────────────────── Konsolidierter Stand: die früheren, ans Dateiende angehängten Override-Schichten sind in die jeweiligen Basisregeln eingearbeitet. Pro Selektor existiert nur noch eine Definition; Media-Queries stehen am Ende des jeweiligen Abschnitts. Gliederung: 1. Toolbar, Suche, Ansichts-Umschalter 2. Eventliste (Karten) 3. Terminboxen, Marker, Datumsspannen 4. Posterwand 5. Datums-Agenda 6. Kalenderansicht (inkl. Inline-Panel, Tooltip) 7. Nextbar-Hilfsklassen 8. Detailseite (kb-detail-flow) 9. Zusatzelemente & Text-Info 10. Globale Mobile-Anpassungen der Listenansichten Hinweis zu !important: verbleibende !important schützen gegen Theme-/Fremdregeln (Linkfarben, [hidden], Button-Grundstile) und gegen Inline-Styles aus JS. Interne Konflikte wurden stattdessen durch Zusammenführen der Regeln aufgelöst. ═══════════════════════════════════════════════════════════════════ */ /* ═════════ 1. Toolbar, Suche, Ansichts-Umschalter ═════════ */ .kb-toolbar { display: flex; align-items: center; justify-content: flex-start; gap: 14px 18px; flex-wrap: wrap; padding: 28px 0 24px; } .kb-toolbar-left { display: flex; align-items: stretch; justify-content: flex-start; gap: 10px; flex-wrap: wrap; max-width: 100%; } .kb-toolbar-actions { display: none; } .kb-viewtiles, .kb-chips { display: inline-flex; align-items: stretch; gap: 0; max-width: 100%; border: 1px solid var(--color-line); background: transparent; white-space: nowrap; } .kb-viewtile, .kb-chip { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; min-height: 38px; padding: 0 14px; border: 0; border-right: 1px solid var(--color-line); border-radius: 0; background: var(--color-card); color: var(--color-text); box-shadow: none; font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .kb-viewtile:last-child, .kb-chip:last-child { border-right: 0; } .kb-viewtile:hover, .kb-viewtile:focus-visible, .kb-viewtile[aria-pressed="true"], .kb-chip:hover, .kb-chip:focus-visible, .kb-chip.active { background: var(--color-green); color: var(--color-card); outline: none; } .kb-viewtile-icon { width: 15px; height: 15px; flex: none; } /* Utility: per JS/Attribut ausgeblendete Bereiche */ .kb-search--hidden, .kb-list[hidden], .kb-alt-view[hidden], .kb-list-pagination[hidden] { display: none !important; } .kb-search { position: relative; } .kb-search input { width: 100%; padding: 10px 14px 10px 38px; border: 0; border-radius: 0; outline: none; background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 14px; } .kb-search input::placeholder { color: var(--color-faint); } .kb-search svg { position: absolute; left: 13px; top: 50%; width: 14px; height: 14px; color: var(--color-muted); transform: translateY(-50%); pointer-events: none; } /* ═════════ 2. Eventliste (Karten) ═════════ */ .kb-list { display: flex; flex-direction: column; gap: 18px; } .kb-empty { display: none; padding: 64px 24px; color: var(--color-muted); font-style: italic; text-align: center; } .kb-empty--alt { display: block; } .kb-event { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; padding: 28px 0; color: var(--color-text); } .kb-event-poster { position: relative; align-self: start; width: 100%; aspect-ratio: 1 / 1.414; overflow: hidden; background: var(--color-white); } .kb-event-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity 0.15s ease; } .kb-event-poster .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; color: var(--color-faint); font-size: 10px; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; } .kb-event-body { align-self: stretch; min-height: calc(200px * 1.414); display: flex; flex-direction: column; min-width: 0; padding: 24px 28px; background: var(--color-event-card); } .kb-event-kicker { margin: 0 0 10px; line-height: 1; } .kb-event-org { color: var(--color-green); font-size: 11px; font-weight: 850; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; transition: color 0.15s ease; } .kb-event-org:hover, .kb-event-org:focus-visible { color: var(--color-green-hover); } .kb-event-org--plain { cursor: default; } .kb-event-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 0 0 12px; } .kb-event-title { margin: 0; color: var(--color-text); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 730; line-height: 1.05; letter-spacing: -0.025em; overflow-wrap: normal; word-break: normal; hyphens: none; } .kb-event-sub { max-width: 600px; margin: 0; color: var(--color-muted); font-size: 15px; line-height: 1.5; overflow-wrap: normal; word-break: normal; hyphens: none; } /* Neutralisiert Theme-Hoverfarben auf Titel/Untertitel */ .kb-event:hover .kb-event-title, .kb-event:hover .kb-event-sub, .kb-event:focus-within .kb-event-title, .kb-event:focus-within .kb-event-sub { color: inherit; text-decoration: none; } .kb-event:hover .kb-event-sub, .kb-event:focus-within .kb-event-sub { color: var(--color-muted); } .kb-event-foot { position: relative; z-index: 2; display: flex; flex-direction: column; padding-top: 18px; } .kb-eventpage { color: var(--color-text); } .kb-event--unpublished, .kb-eventpage.kb-event--unpublished { opacity: 0.72; } /* Abgesagte Veranstaltung: gesamte Karte ausgegraut + Banderole */ .kb-event--out { pointer-events: none; } .kb-event--out .kb-event-poster img, .kb-event--out .kb-event-title, .kb-event--out .kb-event-sub, .kb-event--out .kb-event-kicker { filter: grayscale(1); opacity: 0.58; } .kb-event--out .kb-event-poster::after { content: 'Fällt aus'; position: absolute; top: 38%; left: -8%; right: -8%; z-index: 4; padding: 10px 0; background: var(--color-muted); color: var(--color-card); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); font-size: clamp(15px, 2.2vw, 17px); font-weight: 800; letter-spacing: 0.22em; text-align: center; text-transform: uppercase; transform: rotate(-7deg); } /* ═════════ 3. Terminboxen, Marker, Datumsspannen ═════════ */ .kb-event-dates { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 18px 20px; width: 100%; margin: 0; color: var(--color-text); font-size: 15px; font-weight: 600; } .kb-event-date, .kb-event-date--link { position: relative; width: 78px; max-width: 78px; margin-bottom: 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; color: var(--color-text); overflow: visible; } .kb-event-datebox, .kb-event-datebox--datespan { position: relative; z-index: 2; width: 78px; min-width: 78px; max-width: 78px; height: 86px; min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 9px 7px 8px; border: 0; border-radius: var(--radius); background: var(--color-calendar-sheet); color: var(--color-text); box-shadow: var(--shadow-sheet); text-align: center; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease; } .kb-event-datebox strong { display: block; color: inherit; font-size: clamp(1.48rem, 2.2vw, 1.82rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.045em; } .kb-event-datebox > span:not(.kb-event-datespan-days):not(.kb-event-datespan-split), .kb-event-datespan-month, .kb-event-datespan-part em { display: block; margin-top: 6px; color: inherit; font-size: 0.62rem; font-style: normal; font-weight: 900; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; } .kb-event-datebox-time { display: block; width: 100%; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--color-line-soft); color: var(--color-muted); font-size: 0.66rem; font-weight: 850; line-height: 1; letter-spacing: 0.02em; text-align: center; white-space: nowrap; } .kb-event-date--link a.kb-event-datebox:hover, .kb-event-date--link a.kb-event-datebox:focus-visible { background: var(--color-burgund); color: var(--color-card); opacity: 1; outline: none; } .kb-event-date--link a.kb-event-datebox:hover .kb-event-datebox-time, .kb-event-date--link a.kb-event-datebox:focus-visible .kb-event-datebox-time { color: var(--color-card); border-top-color: rgba(var(--color-card-rgb), 0.42); } .kb-event-date:not(.kb-event-date--link) .kb-event-datebox { cursor: default; } /* Nächster Termin: leicht angehoben, Tageszahl in Burgund */ .kb-event-date--next .kb-event-datebox { box-shadow: 0 12px 24px rgba(var(--color-burgund-rgb), 0.18); transform: translateY(-2px); } .kb-event-date--next .kb-event-datebox strong { color: var(--color-burgund); } .kb-event-date--next.kb-event-date--link a.kb-event-datebox:hover strong, .kb-event-date--next.kb-event-date--link a.kb-event-datebox:focus-visible strong { color: var(--color-card); } .kb-event-date-main { position: static; max-width: 78px; min-width: 0; } /* Marker-Fähnchen über der Terminbox */ .kb-event-markers { position: absolute; top: -15px; left: -6px; z-index: 6; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px; margin: 0; overflow: visible; pointer-events: none; } .kb-event-markers:empty { display: none; } .kb-event-marker { --kb-marker-bg: var(--color-green); display: inline-flex; align-items: center; justify-content: center; width: max-content; max-width: 110px; min-height: 17px; padding: 3px 8px; background: var(--kb-marker-bg); color: var(--color-card) !important; font-size: 8.8px; font-weight: 850; line-height: 1; letter-spacing: 0.115em; text-transform: uppercase; white-space: nowrap; transform: rotate(-4deg); transform-origin: left center; } .kb-event-marker--heute { --kb-marker-bg: var(--color-blue); order: 1; } .kb-event-marker--premiere { --kb-marker-bg: var(--color-burgund); order: 2; } .kb-event-marker--letzte, .kb-event-marker--eigen { --kb-marker-bg: var(--color-green); order: 3; } .kb-event-marker--aus { --kb-marker-bg: var(--color-muted); order: 4; } /* Orts-Fähnchen unten an der Terminbox */ .kb-event-date .kb-event-date-place { position: absolute; right: 4px; bottom: -12px; z-index: 7; display: block; width: max-content; max-width: 92px; padding: 3px 6px 2px; background: var(--color-blue); color: var(--color-card) !important; box-shadow: var(--shadow-pop); font-size: 7.8px; font-weight: 900; line-height: 1.06; letter-spacing: 0.075em; text-align: left; text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; transform: rotate(-4deg); transform-origin: right center; pointer-events: none; } .kb-event-date .kb-event-date-celltext { color: inherit !important; text-decoration: none !important; } /* Abgesagter Einzeltermin */ .kb-event-date--aus .kb-event-datebox { filter: grayscale(1); opacity: 0.58; } .kb-event-date--aus .kb-event-datebox strong, .kb-event-date--aus .kb-event-datebox span, .kb-event-date--aus .kb-event-datebox-time { text-decoration: line-through; } /* Datumsspanne in einer Box ("12 – 14 JUN") */ .kb-event-datespan-days { display: flex; align-items: baseline; justify-content: center; gap: 3px; width: 100%; color: inherit; line-height: 0.9; white-space: nowrap; } .kb-event-datespan-days strong { display: inline-block; color: inherit; font-size: 1.32rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.055em; } .kb-event-datespan-days b { display: inline-block; color: inherit; font-size: 0.92rem; font-weight: 900; line-height: 1; transform: translateY(-1px); } /* Datumsspanne über Monatsgrenze ("30 JUN | 2 JUL") */ .kb-event-datespan-split { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; justify-items: center; gap: 2px; width: 100%; color: inherit; } .kb-event-datespan-part { display: grid; justify-items: center; min-width: 0; color: inherit; } .kb-event-datespan-part strong { display: block; color: inherit; font-size: 1.02rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; } .kb-event-datespan-split > b { display: block; color: inherit; font-size: 0.78rem; font-weight: 900; line-height: 1; transform: translateY(-7px); } /* "Details"-Button unter den Terminen */ .kb-event-detailbox-wrap { order: 2; margin: 18px 0 0; } .kb-event-detailbox { min-height: 38px; padding: 0 14px; font-size: 13px; } /* ═════════ 4. Posterwand ═════════ */ .kb-posterwall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); align-items: start; padding-top: 28px; } .kb-poster-card { min-width: 0; } .kb-poster-card-link, .kb-posterwall-card { position: relative; display: flex; flex-direction: column; gap: 8px; overflow: visible; background: transparent; color: var(--color-text); text-decoration: none; transition: opacity 0.15s ease; } .kb-poster-card-link:hover, .kb-poster-card-link:focus-visible { opacity: 0.92; outline: none; } .kb-posterwall-image { order: 1; width: 100%; aspect-ratio: 1 / 1.414; overflow: hidden; background: var(--color-white); } .kb-posterwall-image img, .kb-poster-card-link img, .kb-posterwall-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Bildunterschrift steht unter dem Poster (kein Overlay) */ .kb-posterwall-caption { order: 2; display: block; min-height: 0; margin: 0; color: var(--color-muted); pointer-events: none; } .kb-posterwall-datebox { display: none !important; } .kb-posterwall-title { min-height: 0; padding: 0 2px; background: transparent; color: var(--color-muted); font-size: clamp(0.76rem, 0.95vw, 0.88rem); font-weight: 650; line-height: 1.18; letter-spacing: -0.01em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .kb-poster-card-link:hover .kb-posterwall-title, .kb-poster-card-link:focus-visible .kb-posterwall-title { color: var(--color-text); } .kb-poster-card--empty .kb-posterwall-image, .kb-posterwall-card--empty { display: grid; place-items: center; background: var(--color-calendar-sheet); color: var(--color-muted); } .kb-poster-card--empty .kb-posterwall-caption, .kb-posterwall-card--empty .kb-posterwall-caption { padding: 8px; } .kb-poster-card--out .kb-poster-card-link { pointer-events: none; } .kb-poster-card--out .kb-posterwall-image, .kb-poster-card--out .kb-posterwall-caption { filter: grayscale(1); opacity: 0.58; } @media (max-width: 1120px) { .kb-posterwall { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { .kb-posterwall { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .kb-posterwall { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ═════════ 5. Datums-Agenda ═════════ */ .kb-dateagenda { display: flex; flex-direction: column; gap: 36px; padding-top: 18px; } .kb-dateagenda-month { display: block; } .kb-dateagenda-month-head { margin-bottom: 10px; padding-bottom: 0; border: 0; } .kb-dateagenda-month-title { margin: 0; color: var(--color-text); font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: 730; line-height: 1.05; letter-spacing: -0.025em; } .kb-dateagenda-rows { display: flex; flex-direction: column; gap: 10px; } .kb-dateagenda-row { position: relative; display: grid; grid-template-columns: 74px 96px minmax(260px, 1.35fr) minmax(104px, 124px) minmax(130px, 180px) minmax(110px, 150px) 150px; gap: 14px; align-items: center; min-height: 64px; padding: 8px 12px 8px 8px; border: 0; background: var(--color-event-card); color: var(--color-text); overflow: visible; text-decoration: none; transition: background 0.15s ease, opacity 0.15s ease; } .kb-dateagenda-date { grid-column: 1; } .kb-dateagenda-time { grid-column: 2; } .kb-dateagenda-main { grid-column: 3; } .kb-dateagenda-category { grid-column: 4; } .kb-dateagenda-organizer { grid-column: 5; } .kb-dateagenda-place { grid-column: 6; } .kb-dateagenda-action { grid-column: 7; } .kb-dateagenda-row--link:hover, .kb-dateagenda-row--link:focus-within { background: var(--color-event-card-hover); } .kb-dateagenda-rowlink { position: absolute; inset: 0; z-index: 2; text-decoration: none; } .kb-dateagenda-row > :not(.kb-dateagenda-rowlink) { position: relative; z-index: 1; } .kb-dateagenda-date, .kb-dateagenda-time, .kb-dateagenda-main, .kb-dateagenda-category, .kb-dateagenda-organizer, .kb-dateagenda-place, .kb-dateagenda-action { min-width: 0; } .kb-dateagenda-date { position: relative; width: 56px; min-height: 56px; display: grid; grid-template-columns: 1fr; place-items: center; align-content: center; padding: 7px 5px 6px; background: var(--color-calendar-sheet); color: var(--color-text); overflow: visible; } .kb-dateagenda-date--range { width: 68px; } /* Akzentfarbe wird per Inline-Style aus dem Template gesetzt */ .kb-dateagenda-date--accented { background: var(--kb-dateagenda-accent-bg, var(--color-calendar-sheet)); } .kb-dateagenda-date strong { color: var(--color-text); font-size: 1.42rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.045em; } .kb-dateagenda-date span:not(.kb-dateagenda-markers):not(.kb-dateagenda-marker) { margin-top: 6px; color: var(--color-muted); font-size: 0.58rem; font-weight: 900; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; } .kb-dateagenda-markers { position: absolute; top: -7px; left: -7px; z-index: 5; display: flex; flex-direction: column; gap: 3px; transform: rotate(-7deg); transform-origin: left center; pointer-events: none; } .kb-dateagenda-marker { display: block; width: max-content; max-width: 92px; padding: 3px 6px; background: var(--color-burgund); color: var(--color-card) !important; font-size: 8.4px; font-weight: 900; line-height: 1.05; letter-spacing: 0.08em; text-transform: uppercase; } .kb-dateagenda-marker--heute { background: var(--color-blue); } .kb-dateagenda-marker--letzte, .kb-dateagenda-marker--eigen { background: var(--color-green); } .kb-dateagenda-marker--aus { background: var(--color-muted); } .kb-dateagenda-marker--premiere { background: var(--color-burgund); } .kb-dateagenda-title { display: block; color: var(--color-text); font-size: clamp(1.08rem, 1.45vw, 1.28rem); font-weight: 850; line-height: 1.12; overflow: hidden; overflow-wrap: anywhere; text-overflow: ellipsis; white-space: normal; } .kb-dateagenda-time, .kb-dateagenda-category, .kb-dateagenda-organizer, .kb-dateagenda-place { display: block; color: var(--color-muted); font-size: 12.5px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-dateagenda-category { color: var(--color-green); letter-spacing: 0.08em; text-transform: uppercase; } .kb-dateagenda-organizer { text-transform: none; } .kb-dateagenda-action { position: relative; z-index: 4; justify-self: end; width: 150px; max-width: 150px; min-height: 38px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; } .kb-dateagenda-action.kb-dateagenda-cell--empty, .kb-dateagenda-cell--empty { visibility: hidden; pointer-events: none; } /* !important: schlägt Button-Grundstile aus dem Theme sowie .kb-dateagenda-row--out auch im Hover-Zustand */ .kb-dateagenda-action:not(.kb-dateagenda-cell--empty) { cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, opacity 0.15s ease; } .kb-dateagenda-action:not(.kb-dateagenda-cell--empty):hover, .kb-dateagenda-action:not(.kb-dateagenda-cell--empty):focus-visible { background: var(--color-burgund-hover) !important; color: var(--color-card) !important; outline: none; } .kb-dateagenda-action:not(.kb-dateagenda-cell--empty):active { transform: translateY(1px); } .kb-dateagenda-row--out { opacity: 0.58; } .kb-dateagenda-row--out .kb-dateagenda-action:not(.kb-dateagenda-cell--empty) { background: var(--color-muted); } @media (max-width: 1120px) { .kb-dateagenda-row { grid-template-columns: 70px 88px minmax(0, 1fr) minmax(110px, 150px) 150px; } .kb-dateagenda-category, .kb-dateagenda-organizer { display: none; } .kb-dateagenda-date { grid-column: 1; } .kb-dateagenda-time { grid-column: 2; } .kb-dateagenda-main { grid-column: 3; } .kb-dateagenda-place { grid-column: 4; } .kb-dateagenda-action { grid-column: 5; } } @media (max-width: 720px) { .kb-dateagenda-row { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; padding: 12px; } .kb-dateagenda-date { grid-column: 1; grid-row: 1 / span 4; } .kb-dateagenda-main { grid-column: 2; grid-row: 1; } .kb-dateagenda-time { grid-column: 2; grid-row: 2; } .kb-dateagenda-place { grid-column: 2; grid-row: 3; } .kb-dateagenda-action { grid-column: 2; grid-row: 4; justify-self: start; width: auto; max-width: 100%; } .kb-dateagenda-place, .kb-dateagenda-time, .kb-dateagenda-action, .kb-dateagenda-main { text-align: left; } } /* ═════════ 6. Kalenderansicht ═════════ */ .kb-calendarview { margin-top: 18px; } .kb-calendar-layout, .kb-calendar-layout--inline { display: block; } .kb-calendar-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 320px)); justify-content: start; align-items: start; gap: 18px; } .kb-calendar-month { width: 100%; max-width: 320px; padding: 16px; background: var(--color-event-card); } .kb-calendar-month-title { margin: 0 0 12px; color: var(--color-text); font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 750; line-height: 1.05; letter-spacing: -0.03em; } .kb-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .kb-calendar-head { min-height: 26px; display: grid; place-items: center; color: var(--color-muted); font-size: 0.68rem; font-weight: 900; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; } .kb-calendar-day, .kb-calendar-day--postercolor, .kb-calendar-day--empty { position: relative; min-height: 38px; display: grid; place-items: center; padding: 0; border: 0; background: rgba(var(--color-white-rgb), 0.42); color: var(--color-muted); font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; line-height: 1; text-decoration: none; appearance: none; } .kb-calendar-day--empty { background: transparent; } /* Tage mit Veranstaltung: Akzentfarbe per Inline-Style aus Template */ button.kb-calendar-day--has, button.kb-calendar-day--postercolor { --kb-dateagenda-accent-bg: var(--color-green); background: var(--kb-dateagenda-accent-bg); color: var(--color-text); cursor: pointer; font-weight: 850; overflow: hidden; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .kb-calendar-day-number { position: relative; z-index: 2; display: inline-grid; place-items: center; color: inherit; line-height: 1; } button.kb-calendar-day--has:hover, button.kb-calendar-day--has:focus-visible, .kb-calendar-day--selected, button.kb-calendar-day--postercolor:hover, button.kb-calendar-day--postercolor:focus-visible, .kb-calendar-day--postercolor.kb-calendar-day--selected { background: linear-gradient(135deg, color-mix(in srgb, var(--kb-dateagenda-accent-bg, var(--color-green)) 84%, white 16%) 0%, var(--kb-dateagenda-accent-bg, var(--color-green)) 100%); color: var(--color-text); box-shadow: inset 0 0 0 4px var(--color-burgund); outline: none; } @supports not (color: color-mix(in srgb, red 50%, white 50%)) { button.kb-calendar-day--has:hover, button.kb-calendar-day--has:focus-visible, .kb-calendar-day--selected, button.kb-calendar-day--postercolor:hover, button.kb-calendar-day--postercolor:focus-visible, .kb-calendar-day--postercolor.kb-calendar-day--selected { background: var(--kb-dateagenda-accent-bg, var(--color-green)); } } .kb-calendar-day--today { outline: 2px solid var(--color-burgund); outline-offset: -2px; } .kb-calendar-day--past { opacity: 0.45; filter: grayscale(0.25); } .kb-calendar-day--past.kb-calendar-day--has { opacity: 0.58; } .kb-calendar-day--past.kb-calendar-day--selected, .kb-calendar-day--past.kb-calendar-day--has:hover, .kb-calendar-day--past.kb-calendar-day--has:focus-visible { opacity: 1; filter: none; } /* ─── Inline-Panel unter dem angeklickten Tag ─── */ .kb-calendar-inline { position: relative; grid-column: 1 / -1; display: grid; gap: 10px; margin: 10px 0 12px; padding: 12px; border: 0; background: var(--color-event-card-hover); color: var(--color-text); } .kb-calendar-inline::before { content: ""; position: absolute; top: -8px; left: var(--kb-calendar-arrow-x, calc((var(--kb-calendar-arrow-col, 0) + 0.5) * (100% / 7))); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid var(--color-event-card-hover); transform: translateX(-50%); } .kb-calendar-selection-date { display: block; margin: 0; padding: 0 2px 2px; border-bottom: 0; background: transparent; color: var(--color-burgund); font-size: 0.72rem; font-weight: 900; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; } .kb-calendar-selection-empty { margin: 0; padding: 0 2px; color: var(--color-muted); font-style: italic; } .kb-calendar-eventbox { display: grid; gap: 8px; padding: 14px; background: var(--color-calendar-sheet); } .kb-calendar-eventbox--out { filter: grayscale(1); opacity: 0.58; } .kb-calendar-eventbox-markers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 3px; } .kb-calendar-eventbox-marker { --kb-cal-marker-bg: var(--color-green); display: inline-flex; align-items: center; min-height: 18px; padding: 3px 7px; background: var(--kb-cal-marker-bg); color: var(--color-card); font-size: 0.64rem; font-weight: 850; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; } .kb-calendar-eventbox-marker--heute { --kb-cal-marker-bg: var(--color-blue); } .kb-calendar-eventbox-marker--premiere { --kb-cal-marker-bg: var(--color-burgund); } .kb-calendar-eventbox-marker--letzte, .kb-calendar-eventbox-marker--eigen { --kb-cal-marker-bg: var(--color-green); } .kb-calendar-eventbox-marker--aus { --kb-cal-marker-bg: var(--color-muted); } .kb-calendar-eventbox-title { margin: 0; color: var(--color-text); font-size: clamp(1.08rem, 2vw, 1.42rem); font-weight: 750; line-height: 1.08; letter-spacing: -0.03em; } .kb-calendar-eventbox-details { margin: 0; color: var(--color-text); font-size: 0.94rem; font-weight: 600; line-height: 1.35; } .kb-calendar-eventbox-link { justify-self: start; margin-top: 4px; min-height: 38px; padding: 0 12px; font-size: 0.86rem; } /* ─── Tooltip (nur Desktop) ─── */ .kb-calendar-tooltip { position: absolute; z-index: 9999; max-width: min(280px, calc(100vw - 28px)); padding: 8px 10px; background: var(--color-text); color: var(--color-card); font-size: 0.82rem; font-weight: 750; line-height: 1.25; white-space: pre-line; transform: translate(-50%, -100%); pointer-events: none; } .kb-calendar-tooltip[hidden] { display: none !important; } .kb-calendar-tooltip-text { display: block; } @media (max-width: 720px) { .kb-calendar-months { grid-template-columns: 1fr; } .kb-calendar-month { max-width: none; padding: 14px; } .kb-calendar-day, .kb-calendar-day--postercolor, .kb-calendar-day--empty { min-height: 36px; font-size: 0.84rem; } .kb-calendar-tooltip { display: none !important; } .kb-calendar-eventbox-link { width: 100%; justify-content: center; } } /* ═════════ 7. Nextbar-Hilfsklassen ═════════ */ /* Versteckte Datenquelle für das Nextbar-JS */ .kb-next-data-event, .kb-next-data-date { display: none !important; } /* Mobile: Datumsbox der Nextbar ausblenden (JS erzeugt das Markup, !important schlägt die Stile des Nextbar-Stylesheets) */ @media (max-width: 720px) { .kb-next-event-card { grid-template-columns: minmax(0, 1fr) !important; } .kb-next-date { display: none !important; } } /* ═════════ 8. Detailseite (kb-detail-flow) ═════════ */ .kb-detail-flow { --kb-detail-flow-gap: clamp(24px, 4vw, 42px); color: var(--color-text); } .kb-detail-flow a { text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } /* ─── Hero: Poster + Kopfbereich ─── */ .kb-detail-flow-hero { display: grid; grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 54px); align-items: stretch; margin: 0 0 clamp(28px, 5vw, 54px); } .kb-eventpage--hero-slider .kb-detail-flow-hero { grid-template-columns: 1fr; } .kb-eventpage--hero-slider .kb-detail-flow-poster { max-width: none; aspect-ratio: 16 / 7; } .kb-detail-flow-poster { position: relative; width: 100%; margin: 0; aspect-ratio: 1 / 1.414; overflow: hidden; background: var(--color-calendar-sheet); color: var(--color-muted); } .kb-detail-flow-poster img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .kb-detail-flow-poster span { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: var(--color-faint); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.12em; line-height: 1.25; text-align: center; text-transform: uppercase; } .kb-detail-flow-head { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(26px, 4vw, 52px); background: var(--color-card); } .kb-detail-flow-title { max-width: 13ch; margin: 0; color: var(--color-text); font-size: clamp(2.55rem, 6.8vw, 6.35rem); font-weight: 780; line-height: 0.94; letter-spacing: -0.065em; overflow-wrap: normal; word-break: normal; hyphens: none; } .kb-detail-flow-subtitle { max-width: 44rem; margin: clamp(16px, 2vw, 24px) 0 0; color: var(--color-muted); font-size: clamp(1.08rem, 1.7vw, 1.4rem); font-weight: 650; line-height: 1.35; } .kb-detail-flow-organizer { display: flex; flex-wrap: wrap; gap: 6px 9px; align-items: baseline; margin: clamp(18px, 2.5vw, 28px) 0 0; color: var(--color-muted); font-size: 0.92rem; line-height: 1.25; } .kb-detail-flow-organizer span { color: var(--color-muted); } .kb-detail-flow-organizer a, .kb-detail-flow-organizer strong { color: var(--color-green); font-weight: 850; text-decoration: none; } .kb-detail-flow-organizer a:hover, .kb-detail-flow-organizer a:focus-visible { color: var(--color-green-hover); } /* ─── Status, Labels ─── */ .kb-detail-flow-status, .kb-detail-flow-marker, .kb-detail-flow-smallaction, .kb-detail-flow-action--status { width: max-content; max-width: 100%; } .kb-detail-flow-status { margin: 0 0 16px; padding: 6px 9px; background: var(--color-burgund); color: var(--color-card); font-size: 0.72rem; font-weight: 900; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; } .kb-detail-flow-label { display: block; margin: 0 0 13px; color: var(--color-burgund); font-size: 0.74rem; font-weight: 900; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; } /* ─── Vertikale Abschnitts-Abstände ─── */ .kb-detail-flow-next, .kb-detail-flow-section, .kb-detail-flow-facts, .kb-detail-flow-action-panel { margin: clamp(24px, 4vw, 42px) 0; } /* ─── "Nächster Termin"-Karte ─── */ .kb-detail-flow-next-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.5vw, 28px); align-items: center; padding: clamp(20px, 3vw, 34px); background: var(--color-next-blue); color: var(--color-card); } .kb-detail-flow-next-card--aus { filter: grayscale(1); opacity: 0.66; } .kb-detail-flow-next-card > .kb-detail-flow-datebox { display: none; } .kb-detail-flow-next-copy h2 { margin: 0; color: var(--color-card); font-size: clamp(1.35rem, 3vw, 2.55rem); font-weight: 780; line-height: 1.04; letter-spacing: -0.04em; } .kb-detail-flow-next-copy p { margin: 10px 0 0; color: rgba(var(--color-card-rgb), 0.82); font-size: clamp(1rem, 1.35vw, 1.18rem); font-weight: 650; line-height: 1.35; } .kb-detail-flow-next-copy small { display: block; margin-top: 12px; color: rgba(var(--color-card-rgb), 0.66); font-size: 0.86rem; font-weight: 650; line-height: 1.35; } /* ─── Datumsbox (Basisstil; in Next-Karte und Terminliste derzeit ausgeblendet) ─── */ .kb-detail-flow-datebox { width: clamp(78px, 8vw, 98px); min-height: clamp(82px, 8.2vw, 104px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 9px 8px 8px; background: var(--color-calendar-sheet); color: var(--color-text); box-shadow: var(--shadow-sheet-strong); text-align: center; } .kb-detail-flow-datebox strong { display: block; color: inherit; font-size: clamp(1.75rem, 3.2vw, 2.35rem); font-weight: 850; line-height: 0.88; letter-spacing: -0.055em; } .kb-detail-flow-datebox span:not(.kb-detail-flow-date-range), .kb-detail-flow-datebox em { display: block; margin-top: 7px; color: inherit; font-size: 0.64rem; font-style: normal; font-weight: 900; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; } .kb-detail-flow-date-range { display: inline-flex; align-items: baseline; width: auto; gap: 4px; } .kb-detail-flow-date-range > span { display: inline-flex; align-items: baseline; gap: 3px; } .kb-detail-flow-date-range b { display: block; color: var(--color-muted); font-size: 0.75rem; font-weight: 900; line-height: 1; } /* ─── Zweispalter Text/Entscheidung ─── */ .kb-detail-flow-decision { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.78fr); gap: clamp(18px, 3vw, 34px); align-items: start; margin: clamp(26px, 4vw, 48px) 0; } /* ─── Inhaltsflächen ─── */ .kb-detail-flow-text, .kb-detail-flow-entry, .kb-detail-flow-details, .kb-detail-flow-related, .kb-detail-flow-facts, .kb-detail-flow-terminlist { background: var(--color-card); padding: clamp(22px, 3vw, 34px); } .kb-detail-flow-richtext { color: var(--color-text); font-size: clamp(1rem, 1.08vw, 1.08rem); line-height: 1.65; } .kb-detail-flow-richtext > :first-child { margin-top: 0; } .kb-detail-flow-richtext > :last-child { margin-bottom: 0; } .kb-detail-flow-richtext h2, .kb-detail-flow-richtext h3 { margin: 1.45em 0 0.45em; color: var(--color-text); line-height: 1.12; letter-spacing: -0.025em; } /* ─── Preise ─── */ .kb-detail-flow-prices { display: grid; gap: 8px; } .kb-detail-flow-price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 14px; background: var(--color-calendar-sheet); } .kb-detail-flow-price-row strong, .kb-detail-flow-price-row b { color: var(--color-text); font-weight: 850; } .kb-detail-flow-price-row em { display: block; margin-top: 3px; color: var(--color-muted); font-size: 0.86rem; font-style: normal; font-weight: 550; line-height: 1.35; } /* ─── Hinweise & Fakten ─── */ .kb-detail-flow-hints { display: grid; gap: 9px; margin: 16px 0 0; } .kb-detail-flow-hints div { display: grid; grid-template-columns: minmax(108px, 0.38fr) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 0; } .kb-detail-flow-hints dt, .kb-detail-flow-facts dt { color: var(--color-muted); font-size: 0.8rem; font-weight: 850; letter-spacing: 0.08em; line-height: 1.25; text-transform: uppercase; } .kb-detail-flow-hints dd, .kb-detail-flow-facts dd { margin: 0; color: var(--color-text); font-size: 0.96rem; font-weight: 600; line-height: 1.42; } .kb-detail-flow-facts dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; } .kb-detail-flow-facts dl div { display: block; padding: 14px 16px; background: var(--color-calendar-sheet); } .kb-detail-flow-facts dd { margin-top: 5px; } .kb-detail-flow-enclosure { margin-top: 22px; } /* ─── Aktions-Panel ("Karten sichern") ─── */ .kb-detail-flow-action-panel { display: block; padding: clamp(22px, 3vw, 34px); background: var(--color-card); } .kb-detail-flow-action-panel > div { max-width: 44rem; } .kb-detail-flow-action-panel h2 { margin: 0 0 12px; color: var(--color-text); font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 780; line-height: 1.04; letter-spacing: -0.04em; } .kb-detail-flow-action-panel p:not(.kb-detail-flow-label) { max-width: 42rem; margin: 0 0 22px; color: var(--color-muted); font-size: 1rem; font-weight: 600; line-height: 1.45; } .kb-detail-flow-action { flex: none; min-height: 48px; padding: 0 24px; font-size: clamp(1rem, 1.25vw, 1.16rem); } .kb-detail-flow-action-panel .kb-detail-flow-action { margin-top: 8px; } .kb-detail-flow-action--status { background: var(--color-muted); cursor: default; } /* ─── Terminliste ─── */ .kb-detail-flow-terminrows { display: grid; gap: 10px; } .kb-detail-flow-termin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; min-height: 0; padding: 8px 12px; background: var(--color-event-card); transition: background 0.16s ease; } .kb-detail-flow-termin-row--next { background: color-mix(in srgb, var(--color-card) 72%, var(--color-gold) 28%); } .kb-detail-flow-termin-row--aus { filter: grayscale(1); opacity: 0.58; } .kb-detail-flow-termin-row .kb-detail-flow-datebox { display: none; } .kb-detail-flow-termin-row:not(.kb-detail-flow-termin-row--aus):not(.kb-detail-flow-termin-row--next):hover, .kb-detail-flow-termin-row:not(.kb-detail-flow-termin-row--aus):not(.kb-detail-flow-termin-row--next):focus-within { background: color-mix(in srgb, var(--color-event-card) 86%, var(--color-next-blue) 14%); } .kb-detail-flow-termin-row--next:hover, .kb-detail-flow-termin-row--next:focus-within { background: color-mix(in srgb, var(--color-card) 62%, var(--color-gold) 38%); } @supports not (color: color-mix(in srgb, red 50%, white 50%)) { .kb-detail-flow-termin-row--next, .kb-detail-flow-termin-row:not(.kb-detail-flow-termin-row--aus):not(.kb-detail-flow-termin-row--next):hover, .kb-detail-flow-termin-row:not(.kb-detail-flow-termin-row--aus):not(.kb-detail-flow-termin-row--next):focus-within, .kb-detail-flow-termin-row--next:hover, .kb-detail-flow-termin-row--next:focus-within { background: var(--color-card-hover); } } .kb-detail-flow-termin-main { grid-column: 1; grid-row: 1; min-width: 0; } .kb-detail-flow-termin-main h3 { margin: 0; color: var(--color-text); font-size: clamp(0.98rem, 1.15vw, 1.1rem); font-weight: 850; line-height: 1.12; } .kb-detail-flow-termin-main p { margin: 2px 0 0; color: var(--color-muted); font-size: 0.84rem; font-weight: 650; line-height: 1.2; } .kb-detail-flow-markers { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 3px; } .kb-detail-flow-marker { display: inline-flex; align-items: center; min-height: 16px; padding: 2px 6px; background: var(--color-green); color: var(--color-card); font-size: 0.58rem; font-weight: 900; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; } .kb-detail-flow-marker--premiere, .kb-detail-flow-marker--aus { background: var(--color-burgund); } .kb-detail-flow-marker--letzte, .kb-detail-flow-marker--eigen { background: var(--color-green); } .kb-detail-flow-marker--zeitraum { background: var(--color-blue); } .kb-detail-flow-smallaction { position: relative; z-index: 2; grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 10px; background: var(--color-burgund); color: var(--color-card); font-size: 0.78rem; font-weight: 850; line-height: 1.1; text-align: center; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, transform 0.1s ease; } .kb-detail-flow-smallaction:hover, .kb-detail-flow-smallaction:focus-visible { background: var(--color-burgund-hover); color: var(--color-card); outline: none; } .kb-detail-flow-smallaction:active { transform: translateY(1px); } .kb-detail-flow-smallaction--status { background: var(--color-muted); } /* ─── Mitwirkende / Verwandtes ─── */ .kb-detail-flow-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .kb-detail-flow-related-grid section:only-child { grid-column: 1 / -1; } .kb-detail-flow-related-grid section { min-width: 0; padding: 18px; background: var(--color-calendar-sheet); } .kb-detail-flow-related-grid h2 { margin: 0 0 10px; color: var(--color-text); font-size: clamp(1.05rem, 1.4vw, 1.24rem); font-weight: 850; line-height: 1.12; } .kb-detail-flow-related-grid p { margin: 0; color: var(--color-text); font-size: 0.96rem; font-weight: 650; line-height: 1.4; } .kb-detail-flow-person-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .kb-detail-flow-person-list li { display: grid; gap: 2px; } .kb-detail-flow-person-list strong { color: var(--color-text); font-weight: 850; } .kb-detail-flow-person-list a { color: var(--color-text); text-decoration: none; } .kb-detail-flow-person-list a:hover, .kb-detail-flow-person-list a:focus-visible { color: var(--color-green); } .kb-detail-flow-person-list em { color: var(--color-muted); font-size: 0.9rem; font-style: normal; line-height: 1.28; } /* ─── Detailseite: Responsive ─── */ @media (max-width: 980px) { .kb-detail-flow-hero, .kb-detail-flow-decision, .kb-detail-flow-related-grid { grid-template-columns: 1fr; } .kb-detail-flow-poster { max-width: 340px; } .kb-detail-flow-title { max-width: 100%; } .kb-detail-flow-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .kb-detail-flow-termin-row { grid-template-columns: minmax(0, 1fr); } .kb-detail-flow-smallaction { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; } } @media (max-width: 680px) { .kb-detail-flow-hero { gap: 18px; margin-top: 0; } .kb-detail-flow-head, .kb-detail-flow-text, .kb-detail-flow-entry, .kb-detail-flow-details, .kb-detail-flow-related, .kb-detail-flow-facts, .kb-detail-flow-terminlist, .kb-detail-flow-action-panel, .kb-detail-flow-next-card { padding: 20px; } .kb-detail-flow-poster { max-width: none; width: 100%; } .kb-detail-flow-title { max-width: 100%; font-size: clamp(2rem, 12vw, 3.35rem); line-height: 0.98; letter-spacing: -0.052em; } .kb-detail-flow-action-panel .kb-detail-flow-action, .kb-detail-flow-action { width: 100%; } .kb-detail-flow-hints div, .kb-detail-flow-facts dl div { grid-template-columns: 1fr; gap: 4px; } .kb-detail-flow-facts dl { grid-template-columns: 1fr; } } @media (max-width: 420px) { .kb-detail-flow-poster { max-width: none; width: 100%; } .kb-detail-flow-title { font-size: clamp(1.85rem, 11vw, 2.85rem); } } /* ═════════ 9. Zusatzelemente & Text-Info ═════════ */ /* Einheitliche Abstände zwischen zusätzlich eingefügten Elementen (Downloads, Galerien, Text-Infos) auf der Detailseite */ .kb-detail-flow-extra-elements, .kb-detail-extra { display: flex; flex-direction: column; gap: var(--kb-detail-flow-gap); margin: var(--kb-detail-flow-gap) 0; } .kb-detail-flow-extra-elements > *, .kb-detail-extra > * { margin-top: 0 !important; margin-bottom: 0 !important; } /* Direkt im Flow eingestreute Downloads/Galerien erhalten den Standard-Abschnittsabstand */ .kb-detail-flow > .kb-ce-download, .kb-detail-flow > .ce_download:has(.kb-download), .kb-detail-flow > .kb-download, .kb-detail-flow > .kb-gallery-shell, .kb-detail-flow > .ce_gallery:has(.kb-gallery), .kb-detail-flow > .kb-gallery { margin-top: var(--kb-detail-flow-gap) !important; margin-bottom: var(--kb-detail-flow-gap) !important; } @media (max-width: 680px) { .kb-detail-flow { --kb-detail-flow-gap: 20px; } } /* Weitere-Informationen-Texttemplate */ .kb-text-info-content .kb-text-info-image, .kb-text-info-content .image_container { max-width: 100%; margin: 0 0 1.25em; float: none !important; } .kb-text-info-content .kb-text-info-image:last-child, .kb-text-info-content .image_container:last-child { margin-bottom: 0; } .kb-text-info-content .image_container img { width: auto; max-width: 100%; height: auto; } /* Text-Zusatztemplate ohne doppelten Außenabstand im Zusatzbereich */ .kb-detail-flow-extra-elements .kb-text-info, .kb-detail-extra .kb-text-info { margin-top: 0 !important; margin-bottom: 0 !important; } .kb-detail-flow-extra-elements .ce_text > .kb-text-info, .kb-detail-extra .ce_text > .kb-text-info { margin-top: 0 !important; margin-bottom: 0 !important; } /* ═════════ 10. Globale Mobile-Anpassungen der Listenansichten ═════════ */ @media (max-width: 720px) { .kb-toolbar { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; } .kb-toolbar-left { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; } .kb-viewtiles { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; } .kb-viewtile, .kb-viewtile:last-child { min-width: 0; padding-inline: 8px; border: 1px solid var(--color-line); margin: 0 -1px -1px 0; } .kb-viewtile:nth-child(2n), .kb-viewtile:last-child { margin-right: 0; } .kb-chips { width: 100%; flex-wrap: wrap; border: 0; } .kb-chip, .kb-chip:last-child { flex: 1 1 auto; min-width: max-content; border: 1px solid var(--color-line); margin-right: -1px; margin-bottom: -1px; padding-inline: 11px; } .kb-event { grid-template-columns: 1fr; gap: 20px; padding: 22px 0; } .kb-event-poster { max-width: 240px; margin: 0 auto; } .kb-event-body { min-height: 0; padding: 22px 20px; } /* Termine als 4-spaltiges Raster */ .kb-event-dates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; } .kb-event-date, .kb-event-date--link, .kb-event-datebox, .kb-event-datebox--datespan, .kb-event-date .kb-event-date-place, .kb-event-date-main { width: 100%; min-width: 0; max-width: none; } .kb-event-datebox, .kb-event-datebox--datespan { height: 74px; min-height: 74px; padding: 7px 4px 6px; } .kb-event-datebox strong { font-size: clamp(1.12rem, 6vw, 1.35rem); } .kb-event-datebox-time { margin-top: 6px; padding-top: 5px; font-size: 0.58rem; } .kb-event-marker { min-height: 16px; padding: 3px 7px; letter-spacing: 0.1em; } .kb-event-marker, .kb-event-date .kb-event-date-place { font-size: 6.9px; } } @media (max-width: 480px) { .kb-event-poster { max-width: 66%; margin: 0; } .kb-content { padding-inline: 18px; } } @media (max-width: 420px) { .kb-viewtile { gap: 5px; padding-inline: 6px; font-size: 12px; } .kb-viewtile-icon { width: 13px; height: 13px; } .kb-chip { padding-inline: 9px; font-size: 12px; } .kb-event-dates { gap: 12px 6px; } .kb-event-datebox, .kb-event-datebox--datespan { height: 70px; min-height: 70px; } } /* ═══════════════════════════════════════════════════════════════════ 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; 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 ═══════════════════════════════════════════════════════════════════ */ .kb-osm { --kb-osm-paper: var(--color-card, #FDFCF5); --kb-osm-paper-soft: var(--color-paper, #F8F5EC); --kb-osm-stone: #EFE6D3; --kb-osm-green: var(--color-green, #17483F); --kb-osm-green-hover: var(--color-green-hover, #0E342D); --kb-osm-red: var(--color-burgund, #8B2E1F); --kb-osm-gold: var(--color-gold, #C9A227); --kb-osm-ink: var(--color-text, #24211D); --kb-osm-muted: var(--color-muted, #6F675E); --kb-osm-line: var(--color-line, rgba(36, 33, 29, .16)); --kb-osm-line-soft: var(--color-line-soft, rgba(36, 33, 29, .08)); --kb-osm-blue: var(--kb-next-blue, #1f3142); --kb-osm-shadow: none; position: relative; } .kb-osm .kb-hero { position: relative; overflow: hidden; background: var(--kb-osm-stone); border: 1px solid var(--kb-osm-line); box-shadow: none; isolation: isolate; } .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; } .kb-osm .leaflet-container { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; background: var(--kb-osm-stone); font-family: var(--font-body, 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif); } .kb-osm .leaflet-container::after { content: none; } .kb-osm .leaflet-tile-pane { filter: saturate(1.04) contrast(1.02) brightness(1.01); } .kb-osm .leaflet-control-container { position: relative; z-index: 800; } .kb-osm .leaflet-bar { border: 0; border-radius: 0; box-shadow: none; } .kb-osm .leaflet-bar a, .kb-osm .leaflet-bar a:hover, .kb-osm .leaflet-bar a:focus { width: 42px; height: 42px; line-height: 40px; border: 0; border-bottom: 1px solid var(--kb-osm-line-soft); background: rgba(253, 252, 245, .96); color: var(--kb-osm-blue); font-family: var(--font-body, 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif); font-size: 21px; font-weight: 900; text-decoration: none; backdrop-filter: blur(10px); transition: background .16s ease, color .16s ease, box-shadow .16s ease; } .kb-osm .leaflet-bar a:last-child { border-bottom: 0; } .kb-osm .leaflet-bar a:hover, .kb-osm .leaflet-bar a:focus { background: var(--kb-osm-blue); color: var(--kb-osm-paper); } .kb-osm .leaflet-control-zoom-in, .kb-osm .leaflet-control-zoom-out { text-indent: 0; } .kb-osm .leaflet-control-attribution { margin: 0 10px 10px 0; padding: 5px 8px; background: rgba(253, 252, 245, .9); color: var(--kb-osm-muted); border: 1px solid var(--kb-osm-line-soft); box-shadow: none; font-family: var(--font-body, 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif); font-size: 10px; line-height: 1.35; backdrop-filter: blur(10px); } .kb-osm .leaflet-control-attribution a { color: var(--kb-osm-blue); font-weight: 800; text-decoration-color: rgba(31, 49, 66, .35); } .kb-osm .leaflet-control-attribution a:hover { color: var(--kb-osm-red); } .kb-osm .leaflet-marker-icon.kwb-map-marker { border: 0; background: transparent; } .kb-osm .kwb-map-marker svg { display: block; overflow: visible; filter: drop-shadow(0 7px 13px rgba(36, 33, 29, .28)); transition: transform .18s ease, filter .18s ease; } .kb-osm .kwb-map-marker:hover svg, .kb-osm .kwb-map-marker:focus svg { transform: translateY(-3px) scale(1.04); filter: drop-shadow(0 12px 18px rgba(36, 33, 29, .32)); } .kb-osm .kwb-map-marker--venue svg { filter: drop-shadow(0 10px 17px rgba(36, 33, 29, .35)); } .kb-osm .leaflet-interactive.kwb-osm-route { filter: drop-shadow(0 3px 3px rgba(36, 33, 29, .28)); } .kb-osm .leaflet-popup { margin-bottom: 0; } .kb-osm .leaflet-popup-content-wrapper { overflow: hidden; background: rgba(253, 252, 245, .97); color: var(--kb-osm-ink); border: 1px solid var(--kb-osm-line); border-radius: 0; box-shadow: 0 10px 24px rgba(31, 49, 66, .10); padding: 0; backdrop-filter: blur(12px); } .kb-osm .leaflet-popup-content { min-width: 210px; margin: 0; padding: 16px 18px 16px 16px; font-family: var(--font-body, '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; margin-bottom: 4px; color: var(--kb-osm-blue); font-size: 13px; font-weight: 900; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; } .kb-osm .leaflet-popup-content a { color: var(--kb-osm-red); font-weight: 800; text-decoration-thickness: 2px; } .kb-osm .leaflet-popup-tip-container { margin-top: -1px; } .kb-osm .leaflet-popup-tip { width: 16px; height: 16px; margin-top: -9px; background: var(--kb-osm-paper); border-right: 1px solid var(--kb-osm-line-soft); border-bottom: 1px solid var(--kb-osm-line-soft); box-shadow: none; } .kb-osm .leaflet-popup-close-button { top: 5px; right: 5px; width: 30px; height: 30px; padding: 0; color: var(--kb-osm-muted); font-size: 22px; line-height: 28px; text-align: center; transition: color .16s ease, background .16s ease; } .kb-osm .leaflet-popup-close-button:hover, .kb-osm .leaflet-popup-close-button:focus { background: rgba(31, 49, 66, .08); color: var(--kb-osm-blue); } .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: clamp(24px, 5vw, 56px); text-align: center; background: rgba(253, 252, 245, .96); color: var(--kb-osm-ink); border: 1px solid var(--kb-osm-line); font-family: var(--font-body, 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif); font-size: clamp(15px, 1.8vw, 18px); font-weight: 600; line-height: 1.55; } .kb-osm .kwb-hero-privacy.privacy { background: rgba(253, 252, 245, .96); } .kb-osm .kwb-hero-privacy a { color: var(--kb-osm-blue); font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; } .kb-osm .kwb-hero-privacy a:hover, .kb-osm .kwb-hero-privacy a:focus { color: var(--kb-osm-red); } @media (max-width: 640px) { .kb-osm .leaflet-bar a, .kb-osm .leaflet-bar a:hover, .kb-osm .leaflet-bar a:focus { width: 38px; height: 38px; line-height: 36px; } .kb-osm .leaflet-popup-content { min-width: 185px; max-width: min(72vw, 260px); padding: 14px 15px; font-size: 13px; } .kb-osm .leaflet-control-attribution { max-width: calc(100vw - 72px); font-size: 9px; } } /* ═══════════════════════════════════════════════════════════════════ KÜCHWALDBÜHNE — NEUIGKEITEN-TEASER (Karten) ─────────────────────────────────────────────────────────────────── Stellt die neuesten Meldungen als Kartenraster dar: Bild oben, darunter Datum, Titel, Teaser und ein „Weiterlesen“-Link. Markup kommt aus den Contao-Templates: · news_latest_kbcard.html5 — eine Karte (Item-Template) · mod_newslist_kbcards.html5 — Raster-Wrapper + Überschrift + Fuß Eigener Namensraum kb-nt-*, damit nichts mit der bestehenden Timeline (kb-news-* in kb-neuigkeiten.css) kollidiert. Farben/Schrift/Maße kommen aus kb-tokens.css. Die Überschrift nutzt .kb-sectionhead / .kb-section-title aus kb-pagehead.css. Einbinden NACH kb-tokens.css und kb-pagehead.css. ═══════════════════════════════════════════════════════════════════ */ /* ─── Raster ─── Drei Karten nebeneinander auf Desktop. Bei nur 2 Meldungen im Modul stehen entsprechend zwei Karten in der Reihe. */ .kb-nt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; } /* ─── Karte ─── flex-column, damit der Teaser per flex:1 wachsen kann und die „Weiterlesen“-Zeilen aller Karten unten bündig abschließen. */ .kb-nt-card { display: flex; flex-direction: column; } /* ─── Bildfläche = Link zum Beitrag ─── Querformat A4 (1,414:1), cover-Zuschnitt. Die von Contao verschachtelten Ebenen (figure.image_container > picture > img) werden absolut gefüllt, damit kein festes width/height-Attribut durchschlägt. */ .kb-nt-card-media { position: relative; display: block; aspect-ratio: 1.414 / 1; overflow: hidden; border-radius: 3px; background: #ECE8DC; margin-bottom: 15px; } .kb-nt-card-media .image_container, .kb-nt-card-media picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; } .kb-nt-card-media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; display: block; transition: transform 0.45s ease; } a.kb-nt-card-media:hover img { transform: scale(1.04); } /* ─── Datum ─── */ .kb-nt-card-date { display: block; font-size: 12px; font-weight: 700; color: var(--color-green); margin-bottom: 7px; } /* ─── Titel ─── Wörter nicht intern trennen — Umbruch nur an Leerzeichen. */ .kb-nt-card-title { margin: 0 0 9px 0; font-size: 1.28rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; color: var(--color-text); overflow-wrap: normal; word-break: normal; hyphens: none; } .kb-nt-card-title a { color: inherit; text-decoration: none; transition: color 0.15s; } .kb-nt-card-title a:hover { color: var(--color-green); } /* ─── Teaser ─── flex:1 schiebt den „Weiterlesen“-Link nach unten → bündige Reihe. */ .kb-nt-card-teaser { margin: 0 0 14px 0; font-size: 14px; color: var(--color-muted); line-height: 1.55; flex: 1; } .kb-nt-card-teaser p { margin: 0 0 8px 0; } .kb-nt-card-teaser p:last-child { margin-bottom: 0; } /* ─── „Weiterlesen“ mit wachsendem Pfeil ─── Gleiche Pfeil-Sprache wie die Neuigkeiten-Timeline. */ .kb-more { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--color-green); text-decoration: none; transition: color 0.15s; } .kb-more:hover { color: var(--color-green-hover); } .kb-more-arrow { display: inline-flex; align-items: center; width: 1.6em; height: 1em; overflow: visible; } .kb-more-arrow::before { content: ''; display: block; width: 0.9em; height: 1.5px; background: currentColor; flex-shrink: 0; transition: width 0.25s ease; } .kb-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-more:hover .kb-more-arrow::before { width: 1.4em; } /* ─── Leerzustand ─── */ .kb-nt-cards-empty { color: var(--color-muted); font-style: italic; } /* ─── Responsive ─── Bis 720px: einspaltig. Dazwischen tragen drei Karten auch auf schmaleren Desktops noch (Bild wird einfach kleiner). */ @media (max-width: 720px) { .kb-nt-cards { grid-template-columns: 1fr; gap: 30px; } } /* ═══════════════════════════════════════════════════════════════════ KÜCHWALDBÜHNE — „WEITERFÜHREN"-LINK (.kb-more) ─────────────────────────────────────────────────────────────────── Textlink mit wachsendem Pfeil — die Standard-Sprache der Seite für „Weiterlesen", „Weitere Neuigkeiten" usw. Eigenständige Komponente, damit der Link überall verfügbar ist — auch auf Seiten ohne kb-newsteaser.css. Wird u. a. genutzt von: · ce_hyperlink_kbmore.html5 — Inhaltselement „Hyperlink" · den Nachrichtenkarten (news_latest_kbcard.html5) Wenn diese Datei global geladen wird, kann der identische .kb-more-Block in kb-newsteaser.css entfernt werden (optional, reine Aufräumarbeit — doppelt-identische Regeln schaden nicht). Einbinden NACH kb-tokens.css. ═══════════════════════════════════════════════════════════════════ */ .kb-more { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; /* nur in flex-Spalten relevant, sonst harmlos */ font-size: 14px; font-weight: 700; color: var(--color-green); text-decoration: none; transition: color 0.15s; } .kb-more:hover { color: var(--color-green-hover); } /* Pfeil — Linie wächst beim Hover, Spitze wandert mit */ .kb-more-arrow { display: inline-flex; align-items: center; width: 1.6em; height: 1em; overflow: visible; } .kb-more-arrow::before { content: ''; display: block; width: 0.9em; height: 1.5px; background: currentColor; flex-shrink: 0; transition: width 0.25s ease; } .kb-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-more:hover .kb-more-arrow::before { width: 1.4em; } /* ─── Fallback gegen Theme-Button-Stil ─── Falls das Theme das im Hyperlink-Element als Button zeichnet (Hintergrund, Polsterung, Rahmen, Block) — hier neutralisieren. Standardmäßig auskommentiert; nur aktivieren, wenn der grüne Theme-Button trotz korrektem Template noch durchschlägt. */ .ce_hyperlink a.kb-more { display: inline-flex !important; background: transparent !important; border: 0 !important; padding: 0px !important; margin-top: 20px !important; border-radius: 0 !important; width: auto !important; color: var(--color-green) !important; font-size: 17px !important; } /* KB_DETAIL_CSS_VERSION: 2026-06-11-8 (konsolidiert) */ /* ═══════════════════════════════════════════════════════════════════ KÜCHWALDBÜHNE — EVENT-DETAILSEITE (Legacy-Layout .kb-detail-*) ─────────────────────────────────────────────────────────────────── Hinweis: Dies ist das ältere Detail-Layout. Das neuere Layout (.kb-detail-flow-*) liegt in kb-eventlist.css. Wird die Detailseite nur noch über das Flow-Template ausgespielt, kann diese Datei komplett entfallen. Konsolidierter Stand: die früheren Override-Schichten am Dateiende (Terminband als kompakte Zeilen statt Kalenderblätter) sind in die Basisregeln eingearbeitet; das dadurch tote Kalenderblatt-Styling wurde entfernt. ═══════════════════════════════════════════════════════════════════ */ .kb-eventpage { --kb-detail-red: var(--color-burgund); --kb-detail-stone: var(--color-stone); --kb-detail-blue: var(--color-next-blue); font-family: var(--font-body); color: var(--color-text); } /* Neutralisiert Theme-Schatten innerhalb der Detailseite */ .kb-eventpage *, .kb-eventpage *::before, .kb-eventpage *::after { box-shadow: none !important; } /* ─── Hero: Bild + Kopftext ─── */ .kb-detail-hero { width: 100%; max-width: none; margin-inline: 0; padding: 0 0 clamp(2rem, 4vw, 3.5rem); display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; } .kb-detail-image { aspect-ratio: 210 / 297; min-height: 0; align-self: start; background: var(--kb-detail-stone); overflow: hidden; } .kb-detail-image img { width: 100%; height: 100%; object-fit: cover; } .kb-detail-copy { position: relative; padding: clamp(2rem, 5vw, 4rem); background: var(--color-card); } .kb-detail-kicker { margin: 0 0 0.9rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 800; color: var(--kb-detail-red); } .kb-detail-kicker a { color: inherit; text-decoration: none; } .kb-detail-kicker a:hover { color: var(--color-green); } .kb-detail-title { margin: 0 0 1.25rem; font-family: var(--font-body); max-width: 100%; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; letter-spacing: -0.035em; text-transform: none; color: var(--color-text); overflow-wrap: break-word; word-break: normal; hyphens: auto; } .kb-detail-lead { max-width: 42rem; margin: 0 0 1.25rem; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.45; color: var(--color-text); } .kb-detail-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.35rem 0 0; } .kb-detail-meta span { background: rgba(var(--color-gold-rgb), 0.18); padding: 0.45rem 0.65rem; font-size: 1rem; font-weight: 700; color: var(--color-text); } .kb-detail-teaser { max-width: 46rem; margin: 1.45rem 0 0; font-size: 1.04rem; line-height: 1.7; color: var(--color-text); } .kb-detail-teaser p { margin: 0 0 0.9rem; } .kb-detail-teaser p:last-child { margin-bottom: 0; } .kb-detail-info { display: grid; gap: 0.35rem; margin: 1.2rem 0 0; color: var(--color-muted); font-size: 0.95rem; } .kb-detail-info p { margin: 0; } .kb-detail-info strong { color: var(--color-text); font-weight: 800; } .kb-detail-status { display: inline-flex; width: max-content; margin: 0 0 0.8rem; padding: 0.32rem 0.55rem; background: rgba(var(--color-gold-rgb), 0.18); color: var(--color-green); font-size: 0.82rem; font-weight: 800; } .kb-detail-status--aus { background: rgba(var(--color-burgund-rgb), 0.12); color: var(--kb-detail-red); } .kb-detail-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; } .kb-detail-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.85rem 1.15rem; border: 0 !important; font: inherit; font-weight: 800; text-decoration: none; transition: background 0.15s, color 0.15s, transform 0.1s; } .kb-detail-button--primary { background: var(--kb-detail-red); color: var(--color-card); } .kb-detail-button--primary:hover { background: var(--color-green); color: var(--color-card); } .kb-detail-button--primary:active { transform: translateY(1px); } .kb-detail-button--status { color: var(--color-green); background: transparent; } .kb-detail-section { width: 100%; max-width: none; margin-inline: 0; padding: 0 0 clamp(2rem, 4vw, 4rem); } /* ─── Terminband (blauer Banner mit kompakten Terminzeilen) ─── */ .kb-detail-date-banner { background: var(--kb-detail-blue); color: var(--color-card); padding: 1.25rem 1.35rem; } .kb-detail-date-banner-title { display: block; margin: 0 0 1.1rem; color: var(--color-card); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; } .kb-detail-calendar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; width: 100%; margin: 0; overflow: visible; } .kb-detail-calendar-item, .kb-detail-calendar-item:has(.kb-detail-datebox--range) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; width: auto; max-width: none; min-width: 0; min-height: 0; margin: 0; padding: 8px 10px; background: rgba(var(--color-card-rgb), 0.12); color: var(--color-card); overflow: visible; } .kb-detail-calendar-item--aus { opacity: 0.58; } /* Kalenderblatt-Datumsboxen sind im kompakten Layout ausgeblendet; der Termintext steht in .kb-detail-calendar-meta */ .kb-detail-calendar-item .kb-detail-datebox, .kb-detail-calendar-item .kb-detail-datebox--range { display: none !important; } .kb-detail-calendar-meta, .kb-detail-calendar-item:has(.kb-detail-datebox--range) .kb-detail-calendar-meta { position: static; grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: auto; max-width: none; min-width: 0; } /* Marker-Zeile über dem Termin */ .kb-detail-markers { position: static; grid-column: 1 / -1; order: -1; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; max-width: none; margin: 0 0 2px; transform: none; pointer-events: none; } .kb-detail-markers:empty { display: none; } .kb-detail-marker { display: block; width: max-content; max-width: 92px; padding: 2px 6px; background: var(--color-burgund); color: var(--color-card) !important; font-size: 7.5px; font-weight: 900; line-height: 1.05; letter-spacing: 0.08em; text-transform: uppercase; white-space: normal; } .kb-detail-marker--letzte, .kb-detail-marker--eigen { background: var(--color-green); } .kb-detail-marker--aus { background: var(--color-muted); } .kb-detail-marker--heute { background: var(--color-blue); } .kb-detail-marker--eigen { order: 20; } .kb-detail-marker--letzte { order: 30; } .kb-detail-marker--premiere { order: 40; } .kb-detail-marker--aus { order: 10; } .kb-detail-marker--heute { order: 100; } /* Orts-Label unter dem Termin */ .kb-detail-date-place, .kb-detail-calendar-item:has(.kb-detail-datebox--range) .kb-detail-date-place { position: static; grid-column: 1; display: block; width: max-content; max-width: 100%; margin-top: 1px; padding: 3px 6px 2px; background: var(--color-green); color: var(--color-card) !important; font-size: 7.8px; font-weight: 900; line-height: 1.06; letter-spacing: 0.075em; text-transform: uppercase; white-space: normal; transform: none; pointer-events: none; } .kb-detail-date-place span { color: inherit !important; text-decoration: none !important; } /* ─── Preisliste ─── */ .kb-pricelist { max-width: 720px; padding: 1.4rem; background: var(--color-card); } .kb-pricelist-head { margin: 0 0 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 800; color: var(--kb-detail-red); } .kb-price-table { width: 100%; max-width: 520px; border-collapse: collapse; border: 0 !important; font-size: 1rem; color: var(--color-text); } .kb-price-table tr, .kb-price-table td { border: 0 !important; } .kb-price-table td { padding: 0.42rem 0; vertical-align: top; } .kb-price-label { font-weight: 700; } .kb-price-note { display: block; margin-top: 0.15rem; color: var(--color-muted); font-size: 0.9rem; font-weight: 400; } .kb-price-value { text-align: right; white-space: nowrap; font-weight: 800; padding-left: 1.2rem; } .kb-price-hint { margin: 1rem 0 0; color: var(--color-muted); } /* ─── Fließtext ─── */ .kb-detail-body { max-width: none; margin-inline: 0; font-size: 1.04rem; line-height: 1.75; } .kb-detail-body h2, .kb-detail-body h3 { margin: 2rem 0 0.8rem; line-height: 1.08; letter-spacing: -0.03em; color: var(--color-text); } .kb-detail-body h2 { font-size: clamp(2rem, 4vw, 3.4rem); text-transform: uppercase; } .kb-detail-body h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); } .kb-detail-body p { margin: 0 0 1.1em; } .kb-detail-body a { color: var(--color-green); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 2px; } .kb-detail-body a:hover { color: var(--color-green-hover); } .kb-detail-body .enclosure { list-style: none; margin: 2rem 0 0; padding: 0; } .kb-detail-body .enclosure li { padding: 0.45rem 0; border: 0 !important; } .kb-detail-body .enclosure .size { color: var(--color-muted); font-weight: 400; } /* ─── Hinweise ─── */ .kb-detail-hints { display: grid; gap: 0.45rem; margin-top: 1rem; color: var(--color-muted); font-size: 0.96rem; line-height: 1.55; } .kb-detail-hints p { margin: 0; } .kb-detail-hints strong { color: var(--color-text); font-weight: 800; } /* ─── Mitwirkende / Verwandtes ─── */ .kb-detail-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .kb-detail-related-block { background: var(--color-card); padding: 1.4rem; } .kb-detail-related-block h2 { margin: 0 0 1rem; color: var(--color-text); font-size: clamp(1.35rem, 2.3vw, 1.8rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; } .kb-detail-person-list { list-style: none; display: grid; gap: 0.8rem; margin: 0; padding: 0; } .kb-detail-person-list li { display: grid; gap: 0.16rem; margin: 0; padding: 0; } .kb-detail-person-list a, .kb-detail-person-list span { color: var(--color-text); text-decoration: none; } .kb-detail-person-list a:hover { color: var(--color-green); } .kb-detail-person-list strong { font-weight: 800; } .kb-detail-person-list em { color: var(--color-muted); font-size: 0.92rem; font-style: normal; } /* ─── Zustände ─── */ .kb-event--unpublished { opacity: 0.72; } .kb-event--out .kb-detail-title, .kb-event--out .kb-detail-lead { filter: grayscale(1); opacity: 0.62; } .kb-event--out .kb-detail-button--primary { pointer-events: none; background: var(--color-muted); } /* ─── Responsive ─── */ @media (max-width: 1050px) { .kb-detail-hero { grid-template-columns: 1fr; } .kb-detail-image { width: min(100%, 340px); } } @media (max-width: 700px) { .kb-detail-hero { padding: 0 0 clamp(2rem, 4vw, 3.5rem); } .kb-detail-copy { padding: 1.5rem; } .kb-detail-title { font-size: clamp(1.9rem, 11vw, 2.8rem); } .kb-detail-image { width: 100%; } .kb-detail-button { width: 100%; } .kb-detail-related { grid-template-columns: 1fr; } .kb-detail-related-block { padding: 1.2rem 1rem; } } @media (max-width: 640px) { .kb-detail-calendar { grid-template-columns: 1fr; } .kb-detail-calendar-item, .kb-detail-calendar-item:has(.kb-detail-datebox--range) { grid-template-columns: 1fr; } } @media (max-width: 420px) { .kb-detail-date-place { font-size: 7.3px; } } .kb-next-source { display: none !important; } .kb-next-event { display: block; margin: 30px 0 36px; font-family: var(--font-body); } .kb-next-event[hidden], .kb-next-event-module--empty { display: none !important; margin: 0 !important; padding: 0 !important; } .kb-next-event-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(16px, 2.4vw, 28px); width: 100%; padding: clamp(20px, 2.6vw, 30px); background: var(--color-next-blue); color: var(--color-card); border-radius: var(--radius); } .kb-next-date { width: clamp(78px, 8vw, 98px); min-height: clamp(78px, 8vw, 98px); display: grid; place-items: center; align-content: center; background: var(--color-card); color: var(--color-text); display: none; } .kb-next-date strong { display: block; font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 850; line-height: 0.88; letter-spacing: -0.055em; } .kb-next-date span { display: block; margin-top: 8px; font-size: clamp(0.68rem, 1.1vw, 0.82rem); font-weight: 900; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; } .kb-next-content { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .kb-next-dotline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 11px; margin: 0 0 14px; } .kb-next-dot { width: 10px; height: 10px; flex: none; border-radius: 999px; background: var(--color-burgund-hover); box-shadow: 0 0 0 0 rgba(168, 61, 40, 0.55); animation: kb-next-pulse 2.2s infinite; } @keyframes kb-next-pulse { 0% { box-shadow: 0 0 0 0 rgba(168, 61, 40, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(168, 61, 40, 0); } 100% { box-shadow: 0 0 0 0 rgba(168, 61, 40, 0); } } .kb-next-label { margin: 0; color: #D8C7A3; font-size: clamp(1rem, 1.35vw, 1.16rem); font-weight: 850; line-height: 1.1; } .kb-next-badge { display: inline-flex; align-items: center; width: max-content; max-width: 100%; min-height: 0; padding: 4px 7px; background: var(--color-burgund); color: var(--color-card); border: 0; font-size: clamp(0.72rem, 0.9vw, 0.82rem); font-weight: 900; line-height: 1.05; letter-spacing: 0.085em; text-transform: uppercase; white-space: nowrap; } .kb-next-badge--letzte { background: var(--color-green); } .kb-next-badge--premiere { background: var(--color-burgund); } .kb-next-title { margin: 0; color: var(--color-card); font-size: clamp(1.85rem, 3.8vw, 3.35rem); font-weight: 780; line-height: 0.98; letter-spacing: -0.055em; overflow-wrap: anywhere; } .kb-next-subtitle { max-width: 42rem; margin: 14px 0 0; color: rgba(251, 249, 244, 0.74); font-size: clamp(1rem, 1.55vw, 1.28rem); font-weight: 650; line-height: 1.32; } .kb-next-titlelink { display: block; color: inherit; text-decoration: none; } .kb-next-titlelink:hover, .kb-next-titlelink:focus-visible { color: inherit; text-decoration: none; outline: none; } .kb-next-button { display: none !important; } @media (max-width: 680px) { .kb-next-event { margin: 26px 0 32px; } .kb-next-event-card { grid-template-columns: 70px minmax(0, 1fr); gap: 14px; padding: 18px; } .kb-next-date { width: 70px; min-height: 70px; } .kb-next-date strong { font-size: 2rem; } .kb-next-date span { margin-top: 6px; font-size: 0.64rem; } .kb-next-dotline { gap: 7px 9px; margin-bottom: 10px; } .kb-next-label { font-size: 0.96rem; } .kb-next-badge { padding: 2px 6px 1px; font-size: 0.68rem; } .kb-next-title { font-size: clamp(1.55rem, 7vw, 2.25rem); line-height: 1.02; } .kb-next-subtitle { margin-top: 9px; font-size: 0.96rem; line-height: 1.34; } .kb-next-button { display: none !important; } } @media (max-width: 420px) { .kb-next-event-card { grid-template-columns: 1fr; } .kb-next-date { width: 72px; min-height: 72px; } } .kb-ce-download, .ce_download:has(.kb-download), .mod_article .ce_download:has(.kb-download), .kb-detail-extra .ce_download:has(.kb-download), .kb-detail-extra .kb-ce-download { margin: 24px 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } .kb-ce-download::before, .kb-ce-download::after, .ce_download:has(.kb-download)::before, .ce_download:has(.kb-download)::after, .kb-download::before, .kb-download::after { content: none !important; display: none !important; } .kb-download, .kb-download * { box-sizing: border-box; } .kb-download { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 2.6vw, 28px); width: 100%; margin: 0; padding: clamp(20px, 3vw, 34px); border: 0; border-radius: var(--radius); outline: 0; background: var(--color-next-blue); color: var(--color-card); box-shadow: none; font-family: var(--font-body); text-decoration: none; } .kb-download-symbol { width: clamp(72px, 8vw, 98px); min-height: clamp(72px, 8vw, 98px); display: grid; place-items: center; align-self: center; background: var(--color-card); color: var(--color-burgund); } .kb-download-symbol span { display: block; color: inherit; font-size: clamp(0.78rem, 1.05vw, 0.95rem); font-weight: 900; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; } .kb-download-content { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .kb-download-kicker { margin: 0 0 9px; color: #D8C7A3; font-size: clamp(0.7rem, 0.95vw, 0.82rem); font-weight: 900; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; } .kb-download-title { max-width: 52rem; margin: 0; color: var(--color-card); font-size: clamp(1.55rem, 3vw, 2.7rem); font-weight: 780; line-height: 1; letter-spacing: -0.055em; overflow-wrap: normal; word-break: normal; hyphens: none; } .kb-download-title a { color: inherit !important; text-decoration: none; transition: color 0.15s ease, opacity 0.15s ease; } .kb-download-title a:hover, .kb-download-title a:focus-visible { color: var(--color-card) !important; opacity: 0.78; outline: none; } .kb-download-title a:focus-visible { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; } .kb-download-meta { display: flex; flex-wrap: wrap; gap: 7px 10px; margin: 12px 0 0; color: rgba(251, 249, 244, 0.72); font-size: clamp(0.86rem, 1.05vw, 0.96rem); font-weight: 750; line-height: 1.2; } .kb-download-meta span + span::before { content: "·"; margin-right: 10px; color: rgba(251, 249, 244, 0.42); } .kb-download-button, .kb-download-cloud, .kb-download-icon, .kb-download-preview { display: none !important; } @media (max-width: 720px) { .kb-ce-download, .ce_download:has(.kb-download), .mod_article .ce_download:has(.kb-download), .kb-detail-extra .ce_download:has(.kb-download), .kb-detail-extra .kb-ce-download { margin: 18px 0 !important; } .kb-download { gap: 14px; padding: 18px; } .kb-download-symbol { width: 64px; min-height: 64px; } .kb-download-symbol span { font-size: 0.72rem; } .kb-download-kicker { margin-bottom: 7px; font-size: 0.68rem; } .kb-download-title { font-size: clamp(1.28rem, 6vw, 1.95rem); line-height: 1.04; } .kb-download-meta { margin-top: 9px; font-size: 0.84rem; } } @media (max-width: 420px) { .kb-download { grid-template-columns: 1fr; } .kb-download-symbol { width: 62px; min-height: 62px; } } .kb-detail-flow-extra-elements .kb-ce-download, .kb-detail-flow-extra-elements .ce_download:has(.kb-download), .kb-detail-flow-extra-elements .kb-download, .kb-detail-extra .kb-ce-download, .kb-detail-extra .ce_download:has(.kb-download), .kb-detail-extra .kb-download { margin-top: 0 !important; margin-bottom: 0 !important; } .ce_gallery:has(.kb-gallery), .mod_article .ce_gallery:has(.kb-gallery), .kb-detail-extra .ce_gallery:has(.kb-gallery) { margin: 28px 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } .ce_gallery:has(.kb-gallery)::before, .ce_gallery:has(.kb-gallery)::after, .kb-gallery::before, .kb-gallery::after { content: none !important; display: none !important; } .kb-detail-flow-extra-elements .kb-gallery-shell, .kb-detail-flow-extra-elements .ce_gallery:has(.kb-gallery), .kb-detail-flow-extra-elements .kb-gallery, .kb-detail-extra .kb-gallery-shell, .kb-detail-extra .ce_gallery:has(.kb-gallery), .kb-detail-extra .kb-gallery { margin-top: 0 !important; margin-bottom: 0 !important; } .kb-gallery, .kb-gallery * { box-sizing: border-box; } .kb-gallery { --kb-gallery-gap: clamp(12px, 1.7vw, 18px); list-style: none !important; display: grid !important; grid-template-columns: repeat(var(--kb-gallery-cols, 3), minmax(0, 1fr)); gap: var(--kb-gallery-gap); width: 100%; margin: 28px 0 !important; padding: 0 !important; border: 0 !important; background: transparent; font-family: var(--font-body); } .kb-gallery-item, .kb-gallery > li, .ce_gallery .kb-gallery > li { float: none !important; clear: none !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; list-style: none !important; background: transparent !important; } .kb-gallery-frame { position: relative; width: 100%; min-width: 0; overflow: hidden; background: var(--color-card); color: var(--color-text); } .kb-gallery-frame figure, .kb-gallery-frame .image_container { display: flex !important; flex-direction: column; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: var(--color-card) !important; box-shadow: none !important; } .kb-gallery-frame a, .kb-gallery-frame picture { display: block; width: 100%; min-width: 0; color: inherit; text-decoration: none; } .kb-gallery-frame a { overflow: hidden; } .kb-gallery-frame img { display: block; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; transition: opacity 0.18s ease, transform 0.25s ease; } .kb-gallery-frame a:hover img, .kb-gallery-frame a:focus-visible img { opacity: 0.88; transform: scale(1.018); } .kb-gallery-frame a:focus-visible { outline: 4px solid var(--color-burgund); outline-offset: -4px; } .kb-gallery-frame figcaption, .kb-gallery-frame .caption { display: block; margin: 0; padding: 10px 12px 11px; background: var(--color-card); color: var(--color-muted); font-size: 0.88rem; font-weight: 650; line-height: 1.35; } .kb-gallery-frame figcaption:empty, .kb-gallery-frame .caption:empty { display: none; } @media (min-width: 721px) { .kb-gallery--cols-5, .kb-gallery--cols-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { .kb-gallery, .kb-gallery--cols-4, .kb-gallery--cols-5, .kb-gallery--cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .ce_gallery:has(.kb-gallery), .mod_article .ce_gallery:has(.kb-gallery), .kb-detail-extra .ce_gallery:has(.kb-gallery), .kb-gallery { margin: 20px 0 !important; } .kb-gallery, .kb-gallery--cols-3, .kb-gallery--cols-4, .kb-gallery--cols-5, .kb-gallery--cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kb-gallery-frame figcaption, .kb-gallery-frame .caption { padding: 8px 9px 9px; font-size: 0.8rem; } } @media (max-width: 430px) { .kb-gallery { --kb-gallery-gap: 10px; grid-template-columns: 1fr; } }