body{font-weight:300;} @-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}} .fadeInUp{} @keyframes fadein{from{opacity:0;top:-114px}to{opacity:1;top:0}} @-moz-keyframes fadein{from{opacity:0;top:-114px}to{opacity:1;top:0}} @-webkit-keyframes fadein{from{opacity:0;top:-114px}to{opacity:1;top:0}} @-o-keyframes fadein{from{opacity:0;top:-114px}to{opacity:1;top:0}} @-webkit-keyframes shine{ 100%{ left:125%; } } @keyframes shine{ 100%{ left:125%; } } /****************preloader*************/ @keyframes ld-jingle{0%{animation-timing-function:cubic-bezier(0.146,0.2111,0.5902,1.3204);transform:rotate(0)}11%{animation-timing-function:cubic-bezier(0.1079,0.1992,-0.6462,0.828);transform:rotate(7.61deg)}23%{animation-timing-function:cubic-bezier(0.0504,0.0951,0.0163,0.9677);transform:rotate(-5.789999999999999deg)}36%{animation-timing-function:cubic-bezier(0.0475,0.0921,0.3134,1.0455);transform:rotate(3.35deg)}49%{animation-timing-function:cubic-bezier(0.0789,0.1565,0.3413,1.0972);transform:rotate(-1.9300000000000002deg)}62%{animation-timing-function:cubic-bezier(0.141,0.2885,0.406,1.1519);transform:rotate(1.12deg)}75%{animation-timing-function:cubic-bezier(0.226,0.4698,0.5031,1.1722);transform:rotate(-0.64deg)}88%{animation-timing-function:cubic-bezier(0.3121,0.5521,0.5655,0.8997);transform:rotate(0.37deg)}100%{transform:rotate(-0.28deg)}} .scroll-progress-bar{position:fixed;z-index:9999;height:3px;top:0;left:0;box-shadow:0px 3px 5px 0px rgba(0,0,0,0.1);} #preloader{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;} #status{width:260px;height:260px;position:absolute;left:50%;top:50%;margin:-130px 0 0 -130px;background-size:260px;} .loader-wrap{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;} .loader{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-50px 0 0 -50px;background:url(../images/loading.png) no-repeat; animation:ld-jingle 1s infinite linear;} /**********************************/ a:link,a:visited,a strong{text-decoration:none;transition:all 0.3s linear 0s;} a:hover{transition:all 0.3s linear 0s;outline:none;} a:focus{outline:none;} .glow-wrap{overflow:hidden;position:absolute;width:100%;height:100%;top:0;margin-top:-10px;z-index:3;} .glow{position:absolute;top:0;left:-75%;z-index:2;display:block;content:'';width:50%;height:100%;background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 100%);-webkit-transform:skewX(-25deg);transform:skewX(-25deg);} .t4-module{margin-bottom:2rem;} .t4-module:first-child{margin-top:2rem;} .btn,.blog-list .item-readmore a{line-height:1.2;padding:5px 15px;border-radius:0px;} .box-shadow{-webkit-box-shadow:5px 0px 15px 0px rgba(0,0,0,0.08);-moz-box-shadow:5px 0px 15px 0px rgba(0,0,0,0.08);box-shadow:5px 0px 15px 0px rgba(0,0,0,0.08);} .com-content-category-blog.blog.avenir .pull-left.item-image{width:42%} .blog.avenir .blog-items .blog-item,.blog-featured .blog-items .blog-item{margin-bottom:2.5rem;} input:autofill{background:none; /* or any other */} input{filter:none;} input.form-control,textarea.form-control{border-radius:0px} blockquote{padding:16px 20px 16px 80px;font-size:18px;font-style:italic;margin:40px 0;line-height:30px;position:relative;clear:both;} .registration fieldset legend{background:none;} .t4-offcanvas .t4-off-canvas-header .close span{line-height:32px;} .pagenavigation .pagination a span{padding:0px 1px} body.layout-boxed .t4-content-inner,body.layout-boxed-solidcolor-bg .t4-content-inner{box-shadow:0 3px 20px 0 rgba(0,0,0,0.19);-webkit-box-shadow:0 3px 20px 0 rgba(0,0,0,0.19);-moz-box-shadow:0 3px 20px 0 rgba(0,0,0,0.19);position:relative;z-index:1;width:1320px;margin:0px auto;overflow:hidden;} body.layout-boxed .t4-content{min-height:100vh; padding:40px 0;} body.layout-boxed #t4-header,body.layout-boxed-solidcolor-bg #t4-header{-webkit-position:fixed !important;position:fixed;top:0;z-index:10;width:inherit;} /********************************************************/ .pagenavigation .pagination a{padding:6px 12px} .logo-image{min-width:287px; min-height:80px;display:grid;align-items:center;} #t4-header{box-shadow:0px 2px 8px 0px rgba(50,50,50,0.04);} .not-at-top #t4-header.t4-sticky{animation:fadein 0.5s;-moz-animation:fadein 0.5s;-webkit-animation:fadein 0.5s;-o-animation:fadein 0.5s;opacity:0.95} .t4-navbar .navbar-nav > li > a::before{content:"";position:absolute;width:0%;height:2px;left:50%;bottom:0px;transform:translate(-50%);transition:all 400ms ease;} .t4-navbar .navbar-nav > li:hover > a::before{width:calc(100% - 2rem);} .t4-megamenu .dropdown-menu{min-width:13rem;padding:0rem;} .t4-megamenu .dropdown-menu li > a,.t4-megamenu .dropdown-menu li > .nav-link,.t4-megamenu .dropdown-menu li .dropdown-item{padding:0.7rem 0.7rem;font-size:80% !important; line-height:1;} .t4-megamenu .dropdown-menu li > a:hover,.t4-megamenu .dropdown-menu li > .nav-link:hover,.t4-megamenu .dropdown-menu li .dropdown-item:hover{padding-left:1rem;} #t4-slider::after{content:""; position:absolute; width:100%; height:46px; bottom:0; left:0; mask-image:url(../images/slider-overlay.png);mask-repeat:repeat-x;-webkit-mask-image:url(../images/slider-overlay.png);-webkit-mask-repeat:repeat-x;} .centered{text-align:center;} .uppercase{text-transform:uppercase;} .noborder,h3.noborder span{border:0;} #t3-content .item-page img,#t3-content img,.t3-sidebar img,img{max-width:100% !important;} .pull-left.item-image img{margin-right:20px;margin-bottom:20px;} .jt-cs.avenir .hover-icons a{background:rgb(255,255,255,0.9);} .jt-cs.avenir .owl-dots{margin-top:20px;} .jt-cs.avenir .owl-dots span{border-radius:0%;border:0;margin:0 5px;} .jt-cs.avenir .owl-carousel .owl-nav .owl-next,.jt-cs.avenir .owl-carousel .owl-nav .owl-prev{top:50%;font-size:30px;margin-top:-10px; font-weight:300; width:41px; height:41px; background-color:transparent;} .jt-cs.avenir .owl-carousel .nav-button.owl-prev{background:url(../images/arrow-l.png) no-repeat center;left:-40px;} .jt-cs.avenir .owl-carousel .nav-button.owl-next{background:url(../images/arrow-r.png) no-repeat center;right:-40px;} body.layout-boxed .jt-cs.avenir .owl-carousel .nav-button.owl-prev,body.layout-boxed-solidcolor-bg .jt-cs.avenir .owl-carousel .nav-button.owl-prev{left:-15px;} body.layout-boxed .jt-cs.avenir .owl-carousel .nav-button.owl-next,body.layout-boxed-solidcolor-bg .jt-cs.avenir .owl-carousel .nav-button.owl-next{right:-15px;} .jt-cs.avenir .jtcs-author-date .fa{margin-right:5px} .jt-cs.avenir .jt-date{margin-right:10px} .jt-cs.avenir p.jt-readmore{margin-top:30px} .jt-cs.avenir .jt-introtext{margin:15px 0} .jtcs_item_wrapper.jt-cs.avenir .jt-title{font-size:1.11em;font-weight:300;} .jtcs_item_wrapper.jt-cs.avenir .owl-carousel.owl-loaded{display:grid} .jt-pretext{text-align:center} .jt-pretext p.pretext{font-weight:300} .jt-cs.avenir.services .jt-introtext{line-height:28px} .jt-cs.avenir.services span.services-icon{border-radius:100%;font-size:40px; color:#fff;width:85px;height:85px;display:grid;place-items:center;position:absolute; top:-42.5px; left:50%; margin-left:-42.5px;} .jt-cs.avenir.services .jt-inner{position:relative;margin-top:85px;padding:85px 55px 55px 55px;text-align:center;} .jt-cs.avenir.services .jt-inner:hover{-webkit-box-shadow:5px 5px 5px 1px rgb(112 112 112 / 8%);-khtml-box-shadow:5px 5px 5px 1px rgb(112 112 112 / 8%);-moz-box-shadow:5px 5px 5px 1px rgb(112 112 112 / 8%);-ms-box-shadow:5px 5px 5px 1px rgb(112 112 112 / 8%);-o-box-shadow:5px 5px 5px 1px rgb(112 112 112 / 8%); box-shadow:5px 5px 5px 1px rgb(112 112 112 / 8%);} .jt-cs.avenir.services .jt-inner:hover span.services-icon{-webkit-transform:translateY(-3px);transform:translateY(-3px);} .com-content-article span.services-icon{display:none;} .jt-cs.avenir.services .jtcs-author-date{justify-content:center;} .jt-cs.avenir.ourmenu span.jt-caption{background:#fff;left:10px;bottom:10px;} .jt-cs.avenir.ourmenu .jt-title{font-weight:400;} /**********/ .our-story-wrap{position:relative;overflow:hidden;} .our-story-wrap:hover .glow,.our-story.left:hover .glow,.our-story.right:hover .glow{-webkit-animation:shine .75s;animation:shine .75s;} .our-story.right{position:relative;z-index:4;} /* ================================================== VIDEO - YENDIF VIEDO SHARE ================================================== */ .yendif-video-share.videos.avenir{padding:10px 0;} .yendif-video-share.videos.avenir .thumbnails .col-md-3,.yendif-video-share.videos.avenir .thumbnails .col-sm-3{} .yendif-video-share.videos.avenir ul.thumbnails,.related-avenir ul,.yendif-video-share.categories.avenir ul{padding:0;} .yendif-video-share.videos.avenir .thumbnails li,.related-avenir li,.yendif-video-share.categories.avenir li,.yendif-video-share.my-videos.avenir li{list-style:none;margin-left:0;} .yendif-video-share.videos.avenir .thumbnail ,.yendif-video-share.categories.avenir .thumbnail{display:block;padding:0px;margin-bottom:15px;line-height:1.42;border:0;border-radius:0px;-webkit-box-shadow:0 2px 15px rgba(0,0,0,.10);-khtml-box-shadow:0 2px 15px rgba(0,0,0,.10);-moz-box-shadow:0 2px 15px rgba(0,0,0,.10);-ms-box-shadow:0 2px 15px rgba(0,0,0,.10);-o-box-shadow:0 2px 15px rgba(0,0,0,.10);box-shadow:0 2px 15px rgba(0,0,0,.10);} .yendif-video-share.videos.avenir [class*=' col-']{padding-left:10px;padding-right:10px;} .yendif-video-share.videos.avenir ul{margin:0;} .yendif-thumbnail .yendif-play-icon.avenir{position:absolute;width:56px;height:56px;margin:-26px 0px 0px -26px;padding:0px;top:50%;left:50%;z-index:2;opacity:0.85;} .yendif-video-share.avenir a:hover{text-decoration:none;} .jt-carousel-yendif-outer.avenir{position:relative;} .yendif-video-share.mod-yendifvideoshare-videos.avenir{position:relative;} .yendif-video-share.mod-yendifvideoshare-videos.avenir .more-btn,.jt-carousel-yendif-outer.avenir .more-btn{position:absolute;right:0px;top:-50px;} .yendif-video-share.avenir .btn-primary{margin-left:10px;} .jt-carousel-yendif-outer.avenir .tns-controls{position:absolute;top:50%;z-index:1;width:100%;} .jt-carousel-yendif-outer.avenir .tns-nav,.jt-carousel-yendif-outer.avenir .tns-controls,.jt-carousel-yendif-outer.avenir .playButton{margin:0;} .jt-carousel-yendif-outer.avenir .tns-controls button{opacity:0.5;background:#000;border-radius:0px;width:40px;height:65px;font-size:24px;margin-top:-65px;color:#fff;} .jt-carousel-yendif-outer.avenir:hover .tns-controls button{opacity:0.6;} .jt-carousel-yendif-outer.avenir .tns-controls [data-controls="prev"],.jt-carousel-yendif-outer.avenir .tns-controls [data-controls="next"]{} .jt-carousel-yendif-outer.avenir .tns-controls [data-controls="prev"]{position:absolute;left:10px;} .jt-carousel-yendif-outer.avenir .tns-controls [data-controls="next"]{position:absolute;right:5px;} .jt-carousel-yendif-outer.avenir .tns-nav button,.jt-cs.avenir .owl-carousel .owl-dot span,#avenir .owl2-dot,.jt-cs.avenir .owl-carousel .owl-dot.active span,#avenir-team .owl2-dots .owl2-dot,#avenir-team .owl2-dots .owl2-dot.active{width:50px;height:8px;border-radius:0px;} .yendif-video-share.videos.avenir .more_btn{position:relative;font-size:12px;font-weight:bold;} .yendif-video-share.videos.avenir .more_btn-inner{position:absolute;right:-11px;top:-56px;line-height:1;padding:2px 5px;} .yendif-video-share.category.avenir ul.thumbnails{padding:0;display:flex;flex-wrap:wrap;} .yendif-video-share.category.avenir ul.thumbnails li{list-style:none;} .yendif-video-share.category.avenir .thumbnail,.related-avenir .thumbnail,.yendif-video-share.my-videos.avenir .thumbnail{display:block;padding:4px;margin-bottom:30px;line-height:1.42;border:1px solid transparent;border-radius:0px;-webkit-transition:border 0.2s ease-in-out;-o-transition:border 0.2s ease-in-out;transition:border 0.2s ease-in-out;-webkit-box-shadow:0 3px 10px rgba(0,0,0,0.1);-moz-box-shadow:0 3px 10px rgba(0,0,0,0.1);box-shadow:0 3px 10px rgba(0,0,0,0.1);} .yendif-video-share.avenir .radio.inline + .radio.inline,.yendif-video-share.avenir .checkbox.inline + .checkbox.inline{margin-left:10px;} .yendif-video-share.avenir .radio.inline,.yendif-video-share.avenir .checkbox.inline{display:inline-block;padding-top:5px;margin-bottom:0;vertical-align:middle;} .yendif-video-share .radio input[type="radio"],.yendif-video-share .checkbox input[type="checkbox"]{margin:2px 10px 2px 2px;position:relative;} .yendif-video-share.avenir .form-search input,.yendif-video-share.avenir .form-inline input,.yendif-video-share.avenir .form-horizontal input,.yendif-video-share.avenir .form-search textarea,.yendif-video-share.avenir .form-inline textarea,.yendif-video-share.avenir .form-horizontal textarea,.yendif-video-share.avenir .form-search select,.yendif-video-share.avenir .form-inline select,.yendif-video-share.avenir .form-horizontal select,.yendif-video-share.avenir .form-search .help-inline,.yendif-video-share.avenir .form-inline .help-inline,.yendif-video-share.avenir .form-horizontal .help-inline,.yendif-video-share.avenir .form-search .uneditable-input,.yendif-video-share.avenir .form-inline .uneditable-input,.yendif-video-share.avenir .form-horizontal .uneditable-input,.yendif-video-share.avenir .form-search .input-prepend,.yendif-video-share.avenir .form-inline .input-prepend,.yendif-video-share.avenir .form-horizontal .input-prepend,.yendif-video-share.avenir .form-search .input-append,.yendif-video-share.avenir .form-inline .input-append,.yendif-video-share.avenir .form-horizontal .input-append{display:inline-block;*display:inline;margin-bottom:0;vertical-align:middle;} .yendif-video-share.video.avenir .input-append input,.yendif-video-share.video.avenir .input-append select,.yendif-video-share.video.avenir .input-append .uneditable-input{-webkit-border-radius:0x;-moz-border-radius:0px;border-radius:0px;position:relative;display:inline-block;margin-bottom:0;margin-right:10px;} .yendif-video-share.video.avenir .breadcrumb{margin-top:15px} .vjs-playlist.white.avenir{border-radius:0px 3px 3px 0px;} .yendif-video-share.videos.avenir .thumbnail .yendif-image.avenir{transition:all 0.2s linear 0s;opacity:1;-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);} .yendif-video-share.videos.avenir .thumbnail:hover .yendif-image.avenir{transition:all 0.2s linear 0s;-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2);-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;} .yendif-video-share.videos.avenir .thumbnail .yendif-image.avenir::before{background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 98%,rgba(0,0,0,0.9) 100%);background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 98%,rgba(0,0,0,0.9) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 98%,rgba(0,0,0,0.9) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#e6000000',GradientType=0 );bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:all ease-in-out 1s;-webkit-transition:all ease-in-out 0.5s;;z-index:3;} .yendif-video-share.videos.avenir .thumbnail:hover .yendif-image.avenir::before{opacity:1;} a.yendif-thumbnail.avenir{overflow:hidden;} .yendif-video-share.category.avenir .yendif-thumbnail .yendif-image,.related-avenir .yendif-thumbnail .yendif-image{transition:all ease-in-out 0.5s;} .yendif-video-share.category.avenir .yendif-thumbnail:hover .yendif-image,.related-avenir .yendif-thumbnail:hover .yendif-image{transition:all ease-in-out 0.5s;-webkit-transition:all ease-in-out 0.5s;transform:scale(1.05,1.05);-webkit-transform:scale(1.05,1.05);overflow:hidden;} .yendif-video-share.category.avenir a.yendif-thumbnail,.related-avenir a.yendif-thumbnail{overflow:hidden;} .yendif-video-share.videos.avenir .thumbnail .caption{padding:10px 15px 15px 15px;} .yendif-video-share.category.avenir .yendif-thumbnail .yendif-image::before,.related-avenir .yendif-thumbnail .yendif-image::before{background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 98%,rgba(0,0,0,0.9) 100%);background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 98%,rgba(0,0,0,0.9) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 98%,rgba(0,0,0,0.9) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#e6000000',GradientType=0 );bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:all ease-in-out 1s;-webkit-transition:all ease-in-out 0.5s;z-index:3;} .yendif-video-share.category.avenir .yendif-thumbnail:hover .yendif-image::before,.yendif-image::before,.related-avenir .yendif-thumbnail:hover .yendif-image::before{opacity:1;} .yendif-video-share.category.avenir .yendif-thumbnail .yendif-play-icon,.related-avenir .yendif-thumbnail .yendif-play-icon{position:absolute;width:56px;height:56px;margin:-25px 0px 0px -25px;opacity:0.80;} .t3-wrapper .yendif-ratings-small .yendif-ratings-stars,.t3-wrapper .yendif-ratings-small .yendif-ratings-stars .yendif-current-ratings,.t3-wrapper .yendif-ratings-small .yendif-ratings-star a:hover{background-image:url(../images/star_small.png) !important;} .yendif-video-share.video.avenir .yendif-video-share-ratings .yendif-video-share-ratings-stars,.yendif-video-share.video.avenir .yendif-video-share-ratings .yendif-video-share-ratings-star a:hover,.yendif-video-share.video.avenir .yendif-video-share-ratings .yendif-video-share-ratings-stars .yendif-video-share-ratings-current{background-image:url( ../images/star.png );} .yendif-video-share.videos.avenir .yendif-video-share-ratings-small .yendif-video-share-ratings-stars,.yendif-video-share.videos.avenir .yendif-video-share-ratings-small .yendif-video-share-ratings-current,.yendif-video-share.videos.avenir .yendif-video-share-ratings-small .yendif-video-share-ratings-star a:hover,.yendif-video-share.videos.avenir .yendif-video-share-ratings-small .yendif-video-share-ratings-stars,.yendif-video-share.videos.avenir .yendif-video-share-ratings-small .yendif-video-share-ratings-current,.yendif-video-share.videos.avenir .yendif-video-share-ratings-small .yendif-video-share-ratings-star a:hover{background-image:url( ../images/star_small.png );} .yendif-video-share.video.avenir .yendif-video-share-ratings-small .yendif-video-share-ratings-stars,.yendif-video-share.video.avenir .yendif-video-share-ratings-small .yendif-video-share-ratings-current,.yendif-video-share.video.avenir .yendif-video-share-ratings-small .yendif-video-share-ratings-star a:hover{background-image:url( ../images/star_small.png );} .yendif-video-share.avenir .yendif-video-share-svg-icon-play{position:absolute;width:42px;height:42px;top:50%;left:50%;margin-top:-21px;margin-left:-21px;padding:2px;border-radius:100%;opacity:0.80;transition:all 0.2s linear 0s;z-index:3;cursor:pointer;} .yendif-video-share.avenir .yendif-video-share-grid-item:hover .yendif-video-share-svg-icon-play,.yendif-video-share.avenir .yendif-video-share-grid-item:hover .yendif-video-share-svg-icon-play-whitebg{opacity:1;transition:all 0.2s linear 0s;} .yendif-video-share.avenir .yendif-video-share-svg-icon-play-whitebg{fill:#fff;opacity:0.7;width:26px;height:30px;top:50%;left:50%;margin-top:-15px;margin-left:-11px;padding:4px;transition:all 0.2s linear 0s;position:absolute;z-index:1} .yendif-video-share.avenir .yendif-play-icon{} .yendif-video-share.avenir .yendif-play-icon::before{content:'';position:absolute;width:42px;height:42px;border-radius:100%;background:transparent;transition:.5s;transform:scale(.9);z-index:1; top:50%;left:50%;margin-top:-21px;margin-left:-21px;transition:all 0.2s linear 0s;} .yendif-video-share.video.avenir .yendif-video-share-search-form{margin-bottom:20px;} .yendif-video-share.videos.avenir.videos .card{padding:5px 5px 15px 5px;margin-bottom:30px} .yendif-video-share.videos.avenir.videos .card-body,.yendif-video-share.video.avenir .yendif-video-share-related.avenir .card-body,.yendif-video-share-categories.avenir .card-body,.yendif-video-share.category.avenir .card-body,.yendif-video-share.mod-yendifvideoshare-videos.avenir .card-body,.jt-carousel-yendif-outer.avenir .yendif-title-text{padding:10px 15px 20px 15px;} .yendif-video-share.videos.avenir .yendif-video-share-ratings,.yendif-video-share.videos.avenir .yendif-video-share-ratings-small{margin:7px 0 7px 0;padding:3PX 0;} .yendif-video-share.category.avenir .card-body{margin-bottom:30px} .yendif-video-share.video.avenir .yendif-video-share-meta-views,.yendif-video-share.video.avenir .yendif-video-share-ratings,.yendif-video-share.video.avenir .yendif-video-share-ratings-small,.yendif-video-share.video.avenir .yendif-video-share-meta-date{margin:7px 0 7px 0;} .yendif-video-share.video.avenir p.lead{margin:20px 0 15px 0;} .yendif-video-share.video.avenir div.yendifplayer{margin-bottom:15px} .yendif-video-share.video.avenir .yendif-video-share-related.avenir .yendif-video-share-grid-item{margin-bottom:30px} .yendif-video-share.video.avenir .yendif-video-share-related.avenir .card{-webkit-box-shadow:5px 0px 15px 0px rgba(0,0,0,0.08);-moz-box-shadow:5px 0px 15px 0px rgba(0,0,0,0.08);box-shadow:5px 0px 15px 0px rgba(0,0,0,0.08);} .yendif-video-share.mod-yendifvideoshare-playlist.avenir .yendif-video-share-playlist-videos{padding:0px 0px 0px 0px} .yendif-video-share.mod-yendifvideoshare-playlist.avenir .yendif-video-share-playlist-videos .flex-grow-1{padding:10px} .mb-2{margin-bottom:20px;} .mb-3{margin-bottom:30px;} .mod-yendifvideoshare-playlist.avenir .yendif-video-share-playlist-item{position:relative;border:0;} .yendif-video-share.mod-yendifvideoshare-playlist.avenir .yendif-video-share-playlist-videos .yendif-video-share-responsive-item .yendif-video-share-image{bottom:15px;} .jt-carousel-yendif-outer.avenir.titleonpic .yendif-title-text,.yendif-video-share.mod-yendifvideoshare-playlist.avenir .flex-grow-1.ms-3{position:absolute;bottom:0;left:0;z-index:1;padding:10px 15px 15px 15px;} .mod-yendifvideoshare-playlist.avenir .yendif-video-share-playlist-videos.right{overflow-y:scroll;overflow-x:hidden;top:15px;scrollbar-width:15px;} .jt-carousel-yendif-outer.avenir.titleonpic .play-btn{cursor:pointer;width:100%;height:100%;position:absolute;z-index:5;} .jt-carousel-yendif-outer.avenir.titleonpic .yendif-video-share-svg-icon-play-whitebg,.jt-carousel-yendif-outer.avenir.titleonpic .yendif-video-share-svg-icon-play{position:absolute;z-index:5;cursor:pointer;} .jt-carousel-yendif-outer.avenir.titleonpic h4{margin:2px 0;} .jt-carousel-yendif-outer.avenir.titleonpic.filmstrip .more-btn{position:absolute;right:80px;top:-50px;} .yendif-video-share.avenir .yendif-video-share-image{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);transition:all 0.6s ease 0s;-webkit-transition:all 0.6s ease 0s;-moz-transition:all 0.6s ease 0s;-o-transition:all 0.6s ease 0s;} .yendif-video-share.avenir .yendif-video-share-image::before{position:absolute;content:"";top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0.8);width:100%;height:100%;opacity:0;transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;} .yendif-video-share.avenir .yendif-video-share-grid-item:hover .yendif-video-share-image{transform:scale3d(1.1,1.1,1) translate3d(0,0,0) perspective(31.25em);-webkit-transform:scale3d(1.1,1.1,1) translate3d(0,0,0) perspective(31.25em);-moz-transform:scale3d(1.1,1.1,1) translate3d(0,0,0) perspective(31.25em);-o-transform:scale3d(1.1,1.1,1) translate3d(0,0,0) perspective(31.25em);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-o-transform-origin:50% 50%;transition:all 0.6s ease 0s;-webkit-transition:all 0.6s ease 0s;-moz-transition:all 0.6s ease 0s;-o-transition:all 0.6s ease 0s;box-shadow:0px 0px 0.75em rgba(0,0,0,0.9);} .yendif-video-share.avenir .yendif-video-share-grid-item:hover .yendif-video-share-image::before{opacity:1;z-index:9;transition:all 0.6s ease 0s;-webkit-transition:all 0.6s ease 0s;-moz-transition:all 0.6s ease 0s;-o-transition:all 0.6s ease 0s;} .yendif-video-share.video.avenir .yendif-video-share-likes-dislikes,.yendif-video-share.video.avenir .yendif-video-share-meta-category{margin:7px 0;} .yendif-video-share.avenir .yendif-video-share-meta{margin-bottom:40px} .yendif-video-share.mod-yendifvideoshare-playlist.avenir .yendif-video-share-playlist-items{margin-right:5px} /*********yendif player module**********/ .mod-yendifvideoshare-player-inner.avenir{margin:0px auto; width:540px; z-index:2; position:relative;padding:80px 0} .mod-yendifvideoshare-player-inner.avenir .yendifplayer{width:540px; height:305px;padding-bottom:0!important;} #t4-subslider-2{background-image:url(../images/subslider-2-bg.jpg); background-repeat:no-repeat; background-attachment:fixed;background-size:cover; background-position:bottom;} #t4-subslider-2::after{content:""; position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.75); z-index:1;} .yendifplayer-description-avenir{margin:0px auto;width:540px; color:#fff;} .t4-subslider-2 h3{color:#fff;} /******JT TESTIMONIAL - TEAM********/ #t4-main-top-2{padding-top:2rem;padding-bottom:2rem;} #avenir-team .testimonial_block{position:relative; overflow:hidden;} #avenir-team .testimonial_block-data{display:block;width:100%;text-align:center;padding:0px 30px 15px 30px; position:relative;transition:all 0.3s linear 0s; z-index:9;} #avenir-team .testimonial_block-name h5{font-weight:400} #avenir-team .testimonial_block-position h6{font-weight:300} #avenir-team .testimonial_block-data .jt-social-icons{transition:all 0.3s linear 0s;transform:translate(0px,100px);opacity:0; padding-top:10px;justify-content:center;position:absolute;width:100%;left:0;} #avenir-team .testimonial_block:hover .jt-social-icons{transition:all 0.5s linear 0s;transform:translate(0px,0px);opacity:1;color:#FFFFFF;} #avenir-team .testimonial_block .jt-social-icons a{color:#FFFFFF;border-radius:100%; width:35px; height:35px; margin:0 5px; display:grid;place-items:center;padding:0;} #avenir-team .testimonial_block::before{transition:all 0.3s linear 0s;position:absolute;content:""; width:100%;height:100%;opacity:0;transform:translate(0%,100%);} #avenir-team .testimonial_block:hover::before{opacity:0.75;transition:all 0.3s linear 0s;transform:translate(0%,0%);} #avenir-team .testimonial_block:hover .testimonial_block-data{transition:all 0.3s linear 0s;transform:translate(0px,-90px);color:#FFFFFF} #avenir-team .testimonial_block:hover .testimonial_block-data a,#avenir-team .testimonial_block:hover .testimonial_block-text{color:#FFFFFF} #avenir-team .testimonial_block-text::after{right:0;} #avenir-team .testimonial_block-data .jt-social-icons-inner{display:flex; width:100%;justify-content:center;} .nav-bottom-right .owl2-nav{bottom:0px;width:90px} #avenir-team .owl2-nav .owl2-prev{background:url(../images/arrow-l-2.png) no-repeat center;width:41px; height:41px; left:-30px;} #avenir-team .owl2-nav .owl2-next{background:url(../images/arrow-r-2.png) no-repeat center;;width:41px; height:41px; right:-30px;} body.layout-boxed-solidcolor-bg #avenir-team .owl2-nav .owl2-prev,body.layout-boxed #avenir-team .owl2-nav .owl2-prev{left:-15px;} body.layout-boxed-solidcolor-bg #avenir-team .owl2-nav .owl2-next,body.layout-boxed #avenir-team .owl2-nav .owl2-next{right:-15px;} #avenir-team .testimonial_block:hover .testimonial_block-name h5,#avenir-team .testimonial_block:hover .testimonial_block-position h6{color:#FFF;} /* ==================================================== PORTFOLIO - SP SIMPLE PORTFOLIO MODULE ==================================================== */ #sp-simpleportfolio{} .sp-simpleportfolio .sp-simpleportfolio-item{padding:10px;} .sp-simpleportfolio.avenir .sp-simpleportfolio-padding{padding:10px;} .sp-simpleportfolio.avenir .sp-simpleportfolio-filter > ul > li > a{border-radius:0px; text-transform:uppercase;} .sp-simpleportfolio.avenir .sp-simpleportfolio-filter > ul > li.active > a{background:none;} .featherdark .featherdark-content,.featherdark{z-index:999!important} .sp-simpleportfolio.avenir .sp-simpleportfolio-padding,.sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info:hover,.sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info{background:none;} .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info{font-size:1rem;line-height:1rem;text-align:center;} .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info h3{font-weight:400} .sp-description.avenir{clear:both;line-height:1.42;text-align:justify} .sp-simpleportfolio-created.avenir-overimage{font-size:19px; line-height:1.1;padding-top:7px;text-align:center;width:60px;height:60px;display:block;overflow:hidden;position:absolute;top:-30px;left:20px;z-index:3} .sp-simpleportfolio .sp-simpleportfolio-item.avenir .sp-simpleportfolio-info h3 a,.sp-simpleportfolio .sp-simpleportfolio-item.avenir .sp-simpleportfolio-info h3{font-weight:bold;font-size:20px;margin-bottom:10px;} .sp-simpleportfolio-client.avenir.col-sm-6,.sp-simpleportfolio-client.avenir.col-md-6{padding-left:0;padding-right:10px;} .sp-simpleportfolio-client.avenir,.sp-simpleportfolio-created.avenir{margin-bottom:15px;} .sp-simpleportfolio-client.avenir h4,.sp-simpleportfolio-created.avenir h4{font-size:13px;} .sp-simpleportfolio-client.avenir h4 span,.sp-simpleportfolio-created.avenir h4 span{font-weight:bold;} .sp-simpleportfolio-info.avenir:hover h4{color:#fff;} .sp-simpleportfolio .sp-simpleportfolio-item.avenir .sp-simpleportfolio-link{text-align:right;margin-top:30px;} .sp-simpleportfolio .sp-simpleportfolio-item.avenir .sp-simpleportfolio-btns a{} .filters.btn-toolbar .btn{height:38px;} span[itemprop="keywords"]{margin-right:5px;} .sp-simpleportfolio .sp-simpleportfolio-description.avenir{width:100%;margin-bottom:15px;} .sp-simpleportfolio-meta.avenir{width:100%;padding-left:0px;} .sp-simpleportfolio .sp-simpleportfolio-filter > ul > li{margin:0 5px 10px 5px;} .sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a{background:none; font-weight:400; font-size:1rem;} .sp-simpleportfolio .sp-simpleportfolio-meta.avenir > div{margin-bottom:10px;padding-bottom:10px} .sp-simpleportfolio-link a.btn{margin-top:15px;margin-bottom:15px;} .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-btns a{border-radius:0px;} .sp-simpleportfolio.avenir .sp-simpleportfolio-meta h4{font-weight:400;} .sp-simpleportfolio.avenir .sp-simpleportfolio-image[class*=' col-']{padding-left:0;} .sp-simpleportfolio.avenir .sp-simpleportfolio-columns-3 .sp-simpleportfolio-item{} .sp-simpleportfolio.avenir.specialwork .sp-simpleportfolio-item .sp-simpleportfolio-btns a{display:inline-block;padding:3px 6px;margin:3px;font-size:12px;letter-spacing:2px;line-height:1;text-align:center;vertical-align:middle;cursor:pointer;color:#fff;-webkit-transition:all .4s;transition:all .4s;} .sp-simpleportfolio.avenir.specialwork .sp-simpleportfolio-item .sp-vertical-middle > div .sp-simpleportfolio-title a{font-size:14px!important;} .tns-outer .playButton{display:none;} .featherlight {z-index:10;} /**************/ #t4-bottom-spot{background-image:url(../images/bottomspot-bg.jpg); background-repeat:no-repeat; background-attachment:fixed;background-size:cover; background-position:bottom} #t4-bottom-spot::after{content:""; position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.75); z-index:1;} .bottomspot-1,.bottomspot-2{position:relative;z-index:2;color:#FFFFFF} .makereservation-left{padding:0.5rem; position:relative;margin-top:4rem;max-width:450px;float:right; color:#FFFFFF;} .makereservation-left p,.makereservation-left h3,.makereservation-left h4,.makereservation-left h5,.makereservation-left h6{color:#FFFFFF;} .makereservation-left::after{content:"";position:absolute;width:100%;height:100%;left:0%;top:0%;opacity:0.4;z-index:-1;} .makereservation-left h3,.makereservation-left h4,.qf3form.quickform_avenir h4{font-weight:400;} #chronoform-quick-reservation-form.nui.form .field .input.iconed > svg.icon{ color:rgba(255,255,255,0.3);} #chronoform-quick-reservation-form label{display:none} #chronoform-quick-reservation-form input,#chronoform-quick-reservation-form textarea{width:100%;border-radius:0px; background:none; color:#fff!important; box-shadow:none;transition:all 0.3s linear 0s;border:1px solid rgba(255,255,255,0.3);} a.chronocredits{ display:none} .nui.button.btn-secondary{background-color:var(--color-secondary)!important;color:var(--color-white)!important;border-radius:0px!important;} #chronoform-quick-reservation-form .nui.button.btn-secondary{ width:100%; font-size:18px; font-weight:400} .bottomspot .module-title {color:#FFFFFF;font-size:18px; text-transform:none;font-family: var(--heading-font-family); font-weight:500; border:0; text-align:center} .bottomspot .module-title span{ border:0} /************/ .t4-footnav .fa{} ul.social_icons,ul.contact_info,.topbar ul.menu{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;padding-left:0;margin-bottom:0;} ul.social_icons li,ul.contact_info li{list-style:none;padding:0 0px 0 10px;} ul.social_icons{justify-content:flex-end} ul.social_icons li a{width:36px;height:36px;border-radius:100%;display:grid;place-items:center;position:relative;overflow:hidden;} ul.social_icons,ul.contact_info,.topbar ul.menu{justify-content:flex-start;} ul.social_icons li a::before{content:"";position:absolute;top:100%;left:0;width:100%;height:100%;transition:.5s;z-index:2;} ul.social_icons li a:hover::before{top:0;} ul.social_icons i{z-index:3;transition:.8s;} ul.social_icons li a:hover .fa{transform:rotateY(360deg);transition:.8s; color:#fff;} .social_icons li a:hover{border:2px solid #fff;} ul.social_icons{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;padding-left:0;margin-bottom:0; margin-top:15px} ul.social_icons li{list-style:none;padding:0 10px 0 0px;} ul.social_icons{justify-content:flex-start} ul.social_icons li a{width:36px;height:36px;border-radius:100%;display:grid;place-items:center;color:#FFF} ul.social_icons .fa{color:#FFF} .t4-footnav .module-title{color:#fff;} .t4-footer .container{padding-top:1.5rem;padding-bottom:1.5rem;} .t4-footer p{margin-bottom:0} .t4-footer .navbar{padding-top:0; padding-bottom:0;} .t4-footer .navbar-nav{display:flex;flex-direction:row;padding-left:0;margin-bottom:0;list-style:none;} .t4-footer .nav > li > a{color:#fff;text-transform:none;display:inline-block; padding:0 10px;} .t4-footer .nav > li::before{content:"";} .t4-footer .nav > li > a:hover,.t4-footer .nav > li > a:active,.t4-footer .nav > li > a:focus{border-bottom:0;} h4.footer-logo{position:relative; padding-left:36px;} h4.footer-logo::before{position:absolute; content:""; left:0; top:0; width:36px; height:36px;mask-image:url(../images/logo-small.svg);-webkit-mask-image:url(../images/logo-small.svg);mask-position:center;;-webkit-mask-position:center;mask-size:cover;-webkit-mask-size:cover;} /**********************/ #t4-breadcrumbs{background-image:url(../images/breadcrumbs-bg.jpg);background-position:top center;background-size:cover;position:relative;background-repeat:no-repeat;min-height:420px;} .t4-section.t4-breadcrumbs{border-top:0;} .breadcrumbs-wrap-avenir{align-items:center;min-height:420px;display:flex;z-index:1;position:relative;} .breadcrumbs-wrap-avenir h1{font-weight:700;color:#FFFFFF; margin:0;} .breadcrumbs-wrap-avenir .breadcrumb-item.active{color:#FFFFFF} #t4-breadcrumbs::before{position:absolute;content:'';width:100%;height:100%;background:-webkit-linear-gradient(90deg,rgba(13,23,25,0.6),rgba(13,23,25,0.10) 100%);left:0px;bottom:0px;right:0px;} .t4-breadcrumbs-inner::after{background:#0d0e0f;position:absolute;top:40%;left:0;bottom:40%;right:0;content:"";opacity:0.7;width:100%;height:20%;} .t4-section.t4-breadcrumbs .breadcrumb li{margin-right:10px; color:#fff;} .breadcrumbs-wrap-avenir .breadcrumb .breadcrumb-item + .breadcrumb-item::before{display:inline-block;color:#fff;} .reservations{display:flex;align-items:center;min-height:42px;font-size:24px;} .reservations .icon{font-size:44px; margin-right:25px} .reservations .text{text-transform:uppercase} /* ======================================= COUNTERS ======================================= */ .counters{width:100%;padding:0px;text-align:center;font-size:50px;font-weight:500; padding:20px 0; margin-top:40px;position:relative;} .counters::after{position:absolute; top:0; left:0; bottom:0; right:0; content:"";opacity:0.1; width:100%; height:100%;} .counters i{font-size:52px;display:block;margin-bottom:10px;margin-right:10px;transition:all 0.2s linear 0s;} .counter-style:hover i ,.counter-style:hover{color:#fff; transition:all 0.2s linear 0s;} .counters h4{display:block;font-size:19px;font-weight:400;margin:0px auto 0 auto;padding:5px 0px 20px 0px;} .counter-style{padding:50px 20px;border:1px solid rgba(255,255,255,.2);position:relative;overflow:hidden;transition:all .8s;-moz-transition:all .8s;-webkit-transition:all .8s;-ms-transition:all .8s;-o-transition:all .8s;z-index:1; margin:0 10px;border-radius:0px; border:1px solid rgba(0,0,0,0.1)} .counters .timer{font-size:50px;line-height:60px;font-weight:600;letter-spacing:3px;margin-bottom:10px;} .counter-style::after{ content:'';width:100%;height:0;position:absolute;bottom:0;left:0;-webkit-transition:0.4s ease-in-out;transition:0.4s ease-in-out;z-index:-1;border-radius:inherit;} .counter-style:hover::after{height:100%;} .counter-style:hover h3,.counter-style:hover h4 ,.counter-style:hover h5,.counter-style:hover h6{color:#fff; transition:all 0.2s linear 0s;} /* =========================================== Our Best Plans - CUSTOM MODULE =========================================== */ .row.pricing-table-1{} .pricing-table-1 .plan{padding:20px;border-radius:5px;} .text-white{color:#FFF;} .pricing-table-1 .plan-title{color:#fff;position:relative;margin:0; font-size:20px;line-height:26px;} .pricing-table-1 .plan-price{font-weight:500;font-size:38px;margin:10px 0;display:inline-block;} .pricing-table-1 .plan-features li{padding:8px 0px;} .pricing-table-1 .plan-features{list-style:outside none none;padding:0 0 20px;margin:0;list-style:outside none none;} .pricing-table-1 a.btn{} .pricing-table-1 .plan-features i{margin-right:8px;color:rgba(255,255,255,0.5);} .pricing-table-1 .featured{margin-top:-10px; padding-bottom:40px;} .pricing-table-1 .plan-select{border-top:1px solid rgba(0,0,0,0.2);padding:20px;text-align:center;} /* ========================================= SKILLS - PROGRESS BARS ========================================= */ .what-we-do{} .what-we-do:hover .glow,.welcome-quantas:hover .glow,.building-experience.right:hover .glow,.about-us-2-right:hover .glow,.about-us-2-left:hover .glow{transform:rotate(45deg) translate(450%,0);transition:all 1s cubic-bezier(0.645,0.045,0.355,1);} .photo:hover img,.photo:hover .glow-wrap{margin-top:0;} .what-we-do:hover img{} @-webkit-keyframes animate-stripes{ from{ background-position:0 0; } to{ background-position:44px 0; } } figure.img-leading{-webkit-box-shadow:5px 0px 15px 0px rgba(0,0,0,0.08);-moz-box-shadow:5px 0px 15px 0px rgba(0,0,0,0.08);box-shadow:5px 0px 15px 0px rgba(0,0,0,0.08);padding:0;width:auto;display:inline-block; margin:30px 0 0 0; float:right; position:relative; z-index:2;} figure.img-leading::before{position:absolute;content:"";width:100%;height:100%;top:-35px;left:-35px;z-index:-1;opacity:0.75;} .ui-progress-bar1{position:relative;height:2px;padding-right:2px;margin-top:-5px;margin-bottom:26px;border-radius:0px;} .ui-progress1{position:relative;display:block;overflow:visible!important;height:2px;border-radius:0px;} .ui-progress1 span.ui-label{bottom:-10px;height:24px;font-weight:300;text-transform:uppercase;color:#fff;position:absolute;right:-5px;line-height:24px;padding-right:10px; padding-left:10px;white-space:nowrap;} .ui-progress-bar1.color{height:24px;border-radius:14px;margin-top:-5px;} .ui-progress1.color{height:24px;border-radius:14px;background-color:#e54c4c;} .accordion-button{padding:8px 10px;} .accordion-button::after{mask-image:url("../images/plusminus.png");-webkit-mask-image:url("../images/plusminus.png");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat; mask-position:center -18px;-webkit-mask-position:center -18px;height:18px;width:18px;} .accordion-button:not(.collapsed)::after{mask:url("../images/plusminus.png");mask-repeat:no-repeat; mask-position:center 0px;} button.accordion-button,.accordion-item:first-of-type{border-radius:0px;} .accordion-button:focus{z-index:3;border-color:none;outline:0;box-shadow:none;} /********************************************************/ .accordion.faq .accordion-button{padding:25px 40px;} .accordion.faq .accordion-button{text-transform:uppercase; font-weight:700;} /***************/ .sidebar-r nav.navbar,.sidebar-l nav.navbar{padding-left:0;} .sidebar-r ul.navbar-nav,.sidebar-l ul.navbar-nav,.sidebar-r ul.navbar-nav li,.sidebar-l ul.navbar-nav li{width:100%;} .sidebar-r ul.navbar-nav .dropdown-toggle::after,.sidebar-l ul.navbar-nav .dropdown-toggle::after{position:absolute; right:0px;} .sidebar-r .navbar-nav > li > a::before,.sidebar-l .navbar-nav > li > a::before{content:"";position:absolute;width:0%;height:2px;left:0%;bottom:0px;transform:translate(0%);transition:all 400ms ease;} .sidebar-r .navbar-nav > li:hover > a::before,.sidebar-l .navbar-nav > li:hover > a::before {width:calc(25%);} .sidebar-r .jtcs_item_wrapper .jt-title,.sidebar-l .jtcs_item_wrapper .jt-title{margin-bottom:0px;line-height:1;} /*************************/ .scroller-avenir h4{margin:0; line-height:1;} /**************************/ table.acym_form.avenir{width:100%;max-width:100%;} table.acym_form.avenir td.onefield{margin-bottom:15px;} .acym_form.avenir input.cell{width:80%;max-width:80%; text-indent:10px} /*========================== Color Preset =========================*/ .presetArea{z-index:9999;padding:15px 13px 47px 13px;background:#FFF;border:5px solid #eee;border-left:0;border-right:0;} .presetArea h3{background:#FFF} .jpanelHandle{} .switch:focus{color:#FFF;} .presetArea h2{color:#fff!important;font-size:30px!important;font-weight:700!important;line-height:23px!important;margin:0;text-align:left;text-transform:uppercase;} .presetArea h2 span{font-weight:100;display:inline-block;width:100%;} .accentColor{width:100%;position:relative;margin-top:0px;} .psTitle{font-size:16px!important;color:#171e36!important;margin:0px;text-align:left;margin-bottom:15px;font-weight:normal;} .psTitle span{font-weight:100;display:inline-block;width:100%;} .accentColor a{background:#3D566E;display:inline-block;height:30px;margin-bottom:6px;margin-right:6px;width:30px;position:relative;cursor:pointer;box-shadow:0px 1px 5px 0px rgba(0,0,0,0.55);} .accentColor a.color1{background:#222222;} .accentColor a.color1::after{border-left-color:#c21500;} .accentColor a.color2{background:#131313;} .accentColor a.color2::after{border-left-color:#c58f59;} .accentColor a.color3{background:#0c1529} .accentColor a.color3::after{border-left-color:#da3c22;} .accentColor a.color4{background:#6c757d} .accentColor a.color4::after{border-left-color:#1e6075;} .accentColor a.color5{background:#ff9d2d;} .accentColor a.color5::after{border-left-color:#eb0029;} .accentColor a.color6{background:#1b3060;} .accentColor a.color6::after{border-left-color:#d8010e;} .accentColor a.color7{background:#ce5f43;} .accentColor a.color7::after{border-left-color:#407286;} .accentColor a.color8{background:#6c757d;} .accentColor a.color8::after{border-left-color:#543459;} .accentColor a.color9{background:#000000;} .accentColor a.color9:::after{border-left-color:#F71A2C;} .accentColor a.color10{background:#04142b;} .accentColor a.color10::after{border-left-color:#e70000;} .accentColor a.color11{background:#1B202B;} .accentColor a.color11::after{border-left-color:#ce3824;} .accentColor a.color12{background:#12222d;} .accentColor a.color12::after{border-left-color:#f4181c;} .accentColor a.color13{background:#19232C;} .accentColor a.color13::after{border-left-color:#E4D804;} .accentColor a:focus,.colorChem a:focus,.layoutstyle a:focus{outline:none;} .accentColor a:after{border-bottom:0 solid transparent;border-left:30px solid #E74C3C;border-top:30px solid transparent;bottom:0;content:"";height:0;left:0;position:absolute;width:0;} .colorChem a.dark1{background:#222222;} .accentColor a.dark1:after{border-bottom:0 solid transparent;border-left:41px solid #c21500;border-top:40px solid transparent;bottom:0;content:"";height:0;left:0;position:absolute;width:0;} .colorChem a.dark2{background:#2b2a30;} .accentColor a.dark2:after{border-bottom:0 solid transparent;border-left:41px solid #b71c1c;border-top:40px solid transparent;bottom:0;content:"";height:0;left:0;position:absolute;width:0;} .colorChem a.dark3{background:#2e2e30;} .accentColor a.dark3:after{border-bottom:0 solid transparent;border-left:41px solid #e46634;border-top:40px solid transparent;bottom:0;content:"";height:0;left:0;position:absolute;width:0;} .colorChem a.dark4{background:#131313;} .accentColor a.dark4:after{border-bottom:0 solid transparent;border-left:41px solid #b78756;border-top:40px solid transparent;bottom:0;content:"";height:0;left:0;position:absolute;width:0;} .colorChem a.dark5{background:#3A4750;} .accentColor a.dark5:after{border-bottom:0 solid transparent;border-left:41px solid #00adb5;border-top:40px solid transparent;bottom:0;content:"";height:0;left:0;position:absolute;width:0;} .colorChem a.dark6{background:#263859;} .accentColor a.dark6:after{border-bottom:0 solid transparent;border-left:41px solid #ff6768;border-top:40px solid transparent;bottom:0;content:"";height:0;left:0;position:absolute;width:0;} .accentColor a.active:before,.accentColor a:hover:before,.accentColor a:focus:before{background:url("../images/tick.png") no-repeat scroll center center;bottom:4px;content:"";height:8px;left:4px;position:absolute;width:11px;z-index:999;transition:all ease 700ms;-moz-transition:all ease 700ms;-webkit-transition:all ease 700ms;-ms-transition:all ease 700ms;-o-transition:all ease 700ms;} .colorChem{width:100%;position:relative;margin-top:15px;} .colorChem a{color:#fff;display:inline-block;font-size:10px;font-weight:600;height:40px;line-height:8px;text-align:center;text-indent:10px;letter-spacing:0.7px;text-transform:uppercase;width:90px;padding-top:16px;margin-right:3px;margin-bottom:13px;transition:all ease 700ms;-moz-transition:all ease 700ms;-webkit-transition:all ease 700ms;-ms-transition:all ease 700ms;-o-transition:all ease 700ms;} .colorChem a:hover,.colorChem a.active{background:rgba(0,0,0,0.8);color:#FFF;} .colorChem a:last-child{margin-right:0px;} .layoutstyle{width:100%;margin-top:20px;position:relative;} .layoutstyle a{display:inline-block;width:auto;height:30px;font-size:10px;line-height:8px;text-transform:uppercase;color:#171e36;font-weight:600;text-align:left;padding-left:40px;padding-top:11px;position:relative;transition:all ease 700ms;-moz-transition:all ease 700ms;-webkit-transition:all ease 700ms;-ms-transition:all ease 700ms;-o-transition:all ease 700ms;} .layoutstyle a.wide{background:url(../images/wide.png) no-repeat left center;} .layoutstyle a.Box{background:url(../images/boxed.png) no-repeat left center;} .layoutstyle a.patterned{background:url(../images/pattern.png) no-repeat left center;display:block;margin:5px 0;} .layoutstyle a.Box.fixedimage,.layoutstyle a.patterned,.layoutstyle a.solidcolor{width:100%;} .layoutstyle a.active:before,.layoutstyle a:hover:before{background:url("../images/tick.png") no-repeat scroll center center rgba(0,0,0,0);bottom:0;content:"";height:23px;left:0;position:absolute;top:0;width:32px;z-index:999;transition:all ease 700ms;-moz-transition:all ease 700ms;-webkit-transition:all ease 700ms;-ms-transition:all ease 700ms;-o-transition:all ease 700ms;} .layoutstyle a:hover{color:#DE3C2F;} .presetBorder{width:100%;height:1px;background:#5e5e5e;margin:30px 0;} .layoutstyle p{font-size:14px;color:#cccccc;line-height:11px;margin-bottom:15px;} .jpanelHandle{z-index:9999;box-shadow:none;} .jpanelContent h2{display:none;} .jpanelHandle .fa,.jpanelHandle img{line-height:100%;padding-top:0px;padding-bottom:4px;} table.dark-colors td{padding-right:15px;border-top:0;} #date-and-doc .bfLabelLeft label{width:20%;font-weight:400;margin:5px 10px 0px 5px;} #date-and-doc button.bfCalendar{height:25px;margin:4px 0px 0px 5px;float:none;border-radius:0px;padding:3px 5px} #date-and-doc section.bfLabelLeft .bfElementGroupNoWrap{width:60%;} #date-and-doc button.bfCalendar [class^="icon-"]::before,#date-and-doc button.bfCalendar [class*=" icon-"]::before{display:block;} #date-and-doc select.chzn-done{width:60%;} .sidepanel-avenir .ui-slideouttab-handle{padding-left:15px;padding-right:15px;} .jPanel.avenir .jpanelContent{} .layout.pattern-bg{background:url("../images/pattern-bg.png") no-repeat top center;} .layout.color-bg{background:url("../images/color-bg.png") no-repeat top center;} .layout.fixed-bg{background:url("../images/fixed-bg.png") no-repeat top center;} .layoutstyle a.layout.pattern-bg,.layoutstyle a.layout.color-bg,.layoutstyle a.layout.fixed-bg{padding-top:25px;padding-right:10px} .layoutstyle .bg-types{display:flex;} .layoutstyle .bg-types a{padding-left:0px;padding-right:15px;text-align:center;line-height:1.4} .t4-offcanvas .t4-off-canvas-header a img {min-height: 45px;} /* ================================================== MOBILE - CSS ================================================== */ @media screen and (max-width:1320px){ body.layout-boxed .t4-content-inner,body.layout-boxed-solidcolor-bg .t4-content-inner{width:100%;} } @media screen and (max-width:990px){ } @media screen and (max-width:767px){ .mod-yendifvideoshare-player-inner.avenir .yendifplayer,.yendifplayer-description-avenir{max-width:100%;} .owl2-dots,.owl2-nav.disabled + .owl2-dots{position:relative;} .jt-cs.avenir .owl-carousel .nav-button.owl-prev,#avenir-team .owl2-nav .owl2-prev{left:-15px;} .jt-cs.avenir .owl-carousel .nav-button.owl-next,#avenir-team .owl2-nav .owl2-next{right:-15px;} .jt-carousel-yendif-outer.avenir .tns-nav button,.jt-cs.avenir .owl-carousel .owl-dot span,#avenir .owl2-dot,.jt-cs.avenir .owl-carousel .owl-dot.active span,#avenir-team .owl2-dots .owl2-dot,#avenir-team .owl2-dots .owl2-dot.active{width:35px;height:8px;} .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info h3,.sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info .h3,.sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info h3 a,.sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info .h3 a{font-size:1rem;line-height:1.2;} .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info{padding:7px;} .sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a{font-size:0.7rem;line-height:1; padding:3px 5px;} .not-at-top #t4-header.t4-sticky{position:-webkit-fixed !important;position:fixed !important;animation:fadein 0.5s;-moz-animation:fadein 0.5s;-webkit-animation:fadein 0.5s;-o-animation:fadein 0.5s;opacity:0.95;width:100%;} .btn.js-offcanvas-trigger,.jpanelHandle{display:none} .t4-header-r > *{margin-left:0;} .sp-simpleportfolio.avenir .sp-simpleportfolio-tags{font-size:0.95rem;} .jt-cs .jtcs-author-date{font-size:70%;} body.layout-boxed .t4-content{padding:0px;} .sp-simpleportfolio.avenir .sp-simpleportfolio-items{margin:0px;} .pricing-table-1 .plan,.counter-style{margin-bottom:30px;} .testimonial_block{display:block;} .navbar-expand-lg{ margin-right:15px;} h1, h2, h3, h4, h5, h6{ font-size:0.95rem} .t4-content-inner{overflow:hidden;} .makereservation-left {max-width:100%;float: none;} } @media only screen and (max-width:540px){ .row{margin-left:0; margin-right:0;} .yendif-video-share.avenir.mod-yendifvideoshare-player{padding:10px} .testimonial_block-data{margin-top:20px;} .sp-simpleportfolio.avenir .sp-simpleportfolio-items .sp-simpleportfolio-item{width:100%;} h1, h2, h3, h4, h5, h6{ margin-bottom:20px;} } @media only screen and (max-width:480px){ } /* Nur die Wellenkante unter dem Slider entfernen */ #t4-slider::after { display: none !important; } /* ========================================================= UDO'S GRILLSCHWEINE – PREMIUM HEADER & HERO Paket 1 ========================================================= */ /* Header transparent über den Hero legen */ #t4-header { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; background: linear-gradient( to bottom, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.38) 55%, rgba(10, 10, 10, 0) 100% ) !important; box-shadow: none !important; border: 0 !important; transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease; } /* Header beim Scrollen */ .not-at-top #t4-header.t4-sticky { position: fixed !important; background: rgba(17, 17, 17, 0.97) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 1; } /* Header-Innenabstände */ #t4-header .container, #t4-header .container-fluid { min-height: 92px; display: flex; align-items: center; } /* Logo */ #t4-header .logo-image { min-width: 0; min-height: 0; } #t4-header .logo-image img { width: auto; max-height: 74px; transition: max-height 0.3s ease; } .not-at-top #t4-header.t4-sticky .logo-image img { max-height: 58px; } /* Navigation weiß auf transparentem Header */ #t4-header .navbar-nav > li > a, #t4-header .navbar-nav > li > .nav-link, #t4-header .t4-megamenu .navbar-nav > li > a { color: #f4e8d0 !important; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.88rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); transition: color 0.25s ease; } /* Hover und aktiver Menüpunkt */ #t4-header .navbar-nav > li:hover > a, #t4-header .navbar-nav > li.active > a, #t4-header .navbar-nav > li > a:hover, #t4-header .navbar-nav > li > a:focus { color: #d12b2b !important; } /* Rote Unterstreichung */ #t4-header .t4-navbar .navbar-nav > li > a::before { background: #d12b2b !important; height: 2px; bottom: -4px; } /* Hamburger-Menü */ #t4-header .navbar-toggler, #t4-header .btn.js-offcanvas-trigger { color: #f4e8d0 !important; border-color: rgba(244, 232, 208, 0.35) !important; } /* Hero unter den transparenten Header ziehen */ #t4-slider { position: relative; margin-top: 0 !important; overflow: hidden; } /* Dezentes dunkles Overlay für bessere Lesbarkeit */ #t4-slider::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.12) 35%, rgba(0, 0, 0, 0.12) 65%, rgba(0, 0, 0, 0.42) 100% ), linear-gradient( to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.03) 55%, rgba(0, 0, 0, 0.38) 100% ); } /* Hauptüberschrift im Hero */ #t4-slider h1, #t4-slider h2, #t4-slider .n2-ss-layer[data-pm="normal"] h1, #t4-slider .n2-ss-layer[data-pm="normal"] h2 { color: #f8f1e5 !important; text-transform: uppercase; letter-spacing: 0.035em; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.9); } /* Claim im Hero */ #t4-slider h3, #t4-slider .n2-ss-layer h3 { color: #d12b2b !important; text-transform: uppercase; font-weight: 700; letter-spacing: 0.025em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); } /* Hero-Fließtext */ #t4-slider p { color: #fffaf2 !important; line-height: 1.6; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); } /* Hero-Button */ #t4-slider a.btn, #t4-slider .n2-ss-button-container a { background: #c62828 !important; color: #fffaf2 !important; border: 1px solid #dca15d !important; border-radius: 2px !important; padding: 12px 26px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32); transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; } #t4-slider a.btn:hover, #t4-slider .n2-ss-button-container a:hover { background: #9f1f1f !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42); } /* Bereits entfernte Wellenkante weiterhin deaktiviert */ #t4-slider::after { display: none !important; content: none !important; } /* Mobile */ @media (max-width: 991px) { #t4-header { background: rgba(17, 17, 17, 0.94) !important; position: relative; } #t4-header .container, #t4-header .container-fluid { min-height: 72px; } #t4-header .logo-image img { max-height: 54px; } #t4-slider h1, #t4-slider h2 { font-size: clamp(2rem, 8vw, 3.2rem) !important; } #t4-slider h3 { font-size: clamp(1.15rem, 4.8vw, 1.8rem) !important; } } /* ========================================================= UDO'S GRILLSCHWEINE – HEADER KORREKTUR Logo lesbar + Premium-Dropdown ========================================================= */ /* Logo und Slogan auf einer dezenten Glasfläche */ #t4-header .logo-image { display: flex; align-items: center; padding: 7px 14px; background: rgba(248, 241, 229, 0.92); border: 1px solid rgba(184, 149, 90, 0.55); border-radius: 4px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Logo klar und unverfälscht darstellen */ #t4-header .logo-image img { opacity: 1 !important; filter: none !important; max-height: 68px; } /* Header oben etwas ruhiger gestalten */ #t4-header { background: linear-gradient( to bottom, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.30) 65%, rgba(10, 10, 10, 0) 100% ) !important; } /* Hauptnavigation besser lesbar */ #t4-header .navbar-nav > li > a, #t4-header .navbar-nav > li > .nav-link { color: #f8f1e5 !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95); } /* Dropdown-Menü dunkel und hochwertig */ #t4-header .t4-megamenu .dropdown-menu { background: rgba(17, 17, 17, 0.97) !important; border: 1px solid rgba(184, 149, 90, 0.65) !important; border-radius: 3px !important; padding: 8px 0 !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.48) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Dropdown-Links */ #t4-header .t4-megamenu .dropdown-menu li > a, #t4-header .t4-megamenu .dropdown-menu li > .nav-link, #t4-header .t4-megamenu .dropdown-menu .dropdown-item { color: #f4e8d0 !important; background: transparent !important; border-bottom: 1px solid rgba(184, 149, 90, 0.16); padding: 11px 18px !important; font-size: 0.86rem !important; font-weight: 500; text-transform: none; text-shadow: none; } /* Dropdown-Hover */ #t4-header .t4-megamenu .dropdown-menu li > a:hover, #t4-header .t4-megamenu .dropdown-menu li > .nav-link:hover, #t4-header .t4-megamenu .dropdown-menu .dropdown-item:hover { color: #ffffff !important; background: #c62828 !important; padding-left: 22px !important; } /* Letzte Linie entfernen */ #t4-header .t4-megamenu .dropdown-menu li:last-child > a { border-bottom: 0; } /* Beim Scrollen bleibt das Logo kompakt */ .not-at-top #t4-header.t4-sticky .logo-image { padding: 5px 12px; background: rgba(248, 241, 229, 0.96); } .not-at-top #t4-header.t4-sticky .logo-image img { max-height: 54px; } /* Mobile */ @media (max-width: 991px) { #t4-header .logo-image { padding: 5px 9px; } #t4-header .logo-image img { max-height: 50px; } } /* ========================================================= UDO'S GRILLSCHWEINE – HERO TYPOGRAFIE & INHALTE ========================================================= */ /* Gesamter Inhaltsblock */ #t4-slider .udo-hero-content { width: min(720px, 90vw) !important; margin: 0 auto !important; text-align: center !important; } /* Hauptüberschrift */ #t4-slider .udo-hero-title, #t4-slider .udo-hero-title * { margin: 0 !important; color: #fff8ed !important; font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif !important; font-size: clamp(42px, 4.5vw, 76px) !important; font-weight: 800 !important; line-height: 0.98 !important; letter-spacing: 0.035em !important; text-transform: uppercase !important; text-align: center !important; text-shadow: 0 3px 4px rgba(0, 0, 0, 0.9), 0 10px 30px rgba(0, 0, 0, 0.65) !important; } /* Claim direkt unter der Hauptüberschrift */ #t4-slider .udo-hero-claim, #t4-slider .udo-hero-claim * { margin: 14px 0 0 !important; color: #d12b2b !important; font-family: Arial, Helvetica, sans-serif !important; font-size: clamp(18px, 2vw, 31px) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: 0.055em !important; text-transform: uppercase !important; text-align: center !important; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95), 0 8px 20px rgba(0, 0, 0, 0.75) !important; } /* Beschreibungstext */ #t4-slider .udo-hero-text, #t4-slider .udo-hero-text * { max-width: 670px !important; margin: 24px auto 0 !important; color: #fffaf2 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: clamp(16px, 1.2vw, 20px) !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: 0.005em !important; text-align: center !important; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95), 0 5px 16px rgba(0, 0, 0, 0.9) !important; } /* Button-Container */ #t4-slider .udo-hero-button { margin-top: 28px !important; text-align: center !important; } /* Button selbst */ #t4-slider .udo-hero-button a, #t4-slider a.udo-hero-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 50px !important; padding: 14px 30px !important; color: #fffaf2 !important; background: linear-gradient(180deg, #cf2d2d 0%, #a91d1d 100%) !important; border: 1px solid #b8955a !important; border-radius: 2px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0.075em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.13) !important; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important; } #t4-slider .udo-hero-button a:hover, #t4-slider a.udo-hero-button:hover { color: #ffffff !important; background: linear-gradient(180deg, #e03737 0%, #b82020 100%) !important; transform: translateY(-3px) !important; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(184, 149, 90, 0.3) !important; } /* Etwas stärkere Abdunklung direkt hinter dem Text */ #t4-slider .udo-hero-content::before { content: ""; position: absolute; inset: -45px -70px; z-index: -1; pointer-events: none; background: radial-gradient( ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.24) 50%, rgba(0, 0, 0, 0) 76% ); } /* Tablet */ @media (max-width: 991px) { #t4-slider .udo-hero-content { width: min(680px, 88vw) !important; } #t4-slider .udo-hero-text, #t4-slider .udo-hero-text * { max-width: 590px !important; } } /* Smartphone */ @media (max-width: 575px) { #t4-slider .udo-hero-content { width: 92vw !important; } #t4-slider .udo-hero-title, #t4-slider .udo-hero-title * { font-size: clamp(34px, 11vw, 48px) !important; line-height: 1 !important; } #t4-slider .udo-hero-claim, #t4-slider .udo-hero-claim * { margin-top: 10px !important; font-size: clamp(15px, 4.5vw, 21px) !important; letter-spacing: 0.025em !important; } #t4-slider .udo-hero-text, #t4-slider .udo-hero-text * { margin-top: 16px !important; font-size: 15px !important; line-height: 1.45 !important; } #t4-slider .udo-hero-button { margin-top: 20px !important; } #t4-slider .udo-hero-button a, #t4-slider a.udo-hero-button { min-height: 46px !important; padding: 12px 22px !important; font-size: 13px !important; } } /* ========================================================= UDO'S GRILLSCHWEINE – LEISTUNGSBEREICH Dunkle Stahlstruktur + Premium-Karten ========================================================= */ /* Gesamter Bereich „Our Best Services“ */ #t4-subslider-0 { position: relative; overflow: hidden; padding-top: 90px !important; padding-bottom: 100px !important; background-color: #161311 !important; background-image: radial-gradient( circle at 50% 0%, rgba(198, 161, 91, 0.13) 0%, rgba(198, 161, 91, 0) 42% ), repeating-linear-gradient( 100deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, rgba(0, 0, 0, 0.025) 1px, rgba(0, 0, 0, 0.025) 4px ), linear-gradient( 135deg, #191614 0%, #25211e 45%, #141210 100% ) !important; border-top: 1px solid rgba(198, 161, 91, 0.45); border-bottom: 1px solid rgba(198, 161, 91, 0.28); } /* Dezenter Lichtschein in der Mitte */ #t4-subslider-0::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.35) 100% ); } /* Inhalte über der Struktur halten */ #t4-main-top-1 > * { position: relative; z-index: 1; } /* Bereichsüberschrift */ #t4-main-top-1 .jt-pretext h1, #t4-main-top-1 .jt-pretext h2, #t4-main-top-1 .jt-pretext h3, #t4-main-top-1 .module-title { color: #f4e8d0 !important; text-transform: uppercase; font-weight: 800 !important; letter-spacing: 0.055em; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.65); } /* Einzelne farbige Wörter in Überschriften */ #t4-main-top-1 .jt-pretext h1 span, #t4-main-top-1 .jt-pretext h2 span, #t4-main-top-1 .jt-pretext h3 span, #t4-main-top-1 .module-title span { color: #c6a15b !important; } /* Unterzeile */ #t4-main-top-1 .jt-pretext p, #t4-main-top-1 .module-intro, #t4-main-top-1 .pretext { color: rgba(244, 232, 208, 0.72) !important; text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.82rem; } /* Goldene Trennlinie unter der Überschrift */ #t4-main-top-1 .jt-pretext::after { content: ""; display: block; width: 82px; height: 2px; margin: 24px auto 8px; background: linear-gradient( 90deg, transparent, #c6a15b, transparent ); } /* Leistungskarten */ #t4-main-top-1 .jt-cs.avenir.services .jt-inner { position: relative; overflow: hidden; min-height: 310px; margin-top: 78px !important; padding: 78px 34px 38px !important; background: linear-gradient( 145deg, rgba(49, 45, 41, 0.96) 0%, rgba(27, 25, 23, 0.98) 58%, rgba(17, 16, 15, 0.99) 100% ) !important; border: 1px solid rgba(198, 161, 91, 0.35); border-radius: 5px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.045); transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } /* Feine Stahlstruktur auf den Karten */ #t4-main-top-1 .jt-cs.avenir.services .jt-inner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 105deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, rgba(0, 0, 0, 0.02) 1px, rgba(0, 0, 0, 0.02) 5px ); } /* Karten-Hover */ #t4-main-top-1 .jt-cs.avenir.services .jt-inner:hover { transform: translateY(-10px); border-color: rgba(198, 161, 91, 0.85); box-shadow: 0 26px 55px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(198, 161, 91, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.065); } /* Icon-Kreis */ #t4-main-top-1 .jt-cs.avenir.services span.services-icon { width: 86px; height: 86px; top: -43px; margin-left: -43px; color: #f4e8d0 !important; background: linear-gradient( 145deg, #c6a15b 0%, #8f6c35 100% ) !important; border: 3px solid #161311; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.28); } /* Kartentitel */ #t4-main-top-1 .jt-cs.avenir.services .jt-title, #t4-main-top-1 .jt-cs.avenir.services .jt-title a, #t4-main-top-1 .jt-cs.avenir.services h3, #t4-main-top-1 .jt-cs.avenir.services h4 { position: relative; z-index: 1; color: #f4e8d0 !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.045em; } /* Kartentext */ #t4-main-top-1 .jt-cs.avenir.services .jt-introtext, #t4-main-top-1 .jt-cs.avenir.services p { position: relative; z-index: 1; color: rgba(244, 232, 208, 0.72) !important; line-height: 1.7; } /* Links innerhalb der Karten */ #t4-main-top-1 .jt-cs.avenir.services a { color: #c6a15b; } #t4-main-top-1 .jt-cs.avenir.services a:hover { color: #ffffff; } /* Tablet */ @media (max-width: 991px) { #t4-main-top-1 { padding-top: 70px !important; padding-bottom: 75px !important; } #t4-main-top-1 .jt-cs.avenir.services .jt-inner { min-height: 285px; margin-bottom: 30px; } } /* Smartphone */ @media (max-width: 575px) { #t4-main-top-1 { padding-top: 55px !important; padding-bottom: 55px !important; } #t4-main-top-1 .jt-cs.avenir.services .jt-inner { min-height: auto; padding: 72px 25px 32px !important; } } /* TEST: tatsächlichen Bereich prüfen */ #t4-subslider { background: #161311 !important; color: #f4e8d0 !important; } /* Trennlinie unter Slider entfernen */ #t4-slider { margin-bottom: 0 !important; border-bottom: none !important; } #t4-subslider { margin-top: 0 !important; border-top: none !important; } #t4-slider:after, #t4-slider:before, #t4-subslider:before{ display:none !important; } /* ========================================================= KORREKTUR: Übergang Hero → Leistungsbereich ========================================================= */ /* Beigen Zwischenraum optisch schließen */ #t4-subslider { margin-top: 0 !important; border-top: 0 !important; /* Überdeckt den hellen Zwischenstreifen nach oben */ box-shadow: 0 -32px 0 #161311 !important; } /* Eventuelle Innencontainer ebenfalls dunkel halten */ #t4-subslider .t4-section-inner, #t4-subslider .container, #t4-subslider .container-fluid { border-top-color: transparent !important; } /* ========================================================= ÜBERSCHRIFT IM LEISTUNGSBEREICH ========================================================= */ #t4-subslider .jt-pretext { text-align: center !important; margin-bottom: 52px !important; } /* Komplette Überschrift lesbar machen */ #t4-subslider .jt-pretext h1, #t4-subslider .jt-pretext h2, #t4-subslider .jt-pretext h3, #t4-subslider .jt-pretext h1 span, #t4-subslider .jt-pretext h2 span, #t4-subslider .jt-pretext h3 span { color: #f4e8d0 !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.055em !important; line-height: 1.1 !important; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important; } /* Größe der Überschrift */ #t4-subslider .jt-pretext h1, #t4-subslider .jt-pretext h2, #t4-subslider .jt-pretext h3 { font-size: clamp(32px, 3.2vw, 54px) !important; margin-bottom: 14px !important; } /* Unterzeile */ #t4-subslider .jt-pretext p, #t4-subslider .jt-pretext .pretext { color: #c6a15b !important; font-size: clamp(14px, 1.2vw, 18px) !important; font-weight: 600 !important; line-height: 1.5 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } /* Goldene Akzentlinie */ #t4-subslider .jt-pretext::after { content: ""; display: block; width: 90px; height: 2px; margin: 24px auto 0; background: linear-gradient( 90deg, transparent 0%, #c6a15b 50%, transparent 100% ); } /* Weiße Trennlinie entfernen */ #t4-subslider{ border-top:none !important; margin-top:-2px !important; } /* Wave Divider entfernen */ .separator, .separator-top, .separator-bottom, .jt-separator, .svg-separator, .shape-divider{ display:none !important; } /* Letzten hellen Streifen zwischen Hero und Leistungen entfernen */ #t4-subslider { position: relative !important; z-index: 10 !important; margin-top: -4px !important; border-top: 0 !important; } /* Unteren Rand des Smart Sliders neutralisieren */ #t4-slider, #t4-slider .n2-ss-slider, #t4-slider .n2-ss-slider-wrapper-inside, #t4-slider .n2-ss-slider-1 { border-bottom: 0 !important; outline: 0 !important; } /* Eventuelle helle Hintergrundkante direkt überdecken */ #t4-subslider::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #161311; z-index: 20; pointer-events: none; } /* ========================================================= UDO'S GRILLSCHWEINE – PREMIUM SERVICEKARTEN passend zum Avenir-Template ========================================================= */ /* Karten */ #t4-subslider .jt-cs.avenir.services .jt-inner { position: relative; overflow: visible; min-height: 300px; padding: 82px 38px 42px !important; background: repeating-linear-gradient( 105deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, rgba(0,0,0,.025) 1px, rgba(0,0,0,.025) 5px ), linear-gradient( 155deg, #373532 0%, #292725 48%, #1d1c1a 100% ) !important; border: 1px solid rgba(198,161,91,.28) !important; border-radius: 4px; box-shadow: 0 18px 38px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } /* Goldene Lichtkante oben */ #t4-subslider .jt-cs.avenir.services .jt-inner::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; background: linear-gradient( 90deg, transparent, #c6a15b, transparent ); opacity: .65; transition: opacity .35s ease; } /* Prägnante rote Linie unten */ #t4-subslider .jt-cs.avenir.services .jt-inner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient( 90deg, #861b18, #d12b2b, #861b18 ); transform: scaleX(.22); transform-origin: center; opacity: .65; transition: transform .35s ease, opacity .35s ease, box-shadow .35s ease; } /* Deutlich sichtbarer Hover */ #t4-subslider .jt-cs.avenir.services .jt-inner:hover { transform: translateY(-10px); border-color: rgba(209,43,43,.9) !important; box-shadow: 0 28px 58px rgba(0,0,0,.6), 0 0 0 1px rgba(209,43,43,.22), 0 0 28px rgba(209,43,43,.22), inset 0 1px 0 rgba(255,255,255,.07); } #t4-subslider .jt-cs.avenir.services .jt-inner:hover::before { opacity: 1; } #t4-subslider .jt-cs.avenir.services .jt-inner:hover::after { transform: scaleX(1); opacity: 1; box-shadow: 0 0 18px rgba(209,43,43,.7); } /* Icon-Plakette */ #t4-subslider .jt-cs.avenir.services span.services-icon { width: 88px !important; height: 88px !important; top: -44px !important; margin-left: -44px !important; color: #fff8ec !important; background: linear-gradient( 145deg, #d4b371 0%, #a77c3c 100% ) !important; border: 4px solid #161311 !important; border-radius: 50%; box-shadow: 0 13px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .35s ease, background .35s ease, box-shadow .35s ease; } /* Icon wird beim Hover deutlich rot */ #t4-subslider .jt-cs.avenir.services .jt-inner:hover span.services-icon { transform: translateY(-5px) scale(1.08); background: linear-gradient( 145deg, #e13a34 0%, #941915 100% ) !important; box-shadow: 0 16px 32px rgba(0,0,0,.58), 0 0 24px rgba(209,43,43,.48), inset 0 1px 0 rgba(255,255,255,.24); } /* Kartenüberschrift */ #t4-subslider .jt-cs.avenir.services .jt-title, #t4-subslider .jt-cs.avenir.services .jt-title a, #t4-subslider .jt-cs.avenir.services h3, #t4-subslider .jt-cs.avenir.services h4 { color: #e7c98e !important; font-size: clamp(20px, 1.45vw, 27px) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: .075em !important; text-transform: uppercase !important; text-shadow: 0 3px 14px rgba(0,0,0,.65); transition: color .35s ease, letter-spacing .35s ease; } #t4-subslider .jt-cs.avenir.services .jt-inner:hover .jt-title, #t4-subslider .jt-cs.avenir.services .jt-inner:hover .jt-title a, #t4-subslider .jt-cs.avenir.services .jt-inner:hover h3, #t4-subslider .jt-cs.avenir.services .jt-inner:hover h4 { color: #ffffff !important; letter-spacing: .095em !important; } /* Beschreibung */ #t4-subslider .jt-cs.avenir.services .jt-introtext, #t4-subslider .jt-cs.avenir.services p { color: rgba(244,232,208,.78) !important; font-size: 16px !important; line-height: 1.7 !important; } /* Tablet und Smartphone */ @media (max-width: 991px) { #t4-subslider .jt-cs.avenir.services .jt-inner { min-height: 270px; margin-bottom: 70px !important; } } @media (max-width: 575px) { #t4-subslider .jt-cs.avenir.services .jt-inner { min-height: auto; padding: 76px 26px 34px !important; } } /* ========================================================= UDO'S GRILLSCHWEINE – ANIMIERTE SERVICEKARTEN ========================================================= */ /* Vorschautexte vollständig ausblenden */ #t4-subslider .jt-cs.avenir.services .jt-introtext, #t4-subslider .jt-cs.avenir.services .jt-inner > p:not(.jt-readmore) { display: none !important; } /* Karten-Inhalt sauber vertikal ausrichten */ #t4-subslider .jt-cs.avenir.services .jt-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 290px !important; padding: 82px 34px 42px !important; /* Metallreflex zunächst außerhalb der sichtbaren Fläche */ background-image: linear-gradient( 115deg, transparent 0%, transparent 35%, rgba(255,255,255,.03) 43%, rgba(255,255,255,.13) 49%, rgba(255,255,255,.03) 55%, transparent 63%, transparent 100% ), repeating-linear-gradient( 105deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, rgba(0,0,0,.025) 1px, rgba(0,0,0,.025) 5px ), linear-gradient( 155deg, #373532 0%, #292725 48%, #1d1c1a 100% ) !important; background-size: 220% 100%, auto, auto !important; background-position: 140% 0, 0 0, 0 0 !important; transition: transform .42s cubic-bezier(.22,.75,.25,1), border-color .35s ease, box-shadow .42s ease, background-position .75s ease !important; } /* Gesamte Karte hebt sich deutlich an */ #t4-subslider .jt-cs.avenir.services .jt-inner:hover { transform: translateY(-10px) !important; border-color: rgba(224,55,48,.9) !important; background-position: -45% 0, 0 0, 0 0 !important; box-shadow: 0 32px 62px rgba(0,0,0,.68), 0 0 0 1px rgba(209,43,43,.22), 0 0 30px rgba(209,43,43,.24), inset 0 1px 0 rgba(255,255,255,.09) !important; } /* Icon-Plakette wächst und erhält goldenen Glow */ #t4-subslider .jt-cs.avenir.services span.services-icon { transition: transform .42s cubic-bezier(.22,.75,.25,1), background .35s ease, box-shadow .42s ease, filter .35s ease !important; } #t4-subslider .jt-cs.avenir.services .jt-inner:hover span.services-icon { transform: translateY(-6px) scale(1.1) !important; background: linear-gradient( 145deg, #efd18e 0%, #c79749 52%, #956824 100% ) !important; filter: brightness(1.12); box-shadow: 0 17px 34px rgba(0,0,0,.62), 0 0 15px rgba(230,190,105,.7), 0 0 34px rgba(198,161,91,.46), inset 0 2px 0 rgba(255,255,255,.38) !important; } /* Goldene Überschrift wird beim Hover heller */ #t4-subslider .jt-cs.avenir.services .jt-title, #t4-subslider .jt-cs.avenir.services .jt-title a { transition: color .35s ease, text-shadow .35s ease, letter-spacing .35s ease !important; } #t4-subslider .jt-cs.avenir.services .jt-inner:hover .jt-title, #t4-subslider .jt-cs.avenir.services .jt-inner:hover .jt-title a { color: #ffe2a5 !important; letter-spacing: .095em !important; text-shadow: 0 3px 15px rgba(0,0,0,.72), 0 0 18px rgba(198,161,91,.26) !important; } /* Roter Balken fährt beim Hover vollständig auf */ #t4-subslider .jt-cs.avenir.services .jt-inner::after { left: 28px !important; right: 28px !important; width: auto !important; transform: scaleX(0) !important; transform-origin: left center !important; opacity: .9 !important; transition: transform .55s cubic-bezier(.22,.75,.25,1), box-shadow .35s ease !important; } #t4-subslider .jt-cs.avenir.services .jt-inner:hover::after { transform: scaleX(1) !important; box-shadow: 0 0 10px rgba(209,43,43,.8), 0 0 24px rgba(209,43,43,.48) !important; } /* Read-more-Bereich */ #t4-subslider .jt-cs.avenir.services p.jt-readmore { display: block !important; margin: 24px 0 0 !important; padding: 0 !important; opacity: 0; transform: translateY(18px); transition: opacity .38s ease .05s, transform .42s cubic-bezier(.22,.75,.25,1) .05s !important; } /* Link fährt elegant nach oben */ #t4-subslider .jt-cs.avenir.services .jt-inner:hover p.jt-readmore { opacity: 1; transform: translateY(0); } /* Stil des Links */ #t4-subslider .jt-cs.avenir.services p.jt-readmore a { display: inline-flex !important; align-items: center; justify-content: center; min-height: 42px; padding: 11px 20px !important; color: #f3d599 !important; background: rgba(198,161,91,.055) !important; border: 1px solid rgba(198,161,91,.72) !important; border-radius: 2px !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .11em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.25); transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease !important; } /* Button-Hover */ #t4-subslider .jt-cs.avenir.services p.jt-readmore a:hover { color: #ffffff !important; background: linear-gradient( 180deg, #d93731 0%, #951915 100% ) !important; border-color: #e14a43 !important; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(0,0,0,.42), 0 0 18px rgba(209,43,43,.38) !important; } /* Smartphone: Link immer sichtbar, da es dort kein echtes Hover gibt */ @media (max-width: 991px) { #t4-subslider .jt-cs.avenir.services p.jt-readmore { opacity: 1; transform: none; } } /* ========================================================= UDO'S GRILLSCHWEINE PREMIUM SERVICE CARDS – FINAL OVERRIDE ========================================================= */ /* --------------------------------------------------------- 1. Karten-Grundlayout --------------------------------------------------------- */ #t4-subslider .jt-cs.avenir.services .jt-inner { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 340px !important; padding: 105px 36px 52px !important; margin-top: 70px !important; overflow: visible !important; background-image: linear-gradient( 112deg, transparent 0%, transparent 35%, rgba(255, 255, 255, 0.025) 42%, rgba(255, 255, 255, 0.12) 49%, rgba(255, 255, 255, 0.025) 56%, transparent 64%, transparent 100% ), repeating-linear-gradient( 102deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, rgba(0, 0, 0, 0.025) 1px, rgba(0, 0, 0, 0.025) 5px ), linear-gradient( 155deg, #34312d 0%, #252321 52%, #171614 100% ) !important; background-size: 220% 100%, auto, auto !important; background-position: 145% 0, 0 0, 0 0 !important; border: 1px solid rgba(206, 168, 92, 0.58) !important; border-radius: 3px !important; box-shadow: 0 20px 42px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 45px rgba(0, 0, 0, 0.22) !important; transition: transform 0.45s cubic-bezier(.22, .75, .25, 1), box-shadow 0.45s ease, border-color 0.35s ease, background-position 0.8s ease !important; } /* Oberer goldener Lichtreflex */ #t4-subslider .jt-cs.avenir.services .jt-inner::before { content: "" !important; position: absolute !important; top: -1px !important; left: 0 !important; right: 0 !important; width: auto !important; height: 2px !important; background: linear-gradient( 90deg, transparent 0%, rgba(224, 190, 112, 0.35) 18%, #f0cf83 50%, rgba(224, 190, 112, 0.35) 82%, transparent 100% ) !important; opacity: 0.72 !important; pointer-events: none !important; } /* Roter Glutbalken unten */ #t4-subslider .jt-cs.avenir.services .jt-inner::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important; width: 100% !important; height: 4px !important; background: linear-gradient( 90deg, transparent 0%, #841713 12%, #e32923 50%, #841713 88%, transparent 100% ) !important; transform: scaleX(0.24) !important; transform-origin: center !important; opacity: 0.78 !important; box-shadow: 0 0 7px rgba(224, 38, 31, 0.55), 0 0 18px rgba(224, 38, 31, 0.28) !important; transition: transform 0.6s cubic-bezier(.22, .75, .25, 1), opacity 0.35s ease, box-shadow 0.35s ease !important; } /* --------------------------------------------------------- 2. Hover der gesamten Karte --------------------------------------------------------- */ #t4-subslider .jt-cs.avenir.services .jt-inner:hover { transform: translateY(-10px) !important; background-position: -50% 0, 0 0, 0 0 !important; border-color: rgba(236, 199, 112, 0.95) !important; box-shadow: 0 34px 68px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(212, 171, 82, 0.2), 0 0 34px rgba(212, 171, 82, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 55px rgba(0, 0, 0, 0.26) !important; } #t4-subslider .jt-cs.avenir.services .jt-inner:hover::after { transform: scaleX(1) !important; opacity: 1 !important; box-shadow: 0 0 10px rgba(235, 41, 33, 0.9), 0 0 26px rgba(235, 41, 33, 0.58) !important; } /* --------------------------------------------------------- 3. Goldene Icon-Plakette wieder sichtbar machen --------------------------------------------------------- */ #t4-subslider .jt-cs.avenir.services span.services-icon { display: grid !important; place-items: center !important; position: absolute !important; z-index: 8 !important; top: -48px !important; left: 50% !important; width: 96px !important; height: 96px !important; margin-left: -48px !important; color: #171411 !important; background: radial-gradient( circle at 35% 25%, #fff0ba 0%, #e2b85f 30%, #bd8836 68%, #7d501d 100% ) !important; border: 4px solid #171411 !important; border-radius: 50% !important; outline: 1px solid rgba(226, 185, 97, 0.72) !important; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 222, 143, 0.32), inset 0 2px 1px rgba(255, 255, 255, 0.46), inset 0 -8px 16px rgba(91, 51, 10, 0.3) !important; filter: none !important; opacity: 1 !important; visibility: visible !important; transition: transform 0.45s cubic-bezier(.22, .75, .25, 1), filter 0.35s ease, box-shadow 0.45s ease !important; } /* Icon selbst */ #t4-subslider .jt-cs.avenir.services span.services-icon i, #t4-subslider .jt-cs.avenir.services span.services-icon svg { color: #171411 !important; fill: #171411 !important; font-size: 38px !important; transition: transform 0.4s ease, color 0.35s ease, fill 0.35s ease !important; } /* Goldener Glow und Wachstum */ #t4-subslider .jt-cs.avenir.services .jt-inner:hover span.services-icon { transform: translateY(-7px) scale(1.1) !important; filter: brightness(1.13) saturate(1.08) !important; box-shadow: 0 19px 38px rgba(0, 0, 0, 0.68), 0 0 15px rgba(255, 215, 125, 0.85), 0 0 38px rgba(211, 163, 67, 0.58), inset 0 2px 1px rgba(255, 255, 255, 0.52), inset 0 -8px 16px rgba(91, 51, 10, 0.27) !important; } #t4-subslider .jt-cs.avenir.services .jt-inner:hover span.services-icon i, #t4-subslider .jt-cs.avenir.services .jt-inner:hover span.services-icon svg { transform: scale(1.07) !important; } /* --------------------------------------------------------- 4. Kartentitel --------------------------------------------------------- */ #t4-subslider .jt-cs.avenir.services .jt-title, #t4-subslider .jt-cs.avenir.services .jt-title a, #t4-subslider .jt-cs.avenir.services h3, #t4-subslider .jt-cs.avenir.services h4 { width: 100% !important; max-width: 330px !important; margin: 0 auto !important; color: #e8c985 !important; font-size: clamp(21px, 1.55vw, 29px) !important; font-weight: 800 !important; line-height: 1.16 !important; letter-spacing: 0.06em !important; text-align: center !important; text-transform: uppercase !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.05) !important; transition: color 0.35s ease, text-shadow 0.35s ease, letter-spacing 0.35s ease !important; } #t4-subslider .jt-cs.avenir.services .jt-inner:hover .jt-title, #t4-subslider .jt-cs.avenir.services .jt-inner:hover .jt-title a, #t4-subslider .jt-cs.avenir.services .jt-inner:hover h3, #t4-subslider .jt-cs.avenir.services .jt-inner:hover h4 { color: #ffe0a0 !important; letter-spacing: 0.075em !important; text-shadow: 0 4px 15px rgba(0, 0, 0, 0.82), 0 0 19px rgba(217, 172, 78, 0.32) !important; } /* --------------------------------------------------------- 5. Beschreibung vollständig entfernen --------------------------------------------------------- */ #t4-subslider .jt-cs.avenir.services .jt-introtext, #t4-subslider .jt-cs.avenir.services .jt-inner > p:not(.jt-readmore) { display: none !important; } /* --------------------------------------------------------- 6. Roter kurzer Trenner unter der Überschrift --------------------------------------------------------- */ #t4-subslider .jt-cs.avenir.services .jt-title::after, #t4-subslider .jt-cs.avenir.services h3::after, #t4-subslider .jt-cs.avenir.services h4::after { content: "" !important; display: block !important; width: 78px !important; height: 3px !important; margin: 25px auto 0 !important; background: linear-gradient( 90deg, transparent, #df2c25, transparent ) !important; box-shadow: 0 0 10px rgba(223, 44, 37, 0.32) !important; } /* --------------------------------------------------------- 7. Read-more-Link / CTA --------------------------------------------------------- */ #t4-subslider .jt-cs.avenir.services p.jt-readmore { display: block !important; margin: 27px 0 0 !important; padding: 0 !important; opacity: 0 !important; transform: translateY(20px) !important; transition: opacity 0.4s ease 0.05s, transform 0.45s cubic-bezier(.22, .75, .25, 1) 0.05s !important; } /* Button wird beim Karten-Hover eingeblendet */ #t4-subslider .jt-cs.avenir.services .jt-inner:hover p.jt-readmore { opacity: 1 !important; transform: translateY(0) !important; } /* CTA-Link */ #t4-subslider .jt-cs.avenir.services p.jt-readmore a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-width: 210px !important; min-height: 48px !important; padding: 13px 23px !important; color: #f0cf88 !important; background: linear-gradient( 180deg, rgba(33, 29, 25, 0.92), rgba(17, 15, 13, 0.98) ) !important; border: 1px solid rgba(224, 184, 93, 0.78) !important; border-left-color: #df2c25 !important; border-radius: 3px !important; font-size: 0 !important; font-weight: 800 !important; line-height: 1 !important; text-decoration: none !important; text-transform: uppercase !important; box-shadow: 0 10px 23px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07), -4px 0 13px rgba(223, 44, 37, 0.14) !important; transition: transform 0.3s ease, color 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } /* Flammensymbol */ #t4-subslider .jt-cs.avenir.services p.jt-readmore a::before { content: "🔥" !important; font-size: 17px !important; line-height: 1 !important; filter: saturate(1.2) !important; } /* Buttontext unabhängig vom Text des Moduls */ #t4-subslider .jt-cs.avenir.services p.jt-readmore a::after { content: "FEUER FREI →" !important; color: inherit !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0.12em !important; } /* CTA-Hover */ #t4-subslider .jt-cs.avenir.services p.jt-readmore a:hover { color: #ffffff !important; background: linear-gradient( 180deg, #d7332d 0%, #8f1612 100% ) !important; border-color: #ef6a61 !important; transform: translateY(-3px) !important; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.52), 0 0 17px rgba(231, 48, 40, 0.54), 0 0 32px rgba(231, 48, 40, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; } /* --------------------------------------------------------- 8. Mobile und Touch --------------------------------------------------------- */ @media (max-width: 991px) { #t4-subslider .jt-cs.avenir.services .jt-inner { min-height: 340px !important; margin-bottom: 85px !important; } /* Auf Touchgeräten Link immer anzeigen */ #t4-subslider .jt-cs.avenir.services p.jt-readmore { opacity: 1 !important; transform: none !important; } } @media (max-width: 575px) { #t4-subslider .jt-cs.avenir.services .jt-inner { min-height: 330px !important; padding: 100px 24px 42px !important; } #t4-subslider .jt-cs.avenir.services p.jt-readmore a { min-width: 190px !important; } } /* ========================================================= UDO'S GRILLSCHWEINE – PREMIUM FEUER-FREI BUTTON ========================================================= */ /* Button-Container weich einblenden */ #t4-subslider .jt-cs.avenir.services p.jt-readmore { display: block !important; margin: 28px 0 0 !important; padding: 0 !important; opacity: 0 !important; transform: translateY(20px) !important; transition: opacity .38s ease .05s, transform .46s cubic-bezier(.22,.75,.25,1) .05s !important; } /* Beim Karten-Hover sichtbar */ #t4-subslider .jt-cs.avenir.services .jt-inner:hover p.jt-readmore { opacity: 1 !important; transform: translateY(0) !important; } /* Eigentliche Buttonform */ #t4-subslider .jt-cs.avenir.services p.jt-readmore a { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 13px !important; min-width: 245px !important; min-height: 54px !important; padding: 14px 28px !important; color: #efd18f !important; background: linear-gradient( 180deg, rgba(35,31,27,.98) 0%, rgba(16,14,12,.99) 100% ) !important; border: 1px solid #d7ad55 !important; border-left: 2px solid #e3352e !important; border-right: 2px solid #d7ad55 !important; border-radius: 0 !important; clip-path: polygon( 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px ); font-size: 0 !important; font-weight: 800 !important; line-height: 1 !important; text-decoration: none !important; text-transform: uppercase !important; box-shadow: 0 12px 28px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08), -4px 0 15px rgba(225,48,40,.18), 4px 0 15px rgba(215,173,85,.10) !important; overflow: hidden !important; transition: transform .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease !important; } /* Roter Lichtschein von links */ #t4-subslider .jt-cs.avenir.services p.jt-readmore a::before { content: "🔥" !important; display: inline-block !important; color: #e53931 !important; font-size: 18px !important; line-height: 1 !important; filter: saturate(1.25) drop-shadow(0 0 7px rgba(229,57,49,.75)) !important; transition: transform .3s ease, filter .3s ease !important; } /* Buttontext und Pfeil */ #t4-subslider .jt-cs.avenir.services p.jt-readmore a::after { content: "FEUER FREI ⟶" !important; color: inherit !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .13em !important; white-space: nowrap !important; } /* Gold-/Rot-Glow beim direkten Button-Hover */ #t4-subslider .jt-cs.avenir.services p.jt-readmore a:hover { color: #fff3d0 !important; background: linear-gradient( 180deg, rgba(58,34,27,.98) 0%, rgba(23,14,12,.99) 100% ) !important; border-color: #f0c96f !important; border-left-color: #f0443b !important; transform: translateY(-3px) scale(1.025) !important; box-shadow: 0 17px 34px rgba(0,0,0,.6), 0 0 14px rgba(231,48,40,.55), 0 0 30px rgba(214,171,80,.24), inset 0 1px 0 rgba(255,255,255,.13) !important; } #t4-subslider .jt-cs.avenir.services p.jt-readmore a:hover::before { transform: scale(1.14) !important; filter: saturate(1.4) drop-shadow(0 0 11px rgba(238,62,52,.95)) !important; } /* Feiner wandernder Metallreflex */ #t4-subslider .jt-cs.avenir.services p.jt-readmore a span::before { content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; background: linear-gradient( 115deg, transparent, rgba(255,255,255,.16), transparent ); transform: skewX(-18deg); transition: left .65s ease; } #t4-subslider .jt-cs.avenir.services p.jt-readmore a:hover span::before { left: 130%; } /* Touchgeräte: Button immer sichtbar */ @media (max-width: 991px) { #t4-subslider .jt-cs.avenir.services p.jt-readmore { opacity: 1 !important; transform: none !important; } #t4-subslider .jt-cs.avenir.services p.jt-readmore a { min-width: 220px !important; } } /* ========================================================= FEUER-FREI-BUTTON IMMER SICHTBAR ========================================================= */ #t4-subslider .jt-cs.avenir.services p.jt-readmore { display: block !important; opacity: 1 !important; transform: translateY(0) !important; margin: 28px 0 0 !important; } /* Beim Hover fährt der Button nur leicht nach oben */ #t4-subslider .jt-cs.avenir.services .jt-inner:hover p.jt-readmore { opacity: 1 !important; transform: translateY(-4px) !important; } #t4-subslider .jt-cs.avenir.services .jt-inner { min-height: 370px !important; } /* =========================================================== UDO'S PREMIUM TYPOGRAFIE (überschreibt alle vorhandenen Einstellungen) =========================================================== */ /* ===== Große Bereichsüberschrift ===== */ .section-title h2, .jt-heading h2, .module-title h2{ font-size:64px !important; font-weight:300 !important; letter-spacing:6px !important; line-height:1.08 !important; text-transform:uppercase !important; color:#f1d79a !important; text-shadow: 0 2px 18px rgba(0,0,0,.45); margin-bottom:18px !important; } /* ===== Unterzeile ===== */ .section-title p, .section-title h5, .jt-heading p{ font-size:19px !important; letter-spacing:3px !important; font-weight:400 !important; color:#cdbda1 !important; text-transform:uppercase; } /* =========================================================== PREMIUM KARTENTITEL =========================================================== */ #t4-subslider .jt-cs.avenir.services h3{ font-size:26px !important; font-weight:500 !important; letter-spacing:2px !important; line-height:1.25 !important; color:#e7c67a !important; text-transform:uppercase !important; text-shadow: 0 2px 10px rgba(0,0,0,.30); transition:.45s ease; } /* Hover */ #t4-subslider .jt-cs.avenir.services .jt-inner:hover h3{ color:#ffe5a8 !important; letter-spacing:2.8px !important; transform:translateY(-2px); text-shadow: 0 0 18px rgba(255,214,120,.35); } /* ========================================================= UDO'S GRILLSCHWEINE – PREMIUM BEREICHSÜBERSCHRIFT finaler Override für den Leistungsbereich ========================================================= */ /* Gesamter Überschriftenblock */ #t4-subslider .jt-pretext { position: relative !important; width: 100% !important; max-width: 1250px !important; margin: 0 auto 105px !important; padding: 0 35px !important; text-align: center !important; } /* Große Hauptüberschrift */ #t4-subslider .jt-pretext h1, #t4-subslider .jt-pretext h2, #t4-subslider .jt-pretext h3 { display: block !important; width: 100% !important; max-width: 1050px !important; margin: 0 auto !important; padding: 0 !important; color: #f0ce88 !important; font-size: clamp(42px, 4.5vw, 76px) !important; font-weight: 500 !important; line-height: 1.03 !important; letter-spacing: 0.075em !important; text-align: center !important; text-transform: uppercase !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.42), 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 26px rgba(198, 161, 91, 0.10) !important; } /* Spans innerhalb der Überschrift nicht separat verkleinern */ #t4-subslider .jt-pretext h1 span, #t4-subslider .jt-pretext h2 span, #t4-subslider .jt-pretext h3 span { display: inline !important; width: auto !important; max-width: none !important; color: inherit !important; font: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; white-space: normal !important; } /* Roter Glutstrich direkt unter der Hauptüberschrift */ #t4-subslider .jt-pretext h1::after, #t4-subslider .jt-pretext h2::after, #t4-subslider .jt-pretext h3::after { content: "" !important; display: block !important; width: 92px !important; height: 3px !important; margin: 27px auto 22px !important; background: linear-gradient( 90deg, transparent 0%, #8f1713 18%, #e5362f 50%, #8f1713 82%, transparent 100% ) !important; box-shadow: 0 0 8px rgba(229, 54, 47, 0.72), 0 0 22px rgba(229, 54, 47, 0.34) !important; } /* Kleinere Unterzeile */ #t4-subslider .jt-pretext p, #t4-subslider .jt-pretext .pretext, #t4-subslider .jt-pretext h4, #t4-subslider .jt-pretext h5, #t4-subslider .jt-pretext h6 { display: block !important; width: 100% !important; max-width: 980px !important; margin: 0 auto !important; padding: 0 !important; color: rgba(244, 232, 208, 0.80) !important; font-size: clamp(14px, 1.15vw, 19px) !important; font-weight: 600 !important; line-height: 1.55 !important; letter-spacing: 0.15em !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.62) !important; } /* Goldene feine Abschlusslinie */ #t4-subslider .jt-pretext::after { content: "" !important; display: block !important; width: 125px !important; height: 1px !important; margin: 29px auto 0 !important; background: linear-gradient( 90deg, transparent 0%, rgba(198, 161, 91, 0.35) 15%, #e0bd72 50%, rgba(198, 161, 91, 0.35) 85%, transparent 100% ) !important; box-shadow: 0 0 12px rgba(198, 161, 91, 0.26) !important; } /* Karten etwas näher an den Überschriftenblock rücken */ #t4-subslider .jt-cs.avenir.services { margin-top: 0 !important; } /* Tablet */ @media (max-width: 991px) { #t4-subslider .jt-pretext { margin-bottom: 85px !important; padding: 0 25px !important; } #t4-subslider .jt-pretext h1, #t4-subslider .jt-pretext h2, #t4-subslider .jt-pretext h3 { font-size: clamp(38px, 6.5vw, 58px) !important; letter-spacing: 0.055em !important; } } /* Smartphone */ @media (max-width: 575px) { #t4-subslider .jt-pretext { margin-bottom: 70px !important; padding: 0 18px !important; } #t4-subslider .jt-pretext h1, #t4-subslider .jt-pretext h2, #t4-subslider .jt-pretext h3 { font-size: clamp(30px, 9vw, 43px) !important; line-height: 1.08 !important; letter-spacing: 0.035em !important; } #t4-subslider .jt-pretext p, #t4-subslider .jt-pretext .pretext, #t4-subslider .jt-pretext h4, #t4-subslider .jt-pretext h5, #t4-subslider .jt-pretext h6 { font-size: 13px !important; line-height: 1.55 !important; letter-spacing: 0.09em !important; } } /* =========================================================== UDO'S – BREITE PREMIUM-ÜBERSCHRIFT =========================================================== */ /* Überschriftenblock breiter */ #t4-subslider .jt-pretext{ max-width:1400px !important; width:95% !important; margin:0 auto 70px !important; } /* Hauptüberschrift */ #t4-subslider .jt-pretext h1, #t4-subslider .jt-pretext h2, #t4-subslider .jt-pretext h3{ display:block !important; width:100% !important; max-width:none !important; font-size:clamp(48px,4vw,72px) !important; line-height:1.15 !important; letter-spacing:4px !important; white-space:normal !important; word-break:normal !important; text-align:center !important; } /* Zeilenumbrüche des Templates entfernen */ #t4-subslider .jt-pretext h1 br, #t4-subslider .jt-pretext h2 br, #t4-subslider .jt-pretext h3 br{ display:none !important; } /* ========================================================= UDO'S – HAUPTÜBERSCHRIFT AUF DESKTOP IN EINER ZEILE ========================================================= */ @media (min-width: 992px) { /* Gesamter Überschriftenbereich */ #t4-subslider .jt-pretext { display: block !important; width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; overflow: visible !important; text-align: center !important; } /* Hauptüberschrift */ #t4-subslider .jt-pretext h1, #t4-subslider .jt-pretext h2, #t4-subslider .jt-pretext h3 { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; font-size: clamp(34px, 3.1vw, 58px) !important; line-height: 1.1 !important; letter-spacing: 0.09em !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; overflow: visible !important; text-overflow: clip !important; text-align: center !important; } /* Alle inneren Elemente in dieselbe Zeile zwingen */ #t4-subslider .jt-pretext h1 *, #t4-subslider .jt-pretext h2 *, #t4-subslider .jt-pretext h3 * { display: inline !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; font: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; white-space: nowrap !important; } /* Manuelle HTML-Zeilenumbrüche entfernen */ #t4-subslider .jt-pretext h1 br, #t4-subslider .jt-pretext h2 br, #t4-subslider .jt-pretext h3 br { display: none !important; } } /* ========================================================= TABLET UND SMARTPHONE – WIEDER SAUBER UMBRECHEN ========================================================= */ @media (max-width: 991px) { #t4-subslider .jt-pretext h1, #t4-subslider .jt-pretext h2, #t4-subslider .jt-pretext h3, #t4-subslider .jt-pretext h1 *, #t4-subslider .jt-pretext h2 *, #t4-subslider .jt-pretext h3 * { white-space: normal !important; } } /* ========================================================= UDO'S – FEINSCHLIFF ÜBERSCHRIFT + ABSTAND ZU DEN BOXEN ========================================================= */ /* Überschriftenbereich insgesamt kompakter */ #t4-subslider .jt-pretext { margin-bottom: 42px !important; } /* Große Hauptüberschrift etwas präsenter */ #t4-subslider .jt-pretext > :first-child::before { font-size: clamp(34px, 3vw, 58px) !important; font-weight: 400 !important; line-height: 1.08 !important; letter-spacing: 0.07em !important; } /* Roter Glutstrich etwas näher an die Überschrift */ #t4-subslider .jt-pretext > :first-child::after { margin-top: 18px !important; margin-bottom: 14px !important; } /* Unterzeile etwas größer und ruhiger */ #t4-subslider .jt-pretext p, #t4-subslider .jt-pretext h4, #t4-subslider .jt-pretext h5, #t4-subslider .jt-pretext h6, #t4-subslider .jt-pretext .pretext { font-size: clamp(14px, 1.05vw, 18px) !important; font-weight: 500 !important; letter-spacing: 0.16em !important; line-height: 1.5 !important; margin-top: 0 !important; margin-bottom: 18px !important; } /* Goldene Linie unter der Unterzeile */ #t4-subslider .jt-pretext::after { margin-top: 18px !important; } /* Karten deutlich näher an den Überschriftenblock rücken */ #t4-subslider .jt-cs.avenir.services { margin-top: -18px !important; } /* Falls innerhalb des Moduls noch zusätzlicher Abstand sitzt */ #t4-subslider .jt-cs.avenir.services .row { margin-top: 0 !important; padding-top: 0 !important; } /* Tablet */ @media (max-width: 991px) { #t4-subslider .jt-pretext { margin-bottom: 34px !important; } #t4-subslider .jt-pretext > :first-child::before { font-size: clamp(30px, 5vw, 44px) !important; } #t4-subslider .jt-cs.avenir.services { margin-top: -8px !important; } } /* Smartphone */ @media (max-width: 575px) { #t4-subslider .jt-pretext { margin-bottom: 28px !important; } #t4-subslider .jt-pretext > :first-child::before { font-size: 27px !important; line-height: 1.16 !important; } #t4-subslider .jt-cs.avenir.services { margin-top: 0 !important; } } /* ========================================================= UDO'S – LEISTUNGSÜBERSCHRIFT AUS DEM MODUL Keine hart codierten Texte / keine künstliche Doppelung ========================================================= */ #t4-subslider .jt-pretext { width: 100% !important; max-width: 1500px !important; margin: 0 auto 42px !important; padding: 0 30px !important; text-align: center !important; overflow: visible !important; } #t4-subslider .jt-pretext h1, #t4-subslider .jt-pretext h2, #t4-subslider .jt-pretext h3 { display: block !important; width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; color: #f0ce88 !important; font-size: clamp(34px, 3vw, 58px) !important; font-weight: 400 !important; line-height: 1.08 !important; letter-spacing: 0.07em !important; text-align: center !important; text-transform: uppercase !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; overflow: visible !important; text-shadow: 0 3px 15px rgba(0, 0, 0, 0.55), 0 0 20px rgba(198, 161, 91, 0.10) !important; } @media (min-width: 992px) { #t4-subslider .jt-pretext h1 br, #t4-subslider .jt-pretext h2 br, #t4-subslider .jt-pretext h3 br { display: none !important; } } #t4-subslider .jt-pretext h1::after, #t4-subslider .jt-pretext h2::after, #t4-subslider .jt-pretext h3::after { content: "" !important; display: block !important; width: 82px !important; height: 2px !important; margin: 18px auto 14px !important; background: linear-gradient(90deg, transparent, #a51e18, #ef3e35, #a51e18, transparent) !important; box-shadow: 0 0 8px rgba(239, 62, 53, 0.65), 0 0 18px rgba(239, 62, 53, 0.28) !important; } #t4-subslider .jt-pretext p, #t4-subslider .jt-pretext .pretext, #t4-subslider .jt-pretext h4, #t4-subslider .jt-pretext h5, #t4-subslider .jt-pretext h6 { display: block !important; width: 100% !important; max-width: 980px !important; margin: 0 auto 18px !important; padding: 0 !important; color: rgba(244, 232, 208, 0.80) !important; font-size: clamp(14px, 1.05vw, 18px) !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: 0.16em !important; text-align: center !important; text-transform: uppercase !important; } #t4-subslider .jt-cs.avenir.services { margin-top: -18px !important; } @media (max-width: 991px) { #t4-subslider .jt-pretext { margin-bottom: 34px !important; padding: 0 24px !important; } #t4-subslider .jt-pretext h1, #t4-subslider .jt-pretext h2, #t4-subslider .jt-pretext h3 { font-size: clamp(30px, 5vw, 44px) !important; white-space: normal !important; } #t4-subslider .jt-cs.avenir.services { margin-top: -8px !important; } } @media (max-width: 575px) { #t4-subslider .jt-pretext { margin-bottom: 28px !important; padding: 0 18px !important; } #t4-subslider .jt-pretext h1, #t4-subslider .jt-pretext h2, #t4-subslider .jt-pretext h3 { font-size: 27px !important; line-height: 1.16 !important; white-space: normal !important; } #t4-subslider .jt-cs.avenir.services { margin-top: 0 !important; } } /* ========================================================= UDO'S GRILLSCHWEINE – STORY-BEREICH, SAUBER UND MODULBASIERT ========================================================= */ #t4-main-top-1, #t4-main-top-2, .t4-main-top-1, .t4-main-top-2 { background: #161311 !important; border-top: 0 !important; border-bottom: 0 !important; } #t4-main-top-1 .container, #t4-main-top-1 .container-fluid, #t4-main-top-2 .container, #t4-main-top-2 .container-fluid, #t4-main-top-1 .t4-section-inner, #t4-main-top-2 .t4-section-inner { background: transparent !important; } .our-story-wrap { position: relative !important; overflow: hidden !important; } .our-story, .our-story.left, .our-story.right { position: relative !important; } .our-story-wrap img, .our-story img, .our-story.left img, .our-story.right img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; visibility: visible !important; opacity: 1 !important; border: 1px solid rgba(198, 161, 91, 0.48) !important; border-radius: 2px !important; filter: contrast(1.05) saturate(0.96) brightness(0.90) !important; box-shadow: 0 20px 42px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; transition: transform 0.65s cubic-bezier(.22, .75, .25, 1), filter 0.45s ease, box-shadow 0.45s ease !important; } .our-story-wrap:hover img, .our-story.left:hover img { transform: scale(1.025) !important; filter: contrast(1.07) saturate(1.02) brightness(0.96) !important; } .our-story-wrap .glow-wrap, .our-story .glow-wrap { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; pointer-events: none !important; z-index: 3 !important; background: transparent !important; } .our-story.right { padding: 44px 46px !important; background: repeating-linear-gradient( 103deg, rgba(255,255,255,.016) 0, rgba(255,255,255,.016) 1px, rgba(0,0,0,.026) 1px, rgba(0,0,0,.026) 5px ), linear-gradient( 145deg, #302c28 0%, #211e1b 55%, #151311 100% ) !important; border: 1px solid rgba(198,161,91,.48) !important; border-left: 3px solid #c6a15b !important; border-radius: 2px !important; box-shadow: 0 22px 48px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.06) !important; } .our-story.right h1, .our-story.right h2, .our-story.right h3, .our-story.right h4 { margin: 0 0 22px !important; padding: 0 !important; color: #edce8c !important; font-size: clamp(28px, 2.1vw, 42px) !important; font-weight: 400 !important; line-height: 1.12 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; text-shadow: 0 4px 18px rgba(0,0,0,.62), 0 0 20px rgba(198,161,91,.08) !important; } .our-story.right h1::after, .our-story.right h2::after, .our-story.right h3::after, .our-story.right h4::after { content: "" !important; display: block !important; width: 70px !important; height: 2px !important; margin-top: 17px !important; background: linear-gradient(90deg, #e33a32, rgba(227,58,50,0)) !important; box-shadow: 0 0 12px rgba(227,58,50,.48) !important; } .our-story.right p { margin: 0 0 18px !important; color: rgba(247,236,215,.84) !important; font-size: 16px !important; font-weight: 300 !important; line-height: 1.72 !important; } .our-story.right ul { margin: 10px 0 0 !important; padding: 0 !important; list-style: none !important; } .our-story.right li { position: relative !important; margin: 0 0 12px !important; padding-left: 28px !important; color: #ead7b2 !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.5 !important; } .our-story.right li::before { content: "" !important; position: absolute !important; left: 2px !important; top: .55em !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #dc352e !important; box-shadow: 0 0 7px rgba(220,53,46,.86), 0 0 15px rgba(220,53,46,.34) !important; } @media (max-width: 991px) { .our-story.right { padding: 38px 34px !important; } } @media (max-width: 575px) { .our-story.right { padding: 32px 24px !important; } .our-story.right h1, .our-story.right h2, .our-story.right h3, .our-story.right h4 { font-size: 28px !important; } .our-story.right p { font-size: 15px !important; line-height: 1.65 !important; } } /* =========================================== Hellen Trenner zwischen den Sections entfernen =========================================== */ #t4-main-top-2, #t4-main, #t4-main-bottom, .t4-section, .t4-main-section { border-top: none !important; } /* Hintergrund der nächsten Section */ #t4-main, #t4-main-bottom, #t4-main > .container, #t4-main-bottom > .container { background: #161311 !important; } /* Abstand zwischen den Bereichen */ #t4-main-top-2 { margin-bottom: 0 !important; padding-bottom: 0 !important; } #t4-main { margin-top: 0 !important; padding-top: 0 !important; } /* ========================================================= HELLEN MODUL-ZWISCHENRAUM ENTFERNEN ========================================================= */ /* Story-Bereich ohne hellen Außenabstand */ #t4-main-top-1 .t4-module, #t4-main-top-2 .t4-module { margin-top: 0 !important; margin-bottom: 0 !important; } /* Erster und letzter Modulblock ohne Template-Abstand */ #t4-main-top-1 .t4-module:first-child, #t4-main-top-2 .t4-module:first-child { margin-top: 0 !important; } #t4-main-top-1 .t4-module:last-child, #t4-main-top-2 .t4-module:last-child { margin-bottom: 0 !important; } /* Übergeordnete Section vollständig dunkel halten */ #t4-main-top-1, #t4-main-top-2, #t4-main-top-1 .t4-section-inner, #t4-main-top-2 .t4-section-inner { margin-top: 0 !important; margin-bottom: 0 !important; background: #161311 !important; border: 0 !important; } /* Möglichen kollabierenden Abstand zwischen den Sections schließen */ #t4-main-top-1 + #t4-main-top-2 { margin-top: 0 !important; border-top: 0 !important; } /* Sicherheit: helle Lücke optisch überdecken */ #t4-main-top-1 { position: relative !important; z-index: 2 !important; box-shadow: 0 36px 0 #161311 !important; } #t4-main-top-2 { position: relative !important; z-index: 3 !important; } /* ========================================================= HELLEN BALKEN UNTER DEM STORY-BEREICH ENTFERNEN Übergang Story → Video-Section ========================================================= */ /* Video-Section über den hellen Zwischenraum ziehen */ #t4-subslider-2 { position: relative !important; z-index: 5 !important; margin-top: -36px !important; padding-top: 36px !important; border-top: 0 !important; outline: 0 !important; background-color: #161311 !important; } /* Dunkle Fläche über den hellen Balken legen */ #t4-subslider-2::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 38px !important; background: #161311 !important; border: 0 !important; box-shadow: none !important; z-index: 3 !important; pointer-events: none !important; } /* Das vorhandene dunkle Bild-Overlay wieder darüber halten */ #t4-subslider-2::after { z-index: 2 !important; } /* Innencontainer dürfen keinen hellen Hintergrund besitzen */ #t4-subslider-2 .t4-section-inner, #t4-subslider-2 .container, #t4-subslider-2 .container-fluid, #t4-subslider-2 .t4-module { background-color: transparent !important; border-top: 0 !important; } /* Außenabstände am Ende des Story-Bereichs entfernen */ #t4-main-top-1, #t4-main-top-1 .t4-module:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; } /* ========================================================= VIDEO WIEDER ÜBER DAS DUNKLE OVERLAY HOLEN ========================================================= */ /* Video-Inhalt über alle Overlays setzen */ #t4-subslider-2 .t4-section-inner, #t4-subslider-2 .container, #t4-subslider-2 .container-fluid, #t4-subslider-2 .t4-module, #t4-subslider-2 .mod-yendifvideoshare-player, #t4-subslider-2 .mod-yendifvideoshare-player-inner, #t4-subslider-2 .yendifplayer { position: relative !important; z-index: 10 !important; } /* Der dunkle Abdeckstreifen bleibt nur Hintergrund */ #t4-subslider-2::before { z-index: 1 !important; } /* Das vorhandene dunkle Hintergrund-Overlay hinter dem Video */ #t4-subslider-2::after { z-index: 0 !important; } /* Section selbst als eigene Ebene */ #t4-subslider-2 { isolation: isolate !important; } /* ========================================================= UDO'S GRILLSCHWEINE – PREMIUM MENÜ / GRILLWELTEN Modul: .jt-cs.avenir.ourmenu Keine Inhalte im CSS hart codiert ========================================================= */ /* ========================================================= 1. GESAMTER BEREICH ========================================================= */ #t4-main-top { position: relative !important; overflow: hidden !important; padding-top: 90px !important; padding-bottom: 100px !important; background: radial-gradient( circle at 50% 0%, rgba(198, 161, 91, 0.08), transparent 34% ), radial-gradient( circle at 5% 85%, rgba(205, 38, 30, 0.07), transparent 25% ), radial-gradient( circle at 95% 85%, rgba(205, 38, 30, 0.06), transparent 25% ), repeating-linear-gradient( 105deg, rgba(255, 255, 255, 0.012) 0, rgba(255, 255, 255, 0.012) 1px, rgba(0, 0, 0, 0.018) 1px, rgba(0, 0, 0, 0.018) 5px ), #12100f !important; border-top: 0 !important; border-bottom: 0 !important; } #t4-main-top .t4-section-inner { position: relative !important; z-index: 2 !important; max-width: 1480px !important; } /* Dezenter roter Glutschein am unteren Rand */ #t4-main-top::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: -2px !important; width: min(920px, 72vw) !important; height: 3px !important; transform: translateX(-50%) !important; background: linear-gradient( 90deg, transparent, rgba(185, 31, 25, 0.22), #e1322b, rgba(185, 31, 25, 0.22), transparent ) !important; box-shadow: 0 0 14px rgba(225, 50, 43, 0.55), 0 0 35px rgba(225, 50, 43, 0.18) !important; pointer-events: none !important; } /* ========================================================= 2. MODUL UND ÜBERSCHRIFTENBLOCK ========================================================= */ .jt-cs.avenir.ourmenu { position: relative !important; width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; padding: 0 28px !important; background: transparent !important; } /* Überschriftenblock aus dem Modul */ .jt-cs.avenir.ourmenu > .jt-pretext { position: relative !important; width: 100% !important; max-width: 1220px !important; margin: 0 auto 58px !important; padding: 0 20px !important; text-align: center !important; } /* Hauptüberschrift aus Joomla */ .jt-cs.avenir.ourmenu > .jt-pretext h1, .jt-cs.avenir.ourmenu > .jt-pretext h2, .jt-cs.avenir.ourmenu > .jt-pretext h3 { margin: 0 auto !important; padding: 0 !important; color: #efcf8a !important; font-size: clamp(40px, 4.1vw, 72px) !important; font-weight: 400 !important; line-height: 1.06 !important; letter-spacing: 0.075em !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.75), 0 0 28px rgba(198, 161, 91, 0.12) !important; } /* Roter Gluttrenner unter der Überschrift */ .jt-cs.avenir.ourmenu > .jt-pretext h1::after, .jt-cs.avenir.ourmenu > .jt-pretext h2::after, .jt-cs.avenir.ourmenu > .jt-pretext h3::after { content: "" !important; display: block !important; width: 96px !important; height: 2px !important; margin: 22px auto 17px !important; background: linear-gradient( 90deg, transparent, #a51e18, #ef3e35, #a51e18, transparent ) !important; box-shadow: 0 0 8px rgba(239, 62, 53, 0.72), 0 0 22px rgba(239, 62, 53, 0.28) !important; } /* Unterzeile aus Joomla */ .jt-cs.avenir.ourmenu > .jt-pretext p, .jt-cs.avenir.ourmenu > .jt-pretext h4, .jt-cs.avenir.ourmenu > .jt-pretext h5, .jt-cs.avenir.ourmenu > .jt-pretext h6, .jt-cs.avenir.ourmenu > .jt-pretext .pretext { margin: 0 auto !important; color: rgba(242, 229, 204, 0.80) !important; font-size: clamp(13px, 1.1vw, 17px) !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: 0.20em !important; text-align: center !important; text-transform: uppercase !important; } /* Feine Goldlinie unter der Unterzeile */ .jt-cs.avenir.ourmenu > .jt-pretext::after { content: "" !important; display: block !important; width: 150px !important; height: 1px !important; margin: 24px auto 0 !important; background: linear-gradient( 90deg, transparent, rgba(225, 191, 116, 0.72), transparent ) !important; box-shadow: 0 0 12px rgba(198, 161, 91, 0.20) !important; } /* ========================================================= 3. OWL-CAROUSEL UND KARTENRASTER ========================================================= */ .jt-cs.avenir.ourmenu .slides_container { position: relative !important; overflow: visible !important; } /* Carousel-Stage */ .jt-cs.avenir.ourmenu .owl-stage { display: flex !important; align-items: stretch !important; } /* Einzelner Slider-Eintrag */ .jt-cs.avenir.ourmenu .owl-item { display: flex !important; align-items: stretch !important; padding: 12px !important; } /* Eigentlicher Kartencontainer */ .jt-cs.avenir.ourmenu .owl-item > div { position: relative !important; display: grid !important; grid-template-columns: minmax(170px, 34%) minmax(0, 66%) !important; align-items: stretch !important; width: 100% !important; min-height: 220px !important; padding: 0 !important; overflow: hidden !important; background: linear-gradient( 112deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.025) 45%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0.025) 55%, transparent 62%, transparent 100% ), repeating-linear-gradient( 104deg, rgba(255, 255, 255, 0.014) 0, rgba(255, 255, 255, 0.014) 1px, rgba(0, 0, 0, 0.028) 1px, rgba(0, 0, 0, 0.028) 5px ), linear-gradient( 145deg, #2f2a26 0%, #211e1b 50%, #13110f 100% ) !important; background-size: 230% 100%, auto, auto !important; background-position: 145% 0, 0 0, 0 0 !important; border: 1px solid rgba(205, 168, 88, 0.65) !important; border-radius: 3px !important; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 0 38px rgba(0, 0, 0, 0.16) !important; transition: transform 0.45s cubic-bezier(.22, .75, .25, 1), box-shadow 0.45s ease, border-color 0.35s ease, background-position 0.85s ease !important; } /* Goldener Lichtpunkt oben */ .jt-cs.avenir.ourmenu .owl-item > div::before { content: "" !important; position: absolute !important; top: -1px !important; left: 12% !important; width: 130px !important; height: 2px !important; background: linear-gradient( 90deg, transparent, #ffdb80, transparent ) !important; opacity: 0.70 !important; box-shadow: 0 0 8px rgba(255, 204, 91, 0.72), 0 0 18px rgba(255, 145, 25, 0.28) !important; pointer-events: none !important; z-index: 5 !important; } /* Rote Glutkante unten */ .jt-cs.avenir.ourmenu .owl-item > div::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: -1px !important; width: 110px !important; height: 3px !important; transform: translateX(-50%) scaleX(0.5) !important; transform-origin: center !important; background: linear-gradient( 90deg, transparent, #ca241e, #ff4035, #ca241e, transparent ) !important; box-shadow: 0 0 9px rgba(255, 54, 44, 0.74), 0 0 24px rgba(255, 54, 44, 0.34) !important; transition: transform 0.45s ease !important; pointer-events: none !important; z-index: 6 !important; } /* Karten-Hover */ .jt-cs.avenir.ourmenu .owl-item > div:hover { transform: translateY(-9px) !important; background-position: -45% 0, 0 0, 0 0 !important; border-color: rgba(239, 202, 118, 0.95) !important; box-shadow: 0 30px 62px rgba(0, 0, 0, 0.68), 0 0 26px rgba(198, 161, 91, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 0 0 46px rgba(0, 0, 0, 0.22) !important; } .jt-cs.avenir.ourmenu .owl-item > div:hover::after { transform: translateX(-50%) scaleX(1) !important; } /* ========================================================= 4. BILDER ========================================================= */ .jt-cs.avenir.ourmenu .owl-item img { display: block !important; width: 100% !important; height: 100% !important; min-height: 220px !important; object-fit: cover !important; object-position: center !important; border: 0 !important; filter: contrast(1.08) saturate(0.94) brightness(0.82) !important; transform: scale(1.01) !important; box-shadow: inset -1px 0 0 rgba(219, 180, 92, 0.45) !important; transition: transform 0.7s cubic-bezier(.22, .75, .25, 1), filter 0.5s ease !important; } .jt-cs.avenir.ourmenu .owl-item > div:hover img { transform: scale(1.075) !important; filter: contrast(1.10) saturate(1.05) brightness(0.96) !important; } /* Bildcontainer in der linken Spalte halten */ .jt-cs.avenir.ourmenu .owl-item a:has(img), .jt-cs.avenir.ourmenu .owl-item div:has(> img) { grid-column: 1 !important; grid-row: 1 / span 6 !important; position: relative !important; overflow: hidden !important; min-height: 220px !important; } /* Goldene Trennkante zwischen Bild und Text */ .jt-cs.avenir.ourmenu .owl-item a:has(img)::after, .jt-cs.avenir.ourmenu .owl-item div:has(> img)::after { content: "" !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 1px !important; background: linear-gradient( to bottom, transparent, rgba(231, 194, 108, 0.80), transparent ) !important; box-shadow: 0 0 12px rgba(198, 161, 91, 0.18) !important; pointer-events: none !important; } /* ========================================================= 5. TEXTBEREICH ========================================================= */ /* Überschriften der einzelnen Einträge */ .jt-cs.avenir.ourmenu .owl-item h1, .jt-cs.avenir.ourmenu .owl-item h2, .jt-cs.avenir.ourmenu .owl-item h3, .jt-cs.avenir.ourmenu .owl-item h4, .jt-cs.avenir.ourmenu .owl-item h5 { grid-column: 2 !important; margin: 35px 38px 0 !important; padding: 0 !important; color: #edca80 !important; font-size: clamp(23px, 1.8vw, 32px) !important; font-weight: 500 !important; line-height: 1.15 !important; letter-spacing: 0.055em !important; text-align: left !important; text-transform: uppercase !important; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.72), 0 0 16px rgba(198, 161, 91, 0.08) !important; } /* Rote Linie unter Kartentitel */ .jt-cs.avenir.ourmenu .owl-item h1::after, .jt-cs.avenir.ourmenu .owl-item h2::after, .jt-cs.avenir.ourmenu .owl-item h3::after, .jt-cs.avenir.ourmenu .owl-item h4::after, .jt-cs.avenir.ourmenu .owl-item h5::after { content: "" !important; display: block !important; width: 62px !important; height: 2px !important; margin-top: 16px !important; background: linear-gradient( 90deg, #e1332c, rgba(225, 51, 44, 0) ) !important; box-shadow: 0 0 9px rgba(225, 51, 44, 0.40) !important; } /* Beschreibungstext */ .jt-cs.avenir.ourmenu .owl-item p { grid-column: 2 !important; margin: 19px 38px 30px !important; padding: 0 !important; color: rgba(244, 232, 209, 0.78) !important; font-size: 15px !important; font-weight: 300 !important; line-height: 1.65 !important; letter-spacing: 0.015em !important; text-align: left !important; } /* Allgemeine Links */ .jt-cs.avenir.ourmenu .owl-item a { color: inherit !important; text-decoration: none !important; } /* ========================================================= 6. PREISPLAKETTE ========================================================= */ /* Wir gestalten kurze Text-/Preis-Elemente innerhalb der Bildhälfte. Die vorhandenen Preise bleiben aus dem Modul. */ .jt-cs.avenir.ourmenu .owl-item .price, .jt-cs.avenir.ourmenu .owl-item .item-price, .jt-cs.avenir.ourmenu .owl-item [class*="price"] { position: absolute !important; left: 18px !important; bottom: 18px !important; z-index: 8 !important; min-width: 92px !important; padding: 10px 19px !important; color: #efcc7f !important; font-size: 23px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.045em !important; text-align: center !important; background: linear-gradient( 145deg, rgba(39, 34, 29, 0.98), rgba(13, 12, 11, 0.99) ) !important; border: 1px solid rgba(224, 186, 92, 0.80) !important; border-radius: 2px !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.58), 0 0 15px rgba(198, 161, 91, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.70) !important; } /* ========================================================= 7. NAVIGATION / OWL-PUNKTE ========================================================= */ .jt-cs.avenir.ourmenu .owl-dots { display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; margin-top: 38px !important; } .jt-cs.avenir.ourmenu .owl-dot span { display: block !important; width: 58px !important; height: 5px !important; margin: 0 !important; border-radius: 1px !important; background: #312e2b !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55) !important; transition: width 0.35s ease, background 0.35s ease, box-shadow 0.35s ease !important; } .jt-cs.avenir.ourmenu .owl-dot.active span { width: 76px !important; background: linear-gradient( 90deg, #a61f19, #ef392f, #a61f19 ) !important; box-shadow: 0 0 8px rgba(239, 57, 47, 0.65), 0 0 19px rgba(239, 57, 47, 0.24) !important; } /* ========================================================= 8. TABLET ========================================================= */ @media (max-width: 1100px) { #t4-main-top { padding-top: 72px !important; padding-bottom: 82px !important; } .jt-cs.avenir.ourmenu { padding: 0 18px !important; } .jt-cs.avenir.ourmenu .owl-item > div { grid-template-columns: minmax(150px, 38%) minmax(0, 62%) !important; } .jt-cs.avenir.ourmenu .owl-item h1, .jt-cs.avenir.ourmenu .owl-item h2, .jt-cs.avenir.ourmenu .owl-item h3, .jt-cs.avenir.ourmenu .owl-item h4, .jt-cs.avenir.ourmenu .owl-item h5 { margin: 30px 28px 0 !important; font-size: 24px !important; } .jt-cs.avenir.ourmenu .owl-item p { margin: 18px 28px 27px !important; font-size: 14px !important; } } /* ========================================================= 9. SMARTPHONE ========================================================= */ @media (max-width: 680px) { #t4-main-top { padding-top: 58px !important; padding-bottom: 70px !important; } .jt-cs.avenir.ourmenu { padding: 0 8px !important; } .jt-cs.avenir.ourmenu > .jt-pretext { margin-bottom: 38px !important; padding: 0 12px !important; } .jt-cs.avenir.ourmenu > .jt-pretext h1, .jt-cs.avenir.ourmenu > .jt-pretext h2, .jt-cs.avenir.ourmenu > .jt-pretext h3 { font-size: 32px !important; line-height: 1.12 !important; letter-spacing: 0.045em !important; } .jt-cs.avenir.ourmenu > .jt-pretext p, .jt-cs.avenir.ourmenu > .jt-pretext h4, .jt-cs.avenir.ourmenu > .jt-pretext h5, .jt-cs.avenir.ourmenu > .jt-pretext h6 { font-size: 12px !important; letter-spacing: 0.12em !important; } .jt-cs.avenir.ourmenu .owl-item { padding: 9px !important; } .jt-cs.avenir.ourmenu .owl-item > div { display: block !important; min-height: 0 !important; } .jt-cs.avenir.ourmenu .owl-item a:has(img), .jt-cs.avenir.ourmenu .owl-item div:has(> img) { display: block !important; width: 100% !important; height: 230px !important; min-height: 230px !important; } .jt-cs.avenir.ourmenu .owl-item img { width: 100% !important; height: 230px !important; min-height: 230px !important; } .jt-cs.avenir.ourmenu .owl-item h1, .jt-cs.avenir.ourmenu .owl-item h2, .jt-cs.avenir.ourmenu .owl-item h3, .jt-cs.avenir.ourmenu .owl-item h4, .jt-cs.avenir.ourmenu .owl-item h5 { margin: 27px 25px 0 !important; font-size: 23px !important; } .jt-cs.avenir.ourmenu .owl-item p { margin: 18px 25px 30px !important; font-size: 14px !important; line-height: 1.62 !important; } .jt-cs.avenir.ourmenu .owl-dot span { width: 38px !important; } .jt-cs.avenir.ourmenu .owl-dot.active span { width: 54px !important; } } /* ========================================================= UDO'S GRILLSCHWEINE PREMIUM-GRILLWELTEN / MENÜKARTEN – FINALE STRUKTUR Modul: .jt-cs.avenir.ourmenu Inhalte bleiben vollständig in Joomla: - Überschriften - Bilder - Preise - Beschreibungen - Links ========================================================= */ /* ========================================================= 1. GESAMTER MODULBEREICH ========================================================= */ #t4-main-top { position: relative !important; overflow: hidden !important; padding-top: 90px !important; padding-bottom: 105px !important; background: radial-gradient( circle at 50% -10%, rgba(204, 163, 80, 0.11), transparent 34% ), radial-gradient( circle at 0% 90%, rgba(202, 42, 31, 0.09), transparent 25% ), radial-gradient( circle at 100% 90%, rgba(202, 42, 31, 0.08), transparent 25% ), repeating-linear-gradient( 104deg, rgba(255, 255, 255, 0.012) 0, rgba(255, 255, 255, 0.012) 1px, rgba(0, 0, 0, 0.022) 1px, rgba(0, 0, 0, 0.022) 5px ), linear-gradient( 180deg, #12100f 0%, #0e0d0c 100% ) !important; border: 0 !important; } #t4-main-top .t4-section-inner { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 1560px !important; background: transparent !important; } /* Dezente Glut am unteren Abschluss */ #t4-main-top::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 0 !important; width: min(900px, 70vw) !important; height: 2px !important; transform: translateX(-50%) !important; background: linear-gradient( 90deg, transparent, rgba(192, 34, 27, 0.24), #ee3b31, rgba(192, 34, 27, 0.24), transparent ) !important; box-shadow: 0 0 12px rgba(238, 59, 49, 0.56), 0 0 30px rgba(238, 59, 49, 0.18) !important; pointer-events: none !important; } /* ========================================================= 2. MODULWRAPPER ========================================================= */ .jt-cs.avenir.ourmenu { position: relative !important; width: 100% !important; max-width: 1480px !important; margin: 0 auto !important; padding: 0 24px !important; background: transparent !important; } /* ========================================================= 3. MODULÜBERSCHRIFT ========================================================= */ .jt-cs.avenir.ourmenu > .jt-pretext { position: relative !important; width: 100% !important; max-width: 1260px !important; margin: 0 auto 62px !important; padding: 0 20px !important; text-align: center !important; } /* Echte Überschrift aus Joomla */ .jt-cs.avenir.ourmenu > .jt-pretext h3 { margin: 0 auto !important; padding: 0 !important; color: #efce84 !important; font-size: clamp(42px, 4.2vw, 72px) !important; font-weight: 500 !important; line-height: 1.05 !important; letter-spacing: 0.085em !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.80), 0 0 24px rgba(211, 168, 79, 0.13) !important; } /* Erstes Wort aus dem bestehenden Modul rot */ .jt-cs.avenir.ourmenu > .jt-pretext h3 .first-word-avenir { color: #dc352e !important; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.78), 0 0 12px rgba(220, 53, 46, 0.52), 0 0 28px rgba(220, 53, 46, 0.20) !important; } /* Gluttrenner */ .jt-cs.avenir.ourmenu > .jt-pretext h3::after { content: "" !important; display: block !important; width: 102px !important; height: 2px !important; margin: 23px auto 17px !important; background: linear-gradient( 90deg, transparent, #a71f19, #f13e34, #a71f19, transparent ) !important; box-shadow: 0 0 8px rgba(241, 62, 52, 0.72), 0 0 22px rgba(241, 62, 52, 0.27) !important; } /* Untertitel aus Joomla */ .jt-cs.avenir.ourmenu > .jt-pretext .pretext, .jt-cs.avenir.ourmenu > .jt-pretext p { margin: 0 auto !important; padding: 0 !important; color: rgba(244, 231, 205, 0.82) !important; font-size: clamp(13px, 1vw, 17px) !important; font-weight: 600 !important; line-height: 1.5 !important; letter-spacing: 0.22em !important; text-align: center !important; text-transform: uppercase !important; } /* Goldlinie unter dem Untertitel */ .jt-cs.avenir.ourmenu > .jt-pretext::after { content: "" !important; display: block !important; width: 155px !important; height: 1px !important; margin: 24px auto 0 !important; background: linear-gradient( 90deg, transparent, rgba(228, 191, 105, 0.82), transparent ) !important; box-shadow: 0 0 13px rgba(211, 168, 79, 0.22) !important; } /* ========================================================= 4. ALTE GROBREGELN ZURÜCKSETZEN ========================================================= */ /* Wichtig: Eine owl-item ist lediglich eine Spalte mit drei Karten. Deshalb darf sie selbst keine große Karte mehr sein. */ .jt-cs.avenir.ourmenu .owl-item { display: block !important; padding: 0 9px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } /* Alte Kartengestaltung des direkten Kind-Divs neutralisieren */ .jt-cs.avenir.ourmenu .owl-item > div, .jt-cs.avenir.ourmenu .owl-item > .fake-col-wrapper { display: flex !important; flex-direction: column !important; width: 100% !important; min-height: 0 !important; gap: 18px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; overflow: visible !important; } /* Alte Pseudoeffekte am Spaltenwrapper entfernen */ .jt-cs.avenir.ourmenu .owl-item > div::before, .jt-cs.avenir.ourmenu .owl-item > div::after, .jt-cs.avenir.ourmenu .fake-col-wrapper::before, .jt-cs.avenir.ourmenu .fake-col-wrapper::after { content: none !important; display: none !important; } /* ========================================================= 5. JEDE .SLIDE WIRD EINE EIGENE PREMIUMKARTE ========================================================= */ .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide { position: relative !important; display: block !important; width: 100% !important; min-height: 218px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Eigentlicher Kartenkörper */ .jt-cs.avenir.ourmenu .slide > .jt-inner { position: relative !important; display: grid !important; grid-template-columns: minmax(190px, 36%) minmax(0, 64%) !important; grid-template-rows: auto 1fr !important; align-items: stretch !important; width: 100% !important; min-height: 218px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: linear-gradient( 112deg, transparent 0%, transparent 36%, rgba(255, 255, 255, 0.025) 43%, rgba(255, 255, 255, 0.078) 49%, rgba(255, 255, 255, 0.025) 55%, transparent 62%, transparent 100% ), repeating-linear-gradient( 103deg, rgba(255, 255, 255, 0.015) 0, rgba(255, 255, 255, 0.015) 1px, rgba(0, 0, 0, 0.028) 1px, rgba(0, 0, 0, 0.028) 5px ), radial-gradient( circle at 20% 0%, rgba(211, 168, 79, 0.08), transparent 36% ), linear-gradient( 145deg, #2e2925 0%, #201d1a 48%, #11100e 100% ) !important; background-size: 230% 100%, auto, auto, auto !important; background-position: 145% 0, 0 0, 0 0, 0 0 !important; border: 1px solid rgba(211, 169, 75, 0.72) !important; border-radius: 3px !important; box-shadow: 0 17px 36px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 0 40px rgba(0, 0, 0, 0.19) !important; transition: transform 0.46s cubic-bezier(.22, .75, .25, 1), border-color 0.35s ease, box-shadow 0.46s ease, background-position 0.85s ease !important; } /* Goldener Lichtreflex oben */ .jt-cs.avenir.ourmenu .slide > .jt-inner::before { content: "" !important; position: absolute !important; top: -1px !important; left: 9% !important; width: 125px !important; height: 2px !important; background: linear-gradient( 90deg, transparent, #ffd77a, transparent ) !important; opacity: 0.78 !important; box-shadow: 0 0 8px rgba(255, 206, 91, 0.76), 0 0 20px rgba(255, 142, 27, 0.30) !important; z-index: 20 !important; pointer-events: none !important; } /* Roter Pfeil rechts */ .jt-cs.avenir.ourmenu .slide > .jt-inner::after { content: "›" !important; position: absolute !important; right: 20px !important; top: 50% !important; transform: translateY(-50%) translateX(-5px) !important; color: #ee382f !important; font-family: Arial, sans-serif !important; font-size: 44px !important; font-weight: 300 !important; line-height: 1 !important; opacity: 0.74 !important; text-shadow: 0 0 8px rgba(238, 56, 47, 0.56), 0 0 18px rgba(238, 56, 47, 0.22) !important; transition: transform 0.35s ease, opacity 0.35s ease, color 0.35s ease !important; z-index: 18 !important; pointer-events: none !important; } /* Karten-Hover */ .jt-cs.avenir.ourmenu .slide > .jt-inner:hover { transform: translateY(-8px) !important; background-position: -45% 0, 0 0, 0 0, 0 0 !important; border-color: rgba(244, 205, 113, 0.98) !important; box-shadow: 0 28px 58px rgba(0, 0, 0, 0.70), 0 0 25px rgba(211, 168, 79, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 46px rgba(0, 0, 0, 0.24) !important; } .jt-cs.avenir.ourmenu .slide > .jt-inner:hover::after { transform: translateY(-50%) translateX(2px) !important; opacity: 1 !important; color: #ff473c !important; } /* Glutkante unter jeder Karte */ .jt-cs.avenir.ourmenu .slide::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: -1px !important; width: 118px !important; height: 3px !important; transform: translateX(-50%) scaleX(0.46) !important; transform-origin: center !important; background: linear-gradient( 90deg, transparent, #bd211b, #ff4136, #bd211b, transparent ) !important; box-shadow: 0 0 8px rgba(255, 55, 46, 0.72), 0 0 22px rgba(255, 55, 46, 0.32) !important; transition: transform 0.45s ease !important; z-index: 25 !important; pointer-events: none !important; } .jt-cs.avenir.ourmenu .slide:hover::after { transform: translateX(-50%) scaleX(1) !important; } /* ========================================================= 6. BILDBEREICH ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover { position: relative !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; float: none !important; width: 100% !important; height: 100% !important; min-height: 218px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #11100f !important; border: 0 !important; border-right: 1px solid rgba(213, 173, 81, 0.68) !important; } /* Schräge metallische Trennkante */ .jt-cs.avenir.ourmenu .slide .jt-imagecover::after { content: "" !important; position: absolute !important; top: -12% !important; right: -14px !important; width: 28px !important; height: 125% !important; transform: rotate(3deg) !important; background: linear-gradient( 90deg, transparent, rgba(223, 180, 83, 0.78), transparent ) !important; opacity: 0.80 !important; pointer-events: none !important; z-index: 7 !important; } /* Bildlink */ .jt-cs.avenir.ourmenu .slide .link-image { display: block !important; width: 100% !important; height: 100% !important; min-height: 218px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Bild */ .jt-cs.avenir.ourmenu .slide img.jtcs-image { display: block !important; width: 100% !important; height: 100% !important; min-height: 218px !important; object-fit: cover !important; object-position: center !important; border: 0 !important; filter: contrast(1.08) saturate(0.97) brightness(0.83) !important; transform: scale(1.015) !important; transition: transform 0.72s cubic-bezier(.22, .75, .25, 1), filter 0.50s ease !important; } /* Bildzoom auf Hover */ .jt-cs.avenir.ourmenu .slide > .jt-inner:hover img.jtcs-image { transform: scale(1.075) !important; filter: contrast(1.10) saturate(1.06) brightness(0.96) !important; } /* Alte Such-/Link-Icons ausblenden */ .jt-cs.avenir.ourmenu .slide .hover-icons { display: none !important; } /* ========================================================= 7. PREISPLAKETTE ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-caption { position: absolute !important; left: 16px !important; bottom: 16px !important; z-index: 15 !important; display: flex !important; align-items: center !important; justify-content: center !important; min-width: 92px !important; min-height: 48px !important; padding: 10px 18px !important; color: #efcb76 !important; font-size: 23px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.045em !important; text-align: center !important; background: linear-gradient( 145deg, rgba(44, 38, 31, 0.98), rgba(12, 11, 10, 0.99) ) !important; border: 1px solid rgba(227, 188, 94, 0.88) !important; border-radius: 2px !important; box-shadow: 0 11px 25px rgba(0, 0, 0, 0.65), 0 0 14px rgba(211, 168, 79, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; text-shadow: 0 2px 7px rgba(0, 0, 0, 0.78) !important; transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease !important; } .jt-cs.avenir.ourmenu .slide > .jt-inner:hover .jt-caption { color: #ffe2a0 !important; border-color: rgba(249, 210, 116, 1) !important; transform: translateY(-2px) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.72), 0 0 19px rgba(229, 185, 82, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important; } /* ========================================================= 8. TITEL ========================================================= */ .jt-cs.avenir.ourmenu .slide h5 { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; margin: 31px 54px 0 34px !important; padding: 0 !important; color: #edca7c !important; font-size: clamp(22px, 1.55vw, 29px) !important; font-weight: 500 !important; line-height: 1.15 !important; letter-spacing: 0.055em !important; text-align: left !important; text-transform: uppercase !important; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.74), 0 0 16px rgba(211, 168, 79, 0.08) !important; } /* Titel-Link */ .jt-cs.avenir.ourmenu .slide h5 .jt-title { color: inherit !important; text-decoration: none !important; transition: color 0.32s ease, text-shadow 0.32s ease !important; } .jt-cs.avenir.ourmenu .slide h5 .jt-title:hover { color: #ffe0a0 !important; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.75), 0 0 18px rgba(225, 183, 87, 0.19) !important; } /* Rote Linie unter dem Titel */ .jt-cs.avenir.ourmenu .slide h5::after { content: "" !important; display: block !important; width: 63px !important; height: 2px !important; margin-top: 15px !important; background: linear-gradient( 90deg, #e23830, rgba(226, 56, 48, 0) ) !important; box-shadow: 0 0 9px rgba(226, 56, 48, 0.42) !important; } /* ========================================================= 9. BESCHREIBUNG ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-introtext { grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; margin: 16px 54px 27px 34px !important; padding: 0 !important; } /* Inline-Textausrichtung aus dem Beitrag überschreiben */ .jt-cs.avenir.ourmenu .slide .jt-introtext p { margin: 0 !important; padding: 0 !important; color: rgba(244, 232, 210, 0.80) !important; font-size: 14.5px !important; font-weight: 300 !important; line-height: 1.62 !important; letter-spacing: 0.012em !important; text-align: left !important; } /* Leere Template-Divs aus dem Layout nehmen */ .jt-cs.avenir.ourmenu .slide .jt-inner > div:empty, .jt-cs.avenir.ourmenu .slide .jt-inner > div[style*="clear"] { display: none !important; } /* ========================================================= 10. CAROUSEL-BEREICH ========================================================= */ .jt-cs.avenir.ourmenu .slides_container, .jt-cs.avenir.ourmenu .owl-stage-outer { overflow: hidden !important; padding-top: 10px !important; padding-bottom: 18px !important; } /* Pfeilnavigation dezent ausblenden – Dots bleiben */ .jt-cs.avenir.ourmenu .owl-nav { display: none !important; } /* ========================================================= 11. NAVIGATIONSPUNKTE ========================================================= */ .jt-cs.avenir.ourmenu .owl-dots { display: flex !important; align-items: center !important; justify-content: center !important; gap: 11px !important; margin-top: 30px !important; } .jt-cs.avenir.ourmenu .owl-dot { padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; } .jt-cs.avenir.ourmenu .owl-dot span { display: block !important; width: 60px !important; height: 5px !important; margin: 0 !important; border-radius: 1px !important; background: #312e2a !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.62) !important; transition: width 0.35s ease, background 0.35s ease, box-shadow 0.35s ease !important; } .jt-cs.avenir.ourmenu .owl-dot.active span { width: 78px !important; background: linear-gradient( 90deg, #a71e18, #ef3a31, #a71e18 ) !important; box-shadow: 0 0 8px rgba(239, 58, 49, 0.70), 0 0 20px rgba(239, 58, 49, 0.27) !important; } /* ========================================================= 12. TABLET / KLEINER DESKTOP ========================================================= */ @media (max-width: 1180px) { #t4-main-top { padding-top: 76px !important; padding-bottom: 88px !important; } .jt-cs.avenir.ourmenu { padding: 0 16px !important; } .jt-cs.avenir.ourmenu .slide > .jt-inner { grid-template-columns: minmax(160px, 38%) minmax(0, 62%) !important; min-height: 205px !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover, .jt-cs.avenir.ourmenu .slide .link-image, .jt-cs.avenir.ourmenu .slide img.jtcs-image { min-height: 205px !important; } .jt-cs.avenir.ourmenu .slide h5 { margin: 27px 46px 0 27px !important; font-size: 22px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext { margin: 14px 46px 24px 27px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext p { font-size: 13.5px !important; } } /* ========================================================= 13. TABLET HOCHKANT ========================================================= */ @media (max-width: 820px) { .jt-cs.avenir.ourmenu > .jt-pretext { margin-bottom: 46px !important; } .jt-cs.avenir.ourmenu .owl-item { padding: 0 5px !important; } .jt-cs.avenir.ourmenu .fake-col-wrapper { gap: 15px !important; } .jt-cs.avenir.ourmenu .slide > .jt-inner { grid-template-columns: minmax(135px, 39%) minmax(0, 61%) !important; min-height: 190px !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover, .jt-cs.avenir.ourmenu .slide .link-image, .jt-cs.avenir.ourmenu .slide img.jtcs-image { min-height: 190px !important; } .jt-cs.avenir.ourmenu .slide h5 { margin: 24px 40px 0 22px !important; font-size: 20px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext { margin: 13px 40px 21px 22px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext p { font-size: 13px !important; line-height: 1.55 !important; } .jt-cs.avenir.ourmenu .slide .jt-caption { min-width: 78px !important; min-height: 43px !important; padding: 9px 14px !important; font-size: 19px !important; } } /* ========================================================= 14. SMARTPHONE ========================================================= */ @media (max-width: 575px) { #t4-main-top { padding-top: 58px !important; padding-bottom: 68px !important; } .jt-cs.avenir.ourmenu { padding: 0 6px !important; } .jt-cs.avenir.ourmenu > .jt-pretext { margin-bottom: 37px !important; padding: 0 10px !important; } .jt-cs.avenir.ourmenu > .jt-pretext h3 { font-size: 31px !important; line-height: 1.12 !important; letter-spacing: 0.045em !important; } .jt-cs.avenir.ourmenu > .jt-pretext .pretext, .jt-cs.avenir.ourmenu > .jt-pretext p { font-size: 11px !important; letter-spacing: 0.14em !important; } .jt-cs.avenir.ourmenu .fake-col-wrapper { gap: 14px !important; } .jt-cs.avenir.ourmenu .slide > .jt-inner { display: grid !important; grid-template-columns: 125px minmax(0, 1fr) !important; min-height: 175px !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover, .jt-cs.avenir.ourmenu .slide .link-image, .jt-cs.avenir.ourmenu .slide img.jtcs-image { min-height: 175px !important; } .jt-cs.avenir.ourmenu .slide h5 { margin: 21px 35px 0 18px !important; font-size: 18px !important; line-height: 1.16 !important; letter-spacing: 0.035em !important; } .jt-cs.avenir.ourmenu .slide h5::after { width: 48px !important; margin-top: 11px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext { margin: 11px 35px 17px 18px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext p { display: -webkit-box !important; overflow: hidden !important; font-size: 12.5px !important; line-height: 1.48 !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; } .jt-cs.avenir.ourmenu .slide .jt-caption { left: 10px !important; bottom: 11px !important; min-width: 67px !important; min-height: 38px !important; padding: 8px 10px !important; font-size: 16px !important; } .jt-cs.avenir.ourmenu .slide > .jt-inner::after { right: 12px !important; font-size: 34px !important; } .jt-cs.avenir.ourmenu .owl-dot span { width: 38px !important; } .jt-cs.avenir.ourmenu .owl-dot.active span { width: 54px !important; } } /* Sehr kleine Smartphones: Bild oben, Text unten */ @media (max-width: 390px) { .jt-cs.avenir.ourmenu .slide > .jt-inner { display: block !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover, .jt-cs.avenir.ourmenu .slide .link-image, .jt-cs.avenir.ourmenu .slide img.jtcs-image { width: 100% !important; height: 215px !important; min-height: 215px !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover { border-right: 0 !important; border-bottom: 1px solid rgba(213, 173, 81, 0.68) !important; } .jt-cs.avenir.ourmenu .slide h5 { margin: 25px 38px 0 22px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext { margin: 13px 38px 25px 22px !important; } } /* ========================================================= UDO'S GRILLSCHWEINE – EVENTWELTEN Kompaktere Karten, keine Preise, Einzelkarten-Hover Inhalte bleiben vollständig in Joomla ========================================================= */ /* ========================================================= 1. ALTE SPALTEN-HOVER SICHER ABSCHALTEN Nur die tatsächlich berührte Karte darf sich bewegen ========================================================= */ .jt-cs.avenir.ourmenu .owl-item:hover, .jt-cs.avenir.ourmenu .owl-item > div:hover, .jt-cs.avenir.ourmenu .fake-col-wrapper:hover, .jt-cs.avenir.ourmenu .slide:hover { transform: none !important; } .jt-cs.avenir.ourmenu .owl-item, .jt-cs.avenir.ourmenu .owl-item > div, .jt-cs.avenir.ourmenu .fake-col-wrapper, .jt-cs.avenir.ourmenu .slide { transition: none !important; } /* Nur die einzelne Kartenfläche animieren */ .jt-cs.avenir.ourmenu .slide > .jt-inner { transform: translateY(0) !important; transition: transform 0.42s cubic-bezier(.22, .75, .25, 1), border-color 0.35s ease, box-shadow 0.42s ease, background-position 0.75s ease !important; } .jt-cs.avenir.ourmenu .slide:hover > .jt-inner { transform: translateY(-6px) !important; } /* ========================================================= 2. PREISE VOLLSTÄNDIG AUSBLENDEN ========================================================= */ .jt-cs.avenir.ourmenu .jt-caption { display: none !important; } /* ========================================================= 3. EVENTKARTEN KOMPAKTER UND RUHIGER ========================================================= */ .jt-cs.avenir.ourmenu .fake-col-wrapper { gap: 15px !important; } .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide { min-height: 180px !important; } .jt-cs.avenir.ourmenu .slide > .jt-inner { grid-template-columns: minmax(170px, 34%) minmax(0, 66%) !important; grid-template-rows: auto 1fr !important; min-height: 180px !important; background: linear-gradient( 112deg, transparent 0%, transparent 38%, rgba(255,255,255,.022) 45%, rgba(255,255,255,.065) 50%, rgba(255,255,255,.022) 55%, transparent 63%, transparent 100% ), repeating-linear-gradient( 103deg, rgba(255,255,255,.013) 0, rgba(255,255,255,.013) 1px, rgba(0,0,0,.028) 1px, rgba(0,0,0,.028) 5px ), linear-gradient( 145deg, #292521 0%, #1d1a18 52%, #11100f 100% ) !important; background-size: 230% 100%, auto, auto !important; background-position: 145% 0, 0 0, 0 0 !important; border-color: rgba(198,161,91,.58) !important; box-shadow: 0 15px 32px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.045), inset 0 0 34px rgba(0,0,0,.18) !important; } .jt-cs.avenir.ourmenu .slide:hover > .jt-inner { background-position: -45% 0, 0 0, 0 0 !important; border-color: rgba(237,198,109,.92) !important; box-shadow: 0 25px 50px rgba(0,0,0,.66), 0 0 21px rgba(198,161,91,.10), inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 40px rgba(0,0,0,.22) !important; } /* ========================================================= 4. BILDER KOMPAKTER ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover, .jt-cs.avenir.ourmenu .slide .link-image, .jt-cs.avenir.ourmenu .slide img.jtcs-image { min-height: 180px !important; height: 180px !important; } .jt-cs.avenir.ourmenu .slide img.jtcs-image { object-fit: cover !important; object-position: center !important; filter: contrast(1.07) saturate(.94) brightness(.84) !important; } .jt-cs.avenir.ourmenu .slide:hover img.jtcs-image { transform: scale(1.055) !important; filter: contrast(1.08) saturate(1.02) brightness(.94) !important; } /* ========================================================= 5. ÜBERSCHRIFTEN WIE AUF DEM REST DER SEITE Weniger wuchtig, eleganter, besser lesbar ========================================================= */ .jt-cs.avenir.ourmenu .slide h5 { margin: 27px 48px 0 30px !important; font-size: clamp(18px, 1.3vw, 24px) !important; font-weight: 500 !important; line-height: 1.18 !important; letter-spacing: .075em !important; color: #edca7c !important; text-transform: uppercase !important; text-shadow: 0 3px 13px rgba(0,0,0,.70), 0 0 15px rgba(198,161,91,.07) !important; } .jt-cs.avenir.ourmenu .slide h5::after { width: 55px !important; height: 2px !important; margin-top: 13px !important; } /* ========================================================= 6. BESCHREIBUNG RUHIGER UND KÜRZER ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-introtext { margin: 13px 48px 22px 30px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext p { display: -webkit-box !important; overflow: hidden !important; color: rgba(244,232,210,.72) !important; font-size: 13.5px !important; font-weight: 300 !important; line-height: 1.55 !important; letter-spacing: .018em !important; text-align: left !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; } /* ========================================================= 7. PFEIL ETWAS EDLER UND KLEINER ========================================================= */ .jt-cs.avenir.ourmenu .slide > .jt-inner::after { right: 18px !important; font-size: 35px !important; opacity: .58 !important; } .jt-cs.avenir.ourmenu .slide:hover > .jt-inner::after { opacity: 1 !important; transform: translateY(-50%) translateX(3px) !important; } /* ========================================================= 8. GLÜHKANTE REDUZIEREN ========================================================= */ .jt-cs.avenir.ourmenu .slide::after { width: 92px !important; height: 2px !important; transform: translateX(-50%) scaleX(.42) !important; opacity: .78 !important; } .jt-cs.avenir.ourmenu .slide:hover::after { transform: translateX(-50%) scaleX(.92) !important; opacity: 1 !important; } /* ========================================================= 9. MOBILE ========================================================= */ @media (max-width: 820px) { .jt-cs.avenir.ourmenu .slide > .jt-inner { grid-template-columns: minmax(135px, 38%) minmax(0, 62%) !important; min-height: 170px !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover, .jt-cs.avenir.ourmenu .slide .link-image, .jt-cs.avenir.ourmenu .slide img.jtcs-image { height: 170px !important; min-height: 170px !important; } .jt-cs.avenir.ourmenu .slide h5 { margin: 23px 38px 0 22px !important; font-size: 18px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext { margin: 11px 38px 18px 22px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext p { font-size: 12.5px !important; -webkit-line-clamp: 3 !important; } } @media (max-width: 480px) { .jt-cs.avenir.ourmenu .slide > .jt-inner { grid-template-columns: 115px minmax(0, 1fr) !important; min-height: 155px !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover, .jt-cs.avenir.ourmenu .slide .link-image, .jt-cs.avenir.ourmenu .slide img.jtcs-image { height: 155px !important; min-height: 155px !important; } .jt-cs.avenir.ourmenu .slide h5 { margin: 19px 31px 0 17px !important; font-size: 16px !important; letter-spacing: .045em !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext { margin: 10px 31px 15px 17px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext p { font-size: 11.5px !important; line-height: 1.45 !important; -webkit-line-clamp: 3 !important; } } /* ========================================================= UDO'S EVENTKARTEN – EINZELHOVER + ABGESCHRÄGTE GOLDRAHMEN Dieser Block überschreibt ältere Hover- und Rahmenregeln. ========================================================= */ /* ========================================================= 1. GEMEINSAME SPALTEN DÜRFEN SICH NICHT MEHR BEWEGEN ========================================================= */ .jt-cs.avenir.ourmenu .owl-item, .jt-cs.avenir.ourmenu .owl-item:hover, .jt-cs.avenir.ourmenu .fake-col-wrapper, .jt-cs.avenir.ourmenu .fake-col-wrapper:hover, .jt-cs.avenir.ourmenu .slide, .jt-cs.avenir.ourmenu .slide:hover { transform: none !important; translate: none !important; scale: 1 !important; } /* Falls ältere Regeln bei Hover alle drei Karten beeinflussen */ .jt-cs.avenir.ourmenu .fake-col-wrapper:hover > .slide > .jt-inner { transform: translateY(0) !important; border-color: rgba(198, 161, 91, 0.64) !important; box-shadow: 0 15px 32px rgba(0, 0, 0, 0.50), inset 0 0 0 1px rgba(229, 190, 101, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 0 0 34px rgba(0, 0, 0, 0.19) !important; } /* Ausschließlich die wirklich berührte Karte bewegt sich */ .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover > .jt-inner { transform: translateY(-7px) !important; border-color: rgba(247, 207, 112, 0.98) !important; box-shadow: 0 28px 56px rgba(0, 0, 0, 0.70), 0 0 24px rgba(222, 178, 78, 0.13), inset 0 0 0 1px rgba(248, 211, 122, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 0 0 42px rgba(0, 0, 0, 0.24) !important; } /* Nicht berührte Geschwister bleiben garantiert ruhig */ .jt-cs.avenir.ourmenu .fake-col-wrapper:hover > .slide:not(:hover) > .jt-inner { transform: translateY(0) !important; } /* ========================================================= 2. ABGESCHRÄGTE KARTENFORM ========================================================= */ .jt-cs.avenir.ourmenu .slide > .jt-inner { --udo-corner: 14px; position: relative !important; isolation: isolate !important; /* Abgeschnittene Ecken */ clip-path: polygon( var(--udo-corner) 0, calc(100% - var(--udo-corner)) 0, 100% var(--udo-corner), 100% calc(100% - var(--udo-corner)), calc(100% - var(--udo-corner)) 100%, var(--udo-corner) 100%, 0 calc(100% - var(--udo-corner)), 0 var(--udo-corner) ) !important; border: 1px solid rgba(207, 167, 76, 0.78) !important; border-radius: 0 !important; background: /* Metallischer Lichtreflex */ linear-gradient( 112deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.018) 44%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0.018) 56%, transparent 63%, transparent 100% ), /* Gebürstete Metallstruktur */ repeating-linear-gradient( 103deg, rgba(255, 255, 255, 0.014) 0, rgba(255, 255, 255, 0.014) 1px, rgba(0, 0, 0, 0.029) 1px, rgba(0, 0, 0, 0.029) 5px ), /* Leichtes Goldlicht */ radial-gradient( circle at 14% 0%, rgba(230, 185, 83, 0.075), transparent 35% ), linear-gradient( 145deg, #2b2723 0%, #1c1917 53%, #0f0e0d 100% ) !important; background-size: 235% 100%, auto, auto, auto !important; background-position: 145% 0, 0 0, 0 0, 0 0 !important; box-shadow: 0 15px 32px rgba(0, 0, 0, 0.50), inset 0 0 0 1px rgba(229, 190, 101, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 0 0 34px rgba(0, 0, 0, 0.19) !important; transition: transform 0.42s cubic-bezier(.22, .75, .25, 1), border-color 0.34s ease, box-shadow 0.42s ease, background-position 0.82s ease !important; } /* ========================================================= 3. INNERER GOLDRAHMEN ========================================================= */ /* Das Pseudoelement bildet einen zweiten, feineren Rahmen. Die eigentlichen Inhalte bleiben darüber bedienbar. */ .jt-cs.avenir.ourmenu .slide > .jt-inner::before { content: "" !important; position: absolute !important; inset: 7px !important; z-index: 30 !important; pointer-events: none !important; clip-path: polygon( 9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px ) !important; border: 1px solid rgba(224, 184, 91, 0.30) !important; box-shadow: inset 0 0 10px rgba(216, 169, 67, 0.035), 0 0 7px rgba(218, 172, 72, 0.035) !important; background: transparent !important; } /* Innerer Rahmen wird beim Hover etwas heller */ .jt-cs.avenir.ourmenu .slide:hover > .jt-inner::before { border-color: rgba(247, 207, 112, 0.55) !important; box-shadow: inset 0 0 13px rgba(236, 187, 77, 0.055), 0 0 9px rgba(236, 187, 77, 0.07) !important; } /* ========================================================= 4. GOLDENER LICHTPUNKT AUF DER OBERKANTE Da ::before nun den Innenrahmen erzeugt, nutzen wir die Slide selbst für den Lichtakzent. ========================================================= */ .jt-cs.avenir.ourmenu .slide::before { content: "" !important; position: absolute !important; top: -1px !important; left: 14% !important; width: 120px !important; height: 2px !important; z-index: 45 !important; pointer-events: none !important; background: linear-gradient( 90deg, transparent, #ffd67a, transparent ) !important; box-shadow: 0 0 7px rgba(255, 207, 94, 0.78), 0 0 18px rgba(255, 142, 25, 0.30) !important; opacity: 0.76 !important; transition: left 0.55s ease, opacity 0.35s ease, width 0.45s ease !important; } .jt-cs.avenir.ourmenu .slide:hover::before { left: 52% !important; width: 145px !important; opacity: 1 !important; } /* ========================================================= 5. PFEIL WIEDERHERSTELLEN ========================================================= */ .jt-cs.avenir.ourmenu .slide > .jt-inner::after { content: "›" !important; position: absolute !important; top: 50% !important; right: 18px !important; z-index: 35 !important; transform: translateY(-50%) translateX(-4px) !important; color: #dc332c !important; font-family: Arial, sans-serif !important; font-size: 34px !important; font-weight: 300 !important; line-height: 1 !important; opacity: 0.62 !important; text-shadow: 0 0 7px rgba(227, 51, 44, 0.56), 0 0 15px rgba(227, 51, 44, 0.22) !important; pointer-events: none !important; transition: transform 0.32s ease, opacity 0.32s ease, color 0.32s ease !important; } .jt-cs.avenir.ourmenu .slide:hover > .jt-inner::after { transform: translateY(-50%) translateX(3px) !important; color: #ff453b !important; opacity: 1 !important; } /* ========================================================= 6. BILDBEREICH AN DIE ABGESCHRÄGTE KARTE ANPASSEN ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover { overflow: hidden !important; border-right: 1px solid rgba(220, 179, 83, 0.58) !important; } /* Schräge Trennlinie zwischen Foto und Text */ .jt-cs.avenir.ourmenu .slide .jt-imagecover::after { content: "" !important; position: absolute !important; top: -12% !important; right: -10px !important; width: 20px !important; height: 124% !important; z-index: 12 !important; transform: rotate(3deg) !important; background: linear-gradient( 90deg, transparent, rgba(231, 187, 85, 0.78), transparent ) !important; box-shadow: 0 0 10px rgba(218, 170, 66, 0.10) !important; pointer-events: none !important; } /* ========================================================= 7. GLÜHKANTE NUR BEI DER EINZELNEN KARTE ========================================================= */ .jt-cs.avenir.ourmenu .slide::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: -1px !important; width: 94px !important; height: 2px !important; z-index: 48 !important; transform: translateX(-50%) scaleX(0.40) !important; background: linear-gradient( 90deg, transparent, #b91f19, #ff4036, #b91f19, transparent ) !important; box-shadow: 0 0 8px rgba(255, 55, 46, 0.72), 0 0 20px rgba(255, 55, 46, 0.29) !important; opacity: 0.76 !important; pointer-events: none !important; transition: transform 0.42s ease, opacity 0.35s ease, width 0.42s ease !important; } .jt-cs.avenir.ourmenu .slide:hover::after { width: 125px !important; transform: translateX(-50%) scaleX(1) !important; opacity: 1 !important; } /* ========================================================= 8. ETWAS MEHR ABSTAND ZWISCHEN DEN PLAKETTEN Damit die Hover-Anhebung nicht an der Nachbarkarte klebt ========================================================= */ .jt-cs.avenir.ourmenu .fake-col-wrapper { gap: 19px !important; } /* ========================================================= 9. MOBILE: KLEINERE ECKEN ========================================================= */ @media (max-width: 575px) { .jt-cs.avenir.ourmenu .slide > .jt-inner { --udo-corner: 10px; } .jt-cs.avenir.ourmenu .slide > .jt-inner::before { inset: 5px !important; clip-path: polygon( 7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px ) !important; } .jt-cs.avenir.ourmenu .slide::before { width: 82px !important; } } /* ========================================================= UDO'S EVENTKARTEN – PREMIUM-FEINSCHLIFF Preise entfernen · Bildtiefe · Ecklichter · Event-CTA ========================================================= */ /* ========================================================= 1. PREISE ENDGÜLTIG ENTFERNEN ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover .jt-caption, .jt-cs.avenir.ourmenu .slide span.jt-caption, .jt-cs.avenir.ourmenu span[class~="jt-caption"] { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* ========================================================= 2. BILD UND TEXT WEICHER MITEINANDER VERBINDEN ========================================================= */ .jt-cs.avenir.ourmenu .slide .link-image { position: relative !important; } /* Dunkler Verlauf am rechten Bildrand */ .jt-cs.avenir.ourmenu .slide .link-image::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 5 !important; pointer-events: none !important; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.02) 55%, rgba(10, 9, 8, 0.38) 82%, rgba(14, 12, 11, 0.78) 100% ), linear-gradient( 180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.24) ) !important; transition: opacity 0.45s ease, background 0.45s ease !important; } .jt-cs.avenir.ourmenu .slide:hover .link-image::after { background: linear-gradient( 90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 58%, rgba(10, 9, 8, 0.28) 84%, rgba(14, 12, 11, 0.68) 100% ), linear-gradient( 180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ) !important; } /* ========================================================= 3. KARTENOBERFLÄCHE MIT MEHR TIEFE ========================================================= */ .jt-cs.avenir.ourmenu .slide > .jt-inner { background: /* Kleine Goldlichter an den Ecken */ radial-gradient( circle at 14px 14px, rgba(255, 218, 125, 0.84) 0, rgba(255, 190, 64, 0.34) 2px, transparent 5px ), radial-gradient( circle at calc(100% - 14px) 14px, rgba(255, 218, 125, 0.58) 0, rgba(255, 190, 64, 0.22) 2px, transparent 5px ), /* Wandernder Metallreflex */ linear-gradient( 112deg, transparent 0%, transparent 37%, rgba(255, 255, 255, 0.018) 44%, rgba(255, 255, 255, 0.085) 50%, rgba(255, 255, 255, 0.018) 56%, transparent 63%, transparent 100% ), /* Gebürstetes Metall */ repeating-linear-gradient( 103deg, rgba(255, 255, 255, 0.014) 0, rgba(255, 255, 255, 0.014) 1px, rgba(0, 0, 0, 0.029) 1px, rgba(0, 0, 0, 0.029) 5px ), /* Leichte Vignette */ radial-gradient( ellipse at center, rgba(72, 59, 40, 0.11), rgba(12, 11, 10, 0.20) 72% ), linear-gradient( 145deg, #2b2723 0%, #1c1917 54%, #0e0d0c 100% ) !important; background-size: auto, auto, 235% 100%, auto, auto, auto !important; background-position: 0 0, 0 0, 145% 0, 0 0, 0 0, 0 0 !important; } .jt-cs.avenir.ourmenu .slide:hover > .jt-inner { background-position: 0 0, 0 0, -45% 0, 0 0, 0 0, 0 0 !important; } /* ========================================================= 4. TITEL ETWAS RUHIGER UND EDLER ========================================================= */ .jt-cs.avenir.ourmenu .slide h5 { margin: 29px 52px 0 34px !important; font-size: clamp(18px, 1.18vw, 23px) !important; font-weight: 500 !important; line-height: 1.18 !important; letter-spacing: 0.085em !important; color: #e9c778 !important; } .jt-cs.avenir.ourmenu .slide h5::after { width: 54px !important; margin-top: 14px !important; background: linear-gradient( 90deg, #ee3d34, rgba(238, 61, 52, 0.08), transparent ) !important; } /* ========================================================= 5. BESCHREIBUNG LESBARER UND KOMPAKTER ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-introtext { margin: 14px 52px 52px 34px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext p { color: rgba(240, 229, 208, 0.70) !important; font-size: 13px !important; font-weight: 300 !important; line-height: 1.55 !important; letter-spacing: 0.018em !important; text-align: left !important; -webkit-line-clamp: 2 !important; } /* ========================================================= 6. KLICKBAREN EVENT-LINK AUS DEM TITELLINK ERZEUGEN Der vorhandene Joomla-Link bleibt bestehen. ========================================================= */ .jt-cs.avenir.ourmenu .slide h5 .jt-title::after { content: "EVENT ENTDECKEN →" !important; position: absolute !important; left: calc(36% + 34px) !important; bottom: 23px !important; z-index: 35 !important; color: rgba(230, 195, 117, 0.70) !important; font-family: inherit !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.17em !important; text-transform: uppercase !important; white-space: nowrap !important; opacity: 0.72 !important; transform: translateY(3px) !important; transition: color 0.32s ease, opacity 0.32s ease, transform 0.32s ease, text-shadow 0.32s ease !important; } .jt-cs.avenir.ourmenu .slide:hover h5 .jt-title::after { color: #f2ce80 !important; opacity: 1 !important; transform: translateY(0) !important; text-shadow: 0 0 9px rgba(224, 177, 75, 0.24) !important; } /* Der bisherige große Pfeil wird dezenter */ .jt-cs.avenir.ourmenu .slide > .jt-inner::after { right: 18px !important; font-size: 29px !important; opacity: 0.38 !important; } .jt-cs.avenir.ourmenu .slide:hover > .jt-inner::after { opacity: 0.85 !important; } /* ========================================================= 7. INNERER GOLDRAHMEN FEINER UND PRÄZISER ========================================================= */ .jt-cs.avenir.ourmenu .slide > .jt-inner::before { inset: 6px !important; border-color: rgba(229, 190, 98, 0.24) !important; box-shadow: inset 0 0 12px rgba(218, 171, 70, 0.028), 0 0 6px rgba(218, 171, 70, 0.025) !important; } .jt-cs.avenir.ourmenu .slide:hover > .jt-inner::before { border-color: rgba(247, 209, 119, 0.48) !important; } /* ========================================================= 8. KARTENABSTAND UND EINZELHOVER ABSICHERN ========================================================= */ .jt-cs.avenir.ourmenu .fake-col-wrapper { gap: 20px !important; } /* Alle Karten der Spalte zurücksetzen */ .jt-cs.avenir.ourmenu .fake-col-wrapper:hover > .slide > .jt-inner { transform: translateY(0) !important; } /* Nur die tatsächlich berührte Karte anheben */ .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover > .jt-inner { transform: translateY(-7px) !important; } /* Geschwisterkarten bleiben definitiv stehen */ .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover ~ .slide > .jt-inner, .jt-cs.avenir.ourmenu .fake-col-wrapper:has(> .slide:hover) > .slide:not(:hover) > .jt-inner { transform: translateY(0) !important; } /* ========================================================= 9. MOBILE ========================================================= */ @media (max-width: 820px) { .jt-cs.avenir.ourmenu .slide h5 { margin: 23px 40px 0 23px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext { margin: 12px 40px 48px 23px !important; } .jt-cs.avenir.ourmenu .slide h5 .jt-title::after { left: calc(38% + 23px) !important; bottom: 19px !important; font-size: 9px !important; letter-spacing: 0.12em !important; } } @media (max-width: 575px) { .jt-cs.avenir.ourmenu .slide h5 { margin: 20px 34px 0 18px !important; font-size: 16px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext { margin: 10px 34px 43px 18px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext p { font-size: 11.5px !important; -webkit-line-clamp: 2 !important; } .jt-cs.avenir.ourmenu .slide h5 .jt-title::after { left: 143px !important; bottom: 17px !important; font-size: 8px !important; letter-spacing: 0.09em !important; } } /* Auf sehr schmalen Geräten CTA unter dem Text */ @media (max-width: 390px) { .jt-cs.avenir.ourmenu .slide h5 .jt-title::after { left: 22px !important; bottom: 18px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext { margin-bottom: 50px !important; } } /* ========================================================= UDO'S EVENTKARTEN – EINGELASSENE PREMIUM-BILDFENSTER Goldrahmen · Tiefe · Vignette · Lichtreflex ========================================================= */ /* ========================================================= 1. BILDFENSTER ALS EINGELASSENE FLÄCHE ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover { position: relative !important; isolation: isolate !important; overflow: hidden !important; background: #090807 !important; border-right: 1px solid rgba(226, 183, 84, 0.68) !important; box-shadow: inset -14px 0 24px rgba(0, 0, 0, 0.38), inset 0 0 24px rgba(0, 0, 0, 0.46), inset 0 0 0 1px rgba(226, 184, 87, 0.20) !important; } /* ========================================================= 2. FOTO ETWAS TIEFER IN DIE KARTE SETZEN ========================================================= */ .jt-cs.avenir.ourmenu .slide .link-image { position: relative !important; z-index: 1 !important; display: block !important; width: 100% !important; height: 100% !important; overflow: hidden !important; background: #090807 !important; box-shadow: inset 0 0 0 1px rgba(237, 197, 102, 0.22), inset 0 0 28px rgba(0, 0, 0, 0.54) !important; } /* Bild selbst */ .jt-cs.avenir.ourmenu .slide img.jtcs-image { position: relative !important; z-index: 1 !important; display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transform: scale(1.025) !important; filter: contrast(1.10) saturate(0.92) brightness(0.78) sepia(0.035) !important; transition: transform 0.75s cubic-bezier(.22, .75, .25, 1), filter 0.50s ease !important; } /* ========================================================= 3. DUNKLE VIGNETTE FÜR MEHR TIEFE ========================================================= */ .jt-cs.avenir.ourmenu .slide .link-image::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 5 !important; pointer-events: none !important; background: /* Bildkante zur Textfläche abdunkeln */ linear-gradient( 90deg, rgba(5, 4, 4, 0.10) 0%, rgba(5, 4, 4, 0.02) 46%, rgba(8, 7, 6, 0.18) 72%, rgba(12, 10, 9, 0.74) 100% ), /* obere und untere Vignette */ linear-gradient( 180deg, rgba(0, 0, 0, 0.28) 0%, transparent 24%, transparent 68%, rgba(0, 0, 0, 0.42) 100% ), /* Randvignette */ radial-gradient( ellipse at center, transparent 44%, rgba(0, 0, 0, 0.18) 73%, rgba(0, 0, 0, 0.48) 100% ) !important; transition: opacity 0.45s ease, background 0.45s ease !important; } /* ========================================================= 4. FEINER INNERER GOLDRAHMEN ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover::before { content: "" !important; position: absolute !important; inset: 7px !important; z-index: 10 !important; pointer-events: none !important; clip-path: polygon( 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ) !important; border: 1px solid rgba(231, 190, 95, 0.30) !important; box-shadow: inset 0 0 12px rgba(230, 180, 73, 0.035), 0 0 8px rgba(229, 179, 72, 0.035) !important; transition: border-color 0.35s ease, box-shadow 0.35s ease !important; } /* ========================================================= 5. SCHRÄGE GOLD-METALLKANTE ZUM TEXT ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover::after { content: "" !important; position: absolute !important; top: -11% !important; right: -13px !important; width: 27px !important; height: 123% !important; z-index: 12 !important; pointer-events: none !important; transform: rotate(3.2deg) !important; background: linear-gradient( 90deg, transparent 0%, rgba(132, 94, 31, 0.18) 24%, rgba(249, 207, 112, 0.90) 48%, rgba(144, 99, 29, 0.24) 72%, transparent 100% ) !important; box-shadow: 0 0 8px rgba(226, 179, 71, 0.16), 0 0 18px rgba(226, 179, 71, 0.07) !important; } /* ========================================================= 6. LICHTREFLEX ÜBER DEM BILD ========================================================= */ .jt-cs.avenir.ourmenu .slide .link-image::before { content: "" !important; position: absolute !important; top: -20% !important; left: -65% !important; width: 36% !important; height: 145% !important; z-index: 7 !important; pointer-events: none !important; transform: rotate(13deg) !important; background: linear-gradient( 90deg, transparent, rgba(255, 236, 190, 0.025), rgba(255, 236, 190, 0.18), rgba(255, 236, 190, 0.025), transparent ) !important; opacity: 0 !important; transition: left 0.85s cubic-bezier(.22, .75, .25, 1), opacity 0.30s ease !important; } /* ========================================================= 7. HOVER NUR FÜR DAS BERÜHRTE BILDFENSTER ========================================================= */ .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover .jt-imagecover::before { border-color: rgba(250, 211, 120, 0.62) !important; box-shadow: inset 0 0 14px rgba(237, 188, 78, 0.055), 0 0 10px rgba(237, 188, 78, 0.09) !important; } .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover img.jtcs-image { transform: scale(1.075) !important; filter: contrast(1.11) saturate(1.02) brightness(0.90) sepia(0.025) !important; } .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover .link-image::before { left: 135% !important; opacity: 1 !important; } .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover .link-image::after { background: linear-gradient( 90deg, rgba(5, 4, 4, 0.05) 0%, rgba(5, 4, 4, 0.01) 48%, rgba(8, 7, 6, 0.12) 74%, rgba(12, 10, 9, 0.62) 100% ), linear-gradient( 180deg, rgba(0, 0, 0, 0.18) 0%, transparent 25%, transparent 70%, rgba(0, 0, 0, 0.31) 100% ), radial-gradient( ellipse at center, transparent 48%, rgba(0, 0, 0, 0.12) 75%, rgba(0, 0, 0, 0.38) 100% ) !important; } /* ========================================================= 8. KLEINER GOLDENER LICHTAKZENT IM BILD ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover { background-image: radial-gradient( circle at 14px 14px, rgba(255, 219, 131, 0.72) 0, rgba(255, 185, 60, 0.27) 2px, transparent 5px ) !important; } /* ========================================================= 9. MOBILE – WENIGER STARKE EFFEKTE ========================================================= */ @media (max-width: 575px) { .jt-cs.avenir.ourmenu .slide .jt-imagecover::before { inset: 5px !important; clip-path: polygon( 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px ) !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover::after { right: -10px !important; width: 20px !important; } .jt-cs.avenir.ourmenu .slide .link-image::before { display: none !important; } } /* ========================================================= UDO'S EVENTKARTEN – SIGNATURE BLACK & GOLD FRAME Permanenter Doppelrahmen · polygonales Bildfenster ========================================================= */ /* ========================================================= 1. AUSSENRAHMEN DAUERHAFT SICHTBAR ========================================================= */ .jt-cs.avenir.ourmenu .slide { position: relative !important; isolation: isolate !important; padding: 7px !important; margin: 0 !important; overflow: visible !important; background: transparent !important; transform: none !important; } /* Äußerer schwarzer Goldrahmen */ .jt-cs.avenir.ourmenu .slide::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; clip-path: polygon( 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px ) !important; background: linear-gradient( 145deg, rgba(255, 218, 126, 0.98), rgba(119, 76, 15, 0.90) 25%, rgba(244, 189, 74, 0.96) 50%, rgba(93, 57, 10, 0.92) 76%, rgba(255, 214, 116, 0.98) ) !important; box-shadow: 0 0 0 1px rgba(255, 225, 151, 0.25), 0 0 12px rgba(219, 163, 47, 0.20), 0 0 28px rgba(0, 0, 0, 0.55) !important; } /* Dunkle Innenfläche innerhalb des Außenrahmens */ .jt-cs.avenir.ourmenu .slide::after { content: "" !important; position: absolute !important; inset: 2px !important; z-index: 2 !important; pointer-events: none !important; clip-path: polygon( 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px ) !important; background: linear-gradient( 145deg, #171513, #080706 72% ) !important; box-shadow: inset 0 0 0 1px rgba(255, 216, 123, 0.18), inset 0 0 20px rgba(0, 0, 0, 0.82) !important; } /* ========================================================= 2. KARTENKÖRPER ========================================================= */ .jt-cs.avenir.ourmenu .slide > .jt-inner { position: relative !important; z-index: 5 !important; clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px ) !important; border: 1px solid rgba(231, 184, 83, 0.58) !important; border-radius: 0 !important; background: radial-gradient( circle at 82% 0%, rgba(236, 191, 91, 0.07), transparent 30% ), linear-gradient( 110deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.025) 47%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0.025) 53%, transparent 60% ), repeating-linear-gradient( 103deg, rgba(255, 255, 255, 0.012) 0, rgba(255, 255, 255, 0.012) 1px, rgba(0, 0, 0, 0.026) 1px, rgba(0, 0, 0, 0.026) 5px ), linear-gradient( 145deg, #27231f 0%, #181512 50%, #090807 100% ) !important; background-size: auto, 230% 100%, auto, auto !important; background-position: 0 0, 145% 0, 0 0, 0 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 225, 148, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 30px rgba(0, 0, 0, 0.32), 0 14px 26px rgba(0, 0, 0, 0.48) !important; transition: transform 0.42s cubic-bezier(.22, .75, .25, 1), box-shadow 0.42s ease, border-color 0.35s ease, background-position 0.80s ease !important; } /* ========================================================= 3. DAUERHAFTER INNERER GOLDRAHMEN ========================================================= */ .jt-cs.avenir.ourmenu .slide > .jt-inner::before { content: "" !important; position: absolute !important; inset: 7px !important; z-index: 40 !important; pointer-events: none !important; clip-path: polygon( 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ) !important; border: 1px solid rgba(235, 192, 99, 0.34) !important; box-shadow: inset 0 0 10px rgba(231, 178, 68, 0.04), 0 0 7px rgba(231, 178, 68, 0.04) !important; background: transparent !important; } /* ========================================================= 4. POLYGONALES BILDFENSTER ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover { position: relative !important; z-index: 6 !important; overflow: visible !important; clip-path: polygon( 0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100% ) !important; background: #090807 !important; border: 0 !important; border-right: 1px solid rgba(239, 190, 81, 0.78) !important; box-shadow: inset -16px 0 25px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(234, 190, 96, 0.20), inset 0 0 24px rgba(0, 0, 0, 0.50) !important; } /* Bildlink übernimmt dieselbe Form */ .jt-cs.avenir.ourmenu .slide .link-image { clip-path: inherit !important; background: #080706 !important; } /* Bild selbst ebenfalls polygonal */ .jt-cs.avenir.ourmenu .slide img.jtcs-image { clip-path: inherit !important; transform: scale(1.025) !important; filter: contrast(1.11) saturate(0.92) brightness(0.78) sepia(0.035) !important; } /* ========================================================= 5. GOLDENER INNENRAHMEN IM BILDFENSTER ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover::before { content: "" !important; position: absolute !important; inset: 8px 17px 8px 8px !important; z-index: 20 !important; pointer-events: none !important; clip-path: polygon( 7px 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px ) !important; border: 1px solid rgba(243, 200, 106, 0.46) !important; box-shadow: inset 0 0 10px rgba(240, 187, 73, 0.045), 0 0 8px rgba(240, 187, 73, 0.06) !important; background: transparent !important; } /* ========================================================= 6. LEUCHTENDE SCHRÄGKANTE ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover::after { content: "" !important; position: absolute !important; top: -8% !important; right: 8px !important; width: 3px !important; height: 116% !important; z-index: 30 !important; pointer-events: none !important; transform: rotate(-8deg) !important; transform-origin: center !important; background: linear-gradient( 180deg, transparent, rgba(255, 214, 114, 0.88) 15%, #ffd16c 50%, rgba(255, 214, 114, 0.88) 85%, transparent ) !important; box-shadow: 0 0 6px rgba(255, 208, 97, 0.78), 0 0 15px rgba(255, 157, 30, 0.22) !important; } /* ========================================================= 7. GOLDLICHT AUF DER OBERKANTE ========================================================= */ .jt-cs.avenir.ourmenu .slide { --udo-light-left: 16%; } .jt-cs.avenir.ourmenu .slide > .jt-inner { overflow: hidden !important; } .jt-cs.avenir.ourmenu .slide > .jt-inner { position: relative !important; } .jt-cs.avenir.ourmenu .slide > .jt-inner > h5::before { content: "" !important; position: absolute !important; top: 0 !important; left: var(--udo-light-left) !important; width: 130px !important; height: 2px !important; z-index: 60 !important; pointer-events: none !important; background: linear-gradient( 90deg, transparent, #ffe09a, transparent ) !important; box-shadow: 0 0 7px rgba(255, 215, 121, 0.84), 0 0 19px rgba(255, 143, 28, 0.25) !important; } /* ========================================================= 8. EINZELKARTEN-HOVER ========================================================= */ .jt-cs.avenir.ourmenu .fake-col-wrapper:hover > .slide { transform: none !important; } .jt-cs.avenir.ourmenu .fake-col-wrapper:hover > .slide > .jt-inner { transform: translateY(0) !important; } /* Nur die berührte Karte */ .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover > .jt-inner { transform: translateY(-6px) !important; border-color: rgba(255, 214, 118, 0.98) !important; background-position: 0 0, -45% 0, 0 0, 0 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 229, 158, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 38px rgba(0, 0, 0, 0.35), 0 26px 52px rgba(0, 0, 0, 0.70), 0 0 24px rgba(225, 174, 64, 0.12) !important; } /* Geschwisterkarten bleiben stehen */ .jt-cs.avenir.ourmenu .fake-col-wrapper:has(> .slide:hover) > .slide:not(:hover) > .jt-inner { transform: translateY(0) !important; } /* Bild wird beim Hover lebendiger */ .jt-cs.avenir.ourmenu .slide:hover img.jtcs-image { transform: scale(1.075) !important; filter: contrast(1.12) saturate(1.02) brightness(0.90) sepia(0.025) !important; } /* ========================================================= 9. HOVER-LICHTREFLEX IM BILD ========================================================= */ .jt-cs.avenir.ourmenu .slide .link-image::before { content: "" !important; position: absolute !important; top: -20% !important; left: -65% !important; width: 34% !important; height: 145% !important; z-index: 15 !important; pointer-events: none !important; transform: rotate(12deg) !important; background: linear-gradient( 90deg, transparent, rgba(255, 235, 185, 0.025), rgba(255, 235, 185, 0.18), rgba(255, 235, 185, 0.025), transparent ) !important; opacity: 0 !important; transition: left 0.85s cubic-bezier(.22, .75, .25, 1), opacity 0.30s ease !important; } .jt-cs.avenir.ourmenu .slide:hover .link-image::before { left: 135% !important; opacity: 1 !important; } /* ========================================================= 10. MOBILE ========================================================= */ @media (max-width: 575px) { .jt-cs.avenir.ourmenu .slide { padding: 5px !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover { clip-path: polygon( 0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100% ) !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover::before { inset: 5px 11px 5px 5px !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover::after { right: 5px !important; } } /* ========================================================= UDO'S EVENTKARTEN – FINALER FEINSCHLIFF Mehr Tiefe, ruhigeres Bildfenster, edlerer Rahmen ========================================================= */ /* Außenrahmen dunkler und metallischer */ .jt-cs.avenir.ourmenu .slide::before { background: linear-gradient( 145deg, #1b1712 0%, #6f4c18 12%, #d7a542 24%, #ffdd8a 30%, #9a671d 38%, #251b0f 52%, #a87424 72%, #f0c466 84%, #2a1c0d 100% ) !important; box-shadow: 0 0 0 1px rgba(255, 225, 151, 0.16), 0 0 10px rgba(221, 167, 61, 0.16), 0 18px 34px rgba(0, 0, 0, 0.62) !important; } /* Kartenkörper etwas tiefer und dunkler */ .jt-cs.avenir.ourmenu .slide > .jt-inner { grid-template-columns: minmax(205px, 31%) minmax(0, 69%) !important; background: radial-gradient( circle at 78% 0%, rgba(229, 185, 88, 0.06), transparent 28% ), repeating-linear-gradient( 103deg, rgba(255,255,255,.010) 0, rgba(255,255,255,.010) 1px, rgba(0,0,0,.030) 1px, rgba(0,0,0,.030) 5px ), linear-gradient( 145deg, #24201c 0%, #151311 56%, #090807 100% ) !important; box-shadow: inset 0 0 0 1px rgba(255, 225, 148, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 36px rgba(0, 0, 0, 0.42), 0 16px 32px rgba(0, 0, 0, 0.56) !important; } /* Bildfenster etwas schmaler und klarer gefasst */ .jt-cs.avenir.ourmenu .slide .jt-imagecover { clip-path: polygon( 0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100% ) !important; box-shadow: inset -18px 0 28px rgba(0, 0, 0, 0.52), inset 0 0 0 1px rgba(234, 190, 96, 0.22), inset 0 0 30px rgba(0, 0, 0, 0.58) !important; } /* Innerer Bildrahmen kräftiger */ .jt-cs.avenir.ourmenu .slide .jt-imagecover::before { border-color: rgba(244, 202, 108, 0.54) !important; box-shadow: inset 0 0 12px rgba(240, 187, 73, 0.05), 0 0 8px rgba(240, 187, 73, 0.08) !important; } /* Schräge Goldkante etwas ruhiger */ .jt-cs.avenir.ourmenu .slide .jt-imagecover::after { right: 7px !important; width: 2px !important; box-shadow: 0 0 5px rgba(255, 208, 97, 0.62), 0 0 12px rgba(255, 157, 30, 0.16) !important; } /* Titel minimal kleiner und ruhiger */ .jt-cs.avenir.ourmenu .slide h5 { margin: 27px 46px 0 30px !important; font-size: clamp(17px, 1.08vw, 22px) !important; letter-spacing: 0.075em !important; } /* Beschreibung etwas kompakter */ .jt-cs.avenir.ourmenu .slide .jt-introtext { margin: 13px 46px 46px 30px !important; } .jt-cs.avenir.ourmenu .slide .jt-introtext p { font-size: 12.5px !important; line-height: 1.52 !important; } /* CTA näher an den Inhalt */ .jt-cs.avenir.ourmenu .slide h5 .jt-title::after { left: calc(31% + 30px) !important; bottom: 20px !important; font-size: 9px !important; letter-spacing: 0.15em !important; } /* Rechter Pfeil dezenter */ .jt-cs.avenir.ourmenu .slide > .jt-inner::after { right: 15px !important; font-size: 26px !important; opacity: 0.34 !important; } .jt-cs.avenir.ourmenu .slide:hover > .jt-inner::after { opacity: 0.78 !important; } /* Hover nur leicht – kein Sprunggefühl */ .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover > .jt-inner { transform: translateY(-4px) !important; } /* Mobile Anpassung */ @media (max-width: 575px) { .jt-cs.avenir.ourmenu .slide > .jt-inner { grid-template-columns: 120px minmax(0, 1fr) !important; } .jt-cs.avenir.ourmenu .slide h5 .jt-title::after { left: 138px !important; } } /* ========================================================= UDO'S EVENTKARTEN – VERTIEFTES BLACK-GOLD-BILDFENSTER Kräftiger Metallrahmen · Goldintarsie · eingelassenes Foto ========================================================= */ /* ========================================================= 1. BILDBEREICH ALS TIEFE RAHMENKASSETTE ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover { position: relative !important; isolation: isolate !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; /* Abstand erzeugt den sichtbaren schwarzen Rahmen */ padding: 11px 20px 11px 11px !important; overflow: visible !important; background: /* goldene Lichtkante innen */ linear-gradient( 145deg, rgba(255, 221, 138, 0.92), rgba(116, 73, 16, 0.95) 18%, rgba(229, 174, 61, 0.92) 42%, rgba(46, 29, 11, 0.98) 64%, rgba(243, 193, 79, 0.90) 83%, rgba(91, 56, 13, 0.96) ) !important; clip-path: polygon( 0 0, calc(100% - 27px) 0, 100% 50%, calc(100% - 27px) 100%, 0 100% ) !important; border: 0 !important; box-shadow: /* dunkler äußerer Metallrand */ inset 0 0 0 3px #080706, /* feine innere Goldintarsie */ inset 0 0 0 4px rgba(232, 181, 70, 0.72), /* Vertiefung */ inset -15px 0 22px rgba(0, 0, 0, 0.86), inset 0 10px 17px rgba(0, 0, 0, 0.62), inset 0 -10px 17px rgba(0, 0, 0, 0.72), /* Schatten auf der Kartenfläche */ 8px 0 18px rgba(0, 0, 0, 0.44), 0 0 10px rgba(213, 157, 47, 0.08) !important; } /* ========================================================= 2. EIGENTLICHES FOTO VERTIEFT EINSETZEN ========================================================= */ .jt-cs.avenir.ourmenu .slide .link-image { position: relative !important; z-index: 2 !important; display: block !important; width: 100% !important; height: 100% !important; min-height: inherit !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #050404 !important; clip-path: polygon( 5px 0, calc(100% - 21px) 0, 100% 50%, calc(100% - 21px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px ) !important; border: 1px solid rgba(244, 201, 105, 0.62) !important; box-shadow: /* dunkle Schatten direkt um das Foto */ inset 0 0 0 4px rgba(4, 3, 3, 0.82), inset 0 0 22px rgba(0, 0, 0, 0.84), inset -13px 0 20px rgba(0, 0, 0, 0.58), /* Goldkante mit schwachem Schein */ 0 0 0 1px rgba(75, 47, 12, 0.94), 0 0 9px rgba(222, 169, 59, 0.13), /* Tiefer Schatten unter dem Fenster */ 0 8px 15px rgba(0, 0, 0, 0.58) !important; } /* ========================================================= 3. FOTO SELBST ========================================================= */ .jt-cs.avenir.ourmenu .slide img.jtcs-image { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; clip-path: inherit !important; transform: scale(1.035) translateZ(0) !important; filter: contrast(1.11) saturate(0.90) brightness(0.73) sepia(0.045) !important; transition: transform 0.72s cubic-bezier(.22, .75, .25, 1), filter 0.48s ease !important; } /* ========================================================= 4. VIGNETTE IM BILDFENSTER ========================================================= */ .jt-cs.avenir.ourmenu .slide .link-image::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 6 !important; pointer-events: none !important; background: /* tiefe Randabdunklung */ radial-gradient( ellipse at center, transparent 35%, rgba(0, 0, 0, 0.16) 62%, rgba(0, 0, 0, 0.60) 100% ), /* Schatten zur Textseite */ linear-gradient( 90deg, rgba(0, 0, 0, 0.12) 0%, transparent 42%, rgba(4, 3, 3, 0.12) 68%, rgba(7, 6, 5, 0.72) 100% ), /* obere und untere Tiefe */ linear-gradient( 180deg, rgba(0, 0, 0, 0.36) 0%, transparent 25%, transparent 68%, rgba(0, 0, 0, 0.52) 100% ) !important; } /* ========================================================= 5. INNERE GOLDFASSUNG ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover::before { content: "" !important; position: absolute !important; inset: 6px 15px 6px 6px !important; z-index: 12 !important; pointer-events: none !important; clip-path: polygon( 7px 0, calc(100% - 23px) 0, 100% 50%, calc(100% - 23px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px ) !important; border: 1px solid rgba(255, 211, 116, 0.72) !important; background: transparent !important; box-shadow: inset 0 0 0 2px rgba(8, 6, 4, 0.78), inset 0 0 10px rgba(229, 172, 55, 0.07), 0 0 7px rgba(232, 178, 64, 0.10) !important; } /* ========================================================= 6. MASSIVE SCHRÄGE SCHWARZ-GOLD-KANTE ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover::after { content: "" !important; position: absolute !important; top: -7% !important; right: 8px !important; width: 8px !important; height: 114% !important; z-index: 20 !important; pointer-events: none !important; transform: rotate(-8deg) !important; transform-origin: center !important; background: linear-gradient( 90deg, #080604 0%, #17100a 20%, #9f6a1c 38%, #ffd87b 50%, #ae741e 62%, #17100a 80%, #080604 100% ) !important; box-shadow: -4px 0 8px rgba(0, 0, 0, 0.70), 3px 0 7px rgba(255, 204, 91, 0.24), 0 0 12px rgba(255, 174, 38, 0.16) !important; } /* ========================================================= 7. HOVER – DAS FOTO KOMMT DEZENT NACH VORN Der Rahmen bleibt ruhig und dauerhaft sichtbar. ========================================================= */ .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover img.jtcs-image { transform: scale(1.085) translateZ(0) !important; filter: contrast(1.12) saturate(1.01) brightness(0.87) sepia(0.025) !important; } .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover .link-image { border-color: rgba(255, 218, 132, 0.88) !important; box-shadow: inset 0 0 0 4px rgba(4, 3, 3, 0.76), inset 0 0 20px rgba(0, 0, 0, 0.75), inset -12px 0 19px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(103, 67, 17, 0.96), 0 0 15px rgba(230, 176, 62, 0.20), 0 10px 19px rgba(0, 0, 0, 0.65) !important; } .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover .jt-imagecover::before { border-color: rgba(255, 221, 139, 0.90) !important; box-shadow: inset 0 0 0 2px rgba(8, 6, 4, 0.75), inset 0 0 12px rgba(237, 182, 65, 0.10), 0 0 10px rgba(237, 182, 65, 0.16) !important; } /* ========================================================= 8. MOBILE ========================================================= */ @media (max-width: 575px) { .jt-cs.avenir.ourmenu .slide .jt-imagecover { padding: 7px 13px 7px 7px !important; clip-path: polygon( 0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100% ) !important; } .jt-cs.avenir.ourmenu .slide .link-image { clip-path: polygon( 4px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px ) !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover::before { inset: 4px 10px 4px 4px !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover::after { right: 5px !important; width: 5px !important; } } /* ========================================================= UDO'S EVENTKARTEN – MATERIAL- & TIEFEN-FINISH 1. Massiver schwarzer Bildrahmen mit Goldfase 2. Gebürstete Metalltiefe in der Textfläche 3. Mehr Gewicht und räumliche Tiefe für die gesamte Karte ========================================================= */ /* ========================================================= 1. GESAMTE KARTE WIRKT WIE EINE MASSIVE METALLPLATTE ========================================================= */ .jt-cs.avenir.ourmenu .slide > .jt-inner { position: relative !important; isolation: isolate !important; /* minimale zusätzliche Höhe für mehr Souveränität */ min-height: 194px !important; /* Metalloberfläche der gesamten Karte */ background: /* dezenter Lichtschein von oben */ linear-gradient( 180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.008) 18%, transparent 42%, rgba(0, 0, 0, 0.08) 100% ), /* kaum sichtbarer Metallreflex */ linear-gradient( 108deg, transparent 0%, transparent 41%, rgba(255, 255, 255, 0.018) 46%, rgba(255, 255, 255, 0.065) 50%, rgba(255, 255, 255, 0.018) 54%, transparent 59%, transparent 100% ), /* gebürsteter Stahl */ repeating-linear-gradient( 102deg, rgba(255, 255, 255, 0.012) 0, rgba(255, 255, 255, 0.012) 1px, rgba(0, 0, 0, 0.026) 1px, rgba(0, 0, 0, 0.026) 5px ), /* Grundmaterial */ linear-gradient( 145deg, #292520 0%, #1b1815 48%, #0c0b0a 100% ) !important; background-size: auto, 235% 100%, auto, auto !important; background-position: 0 0, 145% 0, 0 0, 0 0 !important; /* Außenkante + Innenfase + Schatten: Die Karte wirkt dadurch wie eine ca. 8 mm starke Platte. */ box-shadow: /* untere Materialkante */ 0 5px 0 rgba(5, 4, 3, 0.95), /* harter Kontaktschatten */ 0 9px 12px rgba(0, 0, 0, 0.52), /* weicher Tiefenschatten */ 0 24px 42px rgba(0, 0, 0, 0.46), /* feine goldene Innenkante */ inset 0 0 0 1px rgba(226, 181, 84, 0.17), /* obere Fase */ inset 0 2px 0 rgba(255, 223, 145, 0.075), /* untere dunkle Fase */ inset 0 -4px 7px rgba(0, 0, 0, 0.46), /* Materialtiefe */ inset 0 0 34px rgba(0, 0, 0, 0.26) !important; transition: transform 0.42s cubic-bezier(.22, .75, .25, 1), box-shadow 0.42s ease, background-position 0.85s ease, border-color 0.35s ease !important; } /* Goldkante oben heller, unten dunkler */ .jt-cs.avenir.ourmenu .slide > .jt-inner { border-top-color: rgba(245, 205, 112, 0.82) !important; border-right-color: rgba(139, 91, 23, 0.76) !important; border-bottom-color: rgba(101, 63, 14, 0.92) !important; border-left-color: rgba(211, 163, 64, 0.68) !important; } /* ========================================================= 2. MASSIVER SCHWARZER STAHLRAHMEN UM DAS BILD ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover { position: relative !important; isolation: isolate !important; /* Dieser Abstand bildet den sichtbaren, kräftigen schwarzen Rahmen. */ padding: 13px 23px 13px 13px !important; overflow: visible !important; /* Außen: tiefschwarzer Stahl Innen: schmale Goldfase */ background: linear-gradient( 145deg, #1b1916 0%, #050504 22%, #11100e 52%, #020202 100% ) !important; box-shadow: /* äußere schwarze Rahmenstärke */ inset 0 0 0 4px #050504, /* schmale goldene Intarsie */ inset 0 0 0 5px rgba(217, 165, 61, 0.72), /* zweite dunkle Ebene */ inset 0 0 0 8px rgba(7, 6, 5, 0.94), /* räumliche Tiefe */ inset 0 12px 18px rgba(0, 0, 0, 0.74), inset 0 -13px 19px rgba(0, 0, 0, 0.82), inset -18px 0 25px rgba(0, 0, 0, 0.88), /* Schatten auf die Textplatte */ 9px 0 18px rgba(0, 0, 0, 0.48), /* sehr dezenter Goldschein */ 0 0 10px rgba(221, 165, 48, 0.10) !important; } /* ========================================================= 3. FOTO TATSÄCHLICH VERTIEFT EINSETZEN ========================================================= */ .jt-cs.avenir.ourmenu .slide .link-image { position: relative !important; z-index: 3 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; background: #030302 !important; border: 1px solid rgba(241, 197, 97, 0.54) !important; /* Dunkler Innenrahmen + Goldkante + tiefer Schatten erzeugen die versenkte Fotokassette. */ box-shadow: /* schwarze Fassung direkt um das Foto */ inset 0 0 0 5px rgba(3, 3, 2, 0.92), /* Goldfase */ inset 0 0 0 6px rgba(205, 148, 38, 0.46), /* innere Vertiefung */ inset 0 0 25px rgba(0, 0, 0, 0.78), inset 0 10px 16px rgba(0, 0, 0, 0.66), inset 0 -12px 17px rgba(0, 0, 0, 0.72), inset -12px 0 20px rgba(0, 0, 0, 0.58), /* äußerer Schatten des eingelassenen Rahmens */ 0 7px 14px rgba(0, 0, 0, 0.68), 0 0 0 1px rgba(61, 39, 12, 0.96), 0 0 10px rgba(224, 168, 53, 0.10) !important; } /* Bild sitzt visuell hinter dem Rahmen */ .jt-cs.avenir.ourmenu .slide img.jtcs-image { position: relative !important; z-index: 1 !important; transform: scale(1.045) translateZ(0) !important; filter: contrast(1.11) saturate(0.91) brightness(0.72) sepia(0.04) !important; transition: transform 0.72s cubic-bezier(.22, .75, .25, 1), filter 0.48s ease !important; } /* Tiefere Vignette innerhalb des Fotos */ .jt-cs.avenir.ourmenu .slide .link-image::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 8 !important; pointer-events: none !important; background: radial-gradient( ellipse at center, transparent 32%, rgba(0, 0, 0, 0.18) 62%, rgba(0, 0, 0, 0.64) 100% ), linear-gradient( 180deg, rgba(0, 0, 0, 0.35) 0%, transparent 24%, transparent 66%, rgba(0, 0, 0, 0.54) 100% ), linear-gradient( 90deg, rgba(0, 0, 0, 0.12), transparent 48%, rgba(0, 0, 0, 0.16) 72%, rgba(0, 0, 0, 0.72) 100% ) !important; } /* ========================================================= 4. SCHWARZ-GOLDENE FASE AN DER SCHRÄGKANTE ========================================================= */ .jt-cs.avenir.ourmenu .slide .jt-imagecover::after { content: "" !important; position: absolute !important; top: -7% !important; right: 8px !important; width: 10px !important; height: 114% !important; z-index: 25 !important; pointer-events: none !important; transform: rotate(-8deg) !important; transform-origin: center !important; background: linear-gradient( 90deg, #020201 0%, #080604 18%, #5c3b12 31%, #c58b2e 43%, #ffdc83 50%, #bd8128 57%, #52330e 69%, #080604 82%, #020201 100% ) !important; box-shadow: -5px 0 8px rgba(0, 0, 0, 0.82), 4px 0 8px rgba(255, 201, 83, 0.21), 0 0 13px rgba(255, 170, 26, 0.14) !important; } /* ========================================================= 5. TEXTFLÄCHE MIT KAUM SICHTBAREM METALLREFLEX ========================================================= */ /* Beim normalen Zustand ist der Reflex nahezu unsichtbar. Beim Hover wandert er sanft über die Textfläche. */ .jt-cs.avenir.ourmenu .slide > .jt-inner { background-position: 0 0, 145% 0, 0 0, 0 0 !important; } .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover > .jt-inner { transform: translateY(-4px) !important; background-position: 0 0, -42% 0, 0 0, 0 0 !important; box-shadow: 0 6px 0 rgba(4, 3, 2, 0.98), 0 12px 16px rgba(0, 0, 0, 0.58), 0 31px 52px rgba(0, 0, 0, 0.56), inset 0 0 0 1px rgba(239, 198, 105, 0.21), inset 0 2px 0 rgba(255, 229, 161, 0.10), inset 0 -4px 8px rgba(0, 0, 0, 0.50), inset 0 0 39px rgba(0, 0, 0, 0.29), 0 0 21px rgba(222, 168, 60, 0.10) !important; } /* Nur das berührte Foto wird etwas lebendiger */ .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:hover img.jtcs-image { transform: scale(1.085) translateZ(0) !important; filter: contrast(1.12) saturate(1.01) brightness(0.86) sepia(0.025) !important; } /* ========================================================= 6. CTA UND PFEIL ETWAS PRÄSENTER ========================================================= */ .jt-cs.avenir.ourmenu .slide h5 .jt-title::after { color: rgba(232, 195, 112, 0.78) !important; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72) !important; } .jt-cs.avenir.ourmenu .slide:hover h5 .jt-title::after { color: #f3ce7f !important; text-shadow: 0 0 10px rgba(226, 175, 67, 0.22) !important; } .jt-cs.avenir.ourmenu .slide > .jt-inner::after { color: #d9332c !important; opacity: 0.48 !important; } .jt-cs.avenir.ourmenu .slide:hover > .jt-inner::after { color: #ff473d !important; opacity: 0.92 !important; } /* ========================================================= 7. MOBILE ========================================================= */ @media (max-width: 575px) { .jt-cs.avenir.ourmenu .slide > .jt-inner { min-height: 172px !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover { padding: 8px 14px 8px 8px !important; box-shadow: inset 0 0 0 3px #050504, inset 0 0 0 4px rgba(217, 165, 61, 0.66), inset 0 0 0 6px rgba(7, 6, 5, 0.94), inset -12px 0 18px rgba(0, 0, 0, 0.84), 6px 0 13px rgba(0, 0, 0, 0.44) !important; } .jt-cs.avenir.ourmenu .slide .link-image { box-shadow: inset 0 0 0 3px rgba(3, 3, 2, 0.92), inset 0 0 0 4px rgba(205, 148, 38, 0.42), inset 0 0 18px rgba(0, 0, 0, 0.76), 0 6px 11px rgba(0, 0, 0, 0.60) !important; } .jt-cs.avenir.ourmenu .slide .jt-imagecover::after { right: 5px !important; width: 6px !important; } } /* ========================================================= UDO'S GRILLSCHWEINE – CINEMATIC FIRE TRANSITION Video → Glut → schwarzer Premiumbereich ========================================================= */ /* ========================================================= 1. HARTEN / BEIGEN ÜBERGANG ENTSCHÄRFEN ========================================================= */ #t4-main-top { position: relative !important; overflow: visible !important; margin-top: 0 !important; border-top: 0 !important; /* Der Schatten zieht den dunklen Bereich leicht nach oben und überdeckt den bisherigen hellen Übergang. */ box-shadow: 0 -28px 42px rgba(10, 8, 6, 0.82), 0 -7px 18px rgba(190, 44, 20, 0.16) !important; } /* Inhalt bleibt über den Feuereffekten */ #t4-main-top .t4-section-inner { position: relative !important; z-index: 3 !important; } /* ========================================================= 2. GLÜHENDER, TRANSPARENTER FEUERÜBERGANG ========================================================= */ #t4-main-top::before { content: "" !important; position: absolute !important; left: 0 !important; top: -88px !important; width: 100% !important; height: 118px !important; z-index: 1 !important; pointer-events: none !important; background: /* dunkler Übergang vom Video in den Bereich */ linear-gradient( to bottom, rgba(15, 12, 9, 0.00) 0%, rgba(15, 12, 9, 0.12) 20%, rgba(17, 13, 10, 0.55) 58%, #12100f 100% ), /* unterschiedliche Glutinseln */ radial-gradient( ellipse at 7% 100%, rgba(255, 61, 20, 0.54) 0%, rgba(255, 112, 25, 0.22) 22%, transparent 54% ), radial-gradient( ellipse at 23% 104%, rgba(255, 145, 34, 0.43) 0%, rgba(215, 50, 18, 0.17) 27%, transparent 57% ), radial-gradient( ellipse at 43% 102%, rgba(255, 68, 19, 0.46) 0%, rgba(255, 151, 35, 0.17) 25%, transparent 55% ), radial-gradient( ellipse at 62% 105%, rgba(255, 153, 39, 0.38) 0%, rgba(205, 44, 15, 0.15) 27%, transparent 57% ), radial-gradient( ellipse at 81% 102%, rgba(255, 67, 18, 0.49) 0%, rgba(255, 135, 29, 0.18) 24%, transparent 55% ), radial-gradient( ellipse at 96% 100%, rgba(255, 151, 37, 0.37) 0%, rgba(190, 38, 14, 0.14) 27%, transparent 56% ) !important; filter: blur(5px) saturate(1.15) !important; transform-origin: center bottom !important; opacity: 0.90 !important; animation: udo-fire-breathe 4.8s ease-in-out infinite alternate !important; } /* ========================================================= 3. AUFSTEIGENDE FUNKEN ========================================================= */ #t4-main-top .t4-section-inner::before { content: "" !important; position: absolute !important; left: 0 !important; top: -112px !important; width: 100% !important; height: 118px !important; z-index: -1 !important; pointer-events: none !important; background-image: radial-gradient( circle, rgba(255, 209, 105, 0.95) 0 1px, rgba(255, 102, 30, 0.55) 1.5px, transparent 3px ), radial-gradient( circle, rgba(255, 145, 43, 0.90) 0 1px, transparent 2.5px ), radial-gradient( circle, rgba(255, 68, 24, 0.78) 0 1px, transparent 2px ) !important; background-size: 135px 92px, 190px 114px, 245px 138px !important; background-position: 18px 98px, 72px 110px, 130px 119px !important; opacity: 0.65 !important; filter: drop-shadow(0 0 4px rgba(255, 87, 25, 0.56)) !important; -webkit-mask-image: linear-gradient( to top, #000 0%, rgba(0, 0, 0, 0.88) 44%, transparent 100% ) !important; mask-image: linear-gradient( to top, #000 0%, rgba(0, 0, 0, 0.88) 44%, transparent 100% ) !important; animation: udo-embers-rise 8s linear infinite !important; } /* ========================================================= 4. HITZEFLIMMERN UND GLÜHEN ========================================================= */ @keyframes udo-fire-breathe { 0% { transform: translateY(3px) scaleX(1) scaleY(0.91) !important; opacity: 0.72 !important; filter: blur(6px) saturate(1.05) brightness(0.93) !important; } 35% { transform: translateY(-1px) scaleX(1.018) scaleY(1.02) !important; opacity: 0.88 !important; } 70% { transform: translateY(1px) scaleX(0.992) scaleY(0.96) !important; opacity: 0.79 !important; } 100% { transform: translateY(-4px) scaleX(1.012) scaleY(1.08) !important; opacity: 0.96 !important; filter: blur(4px) saturate(1.26) brightness(1.08) !important; } } @keyframes udo-embers-rise { 0% { background-position: 18px 112px, 72px 128px, 130px 140px !important; opacity: 0.20 !important; transform: translateY(8px) translateX(0) !important; } 25% { opacity: 0.68 !important; } 50% { transform: translateY(-12px) translateX(5px) !important; } 75% { opacity: 0.48 !important; } 100% { background-position: 62px -15px, 15px -32px, 188px -48px !important; opacity: 0 !important; transform: translateY(-24px) translateX(-4px) !important; } } /* ========================================================= 5. BEWEGUNGSREDUKTION FÜR BARRIEREFREIHEIT ========================================================= */ @media (prefers-reduced-motion: reduce) { #t4-main-top::before, #t4-main-top .t4-section-inner::before { animation: none !important; } #t4-main-top::before { opacity: 0.76 !important; } } /* ========================================================= 6. MOBILE – RUHIGER UND RESSOURCENSCHONENDER ========================================================= */ @media (max-width: 575px) { #t4-main-top::before { top: -58px !important; height: 78px !important; filter: blur(4px) saturate(1.08) !important; } #t4-main-top .t4-section-inner::before { top: -72px !important; height: 78px !important; opacity: 0.42 !important; background-size: 125px 88px, 180px 108px, 235px 132px !important; } } /* ========================================================= UDO'S GRILLSCHWEINE – CINEMATIC EMBER TRANSITION V2 95 % Dunkelheit 3 % Glut 2 % Funken und Hitzeflimmern Überschreibt den vorherigen Flammenübergang. ========================================================= */ /* ========================================================= 1. ÜBERGANGSBEREICH VORBEREITEN ========================================================= */ #t4-main-top { position: relative !important; isolation: isolate !important; overflow: visible !important; margin-top: -1px !important; border-top: 0 !important; /* Dunkler Schatten zieht den schwarzen Bereich optisch leicht über den hellen Streifen. */ box-shadow: 0 -18px 30px rgba(7, 6, 5, 0.88), 0 -5px 16px rgba(109, 37, 16, 0.12) !important; } /* Inhalte bleiben über allen Übergangseffekten */ #t4-main-top .t4-section-inner { position: relative !important; z-index: 3 !important; isolation: isolate !important; } /* Direkte Inhalte sicher über den Pseudoelementen halten */ #t4-main-top .t4-section-inner > * { position: relative !important; z-index: 3 !important; } /* ========================================================= 2. VORHERIGEN FLAMMENEFFEKT ZURÜCKSETZEN ========================================================= */ #t4-main-top::before, #t4-main-top .t4-section-inner::before, #t4-main-top .t4-section-inner::after { animation: none !important; } /* ========================================================= 3. DUNKLER GLÜHENDER ÜBERGANG Keine klaren Flammenformen ========================================================= */ #t4-main-top::before { content: "" !important; position: absolute !important; left: 0 !important; top: -64px !important; width: 100% !important; height: 92px !important; z-index: 1 !important; pointer-events: none !important; background: /* Dunkler Übergang – Hauptanteil */ linear-gradient( to bottom, rgba(10, 8, 7, 0.00) 0%, rgba(10, 8, 7, 0.24) 28%, rgba(12, 10, 8, 0.72) 66%, #12100f 100% ), /* Sehr wenige unregelmäßige Glutnester */ radial-gradient( ellipse at 11% 100%, rgba(226, 54, 20, 0.22) 0%, rgba(197, 53, 20, 0.09) 24%, transparent 52% ), radial-gradient( ellipse at 36% 103%, rgba(243, 112, 27, 0.17) 0%, rgba(181, 45, 17, 0.07) 26%, transparent 54% ), radial-gradient( ellipse at 67% 101%, rgba(227, 62, 21, 0.19) 0%, rgba(177, 42, 15, 0.07) 25%, transparent 53% ), radial-gradient( ellipse at 91% 102%, rgba(239, 125, 31, 0.14) 0%, rgba(167, 42, 16, 0.06) 27%, transparent 56% ) !important; opacity: 0.84 !important; filter: blur(4px) saturate(1.08) !important; transform-origin: center bottom !important; animation: udo-ember-breathe 7s ease-in-out infinite alternate !important; } /* ========================================================= 4. WENIGE EINZELNE FUNKEN ========================================================= */ #t4-main-top .t4-section-inner::before { content: "" !important; position: absolute !important; left: 0 !important; top: -92px !important; width: 100% !important; height: 100px !important; z-index: 1 !important; pointer-events: none !important; /* Große Abstände zwischen den Punkten verhindern, dass ein gleichmäßiges Funkenmuster entsteht. */ background-image: radial-gradient( circle, rgba(255, 211, 113, 0.92) 0 1px, rgba(237, 91, 29, 0.38) 1.5px, transparent 3px ), radial-gradient( circle, rgba(239, 128, 39, 0.80) 0 1px, transparent 2.5px ), radial-gradient( circle, rgba(205, 55, 23, 0.68) 0 1px, transparent 2px ) !important; background-size: 330px 170px, 470px 215px, 610px 260px !important; background-position: 37px 105px, 215px 132px, 410px 154px !important; opacity: 0 !important; filter: drop-shadow(0 0 4px rgba(226, 69, 24, 0.34)) !important; -webkit-mask-image: linear-gradient( to top, #000 0%, rgba(0, 0, 0, 0.72) 48%, transparent 100% ) !important; mask-image: linear-gradient( to top, #000 0%, rgba(0, 0, 0, 0.72) 48%, transparent 100% ) !important; animation: udo-sparse-embers 11s linear infinite !important; } /* ========================================================= 5. SUBTILES HITZEFLIMMERN Fast unsichtbar – nur als leichte Bewegung wahrnehmbar ========================================================= */ #t4-main-top .t4-section-inner::after { content: "" !important; position: absolute !important; left: 4% !important; top: -54px !important; width: 92% !important; height: 55px !important; z-index: 1 !important; pointer-events: none !important; background: repeating-linear-gradient( 92deg, transparent 0, transparent 48px, rgba(255, 178, 92, 0.035) 55px, transparent 67px, transparent 118px ) !important; opacity: 0.18 !important; filter: blur(7px) contrast(1.04) !important; transform: skewX(-3deg) translateX(0) !important; animation: udo-heat-shimmer 8s ease-in-out infinite alternate !important; } /* ========================================================= 6. ANIMATIONEN ========================================================= */ @keyframes udo-ember-breathe { 0% { opacity: 0.68 !important; transform: translateY(2px) scaleX(0.995) scaleY(0.92) !important; filter: blur(5px) saturate(1) brightness(0.91) !important; } 45% { opacity: 0.78 !important; transform: translateY(0) scaleX(1.006) scaleY(0.98) !important; } 100% { opacity: 0.88 !important; transform: translateY(-2px) scaleX(1.012) scaleY(1.04) !important; filter: blur(4px) saturate(1.12) brightness(1.03) !important; } } @keyframes udo-sparse-embers { 0% { opacity: 0 !important; transform: translateY(14px) translateX(0) !important; } 12% { opacity: 0.30 !important; } 38% { opacity: 0.52 !important; transform: translateY(-5px) translateX(4px) !important; } 68% { opacity: 0.24 !important; transform: translateY(-25px) translateX(-3px) !important; } 100% { opacity: 0 !important; background-position: 92px -35px, 167px -58px, 478px -82px !important; transform: translateY(-43px) translateX(6px) !important; } } @keyframes udo-heat-shimmer { 0% { opacity: 0.08 !important; transform: skewX(-3deg) translateX(-7px) scaleY(0.94) !important; } 45% { opacity: 0.18 !important; transform: skewX(2deg) translateX(4px) scaleY(1.02) !important; } 100% { opacity: 0.11 !important; transform: skewX(-1deg) translateX(9px) scaleY(0.97) !important; } } /* ========================================================= 7. BEWEGUNGSREDUKTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #t4-main-top::before, #t4-main-top .t4-section-inner::before, #t4-main-top .t4-section-inner::after { animation: none !important; } #t4-main-top::before { opacity: 0.72 !important; } #t4-main-top .t4-section-inner::before { opacity: 0.20 !important; } #t4-main-top .t4-section-inner::after { opacity: 0.08 !important; } } /* ========================================================= 8. MOBILE – NOCH DEZENTER ========================================================= */ @media (max-width: 575px) { #t4-main-top::before { top: -43px !important; height: 61px !important; opacity: 0.66 !important; filter: blur(3px) saturate(1.03) !important; } #t4-main-top .t4-section-inner::before { top: -60px !important; height: 68px !important; opacity: 0.26 !important; background-size: 285px 155px, 410px 195px, 560px 235px !important; } #t4-main-top .t4-section-inner::after { top: -37px !important; height: 39px !important; opacity: 0.08 !important; } } /* ========================================================= UDO'S GRILLSCHWEINE – CLEAN PREMIUM TRANSITION Entfernt Feuer/Glut und überdeckt den hellen Balken ========================================================= */ /* ========================================================= 1. ALLE BISHERIGEN FEUER- UND FUNKENEFFEKTE ABSCHALTEN ========================================================= */ #t4-main-top::before, #t4-main-top .t4-section-inner::before, #t4-main-top .t4-section-inner::after { animation: none !important; background-image: none !important; filter: none !important; mask-image: none !important; -webkit-mask-image: none !important; } /* ========================================================= 2. HELLEN / BEIGEN BALKEN SCHWARZ ÜBERDECKEN ========================================================= */ #t4-main-top { position: relative !important; isolation: isolate !important; overflow: visible !important; margin-top: 0 !important; border-top: 0 !important; box-shadow: none !important; } /* Dieses Element liegt über dem bisherigen hellen Balken. Falls der Balken etwas höher oder niedriger ist, kann nur die Höhe von 46px angepasst werden. */ #t4-main-top::before { content: "" !important; position: absolute !important; left: 0 !important; top: -46px !important; width: 100% !important; height: 48px !important; z-index: 20 !important; pointer-events: none !important; opacity: 1 !important; background: linear-gradient( to bottom, #080706 0%, #0b0a09 48%, #12100f 100% ) !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.62) !important; } /* Inhalt bleibt sicher über dem Übergang */ #t4-main-top .t4-section-inner { position: relative !important; z-index: 25 !important; } /* ========================================================= 3. FEINE GOLDKANTE STATT FLAMMEN ========================================================= */ #t4-main-top::after { content: "" !important; position: absolute !important; left: 50% !important; top: -2px !important; bottom: auto !important; width: min(1120px, 78vw) !important; height: 1px !important; transform: translateX(-50%) !important; z-index: 30 !important; pointer-events: none !important; opacity: 0.80 !important; background: linear-gradient( 90deg, transparent 0%, rgba(112, 73, 19, 0.35) 10%, rgba(221, 173, 70, 0.72) 35%, rgba(255, 218, 126, 0.96) 50%, rgba(221, 173, 70, 0.72) 65%, rgba(112, 73, 19, 0.35) 90%, transparent 100% ) !important; box-shadow: 0 0 7px rgba(225, 176, 70, 0.28), 0 0 17px rgba(225, 176, 70, 0.10) !important; } /* Kleiner Lichtpunkt in der Mitte */ #t4-main-top .t4-section-inner::before { content: "" !important; position: absolute !important; left: 50% !important; top: -3px !important; width: 110px !important; height: 2px !important; transform: translateX(-50%) !important; z-index: 31 !important; pointer-events: none !important; opacity: 0.84 !important; background: linear-gradient( 90deg, transparent, #ffe09b, transparent ) !important; box-shadow: 0 0 8px rgba(255, 217, 130, 0.54), 0 0 18px rgba(216, 160, 49, 0.17) !important; } /* ========================================================= 4. EINMALIGER LICHTIMPULS AUF DER ERSTEN KARTENREIHE Kein dauerhaftes Blinken ========================================================= */ .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:first-child > .jt-inner { animation: udo-first-row-light 2.4s ease-out 0.7s 1 both !important; } @keyframes udo-first-row-light { 0% { border-color: rgba(182, 137, 46, 0.58) !important; box-shadow: 0 5px 0 rgba(5, 4, 3, 0.95), 0 9px 12px rgba(0, 0, 0, 0.52), 0 24px 42px rgba(0, 0, 0, 0.46), inset 0 0 0 1px rgba(226, 181, 84, 0.17) !important; } 45% { border-color: rgba(255, 219, 132, 0.95) !important; box-shadow: 0 5px 0 rgba(5, 4, 3, 0.95), 0 12px 18px rgba(0, 0, 0, 0.60), 0 28px 48px rgba(0, 0, 0, 0.50), 0 0 22px rgba(231, 180, 73, 0.18), inset 0 0 0 1px rgba(248, 211, 124, 0.25) !important; } 100% { border-color: rgba(211, 163, 64, 0.68) !important; } } /* ========================================================= 5. BARRIEREFREIHEIT ========================================================= */ @media (prefers-reduced-motion: reduce) { .jt-cs.avenir.ourmenu .fake-col-wrapper > .slide:first-child > .jt-inner { animation: none !important; } } /* ========================================================= 6. MOBILE ========================================================= */ @media (max-width: 575px) { #t4-main-top::before { top: -32px !important; height: 34px !important; } #t4-main-top::after { width: 74vw !important; } #t4-main-top .t4-section-inner::before { width: 72px !important; } } /* ========================================================= UDO'S EVENTBEREICH – PREMIUM HEADER FINISH ========================================================= */ .jt-cs.avenir.ourmenu > .jt-pretext { margin-top: -8px !important; margin-bottom: 48px !important; } .jt-cs.avenir.ourmenu > .jt-pretext h3 { font-size: clamp(38px, 3.6vw, 64px) !important; font-weight: 500 !important; letter-spacing: 0.08em !important; color: #f0cf85 !important; text-shadow: 0 4px 18px rgba(0,0,0,.78), 0 0 20px rgba(220,174,76,.12) !important; } .jt-cs.avenir.ourmenu > .jt-pretext .pretext, .jt-cs.avenir.ourmenu > .jt-pretext p { font-size: clamp(12px, .95vw, 15px) !important; font-weight: 500 !important; letter-spacing: .18em !important; color: rgba(239,226,200,.76) !important; } /* obere Goldlinie etwas kompakter */ #t4-main-top::after { width: min(920px, 66vw) !important; box-shadow: 0 0 7px rgba(225,176,70,.22), 0 0 14px rgba(225,176,70,.08) !important; } /* Lichtpunkt präziser */ #t4-main-top .t4-section-inner::before { width: 88px !important; height: 2px !important; box-shadow: 0 0 7px rgba(255,217,130,.48), 0 0 14px rgba(216,160,49,.14) !important; } /* ========================================================= UDO'S GRILLSCHWEINE – PREMIUM TEAMKARTEN Schwarzes Metall · eingelassene Portraits · Goldrahmen Ausschließlich für #avenir-team ========================================================= */ /* ========================================================= 1. TEAM-SLIDER GRUNDSÄTZLICH ========================================================= */ #avenir-team { position: relative !important; width: 100% !important; padding: 18px 8px 34px !important; overflow: visible !important; background: transparent !important; } #avenir-team .owl2-stage-outer { overflow: hidden !important; padding: 18px 6px 34px !important; } #avenir-team .owl2-stage { display: flex !important; align-items: stretch !important; } #avenir-team .owl2-item { display: flex !important; padding: 0 8px !important; background: transparent !important; transform: none !important; } /* ========================================================= 2. ALTE KARTENGESTALTUNG NEUTRALISIEREN ========================================================= */ #avenir-team .jt_testimonial-outer, #avenir-team .jt_testimonial-block-slide, #avenir-team .testimonial_block { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================= 3. EIGENTLICHE TEAMKARTE ========================================================= */ #avenir-team .testimonial_block { --team-corner: 13px; position: relative !important; isolation: isolate !important; display: flex !important; flex-direction: column !important; min-height: 430px !important; overflow: hidden !important; clip-path: polygon( var(--team-corner) 0, calc(100% - var(--team-corner)) 0, 100% var(--team-corner), 100% calc(100% - var(--team-corner)), calc(100% - var(--team-corner)) 100%, var(--team-corner) 100%, 0 calc(100% - var(--team-corner)), 0 var(--team-corner) ) !important; background: linear-gradient( 112deg, transparent 0%, transparent 39%, rgba(255, 255, 255, 0.018) 46%, rgba(255, 255, 255, 0.065) 50%, rgba(255, 255, 255, 0.018) 54%, transparent 61% ), repeating-linear-gradient( 103deg, rgba(255, 255, 255, 0.012) 0, rgba(255, 255, 255, 0.012) 1px, rgba(0, 0, 0, 0.028) 1px, rgba(0, 0, 0, 0.028) 5px ), linear-gradient( 145deg, #292520 0%, #191613 52%, #090807 100% ) !important; background-size: 235% 100%, auto, auto !important; background-position: 145% 0, 0 0, 0 0 !important; border: 1px solid rgba(213, 168, 70, 0.72) !important; box-shadow: 0 5px 0 rgba(4, 3, 2, 0.96), 0 13px 20px rgba(0, 0, 0, 0.56), 0 28px 48px rgba(0, 0, 0, 0.40), inset 0 0 0 1px rgba(236, 194, 99, 0.10), inset 0 2px 0 rgba(255, 229, 159, 0.055), inset 0 -5px 8px rgba(0, 0, 0, 0.48), inset 0 0 34px rgba(0, 0, 0, 0.27) !important; transition: transform 0.42s cubic-bezier(.22, .75, .25, 1), border-color 0.35s ease, box-shadow 0.42s ease, background-position 0.82s ease !important; } /* Innerer feiner Goldrahmen */ #avenir-team .testimonial_block::before { content: "" !important; position: absolute !important; inset: 7px !important; z-index: 30 !important; pointer-events: none !important; clip-path: polygon( 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ) !important; border: 1px solid rgba(232, 190, 94, 0.26) !important; box-shadow: inset 0 0 10px rgba(224, 174, 68, 0.035), 0 0 7px rgba(224, 174, 68, 0.035) !important; } /* Rote Glutlinie unten */ #avenir-team .testimonial_block::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 0 !important; width: 92px !important; height: 2px !important; z-index: 40 !important; pointer-events: none !important; transform: translateX(-50%) scaleX(0.45) !important; background: linear-gradient( 90deg, transparent, #ad1d18, #f13d34, #ad1d18, transparent ) !important; box-shadow: 0 0 8px rgba(241, 61, 52, 0.65), 0 0 19px rgba(241, 61, 52, 0.24) !important; transition: width 0.40s ease, transform 0.40s ease, opacity 0.35s ease !important; } /* ========================================================= 4. PORTRAIT ALS EINGELASSENES BILDFENSTER ========================================================= */ #avenir-team .testimonial_block-image { position: relative !important; isolation: isolate !important; width: calc(100% - 24px) !important; height: 285px !important; margin: 12px 12px 0 !important; padding: 8px !important; overflow: hidden !important; clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px ) !important; background: linear-gradient( 145deg, #181613, #050504 38%, #11100e 67%, #020202 ) !important; border: 1px solid rgba(222, 177, 78, 0.62) !important; box-shadow: inset 0 0 0 3px #050504, inset 0 0 0 4px rgba(215, 160, 48, 0.62), inset 0 0 0 7px rgba(7, 6, 5, 0.95), inset 0 11px 17px rgba(0, 0, 0, 0.72), inset 0 -13px 18px rgba(0, 0, 0, 0.78), inset 0 0 25px rgba(0, 0, 0, 0.52), 0 9px 16px rgba(0, 0, 0, 0.52) !important; } /* Innerer Portraitrahmen */ #avenir-team .testimonial_block-image::before { content: "" !important; position: absolute !important; inset: 13px !important; z-index: 12 !important; pointer-events: none !important; clip-path: polygon( 7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px ) !important; border: 1px solid rgba(241, 199, 101, 0.40) !important; box-shadow: inset 0 0 12px rgba(222, 167, 53, 0.045), 0 0 8px rgba(222, 167, 53, 0.05) !important; transition: border-color 0.35s ease, box-shadow 0.35s ease !important; } /* Dunkle Portraitvignette */ #avenir-team .testimonial_block-image::after { content: "" !important; position: absolute !important; inset: 8px !important; z-index: 8 !important; pointer-events: none !important; background: radial-gradient( ellipse at center, transparent 43%, rgba(0, 0, 0, 0.14) 68%, rgba(0, 0, 0, 0.52) 100% ), linear-gradient( 180deg, rgba(0, 0, 0, 0.12) 0%, transparent 28%, transparent 68%, rgba(0, 0, 0, 0.42) 100% ) !important; } /* Portraitbild */ #avenir-team .testimonial_block-image img { position: relative !important; z-index: 2 !important; display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; clip-path: polygon( 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px ) !important; filter: contrast(1.08) saturate(0.88) brightness(0.78) sepia(0.025) !important; transform: scale(1.02) translateZ(0) !important; transition: transform 0.65s cubic-bezier(.22, .75, .25, 1), filter 0.45s ease !important; } /* ========================================================= 5. TEXTBEREICH ========================================================= */ #avenir-team .testimonial_block-data { position: relative !important; z-index: 15 !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 132px !important; margin: 0 !important; padding: 24px 22px 26px !important; color: rgba(240, 229, 207, 0.76) !important; text-align: center !important; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.018), transparent 32% ) !important; } /* Namen: verschiedene mögliche Template-Elemente */ #avenir-team .testimonial_block-data h1, #avenir-team .testimonial_block-data h2, #avenir-team .testimonial_block-data h3, #avenir-team .testimonial_block-data h4, #avenir-team .testimonial_block-data h5, #avenir-team .testimonial_block-data h6, #avenir-team .testimonial_block-data .name, #avenir-team .testimonial_block-data .testimonial-name, #avenir-team .testimonial_block-data strong { margin: 0 0 11px !important; padding: 0 !important; color: #edca7c !important; font-size: clamp(18px, 1.35vw, 23px) !important; font-weight: 500 !important; line-height: 1.18 !important; letter-spacing: 0.075em !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 3px 13px rgba(0, 0, 0, 0.72), 0 0 14px rgba(218, 169, 68, 0.08) !important; } /* Kleine rote Trennlinie unter dem Namen */ #avenir-team .testimonial_block-data h1::after, #avenir-team .testimonial_block-data h2::after, #avenir-team .testimonial_block-data h3::after, #avenir-team .testimonial_block-data h4::after, #avenir-team .testimonial_block-data h5::after, #avenir-team .testimonial_block-data h6::after, #avenir-team .testimonial_block-data .name::after, #avenir-team .testimonial_block-data .testimonial-name::after { content: "" !important; display: block !important; width: 48px !important; height: 2px !important; margin: 12px auto 0 !important; background: linear-gradient( 90deg, transparent, #ef3b32, transparent ) !important; box-shadow: 0 0 8px rgba(239, 59, 50, 0.38) !important; } /* Rolle / Funktion */ #avenir-team .testimonial_block-data p, #avenir-team .testimonial_block-data span, #avenir-team .testimonial_block-data .position, #avenir-team .testimonial_block-data .designation, #avenir-team .testimonial_block-data .testimonial-position { margin: 0 !important; padding: 0 !important; color: rgba(239, 226, 201, 0.66) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0.13em !important; text-align: center !important; text-transform: uppercase !important; } /* ========================================================= 6. EINZELKARTEN-HOVER ========================================================= */ #avenir-team .owl2-item:hover, #avenir-team .jt_testimonial-outer:hover, #avenir-team .jt_testimonial-block-slide:hover { transform: none !important; } /* Nur die berührte Teamkarte hebt sich */ #avenir-team .testimonial_block:hover { transform: translateY(-7px) !important; background-position: -42% 0, 0 0, 0 0 !important; border-color: rgba(248, 208, 115, 0.96) !important; box-shadow: 0 6px 0 rgba(4, 3, 2, 0.98), 0 16px 23px rgba(0, 0, 0, 0.62), 0 36px 58px rgba(0, 0, 0, 0.52), 0 0 22px rgba(221, 167, 57, 0.11), inset 0 0 0 1px rgba(243, 202, 108, 0.20), inset 0 2px 0 rgba(255, 229, 159, 0.09), inset 0 -5px 9px rgba(0, 0, 0, 0.52), inset 0 0 40px rgba(0, 0, 0, 0.31) !important; } #avenir-team .testimonial_block:hover::after { width: 126px !important; transform: translateX(-50%) scaleX(1) !important; } #avenir-team .testimonial_block:hover .testimonial_block-image::before { border-color: rgba(252, 213, 123, 0.70) !important; box-shadow: inset 0 0 13px rgba(232, 179, 67, 0.07), 0 0 10px rgba(232, 179, 67, 0.10) !important; } #avenir-team .testimonial_block:hover .testimonial_block-image img { transform: scale(1.065) translateZ(0) !important; filter: contrast(1.10) saturate(0.98) brightness(0.90) sepia(0.015) !important; } /* ========================================================= 7. NAVIGATIONSPUNKTE ========================================================= */ #avenir-team .owl2-nav { display: none !important; } #avenir-team .owl2-dots { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin-top: 24px !important; } #avenir-team .owl2-dot { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #avenir-team .owl2-dot span { display: block !important; width: 46px !important; height: 4px !important; margin: 0 !important; border-radius: 1px !important; background: #312e2a !important; transition: width 0.32s ease, background 0.32s ease, box-shadow 0.32s ease !important; } #avenir-team .owl2-dot.active span { width: 64px !important; background: linear-gradient( 90deg, #a91f19, #ed3b32, #a91f19 ) !important; box-shadow: 0 0 8px rgba(237, 59, 50, 0.62), 0 0 17px rgba(237, 59, 50, 0.20) !important; } /* ========================================================= 8. TABLET ========================================================= */ @media (max-width: 991px) { #avenir-team .testimonial_block { min-height: 400px !important; } #avenir-team .testimonial_block-image { height: 255px !important; } #avenir-team .testimonial_block-data { min-height: 125px !important; } } /* ========================================================= 9. SMARTPHONE ========================================================= */ @media (max-width: 575px) { #avenir-team { padding: 8px 2px 26px !important; } #avenir-team .owl2-item { padding: 0 4px !important; } #avenir-team .testimonial_block { --team-corner: 10px; min-height: 365px !important; } #avenir-team .testimonial_block-image { width: calc(100% - 18px) !important; height: 232px !important; margin: 9px 9px 0 !important; padding: 6px !important; } #avenir-team .testimonial_block-image::before { inset: 10px !important; } #avenir-team .testimonial_block-data { min-height: 116px !important; padding: 21px 17px 23px !important; } #avenir-team .testimonial_block-data h1, #avenir-team .testimonial_block-data h2, #avenir-team .testimonial_block-data h3, #avenir-team .testimonial_block-data h4, #avenir-team .testimonial_block-data h5, #avenir-team .testimonial_block-data h6, #avenir-team .testimonial_block-data .name, #avenir-team .testimonial_block-data .testimonial-name, #avenir-team .testimonial_block-data strong { font-size: 17px !important; letter-spacing: 0.055em !important; } #avenir-team .testimonial_block-data p, #avenir-team .testimonial_block-data span, #avenir-team .testimonial_block-data .position, #avenir-team .testimonial_block-data .designation, #avenir-team .testimonial_block-data .testimonial-position { font-size: 10px !important; letter-spacing: 0.10em !important; } } /* ========================================================= TEAMKARTEN – TYPOGRAFIE + HOVER-KORREKTUR Ganz unten in die custom.css einfügen ========================================================= */ /* Namen kleiner und ruhiger */ #avenir-team .testimonial_block-data h1, #avenir-team .testimonial_block-data h2, #avenir-team .testimonial_block-data h3, #avenir-team .testimonial_block-data h4, #avenir-team .testimonial_block-data h5, #avenir-team .testimonial_block-data h6, #avenir-team .testimonial_block-data .name, #avenir-team .testimonial_block-data .testimonial-name, #avenir-team .testimonial_block-data strong { margin: 0 0 10px !important; color: #e9c575 !important; font-size: clamp(16px, 1.05vw, 20px) !important; font-weight: 500 !important; line-height: 1.22 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; } /* Funktion deutlich kleiner und dezenter */ #avenir-team .testimonial_block-data p, #avenir-team .testimonial_block-data span, #avenir-team .testimonial_block-data .position, #avenir-team .testimonial_block-data .designation, #avenir-team .testimonial_block-data .testimonial-position { color: rgba(230, 218, 195, 0.50) !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1.45 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } /* Rote Trennlinie etwas kleiner */ #avenir-team .testimonial_block-data h1::after, #avenir-team .testimonial_block-data h2::after, #avenir-team .testimonial_block-data h3::after, #avenir-team .testimonial_block-data h4::after, #avenir-team .testimonial_block-data h5::after, #avenir-team .testimonial_block-data h6::after, #avenir-team .testimonial_block-data .name::after, #avenir-team .testimonial_block-data .testimonial-name::after { width: 38px !important; margin-top: 10px !important; } /* ========================================================= ALTEN ROTEN HOVER VOLLSTÄNDIG ENTFERNEN ========================================================= */ #avenir-team .testimonial_block:hover, #avenir-team .testimonial_block:hover::before, #avenir-team .testimonial_block:hover::after, #avenir-team .jt_testimonial-block-slide:hover, #avenir-team .jt_testimonial-block-slide:hover::before, #avenir-team .jt_testimonial-block-slide:hover::after, #avenir-team .jt_testimonial-outer:hover, #avenir-team .owl2-item:hover { background-color: transparent !important; } /* Mögliche rote Overlay-Flächen des Originalmoduls neutralisieren */ #avenir-team .testimonial_block:hover .testimonial_block-image::after, #avenir-team .testimonial_block:hover .testimonial_block-data::before, #avenir-team .testimonial_block:hover .testimonial_block-data::after, #avenir-team .jt_testimonial-block-slide:hover .testimonial_block::before, #avenir-team .jt_testimonial-block-slide:hover .testimonial_block::after { background-color: transparent !important; } /* Falls das Originalmodul ein vollflächiges rotes Overlay setzt */ #avenir-team .testimonial_block::before { background: transparent !important; } /* Unser feiner Innenrahmen bleibt erhalten */ #avenir-team .testimonial_block { background: linear-gradient( 112deg, transparent 0%, transparent 39%, rgba(255,255,255,.018) 46%, rgba(255,255,255,.065) 50%, rgba(255,255,255,.018) 54%, transparent 61% ), repeating-linear-gradient( 103deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, rgba(0,0,0,.028) 1px, rgba(0,0,0,.028) 5px ), linear-gradient( 145deg, #292520 0%, #191613 52%, #090807 100% ) !important; } /* Hover nur noch Goldlicht und leichte Anhebung */ #avenir-team .testimonial_block:hover { transform: translateY(-6px) !important; border-color: rgba(247, 207, 113, 0.95) !important; box-shadow: 0 6px 0 rgba(4,3,2,.98), 0 16px 23px rgba(0,0,0,.62), 0 36px 58px rgba(0,0,0,.52), 0 0 20px rgba(221,167,57,.10), inset 0 0 0 1px rgba(243,202,108,.19), inset 0 2px 0 rgba(255,229,159,.08), inset 0 -5px 9px rgba(0,0,0,.52), inset 0 0 40px rgba(0,0,0,.31) !important; } /* Social Icons nicht vollflächig rot erscheinen lassen */ #avenir-team .testimonial_block a, #avenir-team .testimonial_block .social-icons a, #avenir-team .testimonial_block [class*="social"] a { background: rgba(11, 10, 9, 0.88) !important; color: #d7aa54 !important; border: 1px solid rgba(213, 168, 70, 0.36) !important; box-shadow: none !important; } #avenir-team .testimonial_block a:hover, #avenir-team .testimonial_block .social-icons a:hover, #avenir-team .testimonial_block [class*="social"] a:hover { background: #17130f !important; color: #f0cc7e !important; border-color: rgba(241, 200, 105, 0.72) !important; } /* Mobil */ @media (max-width: 575px) { #avenir-team .testimonial_block-data h1, #avenir-team .testimonial_block-data h2, #avenir-team .testimonial_block-data h3, #avenir-team .testimonial_block-data h4, #avenir-team .testimonial_block-data h5, #avenir-team .testimonial_block-data h6, #avenir-team .testimonial_block-data .name, #avenir-team .testimonial_block-data .testimonial-name, #avenir-team .testimonial_block-data strong { font-size: 15px !important; } #avenir-team .testimonial_block-data p, #avenir-team .testimonial_block-data span, #avenir-team .testimonial_block-data .position, #avenir-team .testimonial_block-data .designation, #avenir-team .testimonial_block-data .testimonial-position { font-size: 9px !important; } } /* ========================================================= UDO'S TEAMKARTEN – ANTHRAZIT-HOVER & GOLDENE SOCIAL ICONS - kein rotes Hover-Overlay mehr - transparenter Anthrazit-/Glaseffekt - Name etwas kleiner - Funktion deutlich dezenter - Social Icons als goldene Metallknöpfe ========================================================= */ /* ========================================================= 1. ROTEN ORIGINAL-HOVER VOLLSTÄNDIG NEUTRALISIEREN ========================================================= */ #avenir-team .testimonial_block:hover, #avenir-team .testimonial_block:hover::before, #avenir-team .testimonial_block:hover::after, #avenir-team .jt_testimonial-block-slide:hover, #avenir-team .jt_testimonial-block-slide:hover::before, #avenir-team .jt_testimonial-block-slide:hover::after, #avenir-team .testimonial_block-data:hover, #avenir-team .testimonial_block-data:hover::before, #avenir-team .testimonial_block-data:hover::after { background-color: transparent !important; } /* Mögliche vollflächige Overlay-Elemente des Originalmoduls. Die vorhandenen Inhalte bleiben sichtbar. */ #avenir-team .testimonial_block::before, #avenir-team .jt_testimonial-block-slide::before { background: linear-gradient( 145deg, rgba(35, 35, 33, 0.22), rgba(8, 8, 8, 0.08) ) !important; opacity: 0 !important; transition: opacity 0.38s ease, background 0.38s ease !important; } /* Anthrazit-Overlay nur auf der berührten Karte */ #avenir-team .testimonial_block:hover::before { opacity: 1 !important; background: linear-gradient( 145deg, rgba(54, 54, 51, 0.26) 0%, rgba(25, 24, 22, 0.22) 48%, rgba(7, 7, 7, 0.30) 100% ) !important; backdrop-filter: blur(1.5px) saturate(0.96) !important; -webkit-backdrop-filter: blur(1.5px) saturate(0.96) !important; } /* ========================================================= 2. KARTEN-HOVER RUHIG UND HOCHWERTIG ========================================================= */ #avenir-team .testimonial_block:hover { transform: translateY(-6px) !important; border-color: rgba(244, 203, 110, 0.94) !important; box-shadow: 0 6px 0 rgba(4, 3, 2, 0.98), 0 16px 23px rgba(0, 0, 0, 0.62), 0 36px 58px rgba(0, 0, 0, 0.52), 0 0 22px rgba(218, 169, 67, 0.11), inset 0 0 0 1px rgba(240, 199, 104, 0.19), inset 0 2px 0 rgba(255, 230, 164, 0.085), inset 0 -5px 9px rgba(0, 0, 0, 0.54), inset 0 0 42px rgba(0, 0, 0, 0.33) !important; } /* Foto nur leicht lebendiger – kein Farbstich */ #avenir-team .testimonial_block:hover .testimonial_block-image img { transform: scale(1.055) translateZ(0) !important; filter: contrast(1.09) saturate(0.96) brightness(0.88) sepia(0.012) !important; } /* ========================================================= 3. NAME ETWAS KLEINER UND EDLER ========================================================= */ #avenir-team .testimonial_block-data h1, #avenir-team .testimonial_block-data h2, #avenir-team .testimonial_block-data h3, #avenir-team .testimonial_block-data h4, #avenir-team .testimonial_block-data h5, #avenir-team .testimonial_block-data h6, #avenir-team .testimonial_block-data .name, #avenir-team .testimonial_block-data .testimonial-name, #avenir-team .testimonial_block-data strong { margin: 0 0 9px !important; padding: 0 !important; color: #e8c477 !important; font-size: clamp(15px, 1vw, 19px) !important; font-weight: 500 !important; line-height: 1.20 !important; letter-spacing: 0.065em !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.72), 0 0 13px rgba(215, 167, 66, 0.07) !important; } /* ========================================================= 4. ROTE LINIE UNTER DEM NAMEN FEINER ========================================================= */ #avenir-team .testimonial_block-data h1::after, #avenir-team .testimonial_block-data h2::after, #avenir-team .testimonial_block-data h3::after, #avenir-team .testimonial_block-data h4::after, #avenir-team .testimonial_block-data h5::after, #avenir-team .testimonial_block-data h6::after, #avenir-team .testimonial_block-data .name::after, #avenir-team .testimonial_block-data .testimonial-name::after { content: "" !important; display: block !important; width: 34px !important; height: 1px !important; margin: 10px auto 0 !important; background: linear-gradient( 90deg, transparent, rgba(235, 54, 47, 0.86), transparent ) !important; box-shadow: 0 0 7px rgba(235, 54, 47, 0.32) !important; } /* ========================================================= 5. FUNKTION DEUTLICH KLEINER UND DEZENTER ========================================================= */ #avenir-team .testimonial_block-data p, #avenir-team .testimonial_block-data .position, #avenir-team .testimonial_block-data .designation, #avenir-team .testimonial_block-data .testimonial-position, #avenir-team .testimonial_block-data [class*="position"], #avenir-team .testimonial_block-data [class*="designation"] { margin: 0 !important; padding: 0 !important; color: rgba(195, 190, 179, 0.62) !important; font-size: 9px !important; font-weight: 400 !important; line-height: 1.45 !important; letter-spacing: 0.17em !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.62) !important; } /* Falls die Funktion in einem einfachen span ausgegeben wird */ #avenir-team .testimonial_block-data > span:not([class*="icon"]) { color: rgba(195, 190, 179, 0.62) !important; font-size: 9px !important; font-weight: 400 !important; line-height: 1.45 !important; letter-spacing: 0.17em !important; text-transform: uppercase !important; } /* Kleiner goldener Lichtreflex unter der Funktion */ #avenir-team .testimonial_block-data p::after, #avenir-team .testimonial_block-data .position::after, #avenir-team .testimonial_block-data .designation::after, #avenir-team .testimonial_block-data .testimonial-position::after { content: "" !important; display: block !important; width: 36px !important; height: 1px !important; margin: 11px auto 0 !important; background: linear-gradient( 90deg, transparent, rgba(225, 188, 99, 0.72), transparent ) !important; box-shadow: 0 0 7px rgba(218, 173, 76, 0.14) !important; } /* ========================================================= 6. SOCIAL-MEDIA-BEREICH POSITIONIEREN Unterstützt verschiedene mögliche Klassen des Moduls. ========================================================= */ #avenir-team .social-icons, #avenir-team .social-icon, #avenir-team .testimonial-social, #avenir-team .testimonial_social, #avenir-team .social-links, #avenir-team [class*="social"] { position: relative !important; z-index: 45 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; margin: 15px auto 0 !important; padding: 0 !important; background: transparent !important; } /* ========================================================= 7. SOCIAL ICONS ALS GOLDENE METALLKNÖPFE ========================================================= */ #avenir-team .social-icons a, #avenir-team .social-icon a, #avenir-team .testimonial-social a, #avenir-team .testimonial_social a, #avenir-team .social-links a, #avenir-team [class*="social"] a { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; color: #d9b25e !important; font-size: 14px !important; line-height: 1 !important; text-decoration: none !important; background: radial-gradient( circle at 35% 28%, rgba(255, 255, 255, 0.07), transparent 38% ), linear-gradient( 145deg, rgba(33, 30, 25, 0.96), rgba(8, 7, 6, 0.98) ) !important; border: 1px solid rgba(196, 148, 51, 0.68) !important; border-radius: 50% !important; box-shadow: inset 0 1px 0 rgba(255, 230, 165, 0.08), inset 0 0 10px rgba(0, 0, 0, 0.48), 0 4px 9px rgba(0, 0, 0, 0.42) !important; opacity: 0.86 !important; transform: translateY(3px) scale(0.96) !important; transition: color 0.30s ease, border-color 0.30s ease, background 0.30s ease, box-shadow 0.30s ease, transform 0.30s ease, opacity 0.30s ease !important; } /* Icon selbst */ #avenir-team .social-icons a i, #avenir-team .social-icon a i, #avenir-team .testimonial-social a i, #avenir-team .testimonial_social a i, #avenir-team .social-links a i, #avenir-team [class*="social"] a i, #avenir-team [class*="social"] a svg { color: inherit !important; fill: currentColor !important; font-size: 14px !important; background: transparent !important; } /* Icons werden beim Karten-Hover sauber sichtbar */ #avenir-team .testimonial_block:hover .social-icons a, #avenir-team .testimonial_block:hover .social-icon a, #avenir-team .testimonial_block:hover .testimonial-social a, #avenir-team .testimonial_block:hover .testimonial_social a, #avenir-team .testimonial_block:hover .social-links a, #avenir-team .testimonial_block:hover [class*="social"] a { opacity: 1 !important; transform: translateY(0) scale(1) !important; } /* Einzelnes Social Icon beim direkten Hover */ #avenir-team .social-icons a:hover, #avenir-team .social-icon a:hover, #avenir-team .testimonial-social a:hover, #avenir-team .testimonial_social a:hover, #avenir-team .social-links a:hover, #avenir-team [class*="social"] a:hover { color: #f3cf7d !important; background: radial-gradient( circle at 35% 28%, rgba(255, 255, 255, 0.10), transparent 40% ), linear-gradient( 145deg, #282117, #0d0b08 ) !important; border-color: rgba(241, 199, 103, 0.92) !important; box-shadow: inset 0 1px 0 rgba(255, 235, 179, 0.12), inset 0 0 10px rgba(0, 0, 0, 0.44), 0 0 11px rgba(218, 168, 60, 0.20), 0 6px 12px rgba(0, 0, 0, 0.50) !important; transform: translateY(-2px) scale(1.04) !important; } /* ========================================================= 8. MOBIL ========================================================= */ @media (max-width: 575px) { #avenir-team .testimonial_block-data h1, #avenir-team .testimonial_block-data h2, #avenir-team .testimonial_block-data h3, #avenir-team .testimonial_block-data h4, #avenir-team .testimonial_block-data h5, #avenir-team .testimonial_block-data h6, #avenir-team .testimonial_block-data .name, #avenir-team .testimonial_block-data .testimonial-name, #avenir-team .testimonial_block-data strong { font-size: 14px !important; letter-spacing: 0.05em !important; } #avenir-team .testimonial_block-data p, #avenir-team .testimonial_block-data .position, #avenir-team .testimonial_block-data .designation, #avenir-team .testimonial_block-data .testimonial-position, #avenir-team .testimonial_block-data > span:not([class*="icon"]) { font-size: 8px !important; letter-spacing: 0.13em !important; } #avenir-team .social-icons a, #avenir-team .social-icon a, #avenir-team .testimonial-social a, #avenir-team .testimonial_social a, #avenir-team .social-links a, #avenir-team [class*="social"] a { width: 31px !important; height: 31px !important; font-size: 13px !important; } } /* ========================================================= TEAMKARTEN – KLARER HOVER, DEZENTE FUNKTION, GOLDENE ICONS ========================================================= */ /* 1. Hover nicht mehr verschwommen */ #avenir-team .testimonial_block:hover::before, #avenir-team .testimonial_block:hover::after, #avenir-team .testimonial_block:hover .testimonial_block-image::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; } #avenir-team .testimonial_block:hover::before { opacity: 1 !important; background: linear-gradient( 145deg, rgba(64, 64, 60, 0.10) 0%, rgba(28, 27, 25, 0.08) 48%, rgba(8, 8, 8, 0.12) 100% ) !important; } /* 2. Portrait beim Hover scharf halten */ #avenir-team .testimonial_block:hover .testimonial_block-image img { transform: scale(1.045) translateZ(0) !important; filter: contrast(1.08) saturate(0.94) brightness(0.86) sepia(0.01) !important; } /* 3. Name etwas ruhiger */ #avenir-team .testimonial_block-data h1, #avenir-team .testimonial_block-data h2, #avenir-team .testimonial_block-data h3, #avenir-team .testimonial_block-data h4, #avenir-team .testimonial_block-data h5, #avenir-team .testimonial_block-data h6, #avenir-team .testimonial_block-data .name, #avenir-team .testimonial_block-data .testimonial-name, #avenir-team .testimonial_block-data strong { font-size: clamp(15px, 0.95vw, 18px) !important; font-weight: 500 !important; letter-spacing: 0.055em !important; } /* 4. Funktion deutlich kleiner und grau */ #avenir-team .testimonial_block-data p, #avenir-team .testimonial_block-data .position, #avenir-team .testimonial_block-data .designation, #avenir-team .testimonial_block-data .testimonial-position, #avenir-team .testimonial_block-data [class*="position"], #avenir-team .testimonial_block-data [class*="designation"], #avenir-team .testimonial_block-data > span:not([class*="icon"]) { color: rgba(181, 181, 176, 0.62) !important; font-size: 8px !important; font-weight: 400 !important; line-height: 1.45 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; text-shadow: none !important; } /* 5. Goldene Social Icons klarer sichtbar */ #avenir-team .social-icons a, #avenir-team .social-icon a, #avenir-team .testimonial-social a, #avenir-team .testimonial_social a, #avenir-team .social-links a, #avenir-team [class*="social"] a { color: #d7ad55 !important; background: radial-gradient( circle at 35% 28%, rgba(255,255,255,.08), transparent 40% ), linear-gradient( 145deg, #191612, #090807 ) !important; border: 1px solid rgba(213, 165, 68, 0.78) !important; opacity: 1 !important; box-shadow: inset 0 1px 0 rgba(255,230,165,.08), inset 0 0 9px rgba(0,0,0,.48), 0 0 7px rgba(213,165,68,.08), 0 4px 9px rgba(0,0,0,.42) !important; transform: none !important; } /* 6. Icon-Symbol selbst gold halten */ #avenir-team .social-icons a i, #avenir-team .social-icon a i, #avenir-team .testimonial-social a i, #avenir-team .testimonial_social a i, #avenir-team .social-links a i, #avenir-team [class*="social"] a i, #avenir-team [class*="social"] a svg { color: #d7ad55 !important; fill: #d7ad55 !important; opacity: 1 !important; } /* 7. Direkter Icon-Hover */ #avenir-team .social-icons a:hover, #avenir-team .social-icon a:hover, #avenir-team .testimonial-social a:hover, #avenir-team .testimonial_social a:hover, #avenir-team .social-links a:hover, #avenir-team [class*="social"] a:hover { color: #f1cd7b !important; border-color: rgba(241, 205, 123, 0.96) !important; box-shadow: inset 0 1px 0 rgba(255,239,191,.12), inset 0 0 9px rgba(0,0,0,.42), 0 0 12px rgba(222,174,73,.22), 0 6px 12px rgba(0,0,0,.50) !important; transform: translateY(-2px) scale(1.03) !important; } /* 8. Mobile */ @media (max-width: 575px) { #avenir-team .testimonial_block-data h1, #avenir-team .testimonial_block-data h2, #avenir-team .testimonial_block-data h3, #avenir-team .testimonial_block-data h4, #avenir-team .testimonial_block-data h5, #avenir-team .testimonial_block-data h6, #avenir-team .testimonial_block-data .name, #avenir-team .testimonial_block-data .testimonial-name, #avenir-team .testimonial_block-data strong { font-size: 14px !important; } #avenir-team .testimonial_block-data p, #avenir-team .testimonial_block-data .position, #avenir-team .testimonial_block-data .designation, #avenir-team .testimonial_block-data .testimonial-position, #avenir-team .testimonial_block-data > span:not([class*="icon"]) { font-size: 7.5px !important; } } /* ========================================================= UDO'S GRILLSCHWEINE – TEAM-ÜBERSCHRIFT FINAL Zielstruktur: .module-ct > .jt-pretext + #avenir-team Texte bleiben vollständig im Joomla-Modul editierbar. ========================================================= */ /* Der Überschriftenblock ist ein Geschwisterelement VOR #avenir-team, nicht dessen Kind. :has() adressiert deshalb den gemeinsamen Modulwrapper. */ .module-ct:has(> #avenir-team) > .jt-pretext, .module-ct:has(#avenir-team) .jt-pretext { position: relative !important; width: 100% !important; max-width: 1180px !important; margin: 0 auto 54px !important; padding: 0 24px !important; text-align: center !important; overflow: visible !important; } /* Hauptüberschrift aus dem Modul */ .module-ct:has(> #avenir-team) > .jt-pretext h1, .module-ct:has(> #avenir-team) > .jt-pretext h2, .module-ct:has(> #avenir-team) > .jt-pretext h3, .module-ct:has(#avenir-team) .jt-pretext h1, .module-ct:has(#avenir-team) .jt-pretext h2, .module-ct:has(#avenir-team) .jt-pretext h3 { position: relative !important; display: block !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; color: #efce84 !important; background: transparent !important; border: 0 !important; font-size: clamp(38px, 3.8vw, 66px) !important; font-weight: 500 !important; line-height: 1.06 !important; letter-spacing: 0.085em !important; text-align: center !important; text-transform: uppercase !important; white-space: normal !important; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.78), 0 0 24px rgba(211, 168, 79, 0.13) !important; } /* Erstes Wort – sofern das Template .first-word-avenir setzt */ .module-ct:has(#avenir-team) .jt-pretext h1 .first-word-avenir, .module-ct:has(#avenir-team) .jt-pretext h2 .first-word-avenir, .module-ct:has(#avenir-team) .jt-pretext h3 .first-word-avenir { color: #dc352e !important; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.78), 0 0 12px rgba(220, 53, 46, 0.48), 0 0 26px rgba(220, 53, 46, 0.18) !important; } /* Lichtreflex oberhalb */ .module-ct:has(#avenir-team) .jt-pretext h1::before, .module-ct:has(#avenir-team) .jt-pretext h2::before, .module-ct:has(#avenir-team) .jt-pretext h3::before { content: "" !important; position: absolute !important; left: 50% !important; top: -20px !important; width: 118px !important; height: 8px !important; transform: translateX(-50%) !important; background: radial-gradient( ellipse, rgba(255, 232, 160, 0.72), rgba(211, 168, 79, 0.12) 48%, transparent 74% ) !important; filter: blur(2px) !important; pointer-events: none !important; } /* Roter Gluttrenner */ .module-ct:has(#avenir-team) .jt-pretext h1::after, .module-ct:has(#avenir-team) .jt-pretext h2::after, .module-ct:has(#avenir-team) .jt-pretext h3::after { content: "" !important; display: block !important; width: 92px !important; height: 2px !important; margin: 22px auto 16px !important; background: linear-gradient( 90deg, transparent, #a51e18, #ef3e35, #a51e18, transparent ) !important; box-shadow: 0 0 8px rgba(239, 62, 53, 0.68), 0 0 20px rgba(239, 62, 53, 0.25) !important; } /* Untertitel */ .module-ct:has(> #avenir-team) > .jt-pretext p, .module-ct:has(> #avenir-team) > .jt-pretext .pretext, .module-ct:has(#avenir-team) .jt-pretext p, .module-ct:has(#avenir-team) .jt-pretext .pretext { display: block !important; width: 100% !important; max-width: 900px !important; margin: 0 auto !important; padding: 0 !important; color: rgba(238, 226, 203, 0.72) !important; font-size: clamp(12px, 1vw, 16px) !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: 0.18em !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.58) !important; } /* Feine Goldlinie unter dem Untertitel */ .module-ct:has(> #avenir-team) > .jt-pretext::after, .module-ct:has(#avenir-team) .jt-pretext::after { content: "" !important; display: block !important; width: 145px !important; height: 1px !important; margin: 24px auto 0 !important; background: linear-gradient( 90deg, transparent, rgba(228, 191, 105, 0.82), transparent ) !important; box-shadow: 0 0 12px rgba(211, 168, 79, 0.20) !important; } @media (max-width: 575px) { .module-ct:has(#avenir-team) .jt-pretext { margin-bottom: 38px !important; padding: 0 16px !important; } .module-ct:has(#avenir-team) .jt-pretext h1, .module-ct:has(#avenir-team) .jt-pretext h2, .module-ct:has(#avenir-team) .jt-pretext h3 { font-size: 30px !important; line-height: 1.12 !important; letter-spacing: 0.055em !important; } .module-ct:has(#avenir-team) .jt-pretext p, .module-ct:has(#avenir-team) .jt-pretext .pretext { font-size: 11px !important; letter-spacing: 0.12em !important; } } /* ========================================================= UDO'S GRILLSCHWEINE – PREMIUM SPEISENGALERIE SP Simple Portfolio · kompakt · Schwarz · Gold ========================================================= */ /* ========================================================= 1. GESAMTER GALERIEBEREICH ========================================================= */ #sp-simpleportfolio, .sp-simpleportfolio.avenir { position: relative !important; padding: 82px 0 96px !important; background: radial-gradient( circle at 50% 0%, rgba(204, 164, 79, 0.09), transparent 34% ), repeating-linear-gradient( 104deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, rgba(0,0,0,.025) 1px, rgba(0,0,0,.025) 5px ), linear-gradient( 180deg, #151311 0%, #0e0d0c 100% ) !important; color: rgba(241, 228, 204, 0.78) !important; } /* Hellen Hintergrund des Bereichs neutralisieren */ #sp-simpleportfolio .sp-simpleportfolio-items, #sp-simpleportfolio .sp-simpleportfolio-item, #sp-simpleportfolio .sp-simpleportfolio-padding, .sp-simpleportfolio.avenir .sp-simpleportfolio-items, .sp-simpleportfolio.avenir .sp-simpleportfolio-item, .sp-simpleportfolio.avenir .sp-simpleportfolio-padding { background: transparent !important; } /* ========================================================= 2. ÜBERSCHRIFTENBLOCK ========================================================= */ .sp-simpleportfolio.avenir .sp-simpleportfolio-title, .sp-simpleportfolio.avenir .module-title, .sp-simpleportfolio.avenir + .jt-pretext, .sp-simpleportfolio.avenir .jt-pretext { text-align: center !important; } /* Mögliche Bereichsüberschrift */ .sp-simpleportfolio.avenir .jt-pretext h1, .sp-simpleportfolio.avenir .jt-pretext h2, .sp-simpleportfolio.avenir .jt-pretext h3, .sp-simpleportfolio.avenir .module-title { margin: 0 auto 18px !important; color: #efcf88 !important; font-size: clamp(34px, 3vw, 54px) !important; font-weight: 400 !important; line-height: 1.08 !important; letter-spacing: 0.075em !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 4px 18px rgba(0,0,0,.72), 0 0 22px rgba(211,168,79,.10) !important; } /* Unterzeile */ .sp-simpleportfolio.avenir .jt-pretext p, .sp-simpleportfolio.avenir .pretext { color: rgba(239, 227, 205, 0.66) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; } /* ========================================================= 3. FILTERLEISTE ========================================================= */ .sp-simpleportfolio.avenir .sp-simpleportfolio-filter { margin: 34px 0 44px !important; text-align: center !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-filter > ul { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-filter > ul > li { margin: 0 !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-filter > ul > li > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; padding: 9px 18px !important; color: rgba(232, 219, 194, 0.64) !important; background: linear-gradient( 180deg, rgba(33,30,26,.92), rgba(13,12,10,.98) ) !important; border: 1px solid rgba(195, 151, 59, 0.32) !important; border-radius: 0 !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 5px 13px rgba(0,0,0,.28) !important; transition: color .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-filter > ul > li > a:hover { color: #efcd7f !important; border-color: rgba(224, 181, 83, 0.72) !important; transform: translateY(-2px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 8px 17px rgba(0,0,0,.38), 0 0 12px rgba(210,163,67,.09) !important; } /* Aktiver Filter */ .sp-simpleportfolio.avenir .sp-simpleportfolio-filter > ul > li.active > a { color: #f0ce82 !important; background: linear-gradient( 180deg, #2a2116, #15110c ) !important; border-color: rgba(237, 197, 103, 0.90) !important; box-shadow: inset 0 1px 0 rgba(255,236,180,.08), 0 0 12px rgba(212,165,68,.14), 0 7px 16px rgba(0,0,0,.38) !important; } /* ========================================================= 4. GALERIERASTER KOMPAKTER ========================================================= */ .sp-simpleportfolio.avenir .sp-simpleportfolio-items { margin: 0 -8px !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-item { padding: 8px !important; } /* Gesamte Kachel */ .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-item-inner { position: relative !important; isolation: isolate !important; overflow: hidden !important; background: repeating-linear-gradient( 103deg, rgba(255,255,255,.014) 0, rgba(255,255,255,.014) 1px, rgba(0,0,0,.028) 1px, rgba(0,0,0,.028) 5px ), linear-gradient( 145deg, #292520 0%, #191613 56%, #090807 100% ) !important; border: 1px solid rgba(208, 165, 70, 0.60) !important; clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px ) !important; box-shadow: 0 5px 0 rgba(4,3,2,.95), 0 14px 25px rgba(0,0,0,.48), inset 0 0 0 1px rgba(235,193,96,.10), inset 0 1px 0 rgba(255,231,163,.05), inset 0 -5px 9px rgba(0,0,0,.50) !important; transition: transform .42s cubic-bezier(.22,.75,.25,1), border-color .35s ease, box-shadow .42s ease !important; } /* Nur die einzelne Kachel hebt sich */ .sp-simpleportfolio.avenir .sp-simpleportfolio-item:hover .sp-simpleportfolio-item-inner { transform: translateY(-6px) !important; border-color: rgba(245, 205, 111, 0.94) !important; box-shadow: 0 6px 0 rgba(4,3,2,.98), 0 19px 30px rgba(0,0,0,.58), 0 0 20px rgba(212,165,68,.10), inset 0 0 0 1px rgba(243,201,105,.16), inset 0 1px 0 rgba(255,231,163,.07), inset 0 -5px 9px rgba(0,0,0,.54) !important; } /* ========================================================= 5. BILD ALS EINGELASSENES FENSTER ========================================================= */ .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-img { position: relative !important; height: 230px !important; margin: 9px 9px 0 !important; overflow: hidden !important; background: #070605 !important; border: 1px solid rgba(218, 171, 67, 0.68) !important; clip-path: polygon( 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ) !important; box-shadow: inset 0 0 0 4px #050504, inset 0 0 0 5px rgba(215,161,50,.58), inset 0 0 0 8px rgba(7,6,5,.96), inset 0 11px 18px rgba(0,0,0,.66), inset 0 -12px 18px rgba(0,0,0,.72), 0 8px 15px rgba(0,0,0,.44) !important; } /* Bild */ .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-img img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; filter: contrast(1.08) saturate(.92) brightness(.78) !important; transform: scale(1.015) translateZ(0) !important; transition: transform .65s cubic-bezier(.22,.75,.25,1), filter .42s ease !important; } /* Bild nur innerhalb der aktiven Kachel zoomen */ .sp-simpleportfolio.avenir .sp-simpleportfolio-item:hover .sp-simpleportfolio-img img { transform: scale(1.065) translateZ(0) !important; filter: contrast(1.10) saturate(1) brightness(.90) !important; } /* Leichte Vignette */ .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-img::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient( 180deg, rgba(0,0,0,.08) 0%, transparent 38%, transparent 65%, rgba(0,0,0,.38) 100% ) !important; } /* ========================================================= 6. TEXTBEREICH ========================================================= */ .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info { position: relative !important; min-height: 105px !important; padding: 22px 18px 20px !important; text-align: center !important; background: linear-gradient( 180deg, rgba(255,255,255,.016), transparent 45% ) !important; } /* Titel der Speise */ .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info h3, .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info h3 a { margin: 0 0 10px !important; color: #ebc879 !important; font-size: clamp(16px, 1.15vw, 20px) !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: 0.045em !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 3px 12px rgba(0,0,0,.65), 0 0 13px rgba(211,168,79,.07) !important; } /* Kleine rote Linie unter dem Titel */ .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info h3::after { content: "" !important; display: block !important; width: 38px !important; height: 1px !important; margin: 11px auto 0 !important; background: linear-gradient( 90deg, transparent, #e53b32, transparent ) !important; box-shadow: 0 0 7px rgba(229,59,50,.28) !important; } /* Kategorie */ .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-tags { color: rgba(184, 181, 174, 0.56) !important; font-size: 9px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0.15em !important; text-align: center !important; text-transform: uppercase !important; } /* ========================================================= 7. BISHERIGES HOVER-OVERLAY RUHIGER MACHEN ========================================================= */ .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-overlay { background: linear-gradient( 145deg, rgba(27,26,24,.20), rgba(5,5,5,.42) ) !important; opacity: 0 !important; transition: opacity .35s ease !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-item:hover .sp-simpleportfolio-overlay { opacity: 1 !important; } /* Buttons innerhalb des Bild-Hovers */ .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-btns a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; margin: 4px !important; padding: 0 !important; color: #dfb75f !important; background: linear-gradient( 145deg, rgba(28,24,19,.96), rgba(7,6,5,.98) ) !important; border: 1px solid rgba(214,165,65,.70) !important; border-radius: 50% !important; box-shadow: inset 0 1px 0 rgba(255,231,163,.07), 0 5px 12px rgba(0,0,0,.48) !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-btns a:hover { color: #f2ce7a !important; border-color: rgba(243,203,108,.96) !important; transform: translateY(-2px) !important; box-shadow: inset 0 1px 0 rgba(255,237,187,.11), 0 0 12px rgba(219,169,68,.18), 0 7px 14px rgba(0,0,0,.54) !important; } /* ========================================================= 8. TABLET ========================================================= */ @media (max-width: 991px) { #sp-simpleportfolio, .sp-simpleportfolio.avenir { padding: 68px 0 78px !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-img { height: 210px !important; } } /* ========================================================= 9. SMARTPHONE ========================================================= */ @media (max-width: 575px) { #sp-simpleportfolio, .sp-simpleportfolio.avenir { padding: 54px 0 64px !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-filter { margin-bottom: 30px !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-filter > ul { gap: 7px !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-filter > ul > li > a { min-height: 34px !important; padding: 8px 12px !important; font-size: 9px !important; letter-spacing: .09em !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-item { padding: 7px !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-img { height: 220px !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info { min-height: 96px !important; padding: 19px 15px 18px !important; } .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info h3, .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info h3 a { font-size: 16px !important; } } /* ========================================================= UDO'S SPEISENGALERIE – SCHWARZ-GOLD-FINISH 1. Beigen Bereich durch Metallhintergrund ersetzen 2. Bilder massiv schwarz-golden einfassen 3. Weißen Lightbox-Rahmen entfernen 4. Vergrößertes Bild einheitlich gestalten ========================================================= */ /* ========================================================= 1. GESAMTE SECTION MIT METALLHINTERGRUND ========================================================= */ /* Die :has()-Regel findet automatisch die T4-Section, in der sich das Portfolio-Modul befindet. */ .t4-section:has(.sp-simpleportfolio.avenir), .t4-section:has(.sp-simpleportfolio) { position: relative !important; overflow: hidden !important; background: radial-gradient( circle at 50% 0%, rgba(215, 171, 77, 0.10), transparent 34% ), radial-gradient( ellipse at 15% 45%, rgba(255, 255, 255, 0.025), transparent 40% ), repeating-linear-gradient( 104deg, rgba(255, 255, 255, 0.014) 0, rgba(255, 255, 255, 0.014) 1px, rgba(0, 0, 0, 0.028) 1px, rgba(0, 0, 0, 0.028) 5px ), linear-gradient( 145deg, #25221e 0%, #171411 50%, #0b0a09 100% ) !important; border-top: 1px solid rgba(209, 166, 72, 0.26) !important; border-bottom: 1px solid rgba(209, 166, 72, 0.22) !important; } /* Beige Hintergründe der inneren T4-Container neutralisieren */ .t4-section:has(.sp-simpleportfolio.avenir) > *, .t4-section:has(.sp-simpleportfolio) > *, .t4-section:has(.sp-simpleportfolio.avenir) .t4-section-inner, .t4-section:has(.sp-simpleportfolio) .t4-section-inner, .t4-section:has(.sp-simpleportfolio.avenir) .container, .t4-section:has(.sp-simpleportfolio) .container, .t4-section:has(.sp-simpleportfolio.avenir) .container-fluid, .t4-section:has(.sp-simpleportfolio) .container-fluid, .t4-section:has(.sp-simpleportfolio.avenir) .t4-module, .t4-section:has(.sp-simpleportfolio) .t4-module { background-color: transparent !important; } /* Dezentes Licht über dem Galeriehintergrund */ .t4-section:has(.sp-simpleportfolio.avenir)::before, .t4-section:has(.sp-simpleportfolio)::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.42) 0%, transparent 17%, transparent 83%, rgba(0, 0, 0, 0.42) 100% ) !important; } /* ========================================================= 2. MASSIVER SCHWARZ-GOLD-RAHMEN UM DIE BILDER ========================================================= */ .sp-simpleportfolio.avenir .sp-simpleportfolio-img, .sp-simpleportfolio.avenir .sp-simpleportfolio-image, .sp-simpleportfolio .sp-simpleportfolio-img, .sp-simpleportfolio .sp-simpleportfolio-image { position: relative !important; isolation: isolate !important; margin: 10px 10px 0 !important; padding: 10px !important; overflow: hidden !important; background: linear-gradient( 145deg, #27231d 0%, #050504 34%, #15120d 66%, #020202 100% ) !important; border: 1px solid rgba(226, 181, 79, 0.82) !important; clip-path: polygon( 11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px ) !important; box-shadow: inset 0 0 0 3px #050504, inset 0 0 0 4px rgba(213, 163, 54, 0.74), inset 0 0 0 7px rgba(7, 6, 5, 0.98), inset 0 13px 19px rgba(0, 0, 0, 0.73), inset 0 -14px 20px rgba(0, 0, 0, 0.78), 0 6px 0 rgba(3, 3, 2, 0.92), 0 14px 25px rgba(0, 0, 0, 0.52), 0 0 15px rgba(210, 161, 55, 0.08) !important; transition: border-color 0.35s ease, box-shadow 0.42s ease, transform 0.42s cubic-bezier(.22, .75, .25, 1) !important; } /* Innerer Goldrahmen */ .sp-simpleportfolio.avenir .sp-simpleportfolio-img::before, .sp-simpleportfolio.avenir .sp-simpleportfolio-image::before, .sp-simpleportfolio .sp-simpleportfolio-img::before, .sp-simpleportfolio .sp-simpleportfolio-image::before { content: "" !important; position: absolute !important; inset: 15px !important; z-index: 8 !important; pointer-events: none !important; border: 1px solid rgba(241, 200, 101, 0.52) !important; clip-path: polygon( 7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px ) !important; box-shadow: inset 0 0 10px rgba(224, 171, 62, 0.055), 0 0 8px rgba(224, 171, 62, 0.08) !important; } /* Goldener Lichtpunkt oben am Rahmen */ .sp-simpleportfolio.avenir .sp-simpleportfolio-img::after, .sp-simpleportfolio.avenir .sp-simpleportfolio-image::after, .sp-simpleportfolio .sp-simpleportfolio-img::after, .sp-simpleportfolio .sp-simpleportfolio-image::after { content: "" !important; position: absolute !important; top: 8px !important; left: 50% !important; width: 105px !important; height: 2px !important; transform: translateX(-50%) !important; z-index: 10 !important; pointer-events: none !important; background: linear-gradient( 90deg, transparent, #f2cc72, transparent ) !important; box-shadow: 0 0 8px rgba(242, 204, 114, 0.68), 0 0 18px rgba(226, 164, 54, 0.24) !important; } /* Bild etwas nach innen versetzen */ .sp-simpleportfolio.avenir .sp-simpleportfolio-img img, .sp-simpleportfolio.avenir .sp-simpleportfolio-image img, .sp-simpleportfolio .sp-simpleportfolio-img img, .sp-simpleportfolio .sp-simpleportfolio-image img { position: relative !important; z-index: 2 !important; display: block !important; width: 100% !important; height: 100% !important; border: 1px solid rgba(8, 7, 6, 0.96) !important; filter: contrast(1.08) saturate(0.93) brightness(0.80) !important; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.60) !important; transition: transform 0.65s cubic-bezier(.22, .75, .25, 1), filter 0.42s ease !important; } /* Einzelkarten-Hover */ .sp-simpleportfolio.avenir .sp-simpleportfolio-item:hover .sp-simpleportfolio-img, .sp-simpleportfolio.avenir .sp-simpleportfolio-item:hover .sp-simpleportfolio-image { border-color: rgba(248, 210, 119, 0.98) !important; box-shadow: inset 0 0 0 3px #050504, inset 0 0 0 4px rgba(237, 193, 91, 0.86), inset 0 0 0 7px rgba(7, 6, 5, 0.98), inset 0 13px 19px rgba(0, 0, 0, 0.68), inset 0 -14px 20px rgba(0, 0, 0, 0.75), 0 7px 0 rgba(3, 3, 2, 0.94), 0 20px 31px rgba(0, 0, 0, 0.62), 0 0 20px rgba(221, 169, 64, 0.14) !important; } /* ========================================================= 3. LIGHTBOX – WEISSEN RAHMEN VOLLSTÄNDIG ENTFERNEN ========================================================= */ /* Gesamter abgedunkelter Hintergrund */ .featherlight { z-index: 99999 !important; background: rgba(2, 2, 2, 0.92) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; } /* Weißes Fenster durch Schwarz-Gold-Rahmen ersetzen */ .featherlight .featherlight-content { position: relative !important; max-width: min(92vw, 1320px) !important; max-height: 92vh !important; margin: 0 !important; padding: 16px !important; overflow: visible !important; background: linear-gradient( 145deg, #25211b 0%, #070605 35%, #17130e 66%, #020202 100% ) !important; border: 1px solid rgba(231, 188, 89, 0.88) !important; border-bottom: 1px solid rgba(231, 188, 89, 0.88) !important; clip-path: polygon( 13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px ) !important; box-shadow: inset 0 0 0 4px #050504, inset 0 0 0 5px rgba(216, 164, 56, 0.72), inset 0 0 0 9px rgba(7, 6, 5, 0.98), 0 8px 0 rgba(1, 1, 1, 0.95), 0 28px 70px rgba(0, 0, 0, 0.84), 0 0 30px rgba(220, 169, 64, 0.14) !important; } /* Vergrößertes Bild */ .featherlight .featherlight-image { display: block !important; max-width: calc(92vw - 34px) !important; max-height: calc(92vh - 34px) !important; width: auto !important; height: auto !important; margin: 0 !important; border: 1px solid rgba(235, 194, 98, 0.58) !important; box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.55), 0 0 0 5px #050504, 0 0 0 6px rgba(211, 161, 55, 0.55) !important; } /* Falls das Bild in einem zusätzlichen Container sitzt */ .featherlight .featherlight-inner { background: #050504 !important; } /* ========================================================= 4. LIGHTBOX-SCHLIESSEN-BUTTON ========================================================= */ .featherlight .featherlight-close-icon { position: absolute !important; top: -15px !important; right: -15px !important; display: grid !important; place-items: center !important; width: 42px !important; height: 42px !important; color: #e5bd66 !important; font-size: 27px !important; font-weight: 300 !important; line-height: 1 !important; background: linear-gradient( 145deg, #211c15, #070605 ) !important; border: 1px solid rgba(229, 184, 79, 0.88) !important; border-radius: 50% !important; box-shadow: inset 0 1px 0 rgba(255, 234, 173, 0.09), 0 8px 19px rgba(0, 0, 0, 0.65), 0 0 13px rgba(215, 165, 62, 0.12) !important; text-shadow: 0 0 8px rgba(229, 189, 102, 0.22) !important; transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important; } .featherlight .featherlight-close-icon:hover { color: #fff0bd !important; border-color: #f2cd77 !important; transform: rotate(90deg) scale(1.05) !important; box-shadow: inset 0 1px 0 rgba(255, 239, 191, 0.13), 0 10px 22px rgba(0, 0, 0, 0.72), 0 0 17px rgba(224, 174, 68, 0.24) !important; } /* ========================================================= 5. MOBILE LIGHTBOX ========================================================= */ @media (max-width: 575px) { .featherlight .featherlight-content { max-width: 94vw !important; padding: 10px !important; } .featherlight .featherlight-image { max-width: calc(94vw - 22px) !important; max-height: 82vh !important; } .featherlight .featherlight-close-icon { top: -12px !important; right: -8px !important; width: 36px !important; height: 36px !important; font-size: 23px !important; } } /* ========================================================= UDO'S GALERIE – HARMONIE- UND PREMIUM-FINISH Ganz unten in die custom.css einfügen ========================================================= */ /* ========================================================= 1. GESAMTE GALERIESECTION EINHEITLICH GESTALTEN ========================================================= */ .t4-section:has(.sp-simpleportfolio), .t4-section:has(.sp-simpleportfolio.avenir) { position: relative !important; overflow: hidden !important; padding: 80px 0 95px !important; background: radial-gradient( ellipse at 50% 6%, rgba(224, 179, 79, 0.10), transparent 34% ), radial-gradient( ellipse at 16% 52%, rgba(255,255,255,.028), transparent 43% ), repeating-linear-gradient( 108deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, rgba(0,0,0,.028) 1px, rgba(0,0,0,.028) 5px ), linear-gradient( 145deg, #211e1a 0%, #141210 45%, #090807 100% ) !important; border-top: 1px solid rgba(211, 167, 71, 0.24) !important; border-bottom: 1px solid rgba(211, 167, 71, 0.22) !important; box-shadow: inset 0 24px 48px rgba(0,0,0,.32), inset 0 -26px 55px rgba(0,0,0,.42) !important; } /* Beige und abweichende Hintergründe innerhalb der Section entfernen */ .t4-section:has(.sp-simpleportfolio) .t4-section-inner, .t4-section:has(.sp-simpleportfolio) .container, .t4-section:has(.sp-simpleportfolio) .container-fluid, .t4-section:has(.sp-simpleportfolio) .t4-module, .t4-section:has(.sp-simpleportfolio) .module-inner, .t4-section:has(.sp-simpleportfolio) .module-ct, .t4-section:has(.sp-simpleportfolio) .sp-simpleportfolio { background: transparent !important; } /* Dunkle Randvignette für mehr Tiefe */ .t4-section:has(.sp-simpleportfolio)::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient( 90deg, rgba(0,0,0,.42) 0%, transparent 14%, transparent 86%, rgba(0,0,0,.42) 100% ) !important; } /* Inhalt über die Vignette legen */ .t4-section:has(.sp-simpleportfolio) .container, .t4-section:has(.sp-simpleportfolio) .container-fluid { position: relative !important; z-index: 2 !important; } /* ========================================================= 2. GALERIEBREITE UND ABSTÄNDE ========================================================= */ .sp-simpleportfolio, .sp-simpleportfolio.avenir { width: min(100%, 1500px) !important; margin: 0 auto !important; padding: 0 26px !important; } .sp-simpleportfolio .sp-simpleportfolio-items, .sp-simpleportfolio.avenir .sp-simpleportfolio-items { margin: 0 -12px !important; } .sp-simpleportfolio .sp-simpleportfolio-item, .sp-simpleportfolio.avenir .sp-simpleportfolio-item { padding: 12px !important; } /* ========================================================= 3. KARTEN ALS EIGENE SCHWARZ-GOLD-PANELS ========================================================= */ .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-item-inner, .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-item-inner { position: relative !important; isolation: isolate !important; overflow: hidden !important; padding: 11px 11px 0 !important; background: repeating-linear-gradient( 103deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, rgba(0,0,0,.025) 1px, rgba(0,0,0,.025) 5px ), linear-gradient( 145deg, #27231e 0%, #171411 54%, #090807 100% ) !important; border: 1px solid rgba(214, 168, 69, 0.65) !important; clip-path: polygon( 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px ) !important; box-shadow: 0 6px 0 rgba(3,3,2,.96), 0 17px 30px rgba(0,0,0,.50), inset 0 0 0 1px rgba(237,194,95,.11), inset 0 2px 0 rgba(255,230,161,.05), inset 0 -6px 10px rgba(0,0,0,.48), inset 0 0 35px rgba(0,0,0,.26) !important; transition: transform .42s cubic-bezier(.22,.75,.25,1), border-color .35s ease, box-shadow .42s ease !important; } /* Feiner Innenrahmen der gesamten Karte */ .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-item-inner::before, .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-item-inner::before { content: "" !important; position: absolute !important; inset: 7px !important; z-index: 30 !important; pointer-events: none !important; border: 1px solid rgba(232, 188, 91, 0.24) !important; clip-path: polygon( 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ) !important; } /* ========================================================= 4. MASSIVER SCHWARZ-GOLD-RAHMEN UM DAS FOTO ========================================================= */ .sp-simpleportfolio .sp-simpleportfolio-img, .sp-simpleportfolio .sp-simpleportfolio-image, .sp-simpleportfolio.avenir .sp-simpleportfolio-img, .sp-simpleportfolio.avenir .sp-simpleportfolio-image { position: relative !important; isolation: isolate !important; height: 255px !important; margin: 0 !important; padding: 9px !important; overflow: hidden !important; background: linear-gradient( 145deg, #28231a 0%, #040403 35%, #17130d 67%, #020202 100% ) !important; border: 1px solid rgba(232, 187, 83, 0.88) !important; clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px ) !important; box-shadow: inset 0 0 0 3px #030303, inset 0 0 0 4px rgba(222,171,55,.84), inset 0 0 0 7px rgba(5,5,4,.98), inset 0 13px 20px rgba(0,0,0,.70), inset 0 -14px 20px rgba(0,0,0,.78), 0 7px 14px rgba(0,0,0,.54), 0 0 13px rgba(220,168,54,.08) !important; } /* Dekorativer Innenrahmen direkt über dem Bild */ .sp-simpleportfolio .sp-simpleportfolio-img::before, .sp-simpleportfolio .sp-simpleportfolio-image::before, .sp-simpleportfolio.avenir .sp-simpleportfolio-img::before, .sp-simpleportfolio.avenir .sp-simpleportfolio-image::before { content: "" !important; position: absolute !important; inset: 14px !important; z-index: 9 !important; pointer-events: none !important; border: 1px solid rgba(244, 204, 111, 0.52) !important; clip-path: polygon( 7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px ) !important; box-shadow: inset 0 0 10px rgba(228,174,66,.055), 0 0 8px rgba(228,174,66,.07) !important; } /* Goldlicht am oberen Bildrand */ .sp-simpleportfolio .sp-simpleportfolio-img::after, .sp-simpleportfolio .sp-simpleportfolio-image::after, .sp-simpleportfolio.avenir .sp-simpleportfolio-img::after, .sp-simpleportfolio.avenir .sp-simpleportfolio-image::after { content: "" !important; position: absolute !important; top: 6px !important; left: 50% !important; width: 105px !important; height: 2px !important; z-index: 12 !important; pointer-events: none !important; transform: translateX(-50%) !important; background: linear-gradient( 90deg, transparent, #f3cf78, transparent ) !important; box-shadow: 0 0 8px rgba(243,207,120,.70), 0 0 18px rgba(222,165,52,.23) !important; } /* Foto selbst */ .sp-simpleportfolio .sp-simpleportfolio-img img, .sp-simpleportfolio .sp-simpleportfolio-image img, .sp-simpleportfolio.avenir .sp-simpleportfolio-img img, .sp-simpleportfolio.avenir .sp-simpleportfolio-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; filter: contrast(1.08) saturate(.94) brightness(.82) !important; transform: scale(1.015) translateZ(0) !important; transition: transform .65s cubic-bezier(.22,.75,.25,1), filter .42s ease !important; } /* ========================================================= 5. TEXTBEREICH RUHIGER UND KOMPAKTER ========================================================= */ .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info, .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info { min-height: 118px !important; padding: 24px 18px 22px !important; text-align: center !important; background: linear-gradient( 180deg, rgba(255,255,255,.016), transparent 44% ) !important; } /* Titel */ .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info h3, .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info h3 a, .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info h3, .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-info h3 a { color: #e9c575 !important; font-size: clamp(15px, 1.05vw, 19px) !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: .045em !important; text-transform: uppercase !important; } /* Kategorie */ .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-tags, .sp-simpleportfolio.avenir .sp-simpleportfolio-item .sp-simpleportfolio-tags { color: rgba(179,177,171,.55) !important; font-size: 8px !important; letter-spacing: .17em !important; text-transform: uppercase !important; } /* ========================================================= 6. HOVER: NUR EINZELNE KARTE ========================================================= */ .sp-simpleportfolio .sp-simpleportfolio-item:hover .sp-simpleportfolio-item-inner, .sp-simpleportfolio.avenir .sp-simpleportfolio-item:hover .sp-simpleportfolio-item-inner { transform: translateY(-7px) !important; border-color: rgba(248,207,112,.96) !important; box-shadow: 0 7px 0 rgba(3,3,2,.98), 0 23px 37px rgba(0,0,0,.64), 0 0 22px rgba(220,168,60,.12), inset 0 0 0 1px rgba(244,202,104,.18), inset 0 2px 0 rgba(255,231,163,.08), inset 0 -6px 10px rgba(0,0,0,.52) !important; } .sp-simpleportfolio .sp-simpleportfolio-item:hover .sp-simpleportfolio-img img, .sp-simpleportfolio.avenir .sp-simpleportfolio-item:hover .sp-simpleportfolio-img img, .sp-simpleportfolio .sp-simpleportfolio-item:hover .sp-simpleportfolio-image img, .sp-simpleportfolio.avenir .sp-simpleportfolio-item:hover .sp-simpleportfolio-image img { transform: scale(1.065) translateZ(0) !important; filter: contrast(1.10) saturate(1) brightness(.91) !important; } /* ========================================================= 7. FILTER MEHR IN DIE GESAMTFLÄCHE EINBINDEN ========================================================= */ .sp-simpleportfolio .sp-simpleportfolio-filter, .sp-simpleportfolio.avenir .sp-simpleportfolio-filter { position: relative !important; margin: 30px 0 46px !important; padding: 18px 14px !important; background: linear-gradient( 90deg, transparent, rgba(0,0,0,.28) 18%, rgba(0,0,0,.38) 50%, rgba(0,0,0,.28) 82%, transparent ) !important; } /* Feine Goldlinie unter dem Filter */ .sp-simpleportfolio .sp-simpleportfolio-filter::after, .sp-simpleportfolio.avenir .sp-simpleportfolio-filter::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 0 !important; width: min(420px, 65%) !important; height: 1px !important; transform: translateX(-50%) !important; background: linear-gradient( 90deg, transparent, rgba(222,181,85,.55), transparent ) !important; } /* ========================================================= 8. RESPONSIVE ========================================================= */ @media (max-width: 991px) { .sp-simpleportfolio .sp-simpleportfolio-img, .sp-simpleportfolio .sp-simpleportfolio-image, .sp-simpleportfolio.avenir .sp-simpleportfolio-img, .sp-simpleportfolio.avenir .sp-simpleportfolio-image { height: 225px !important; } } @media (max-width: 575px) { .t4-section:has(.sp-simpleportfolio) { padding: 54px 0 65px !important; } .sp-simpleportfolio, .sp-simpleportfolio.avenir { padding: 0 12px !important; } .sp-simpleportfolio .sp-simpleportfolio-img, .sp-simpleportfolio .sp-simpleportfolio-image, .sp-simpleportfolio.avenir .sp-simpleportfolio-img, .sp-simpleportfolio.avenir .sp-simpleportfolio-image { height: 220px !important; } .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info { min-height: 104px !important; padding: 20px 14px 18px !important; } } /* ========================================================= GALERIE-ÜBERSCHRIFT – PREMIUM SCHWARZ-GOLD Inhalt bleibt vollständig aus dem Joomla-Modul ========================================================= */ /* Gesamten Überschriftenbereich zentrieren */ .module-ct:has(.sp-simpleportfolio) > .jt-pretext, .t4-module:has(.sp-simpleportfolio) .jt-pretext { position: relative !important; z-index: 5 !important; width: 100% !important; max-width: 1100px !important; margin: 0 auto 42px !important; padding: 12px 20px 30px !important; text-align: center !important; background: transparent !important; } /* Hauptüberschrift */ .module-ct:has(.sp-simpleportfolio) > .jt-pretext h1, .module-ct:has(.sp-simpleportfolio) > .jt-pretext h2, .module-ct:has(.sp-simpleportfolio) > .jt-pretext h3, .t4-module:has(.sp-simpleportfolio) .jt-pretext h1, .t4-module:has(.sp-simpleportfolio) .jt-pretext h2, .t4-module:has(.sp-simpleportfolio) .jt-pretext h3 { position: relative !important; display: inline-block !important; margin: 0 auto 18px !important; padding: 0 !important; color: #edca7b !important; font-size: clamp(34px, 4vw, 58px) !important; font-weight: 400 !important; line-height: 1.08 !important; letter-spacing: 0.095em !important; text-align: center !important; text-transform: uppercase !important; background: linear-gradient( 180deg, #fff0bc 0%, #efca73 42%, #b9822e 100% ) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 4px 16px rgba(0,0,0,.78), 0 0 22px rgba(218,169,68,.10) !important; } /* Roten Originalstil des ersten Wortes neutralisieren */ .module-ct:has(.sp-simpleportfolio) .jt-pretext .first-word-avenir, .t4-module:has(.sp-simpleportfolio) .jt-pretext .first-word-avenir { color: inherit !important; background: linear-gradient( 180deg, #fff0bc 0%, #efca73 42%, #b9822e 100% ) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Goldener Lichtreflex oberhalb der Überschrift */ .module-ct:has(.sp-simpleportfolio) > .jt-pretext h1::before, .module-ct:has(.sp-simpleportfolio) > .jt-pretext h2::before, .module-ct:has(.sp-simpleportfolio) > .jt-pretext h3::before, .t4-module:has(.sp-simpleportfolio) .jt-pretext h1::before, .t4-module:has(.sp-simpleportfolio) .jt-pretext h2::before, .t4-module:has(.sp-simpleportfolio) .jt-pretext h3::before { content: "" !important; position: absolute !important; left: 50% !important; top: -30px !important; width: 150px !important; height: 3px !important; transform: translateX(-50%) !important; background: linear-gradient( 90deg, transparent, rgba(239,199,101,.94), transparent ) !important; box-shadow: 0 0 8px rgba(239,199,101,.72), 0 0 22px rgba(218,164,54,.30) !important; } /* Feine rote Glutlinie unter der Hauptüberschrift */ .module-ct:has(.sp-simpleportfolio) > .jt-pretext h1::after, .module-ct:has(.sp-simpleportfolio) > .jt-pretext h2::after, .module-ct:has(.sp-simpleportfolio) > .jt-pretext h3::after, .t4-module:has(.sp-simpleportfolio) .jt-pretext h1::after, .t4-module:has(.sp-simpleportfolio) .jt-pretext h2::after, .t4-module:has(.sp-simpleportfolio) .jt-pretext h3::after { content: "" !important; display: block !important; width: 68px !important; height: 2px !important; margin: 17px auto 0 !important; background: linear-gradient( 90deg, transparent, #ef3d34, transparent ) !important; box-shadow: 0 0 8px rgba(239,61,52,.60), 0 0 18px rgba(239,61,52,.22) !important; } /* Untertitel */ .module-ct:has(.sp-simpleportfolio) > .jt-pretext p, .t4-module:has(.sp-simpleportfolio) .jt-pretext p { max-width: 850px !important; margin: 0 auto !important; padding: 0 !important; color: rgba(220,209,188,.64) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.55 !important; letter-spacing: 0.20em !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 3px 10px rgba(0,0,0,.65) !important; } /* Goldene Abschlusslinie unter dem Untertitel */ .module-ct:has(.sp-simpleportfolio) > .jt-pretext p::after, .t4-module:has(.sp-simpleportfolio) .jt-pretext p::after { content: "" !important; display: block !important; width: 170px !important; height: 1px !important; margin: 22px auto 0 !important; background: linear-gradient( 90deg, transparent, rgba(224,183,88,.62), transparent ) !important; box-shadow: 0 0 10px rgba(224,183,88,.13) !important; } /* Alte Balken oder Template-Dekorationen ausblenden */ .module-ct:has(.sp-simpleportfolio) .jt-pretext-title::before, .module-ct:has(.sp-simpleportfolio) .jt-pretext-title::after, .t4-module:has(.sp-simpleportfolio) .jt-pretext-title::before, .t4-module:has(.sp-simpleportfolio) .jt-pretext-title::after { display: none !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575px) { .module-ct:has(.sp-simpleportfolio) > .jt-pretext, .t4-module:has(.sp-simpleportfolio) .jt-pretext { margin-bottom: 28px !important; padding: 8px 14px 22px !important; } .module-ct:has(.sp-simpleportfolio) > .jt-pretext h1, .module-ct:has(.sp-simpleportfolio) > .jt-pretext h2, .module-ct:has(.sp-simpleportfolio) > .jt-pretext h3, .t4-module:has(.sp-simpleportfolio) .jt-pretext h1, .t4-module:has(.sp-simpleportfolio) .jt-pretext h2, .t4-module:has(.sp-simpleportfolio) .jt-pretext h3 { font-size: 30px !important; letter-spacing: .065em !important; } .module-ct:has(.sp-simpleportfolio) > .jt-pretext p, .t4-module:has(.sp-simpleportfolio) .jt-pretext p { font-size: 9px !important; letter-spacing: .14em !important; } } /* ========================================================= GALERIE-ÜBERSCHRIFT – MODUL 119 ========================================================= */ #Mod119 > .module-inner > .module-title { position: relative !important; display: block !important; width: 100% !important; max-width: 1100px !important; margin: 0 auto 48px !important; padding: 34px 20px 34px !important; color: #eac472 !important; font-size: clamp(34px, 3.7vw, 56px) !important; font-weight: 400 !important; line-height: 1.08 !important; letter-spacing: 0.09em !important; text-align: center !important; text-transform: uppercase !important; background: transparent !important; border: 0 !important; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.78), 0 0 20px rgba(218, 169, 68, 0.10) !important; } /* Beide Textfarben der alten Bicolor-Überschrift überschreiben */ #Mod119 > .module-inner > .module-title, #Mod119 > .module-inner > .module-title *, #Mod119 > .module-inner > .module-title .first-word-avenir, #Mod119 > .module-inner > .module-title span { color: #eac472 !important; background: linear-gradient( 180deg, #fff0bc 0%, #efca73 42%, #b9822e 100% ) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Goldener Lichtreflex über der Überschrift */ #Mod119 > .module-inner > .module-title::before { content: "" !important; position: absolute !important; top: 5px !important; left: 50% !important; width: 150px !important; height: 2px !important; transform: translateX(-50%) !important; background: linear-gradient( 90deg, transparent, rgba(242, 204, 116, 0.95), transparent ) !important; box-shadow: 0 0 8px rgba(242, 204, 116, 0.68), 0 0 20px rgba(218, 164, 54, 0.28) !important; } /* Feine rote Glutlinie darunter */ #Mod119 > .module-inner > .module-title::after { content: "" !important; display: block !important; width: 66px !important; height: 2px !important; margin: 18px auto 0 !important; background: linear-gradient( 90deg, transparent, #ef3e35, transparent ) !important; box-shadow: 0 0 8px rgba(239, 62, 53, 0.58), 0 0 17px rgba(239, 62, 53, 0.20) !important; } /* Alte Template-Dekorationen beseitigen */ #Mod119 > .module-inner > .module-title.bicolor::before, #Mod119 > .module-inner > .module-title.bicolor::after { border: 0 !important; } /* Abstand zum Filter */ #Mod119 > .module-inner > .module-ct { margin-top: 0 !important; } /* Mobile */ @media (max-width: 575px) { #Mod119 > .module-inner > .module-title { margin-bottom: 30px !important; padding: 28px 14px 26px !important; font-size: 30px !important; letter-spacing: 0.06em !important; } #Mod119 > .module-inner > .module-title::before { width: 110px !important; } } /* ========================================================= UDO'S GRILLSCHWEINE – PREMIUM ANFRAGEBEREICH Schwarzstahl · Goldfase · Feuerlicht · Formulardesign Bestehende Inhalte bleiben aus den Joomla-Modulen. ========================================================= */ /* ========================================================= 1. GESAMTER ABSCHNITT ========================================================= */ #t4-bottom-spot { position: relative !important; isolation: isolate !important; overflow: hidden !important; padding: 82px 0 88px !important; /* Das bereits vorhandene Templatebild bleibt erhalten. Darüber legen wir Metall, Vignette und warmes Licht. */ background-image: linear-gradient( 90deg, rgba(2, 2, 2, 0.26) 0%, rgba(9, 8, 7, 0.78) 23%, rgba(11, 10, 9, 0.90) 50%, rgba(9, 8, 7, 0.78) 77%, rgba(2, 2, 2, 0.28) 100% ), radial-gradient( ellipse at 50% 10%, rgba(219, 174, 75, 0.13), transparent 42% ), url("./images/bottomspot-bg.jpg") !important; background-repeat: no-repeat, no-repeat, no-repeat !important; background-position: center, center, center bottom !important; background-size: cover, cover, cover !important; background-attachment: scroll, scroll, fixed !important; border-top: 1px solid rgba(214, 168, 69, 0.42) !important; border-bottom: 1px solid rgba(214, 168, 69, 0.30) !important; box-shadow: inset 0 34px 68px rgba(0, 0, 0, 0.42), inset 0 -34px 70px rgba(0, 0, 0, 0.58) !important; } /* Alte vollflächige Überlagerung ersetzen */ #t4-bottom-spot::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; width: auto !important; height: auto !important; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.48) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.48) 100% ), repeating-linear-gradient( 104deg, rgba(255, 255, 255, 0.010) 0, rgba(255, 255, 255, 0.010) 1px, rgba(0, 0, 0, 0.024) 1px, rgba(0, 0, 0, 0.024) 5px ) !important; opacity: 1 !important; } /* Goldener Lichtsaum oben */ #t4-bottom-spot::before { content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; width: min(1120px, 76%) !important; height: 2px !important; z-index: 4 !important; pointer-events: none !important; transform: translateX(-50%) !important; background: linear-gradient( 90deg, transparent, rgba(214, 165, 60, 0.30), rgba(246, 210, 121, 0.95), rgba(214, 165, 60, 0.30), transparent ) !important; box-shadow: 0 0 9px rgba(239, 197, 99, 0.48), 0 0 25px rgba(218, 164, 54, 0.18) !important; } /* Inhalt über alle Hintergrundebenen setzen */ #t4-bottom-spot .t4-section-inner, #t4-bottom-spot .container, #t4-bottom-spot .row, #t4-bottom-spot .bottomspot-1, #t4-bottom-spot .bottomspot-2 { position: relative !important; z-index: 3 !important; } /* Abschnitt auf eine angenehme Breite begrenzen */ #t4-bottom-spot .container { max-width: 1360px !important; } /* Beide Spalten gleich hoch halten */ #t4-bottom-spot .row { align-items: stretch !important; } /* ========================================================= 2. LINKE RESERVIERUNGS-/INFORMATIONSKARTE ========================================================= */ #t4-bottom-spot .makereservation-left { --reservation-corner: 14px; position: relative !important; isolation: isolate !important; float: none !important; width: 100% !important; max-width: 470px !important; min-height: 590px !important; margin: 0 auto !important; padding: 62px 52px 50px !important; overflow: hidden !important; color: rgba(239, 228, 207, 0.82) !important; text-align: center !important; background: radial-gradient( ellipse at 50% 0%, rgba(238, 196, 98, 0.07), transparent 35% ), repeating-linear-gradient( 103deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, rgba(0,0,0,.028) 1px, rgba(0,0,0,.028) 5px ), linear-gradient( 145deg, rgba(42, 38, 32, 0.98) 0%, rgba(23, 20, 17, 0.99) 54%, rgba(8, 7, 6, 1) 100% ) !important; border: 1px solid rgba(220, 174, 72, 0.76) !important; clip-path: polygon( var(--reservation-corner) 0, calc(100% - var(--reservation-corner)) 0, 100% var(--reservation-corner), 100% calc(100% - var(--reservation-corner)), calc(100% - var(--reservation-corner)) 100%, var(--reservation-corner) 100%, 0 calc(100% - var(--reservation-corner)), 0 var(--reservation-corner) ) !important; box-shadow: 0 7px 0 rgba(3, 3, 2, 0.96), 0 24px 50px rgba(0, 0, 0, 0.62), 0 0 25px rgba(214, 165, 62, 0.08), inset 0 0 0 1px rgba(240, 197, 99, 0.12), inset 0 2px 0 rgba(255, 232, 166, 0.07), inset 0 -7px 12px rgba(0, 0, 0, 0.56), inset 0 0 46px rgba(0, 0, 0, 0.30) !important; } /* Innerer dekorativer Rahmen */ #t4-bottom-spot .makereservation-left::before { content: "" !important; position: absolute !important; inset: 13px !important; z-index: -1 !important; pointer-events: none !important; border: 1px solid rgba(235, 192, 93, 0.42) !important; clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px ) !important; box-shadow: inset 0 0 14px rgba(220, 170, 63, 0.05), 0 0 10px rgba(220, 170, 63, 0.04) !important; } /* Vorhandenes Overlay neutralisieren und als Lichtreflex nutzen */ #t4-bottom-spot .makereservation-left::after { content: "" !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; z-index: -2 !important; pointer-events: none !important; opacity: 1 !important; background: linear-gradient( 112deg, transparent 0%, transparent 41%, rgba(255, 255, 255, 0.018) 47%, rgba(255, 255, 255, 0.060) 50%, rgba(255, 255, 255, 0.018) 53%, transparent 59% ) !important; background-size: 240% 100% !important; background-position: 140% 0 !important; } /* ========================================================= 3. LINKE TYPOGRAFIE ========================================================= */ #t4-bottom-spot .makereservation-left h1, #t4-bottom-spot .makereservation-left h2, #t4-bottom-spot .makereservation-left h3 { position: relative !important; margin: 0 0 26px !important; padding: 0 0 22px !important; color: #edca7b !important; font-size: clamp(31px, 2.4vw, 45px) !important; font-weight: 400 !important; line-height: 1.16 !important; letter-spacing: 0.055em !important; text-align: center !important; text-transform: uppercase !important; background: linear-gradient( 180deg, #fff0bc 0%, #edc873 44%, #b77e29 100% ) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 4px 17px rgba(0, 0, 0, 0.78), 0 0 18px rgba(215, 166, 62, 0.09) !important; } /* Rote Glutlinie unter Haupttitel */ #t4-bottom-spot .makereservation-left h1::after, #t4-bottom-spot .makereservation-left h2::after, #t4-bottom-spot .makereservation-left h3::after { content: "" !important; display: block !important; width: 64px !important; height: 2px !important; margin: 18px auto 0 !important; background: linear-gradient( 90deg, transparent, #ef3d34, transparent ) !important; box-shadow: 0 0 8px rgba(239, 61, 52, 0.58), 0 0 18px rgba(239, 61, 52, 0.20) !important; } /* Kleinere Zwischenüberschriften */ #t4-bottom-spot .makereservation-left h4, #t4-bottom-spot .makereservation-left h5, #t4-bottom-spot .makereservation-left h6 { margin: 24px 0 12px !important; color: #d7ae59 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important; letter-spacing: 0.15em !important; text-align: center !important; text-transform: uppercase !important; } /* Normale Texte */ #t4-bottom-spot .makereservation-left p { margin: 0 0 12px !important; color: rgba(230, 221, 205, 0.70) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.65 !important; letter-spacing: 0.025em !important; text-align: center !important; } /* Größere Telefonnummer */ #t4-bottom-spot .makereservation-left a[href^="tel:"], #t4-bottom-spot .makereservation-left .phone, #t4-bottom-spot .makereservation-left [class*="phone"] { display: inline-block !important; margin-top: 16px !important; color: #edc875 !important; font-size: clamp(24px, 2vw, 34px) !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0.045em !important; text-decoration: none !important; text-shadow: 0 3px 13px rgba(0, 0, 0, 0.72), 0 0 13px rgba(218, 169, 68, 0.10) !important; } /* ========================================================= 4. RECHTE FORMULARKARTE ========================================================= */ #t4-bottom-spot .bottomspot-2, #t4-bottom-spot qf3form.quickform_avenir, #t4-bottom-spot .quickform_avenir { position: relative !important; } /* Formularpanel */ #t4-bottom-spot #chronoform-quick-reservation-form { position: relative !important; isolation: isolate !important; width: 100% !important; min-height: 590px !important; margin: 0 !important; padding: 52px 48px 46px !important; overflow: hidden !important; background: radial-gradient( ellipse at 50% 0%, rgba(220, 173, 73, 0.055), transparent 36% ), repeating-linear-gradient( 103deg, rgba(255,255,255,.010) 0, rgba(255,255,255,.010) 1px, rgba(0,0,0,.026) 1px, rgba(0,0,0,.026) 5px ), linear-gradient( 145deg, rgba(29, 26, 22, 0.97) 0%, rgba(15, 13, 11, 0.99) 57%, rgba(6, 5, 4, 1) 100% ) !important; border: 1px solid rgba(202, 156, 61, 0.38) !important; clip-path: polygon( 13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px ) !important; box-shadow: 0 7px 0 rgba(3, 3, 2, 0.96), 0 24px 50px rgba(0, 0, 0, 0.58), inset 0 0 0 1px rgba(230, 184, 85, 0.08), inset 0 2px 0 rgba(255, 233, 170, 0.04), inset 0 -7px 12px rgba(0, 0, 0, 0.56), inset 0 0 44px rgba(0, 0, 0, 0.28) !important; } /* Innerer Rahmen um das Formularpanel */ #t4-bottom-spot #chronoform-quick-reservation-form::before { content: "" !important; position: absolute !important; inset: 12px !important; z-index: -1 !important; pointer-events: none !important; border: 1px solid rgba(231, 188, 91, 0.22) !important; clip-path: polygon( 9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px ) !important; } /* ========================================================= 5. FORMULARÜBERSCHRIFT ========================================================= */ #t4-bottom-spot .bottomspot-2 .module-title, #t4-bottom-spot qf3form.quickform_avenir h4, #t4-bottom-spot .quickform_avenir h4, #t4-bottom-spot #chronoform-quick-reservation-form h4 { position: relative !important; margin: 0 0 36px !important; padding: 0 0 20px !important; color: #e7c06b !important; font-size: clamp(18px, 1.45vw, 23px) !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: 0.09em !important; text-align: center !important; text-transform: uppercase !important; border: 0 !important; text-shadow: 0 3px 13px rgba(0, 0, 0, 0.74), 0 0 14px rgba(218, 169, 68, 0.08) !important; } /* Rote Akzentlinie unter Formularüberschrift */ #t4-bottom-spot .bottomspot-2 .module-title::after, #t4-bottom-spot qf3form.quickform_avenir h4::after, #t4-bottom-spot .quickform_avenir h4::after, #t4-bottom-spot #chronoform-quick-reservation-form h4::after { content: "" !important; display: block !important; width: 58px !important; height: 2px !important; margin: 17px auto 0 !important; background: linear-gradient( 90deg, transparent, #ef3d34, transparent ) !important; box-shadow: 0 0 8px rgba(239, 61, 52, 0.58), 0 0 18px rgba(239, 61, 52, 0.19) !important; } /* ========================================================= 6. FORMULARFELDER ========================================================= */ #t4-bottom-spot #chronoform-quick-reservation-form .field { margin-bottom: 16px !important; } /* Feldcontainer */ #t4-bottom-spot #chronoform-quick-reservation-form .field .input { position: relative !important; } /* Eingaben */ #t4-bottom-spot #chronoform-quick-reservation-form input, #t4-bottom-spot #chronoform-quick-reservation-form textarea, #t4-bottom-spot #chronoform-quick-reservation-form select { width: 100% !important; margin: 0 !important; padding: 13px 46px 13px 15px !important; color: rgba(239, 229, 210, 0.88) !important; background: linear-gradient( 180deg, rgba(5, 5, 4, 0.60), rgba(16, 14, 12, 0.82) ) !important; border: 1px solid rgba(192, 171, 130, 0.34) !important; border-radius: 0 !important; outline: 0 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0.025em !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), inset 0 0 16px rgba(0, 0, 0, 0.32), 0 4px 10px rgba(0, 0, 0, 0.20) !important; transition: color 0.30s ease, border-color 0.30s ease, background 0.30s ease, box-shadow 0.30s ease !important; } /* Textarea */ #t4-bottom-spot #chronoform-quick-reservation-form textarea { min-height: 140px !important; resize: vertical !important; } /* Platzhalter */ #t4-bottom-spot #chronoform-quick-reservation-form input::placeholder, #t4-bottom-spot #chronoform-quick-reservation-form textarea::placeholder { color: rgba(199, 194, 184, 0.52) !important; opacity: 1 !important; } /* Fokuszustand */ #t4-bottom-spot #chronoform-quick-reservation-form input:focus, #t4-bottom-spot #chronoform-quick-reservation-form textarea:focus, #t4-bottom-spot #chronoform-quick-reservation-form select:focus { color: #f3e7ce !important; background: linear-gradient( 180deg, rgba(14, 12, 10, 0.88), rgba(24, 20, 15, 0.92) ) !important; border-color: rgba(232, 190, 94, 0.82) !important; box-shadow: inset 0 1px 0 rgba(255, 235, 179, 0.06), inset 0 0 17px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(218, 170, 68, 0.13), 0 0 15px rgba(218, 170, 68, 0.08) !important; } /* Feldsymbole */ #t4-bottom-spot #chronoform-quick-reservation-form .nui.form .field .input.iconed > svg.icon, #t4-bottom-spot #chronoform-quick-reservation-form .field .input.iconed > svg.icon, #t4-bottom-spot #chronoform-quick-reservation-form svg.icon { color: rgba(205, 173, 104, 0.65) !important; opacity: 1 !important; } /* ========================================================= 7. ABSENDEBUTTON ========================================================= */ #t4-bottom-spot #chronoform-quick-reservation-form .nui.button.btn-secondary, #t4-bottom-spot #chronoform-quick-reservation-form button[type="submit"], #t4-bottom-spot #chronoform-quick-reservation-form input[type="submit"] { position: relative !important; width: 100% !important; min-height: 54px !important; margin-top: 2px !important; padding: 14px 28px !important; color: #efcc7d !important; background: radial-gradient( ellipse at 50% 0%, rgba(255, 232, 164, 0.08), transparent 40% ), linear-gradient( 180deg, #302414 0%, #18120b 100% ) !important; border: 1px solid rgba(235, 193, 95, 0.88) !important; border-radius: 0 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; box-shadow: inset 0 1px 0 rgba(255, 235, 176, 0.09), inset 0 -3px 7px rgba(0, 0, 0, 0.34), 0 7px 15px rgba(0, 0, 0, 0.42), 0 0 13px rgba(214, 165, 61, 0.08) !important; transition: color 0.30s ease, border-color 0.30s ease, background 0.30s ease, box-shadow 0.35s ease, transform 0.30s ease !important; } /* Button-Hover */ #t4-bottom-spot #chronoform-quick-reservation-form .nui.button.btn-secondary:hover, #t4-bottom-spot #chronoform-quick-reservation-form button[type="submit"]:hover, #t4-bottom-spot #chronoform-quick-reservation-form input[type="submit"]:hover { color: #fff0bd !important; background: radial-gradient( ellipse at 50% 0%, rgba(255, 238, 184, 0.12), transparent 43% ), linear-gradient( 180deg, #3c2c17 0%, #1d150c 100% ) !important; border-color: rgba(249, 213, 124, 0.98) !important; transform: translateY(-2px) !important; box-shadow: inset 0 1px 0 rgba(255, 240, 192, 0.13), inset 0 -3px 7px rgba(0, 0, 0, 0.30), 0 10px 20px rgba(0, 0, 0, 0.52), 0 0 18px rgba(225, 174, 69, 0.19) !important; } /* Button beim Anklicken */ #t4-bottom-spot #chronoform-quick-reservation-form .nui.button.btn-secondary:active, #t4-bottom-spot #chronoform-quick-reservation-form button[type="submit"]:active { transform: translateY(0) !important; } /* ChronoForms-Werbung weiterhin ausblenden */ #t4-bottom-spot a.chronocredits { display: none !important; } /* ========================================================= 8. PANEL-HOVER NUR SEHR DEZENT ========================================================= */ #t4-bottom-spot .makereservation-left, #t4-bottom-spot #chronoform-quick-reservation-form { transition: transform 0.45s cubic-bezier(.22, .75, .25, 1), border-color 0.35s ease, box-shadow 0.45s ease !important; } #t4-bottom-spot .makereservation-left:hover, #t4-bottom-spot #chronoform-quick-reservation-form:hover { transform: translateY(-4px) !important; border-color: rgba(241, 201, 107, 0.88) !important; } /* ========================================================= 9. TABLET ========================================================= */ @media (max-width: 991px) { #t4-bottom-spot { padding: 68px 0 72px !important; background-attachment: scroll, scroll, scroll !important; } #t4-bottom-spot .makereservation-left, #t4-bottom-spot #chronoform-quick-reservation-form { min-height: auto !important; margin-bottom: 28px !important; } #t4-bottom-spot .makereservation-left { max-width: 100% !important; padding: 52px 42px 44px !important; } #t4-bottom-spot #chronoform-quick-reservation-form { padding: 46px 40px 40px !important; } } /* ========================================================= 10. SMARTPHONE ========================================================= */ @media (max-width: 575px) { #t4-bottom-spot { padding: 50px 0 56px !important; } #t4-bottom-spot .container { padding-left: 15px !important; padding-right: 15px !important; } #t4-bottom-spot .makereservation-left { --reservation-corner: 10px; padding: 46px 25px 38px !important; } #t4-bottom-spot #chronoform-quick-reservation-form { padding: 40px 22px 32px !important; clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px ) !important; } #t4-bottom-spot .makereservation-left h1, #t4-bottom-spot .makereservation-left h2, #t4-bottom-spot .makereservation-left h3 { font-size: 29px !important; } #t4-bottom-spot .bottomspot-2 .module-title, #t4-bottom-spot qf3form.quickform_avenir h4, #t4-bottom-spot .quickform_avenir h4, #t4-bottom-spot #chronoform-quick-reservation-form h4 { font-size: 18px !important; } #t4-bottom-spot #chronoform-quick-reservation-form input, #t4-bottom-spot #chronoform-quick-reservation-form textarea, #t4-bottom-spot #chronoform-quick-reservation-form select { font-size: 13px !important; } #t4-bottom-spot .makereservation-left:hover, #t4-bottom-spot #chronoform-quick-reservation-form:hover { transform: none !important; } } /* ========================================================= RESERVIERUNGSBEREICH – HARMONIE-FINISH Ergänzung zum bestehenden Premium-CSS ========================================================= */ /* 1. Hintergrund deutlich dunkler und kontrastreicher */ #t4-bottom-spot { background-image: radial-gradient( ellipse at 50% 18%, rgba(219, 174, 75, 0.10), transparent 36% ), linear-gradient( 90deg, rgba(0, 0, 0, 0.76) 0%, rgba(13, 12, 10, 0.92) 22%, rgba(15, 13, 11, 0.97) 50%, rgba(13, 12, 10, 0.92) 78%, rgba(0, 0, 0, 0.76) 100% ), url("./images/bottomspot-bg.jpg") !important; box-shadow: inset 0 42px 80px rgba(0,0,0,.58), inset 0 -48px 90px rgba(0,0,0,.70) !important; } /* 2. Inhalt kompakter und geschlossener */ #t4-bottom-spot .container { max-width: 1180px !important; } #t4-bottom-spot .row { display: grid !important; grid-template-columns: minmax(330px, 0.88fr) minmax(480px, 1.12fr) !important; gap: 34px !important; align-items: stretch !important; justify-content: center !important; } /* Bootstrap-Spalten neutralisieren */ #t4-bottom-spot .row > [class*="col-"] { width: auto !important; max-width: none !important; flex: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* 3. Linke und rechte Karte exakt gleich hoch */ #t4-bottom-spot .makereservation-left, #t4-bottom-spot #chronoform-quick-reservation-form { height: 100% !important; min-height: 560px !important; } /* 4. Linke Karte ruhiger proportionieren */ #t4-bottom-spot .makereservation-left { max-width: none !important; padding: 54px 46px 44px !important; } /* Haupttitel etwas kompakter */ #t4-bottom-spot .makereservation-left h1, #t4-bottom-spot .makereservation-left h2, #t4-bottom-spot .makereservation-left h3 { margin-bottom: 22px !important; font-size: clamp(28px, 2.2vw, 40px) !important; line-height: 1.14 !important; } /* 5. Rechte Formularüberschrift in die Karte integrieren */ #t4-bottom-spot .bottomspot-2 .module-title { position: relative !important; z-index: 8 !important; width: calc(100% - 76px) !important; margin: 0 auto -78px !important; padding-top: 28px !important; font-size: 18px !important; } /* Formular erhält oben Platz für die integrierte Überschrift */ #t4-bottom-spot #chronoform-quick-reservation-form { padding: 105px 38px 40px !important; } /* 6. Beide Panels optisch enger und gewichtiger */ #t4-bottom-spot .makereservation-left, #t4-bottom-spot #chronoform-quick-reservation-form { box-shadow: 0 8px 0 rgba(2,2,2,.98), 0 26px 54px rgba(0,0,0,.70), 0 0 26px rgba(214,165,62,.07), inset 0 0 0 1px rgba(240,197,99,.11), inset 0 2px 0 rgba(255,232,166,.06), inset 0 -7px 12px rgba(0,0,0,.60), inset 0 0 48px rgba(0,0,0,.35) !important; } /* 7. Gemeinsamer visueller Rahmen um beide Module */ #t4-bottom-spot .row::before { content: "" !important; position: absolute !important; inset: -22px -28px -24px !important; z-index: -1 !important; pointer-events: none !important; border: 1px solid rgba(212, 165, 67, 0.16) !important; background: linear-gradient( 180deg, rgba(255,255,255,.012), rgba(0,0,0,.10) ) !important; box-shadow: inset 0 0 44px rgba(0,0,0,.20), 0 24px 60px rgba(0,0,0,.34) !important; } /* 8. Felder etwas größer und besser lesbar */ #t4-bottom-spot #chronoform-quick-reservation-form input, #t4-bottom-spot #chronoform-quick-reservation-form textarea, #t4-bottom-spot #chronoform-quick-reservation-form select { font-size: 13px !important; } #t4-bottom-spot #chronoform-quick-reservation-form textarea { min-height: 132px !important; } /* 9. Button etwas markanter */ #t4-bottom-spot #chronoform-quick-reservation-form .nui.button.btn-secondary, #t4-bottom-spot #chronoform-quick-reservation-form button[type="submit"], #t4-bottom-spot #chronoform-quick-reservation-form input[type="submit"] { min-height: 58px !important; margin-top: 8px !important; } /* 10. Tablet und Mobil wieder untereinander */ @media (max-width: 991px) { #t4-bottom-spot .row { display: block !important; } #t4-bottom-spot .row::before { display: none !important; } #t4-bottom-spot .makereservation-left, #t4-bottom-spot #chronoform-quick-reservation-form { min-height: auto !important; height: auto !important; } #t4-bottom-spot .bottomspot-2 .module-title { width: 100% !important; margin: 0 0 24px !important; padding-top: 0 !important; } #t4-bottom-spot #chronoform-quick-reservation-form { padding: 46px 40px 40px !important; } } /* ========================================================= STORY-BEREICH – GEPRÄGTER „SEIT 2004“-STEMPEL CSS-only · kein zusätzliches HTML notwendig ========================================================= */ /* Rechte Textkarte bekommt Platz für den Stempel */ .our-story-wrap .our-story.right { position: relative !important; padding-right: 215px !important; background-image: /* CSS-SVG-Stempel */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cdefs%3E%3Cfilter id='emboss' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur in='SourceAlpha' stdDeviation='1.2' result='blur'/%3E%3CfeSpecularLighting in='blur' surfaceScale='4' specularConstant='.7' specularExponent='18' lighting-color='%23f4d58a' result='spec'%3E%3CfeDistantLight azimuth='225' elevation='48'/%3E%3C/feSpecularLighting%3E%3CfeComposite in='spec' in2='SourceAlpha' operator='in' result='specOut'/%3E%3CfeDropShadow dx='2' dy='3' stdDeviation='2.4' flood-color='%23000000' flood-opacity='.72'/%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='specOut'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%23d6aa52' stroke-opacity='.58' filter='url(%23emboss)'%3E%3Ccircle cx='95' cy='95' r='81' stroke-width='3'/%3E%3Ccircle cx='95' cy='95' r='70' stroke-width='1.4' stroke-dasharray='4 4'/%3E%3Cpath d='M39 95h25M126 95h25' stroke-width='1.5'/%3E%3Ccircle cx='95' cy='95' r='4' fill='%23d6aa52' fill-opacity='.55' stroke='none'/%3E%3C/g%3E%3Cg fill='%23e0b661' fill-opacity='.64' text-anchor='middle' font-family='Georgia,serif' filter='url(%23emboss)'%3E%3Ctext x='95' y='69' font-size='20' letter-spacing='5'%3ESEIT%3C/text%3E%3Ctext x='95' y='113' font-size='40' font-weight='700' letter-spacing='2'%3E2004%3C/text%3E%3Ctext x='95' y='139' font-size='9' letter-spacing='3'%3EGRILLKUNST%3C/text%3E%3C/g%3E%3C/svg%3E"), /* vorhandener Metallreflex */ linear-gradient( 112deg, transparent 0%, transparent 38%, rgba(255,255,255,.022) 45%, rgba(255,255,255,.072) 50%, rgba(255,255,255,.022) 55%, transparent 62% ), /* gebürstetes Metall */ repeating-linear-gradient( 103deg, rgba(255,255,255,.014) 0, rgba(255,255,255,.014) 1px, rgba(0,0,0,.028) 1px, rgba(0,0,0,.028) 5px ), linear-gradient( 145deg, #302c28 0%, #211e1b 55%, #151311 100% ) !important; background-repeat: no-repeat, no-repeat, repeat, no-repeat !important; background-position: calc(100% - 22px) center, 140% 0, 0 0, 0 0 !important; background-size: 170px 170px, 240% 100%, auto, auto !important; } /* Text bleibt klar vor dem Stempel */ .our-story-wrap .our-story.right > * { position: relative !important; z-index: 2 !important; } /* Leichte Abdunklung hinter dem Stempel für Prägeeffekt */ .our-story-wrap .our-story.right::after { content: "" !important; position: absolute !important; top: 50% !important; right: 10px !important; width: 190px !important; height: 190px !important; transform: translateY(-50%) !important; pointer-events: none !important; background: radial-gradient( circle, rgba(205,155,54,.055) 0%, rgba(0,0,0,.10) 48%, transparent 72% ) !important; border-radius: 50% !important; box-shadow: inset 8px 10px 20px rgba(255,221,145,.025), inset -10px -12px 22px rgba(0,0,0,.26) !important; z-index: 1 !important; } /* Titel etwas kompakter, damit Stempel und Text harmonieren */ .our-story-wrap .our-story.right h1, .our-story-wrap .our-story.right h2, .our-story-wrap .our-story.right h3, .our-story-wrap .our-story.right h4 { max-width: 100% !important; font-size: clamp(27px, 2.25vw, 42px) !important; line-height: 1.18 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .our-story-wrap .our-story.right { padding-right: 170px !important; background-position: calc(100% - 14px) center, 140% 0, 0 0, 0 0 !important; background-size: 135px 135px, 240% 100%, auto, auto !important; } .our-story-wrap .our-story.right::after { right: 2px !important; width: 150px !important; height: 150px !important; } } /* ========================================================= MOBILE Stempel kleiner und unterhalb des Textes ========================================================= */ @media (max-width: 767px) { .our-story-wrap .our-story.right { padding: 38px 25px 160px !important; background-position: center calc(100% - 18px), 140% 0, 0 0, 0 0 !important; background-size: 125px 125px, 240% 100%, auto, auto !important; } .our-story-wrap .our-story.right::after { top: auto !important; right: 50% !important; bottom: 7px !important; width: 140px !important; height: 140px !important; transform: translateX(50%) !important; } } /* ========================================================= UDO'S GRILLSCHWEINE – PREMIUM OFFCANVAS-/MOBILMENÜ Schwarzer Stahl · Gold · rote Glut · SEIT-2004-Prägung ========================================================= */ /* ========================================================= 1. GESAMTES MENÜPANEL ========================================================= */ .t4-offcanvas { --udo-menu-gold: #e5bf69; --udo-menu-gold-dark: #9a6f25; --udo-menu-red: #ef3d34; color: rgba(238, 227, 207, 0.82) !important; background: radial-gradient( ellipse at 50% 0%, rgba(225, 180, 78, 0.11), transparent 33% ), repeating-linear-gradient( 103deg, rgba(255,255,255,.013) 0, rgba(255,255,255,.013) 1px, rgba(0,0,0,.03) 1px, rgba(0,0,0,.03) 5px ), linear-gradient( 145deg, #29251f 0%, #171411 48%, #080706 100% ) !important; border-left: 1px solid rgba(224, 177, 76, 0.56) !important; box-shadow: -12px 0 38px rgba(0,0,0,.72), inset 1px 0 0 rgba(255,222,145,.07), inset 18px 0 42px rgba(0,0,0,.28) !important; } /* Falls das Template eine zusätzliche innere Fläche verwendet */ .t4-offcanvas .t4-off-canvas, .t4-offcanvas .t4-off-canvas-body, .t4-offcanvas .offcanvas-body { position: relative !important; min-height: 100% !important; color: inherit !important; background: transparent !important; } /* Dezente Randvignette */ .t4-offcanvas .t4-off-canvas-body::before, .t4-offcanvas .offcanvas-body::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient( 90deg, rgba(0,0,0,.28), transparent 24%, transparent 76%, rgba(0,0,0,.22) ) !important; } /* Inhalte über die Vignette setzen */ .t4-offcanvas .t4-off-canvas-body > *, .t4-offcanvas .offcanvas-body > * { position: relative !important; z-index: 2 !important; } /* ========================================================= 2. KOPFBEREICH MIT LOGO ========================================================= */ .t4-offcanvas .t4-off-canvas-header { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 112px !important; padding: 20px 26px !important; background: linear-gradient( 180deg, rgba(34,31,27,.98), rgba(18,16,14,.98) ) !important; border-bottom: 1px solid rgba(219, 171, 69, 0.48) !important; box-shadow: 0 8px 20px rgba(0,0,0,.42), inset 0 -1px 0 rgba(255,223,150,.04) !important; } /* Goldener Lichtreflex unter dem Header */ .t4-offcanvas .t4-off-canvas-header::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: -1px !important; width: 145px !important; height: 2px !important; transform: translateX(-50%) !important; background: linear-gradient( 90deg, transparent, rgba(238,198,103,.92), transparent ) !important; box-shadow: 0 0 8px rgba(238,198,103,.46), 0 0 18px rgba(218,165,58,.17) !important; } /* Logo */ .t4-offcanvas .t4-off-canvas-header a img { width: auto !important; max-width: 230px !important; min-height: 0 !important; max-height: 64px !important; object-fit: contain !important; filter: drop-shadow(0 4px 8px rgba(0,0,0,.52)) !important; } /* ========================================================= 3. SCHLIESSEN-BUTTON ALS METALLKNOPF ========================================================= */ .t4-offcanvas .t4-off-canvas-header .close { position: relative !important; display: grid !important; place-items: center !important; flex: 0 0 44px !important; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; color: var(--udo-menu-gold) !important; background: radial-gradient( circle at 35% 28%, rgba(255,255,255,.07), transparent 38% ), linear-gradient( 145deg, #262117, #090807 ) !important; border: 1px solid rgba(228, 181, 79, 0.82) !important; border-radius: 50% !important; opacity: 1 !important; box-shadow: inset 0 1px 0 rgba(255,234,174,.09), inset 0 0 11px rgba(0,0,0,.55), 0 6px 15px rgba(0,0,0,.52), 0 0 10px rgba(218,168,64,.10) !important; transition: color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease !important; } .t4-offcanvas .t4-off-canvas-header .close span { display: block !important; color: inherit !important; font-size: 28px !important; font-weight: 300 !important; line-height: 1 !important; background: transparent !important; } .t4-offcanvas .t4-off-canvas-header .close:hover { color: #fff0bc !important; border-color: rgba(247, 207, 114, 0.98) !important; transform: rotate(90deg) scale(1.05) !important; box-shadow: inset 0 1px 0 rgba(255,239,190,.13), inset 0 0 11px rgba(0,0,0,.48), 0 8px 18px rgba(0,0,0,.62), 0 0 15px rgba(239,61,52,.17) !important; } /* ========================================================= 4. MENÜINHALT ========================================================= */ .t4-offcanvas .t4-off-canvas-body, .t4-offcanvas .offcanvas-body { padding: 34px 28px 150px !important; } /* Navigation auf volle Breite */ .t4-offcanvas .navbar, .t4-offcanvas .navbar-nav, .t4-offcanvas .nav, .t4-offcanvas ul { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; list-style: none !important; } /* Einzelne Menüpunkte */ .t4-offcanvas .navbar-nav > li, .t4-offcanvas .nav > li { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* Feine Trennlinie */ .t4-offcanvas .navbar-nav > li::after, .t4-offcanvas .nav > li::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 1px !important; background: linear-gradient( 90deg, transparent, rgba(211, 169, 83, 0.25) 16%, rgba(211, 169, 83, 0.38) 50%, rgba(211, 169, 83, 0.25) 84%, transparent ) !important; } /* Links */ .t4-offcanvas .navbar-nav > li > a, .t4-offcanvas .navbar-nav > li > .nav-link, .t4-offcanvas .nav > li > a { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 66px !important; margin: 0 !important; padding: 17px 20px 17px 22px !important; color: rgba(226, 211, 183, 0.76) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: .12em !important; text-align: left !important; text-decoration: none !important; text-transform: uppercase !important; background: linear-gradient( 90deg, transparent, transparent ) !important; border: 0 !important; text-shadow: 0 3px 10px rgba(0,0,0,.68) !important; transition: color .32s ease, padding-left .32s ease, background .32s ease, text-shadow .32s ease !important; } /* Rote Glutmarke links */ .t4-offcanvas .navbar-nav > li > a::before, .t4-offcanvas .navbar-nav > li > .nav-link::before, .t4-offcanvas .nav > li > a::before { content: "" !important; position: absolute !important; left: 0 !important; top: 50% !important; width: 2px !important; height: 0 !important; transform: translateY(-50%) !important; background: linear-gradient( 180deg, transparent, var(--udo-menu-red), transparent ) !important; box-shadow: 0 0 8px rgba(239,61,52,.70), 0 0 15px rgba(239,61,52,.24) !important; transition: height .32s ease !important; } /* Goldener Laufstrich unten */ .t4-offcanvas .navbar-nav > li > a::after, .t4-offcanvas .navbar-nav > li > .nav-link::after, .t4-offcanvas .nav > li > a::after { content: "" !important; position: absolute !important; left: 22px !important; bottom: 0 !important; width: 0 !important; height: 1px !important; background: linear-gradient( 90deg, rgba(238,198,103,.95), transparent ) !important; box-shadow: 0 0 7px rgba(225,177,73,.26) !important; transition: width .38s ease !important; } /* Hover und aktiver Menüpunkt */ .t4-offcanvas .navbar-nav > li:hover > a, .t4-offcanvas .navbar-nav > li.active > a, .t4-offcanvas .navbar-nav > li > a:hover, .t4-offcanvas .navbar-nav > li > .nav-link:hover, .t4-offcanvas .nav > li:hover > a, .t4-offcanvas .nav > li.active > a { color: #efcc7e !important; padding-left: 31px !important; background: linear-gradient( 90deg, rgba(215,166,64,.08), transparent 72% ) !important; text-shadow: 0 3px 10px rgba(0,0,0,.72), 0 0 12px rgba(218,169,68,.09) !important; } .t4-offcanvas .navbar-nav > li:hover > a::before, .t4-offcanvas .navbar-nav > li.active > a::before, .t4-offcanvas .nav > li:hover > a::before, .t4-offcanvas .nav > li.active > a::before { height: 34px !important; } .t4-offcanvas .navbar-nav > li:hover > a::after, .t4-offcanvas .navbar-nav > li.active > a::after, .t4-offcanvas .nav > li:hover > a::after, .t4-offcanvas .nav > li.active > a::after { width: 96px !important; } /* ========================================================= 5. UNTERMENÜS ========================================================= */ .t4-offcanvas .dropdown-menu, .t4-offcanvas .nav-child { position: static !important; width: 100% !important; margin: 0 !important; padding: 4px 0 10px 18px !important; background: rgba(0,0,0,.18) !important; border: 0 !important; box-shadow: none !important; } .t4-offcanvas .dropdown-menu li a, .t4-offcanvas .nav-child li a { display: block !important; padding: 11px 16px !important; color: rgba(198, 191, 177, 0.58) !important; font-size: 11px !important; letter-spacing: .10em !important; text-transform: uppercase !important; border-left: 1px solid rgba(209,164,65,.23) !important; } .t4-offcanvas .dropdown-menu li a:hover, .t4-offcanvas .nav-child li a:hover { color: #e8c473 !important; padding-left: 22px !important; border-left-color: rgba(239,198,103,.76) !important; } /* Dropdown-Pfeil */ .t4-offcanvas .dropdown-toggle::after { margin-left: auto !important; color: #c79b43 !important; border-top-color: currentColor !important; } /* ========================================================= 6. RESERVIERUNGS-/CTA-BUTTON IM MENÜ ========================================================= */ /* Deckt typische Modulbutton-Klassen und normale Buttons ab. */ .t4-offcanvas .btn, .t4-offcanvas .button, .t4-offcanvas a.btn, .t4-offcanvas .mod-custom a[class*="btn"] { position: relative !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; width: calc(100% - 8px) !important; min-height: 54px !important; margin: 0 auto 34px !important; padding: 15px 20px !important; color: #edca79 !important; background: radial-gradient( ellipse at 50% 0%, rgba(255,236,177,.08), transparent 42% ), linear-gradient( 180deg, #302414, #151009 ) !important; border: 1px solid rgba(232,190,92,.88) !important; border-radius: 0 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .13em !important; text-align: center !important; text-transform: uppercase !important; box-shadow: inset 0 1px 0 rgba(255,237,185,.09), inset 0 -3px 8px rgba(0,0,0,.38), 0 7px 16px rgba(0,0,0,.48), 0 0 13px rgba(218,169,68,.08) !important; transition: color .32s ease, border-color .32s ease, transform .32s ease, box-shadow .32s ease !important; } /* Lichtreflex über Button */ .t4-offcanvas .btn::before, .t4-offcanvas .button::before, .t4-offcanvas a.btn::before { content: "" !important; position: absolute !important; top: 0 !important; left: -85% !important; width: 55% !important; height: 100% !important; transform: skewX(-24deg) !important; background: linear-gradient( 90deg, transparent, rgba(255,235,174,.13), transparent ) !important; transition: left .65s ease !important; } .t4-offcanvas .btn:hover, .t4-offcanvas .button:hover, .t4-offcanvas a.btn:hover { color: #fff0bd !important; border-color: rgba(248,211,121,.98) !important; transform: translateY(-2px) !important; box-shadow: inset 0 1px 0 rgba(255,241,197,.13), inset 0 -3px 8px rgba(0,0,0,.34), 0 10px 21px rgba(0,0,0,.58), 0 0 18px rgba(222,173,69,.18) !important; } .t4-offcanvas .btn:hover::before, .t4-offcanvas .button:hover::before, .t4-offcanvas a.btn:hover::before { left: 135% !important; } /* ========================================================= 7. TRANSPARENTER „SEIT 2004“-STEMPEL ========================================================= */ .t4-offcanvas .t4-off-canvas-body::after, .t4-offcanvas .offcanvas-body::after { content: "SEIT\A 2004" !important; white-space: pre !important; position: absolute !important; left: 50% !important; bottom: 30px !important; display: grid !important; place-items: center !important; width: 104px !important; height: 104px !important; transform: translateX(-50%) rotate(-5deg) !important; color: rgba(220, 177, 84, 0.32) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.38 !important; letter-spacing: .17em !important; text-align: center !important; border: 2px solid rgba(219,174,79,.25) !important; border-radius: 50% !important; box-shadow: inset 0 0 0 5px rgba(219,174,79,.06), inset 0 0 0 7px rgba(219,174,79,.18), inset 5px 7px 13px rgba(255,228,155,.025), inset -8px -9px 15px rgba(0,0,0,.34), 0 5px 15px rgba(0,0,0,.24) !important; text-shadow: 1px 1px 0 rgba(255,230,160,.07), -1px -1px 0 rgba(0,0,0,.66) !important; opacity: .82 !important; pointer-events: none !important; } /* ========================================================= 8. EINBLENDANIMATION DER MENÜPUNKTE ========================================================= */ @keyframes udoOffcanvasItemIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } } /* Animation greift, sobald das Offcanvas sichtbar/aktiv ist. Mehrere mögliche T4-Zustandsklassen werden unterstützt. */ .t4-offcanvas.open .navbar-nav > li, .t4-offcanvas.show .navbar-nav > li, .t4-offcanvas.active .navbar-nav > li, body.t4-offcanvas-open .t4-offcanvas .navbar-nav > li, body.offcanvas-open .t4-offcanvas .navbar-nav > li { opacity: 0 !important; animation: udoOffcanvasItemIn .48s cubic-bezier(.22,.75,.25,1) forwards !important; } .t4-offcanvas.open .navbar-nav > li:nth-child(1), .t4-offcanvas.show .navbar-nav > li:nth-child(1), body.t4-offcanvas-open .t4-offcanvas .navbar-nav > li:nth-child(1) { animation-delay: .05s !important; } .t4-offcanvas.open .navbar-nav > li:nth-child(2), .t4-offcanvas.show .navbar-nav > li:nth-child(2), body.t4-offcanvas-open .t4-offcanvas .navbar-nav > li:nth-child(2) { animation-delay: .10s !important; } .t4-offcanvas.open .navbar-nav > li:nth-child(3), .t4-offcanvas.show .navbar-nav > li:nth-child(3), body.t4-offcanvas-open .t4-offcanvas .navbar-nav > li:nth-child(3) { animation-delay: .15s !important; } .t4-offcanvas.open .navbar-nav > li:nth-child(4), .t4-offcanvas.show .navbar-nav > li:nth-child(4), body.t4-offcanvas-open .t4-offcanvas .navbar-nav > li:nth-child(4) { animation-delay: .20s !important; } .t4-offcanvas.open .navbar-nav > li:nth-child(5), .t4-offcanvas.show .navbar-nav > li:nth-child(5), body.t4-offcanvas-open .t4-offcanvas .navbar-nav > li:nth-child(5) { animation-delay: .25s !important; } .t4-offcanvas.open .navbar-nav > li:nth-child(6), .t4-offcanvas.show .navbar-nav > li:nth-child(6), body.t4-offcanvas-open .t4-offcanvas .navbar-nav > li:nth-child(6) { animation-delay: .30s !important; } /* ========================================================= 9. TABLET UND SMARTPHONE ========================================================= */ @media (max-width: 767px) { .t4-offcanvas { width: min(88vw, 390px) !important; } .t4-offcanvas .t4-off-canvas-header { min-height: 100px !important; padding: 17px 20px !important; } .t4-offcanvas .t4-off-canvas-header a img { max-width: 205px !important; max-height: 58px !important; } .t4-offcanvas .t4-off-canvas-body, .t4-offcanvas .offcanvas-body { padding: 28px 23px 145px !important; } .t4-offcanvas .navbar-nav > li > a, .t4-offcanvas .navbar-nav > li > .nav-link, .t4-offcanvas .nav > li > a { min-height: 60px !important; padding: 15px 17px 15px 19px !important; font-size: 13px !important; } .t4-offcanvas .navbar-nav > li:hover > a, .t4-offcanvas .navbar-nav > li.active > a, .t4-offcanvas .nav > li:hover > a, .t4-offcanvas .nav > li.active > a { padding-left: 27px !important; } } @media (max-width: 420px) { .t4-offcanvas { width: 92vw !important; } .t4-offcanvas .t4-off-canvas-header a img { max-width: 185px !important; } .t4-offcanvas .t4-off-canvas-header .close { flex-basis: 40px !important; width: 40px !important; height: 40px !important; } .t4-offcanvas .t4-off-canvas-body, .t4-offcanvas .offcanvas-body { padding-left: 18px !important; padding-right: 18px !important; } } /* ========================================================= 10. BEWEGUNGSARME SYSTEME ========================================================= */ @media (prefers-reduced-motion: reduce) { .t4-offcanvas *, .t4-offcanvas *::before, .t4-offcanvas *::after { animation: none !important; transition-duration: .01ms !important; } } /* ========================================================= OFFCANVAS – LOGOSCHRIFT KORRIGIEREN ========================================================= */ /* Mögliche Schriftbereiche neben dem Logo */ .t4-offcanvas .t4-off-canvas-header .site-name, .t4-offcanvas .t4-off-canvas-header .logo-text, .t4-offcanvas .t4-off-canvas-header .navbar-brand, .t4-offcanvas .t4-off-canvas-header .brand-name, .t4-offcanvas .t4-off-canvas-header .site-title, .t4-offcanvas .t4-off-canvas-header .site-slogan { color: #d8c6a2 !important; text-shadow: 0 2px 5px rgba(0,0,0,.90), 0 0 10px rgba(218,169,68,.08) !important; } /* Hauptname */ .t4-offcanvas .t4-off-canvas-header .site-name, .t4-offcanvas .t4-off-canvas-header .logo-text, .t4-offcanvas .t4-off-canvas-header .brand-name, .t4-offcanvas .t4-off-canvas-header .site-title { font-size: 15px !important; font-weight: 600 !important; line-height: 1.15 !important; letter-spacing: .015em !important; } /* Unterzeile / Slogan */ .t4-offcanvas .t4-off-canvas-header .site-slogan, .t4-offcanvas .t4-off-canvas-header small { color: rgba(211,195,165,.68) !important; font-size: 9px !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: .025em !important; } /* Falls Name und Slogan als normale Spans ausgegeben werden */ .t4-offcanvas .t4-off-canvas-header a > span, .t4-offcanvas .t4-off-canvas-header .logo-text span { color: #d8c6a2 !important; } /* Logo und Schrift sauber ausrichten */ .t4-offcanvas .t4-off-canvas-header .logo, .t4-offcanvas .t4-off-canvas-header .navbar-brand, .t4-offcanvas .t4-off-canvas-header a.brand { display: flex !important; align-items: center !important; gap: 10px !important; color: #d8c6a2 !important; text-decoration: none !important; } /* ========================================================= OFFCANVAS-LOGO ALS GESAMTGRAFIK AUFHELLEN ========================================================= */ .t4-offcanvas .t4-off-canvas-header img, .t4-offcanvas .t4-off-canvas-header .logo img, .t4-offcanvas .t4-off-canvas-header .navbar-brand img { filter: brightness(1.55) contrast(1.08) saturate(0.88) drop-shadow(0 3px 8px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(218,169,68,.08)) !important; opacity: 1 !important; } #t4-header { position: relative !important; background: rgba(17, 17, 17, 0.97) !important; } body.home-hero #t4-header { position: absolute !important; background: linear-gradient(to bottom, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.38) 55%, rgba(10,10,10,0) 100%) !important; } /* ========================================================= HEUREKA / UDO'S – PREMIUM JOOMLA INHALTSSEITEN Nur klassische Joomla-Beiträge Startseite bleibt unberührt ========================================================= */ /* ========================================================= 1. NUR UNTERSEITEN / BEITRAGSANSICHT ========================================================= */ body.view-article #t4-main-body, body.view-article #t4-main, body.view-article .t4-main-body, body.view-article .t4-content { position: relative !important; background: radial-gradient( ellipse at 50% 0%, rgba(218, 172, 74, 0.08), transparent 34% ), repeating-linear-gradient( 104deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, rgba(0,0,0,.025) 1px, rgba(0,0,0,.025) 5px ), linear-gradient( 145deg, #211e1a 0%, #141210 52%, #090807 100% ) !important; color: rgba(239, 229, 209, 0.82) !important; } /* eventuell noch vorhandene beige Innenflächen neutralisieren */ body.view-article #t4-main-body .container, body.view-article #t4-main .container, body.view-article .t4-content-inner, body.view-article .item-page, body.view-article .com-content-article { background: transparent !important; } /* ========================================================= 2. INHALTSBREITE UND ABSTÄNDE ========================================================= */ body.view-article .item-page, body.view-article .com-content-article { position: relative !important; max-width: 1180px !important; margin: 0 auto !important; padding: 72px 44px 78px !important; } /* ========================================================= 3. HAUPTÜBERSCHRIFT ========================================================= */ body.view-article .item-page .page-header h1, body.view-article .item-page .page-header h2, body.view-article .com-content-article h1, body.view-article .com-content-article .page-header h2 { position: relative !important; margin: 0 0 28px !important; padding: 0 0 22px !important; color: #edca7b !important; font-size: clamp(34px, 3.6vw, 58px) !important; font-weight: 400 !important; line-height: 1.08 !important; letter-spacing: .07em !important; text-transform: uppercase !important; background: linear-gradient( 180deg, #fff0bc 0%, #efca73 42%, #b9822e 100% ) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 4px 17px rgba(0,0,0,.76), 0 0 20px rgba(218,169,68,.09) !important; } /* rote Glutlinie unter der Überschrift */ body.view-article .item-page .page-header h1::after, body.view-article .item-page .page-header h2::after, body.view-article .com-content-article h1::after, body.view-article .com-content-article .page-header h2::after { content: "" !important; display: block !important; width: 72px !important; height: 2px !important; margin-top: 18px !important; background: linear-gradient( 90deg, #ef3d34, rgba(239,61,52,0) ) !important; box-shadow: 0 0 8px rgba(239,61,52,.52), 0 0 17px rgba(239,61,52,.18) !important; } /* ========================================================= 4. META-DATEN Autor · Kategorie · Datum · Zugriffe ========================================================= */ body.view-article .article-info, body.view-article .article-info-term, body.view-article .article-info dd, body.view-article .article-info span, body.view-article .article-info a { color: rgba(184,181,174,.54) !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: .10em !important; text-transform: uppercase !important; } body.view-article .article-info { margin: 0 0 34px !important; padding: 12px 0 !important; border-top: 1px solid rgba(216,171,73,.16) !important; border-bottom: 1px solid rgba(216,171,73,.16) !important; } /* ========================================================= 5. ARTIKELBILD – EINGELASSENES SCHWARZ-GOLD ========================================================= */ body.view-article .item-image, body.view-article .pull-left.item-image, body.view-article .pull-right.item-image, body.view-article figure.item-image { position: relative !important; margin: 5px 34px 28px 0 !important; padding: 9px !important; overflow: hidden !important; background: linear-gradient( 145deg, #27221a, #050504 38%, #15110c 68%, #020202 ) !important; border: 1px solid rgba(224,178,78,.76) !important; clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px ) !important; box-shadow: inset 0 0 0 3px #050504, inset 0 0 0 4px rgba(214,164,56,.66), inset 0 0 0 7px rgba(7,6,5,.98), 0 15px 28px rgba(0,0,0,.52), 0 0 15px rgba(218,168,61,.08) !important; } body.view-article .item-image img, body.view-article figure.item-image img { display: block !important; margin: 0 !important; border: 0 !important; filter: contrast(1.06) saturate(.94) brightness(.88) !important; } /* ========================================================= 6. FLIESSTEXT ========================================================= */ body.view-article .item-page p, body.view-article .com-content-article p { color: rgba(239,229,209,.80) !important; font-size: 16px !important; font-weight: 300 !important; line-height: 1.78 !important; margin-bottom: 20px !important; } /* Links im Inhalt */ body.view-article .item-page a, body.view-article .com-content-article a { color: #d8ad55 !important; text-decoration-color: rgba(216,173,85,.38) !important; } body.view-article .item-page a:hover, body.view-article .com-content-article a:hover { color: #f0ce7e !important; } /* ========================================================= 7. ZWISCHENÜBERSCHRIFTEN ========================================================= */ body.view-article .item-page h2, body.view-article .item-page h3, body.view-article .item-page h4, body.view-article .com-content-article h2, body.view-article .com-content-article h3, body.view-article .com-content-article h4 { color: #e3bd68 !important; font-weight: 500 !important; letter-spacing: .045em !important; line-height: 1.25 !important; text-transform: uppercase !important; text-shadow: 0 3px 12px rgba(0,0,0,.62) !important; } /* ========================================================= 8. LISTEN ========================================================= */ body.view-article .item-page ul, body.view-article .item-page ol, body.view-article .com-content-article ul, body.view-article .com-content-article ol { color: rgba(237,226,206,.78) !important; line-height: 1.7 !important; } body.view-article .item-page li, body.view-article .com-content-article li { margin-bottom: 8px !important; } /* ========================================================= 9. ZURÜCK / WEITER ========================================================= */ body.view-article .pagenavigation { clear: both !important; margin-top: 55px !important; padding-top: 28px !important; border-top: 1px solid rgba(216,171,73,.20) !important; } body.view-article .pagenavigation a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; padding: 10px 18px !important; color: #d9b25d !important; background: linear-gradient( 180deg, rgba(33,29,24,.96), rgba(10,9,8,.98) ) !important; border: 1px solid rgba(214,167,67,.54) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .10em !important; text-transform: uppercase !important; box-shadow: 0 7px 15px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,232,168,.05) !important; } body.view-article .pagenavigation a:hover { color: #f5d481 !important; border-color: rgba(241,201,104,.90) !important; transform: translateY(-2px) !important; } /* ========================================================= 10. MOBILE ========================================================= */ @media (max-width: 767px) { body.view-article .item-page, body.view-article .com-content-article { padding: 48px 22px 58px !important; } body.view-article .item-page .page-header h1, body.view-article .item-page .page-header h2, body.view-article .com-content-article h1, body.view-article .com-content-article .page-header h2 { font-size: 30px !important; line-height: 1.14 !important; } /* Bild mobil über volle Breite */ body.view-article .item-image, body.view-article .pull-left.item-image, body.view-article .pull-right.item-image, body.view-article figure.item-image { float: none !important; width: 100% !important; margin: 0 0 28px !important; } body.view-article .item-page p, body.view-article .com-content-article p { font-size: 15px !important; line-height: 1.7 !important; } }