.mod_visitors .invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    float: left;
	width:0px;
	height:0px;
}
/**
 * Swiper 6.8.4
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2021 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: August 23, 2021
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-container-pointer-events{touch-action:pan-y}.swiper-container-pointer-events.swiper-container-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-container-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/**
 * CLICKPRESS CSS-Grid
 * @author: Stefan Schulz-Lauterbach
 *
 * thanks to Dinko Skopljak for co-working
 */
.justify-items-start {
  justify-items: start;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-stretch {
  justify-items: stretch;
}

.content-start {
  align-content: start;
}

.content-center {
  align-content: center;
}

.content-end {
  align-content: end;
}

.items-start {
  align-items: start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

[class*=grid_] {
  display: grid;
  grid-gap: 1rem;
}
[class*=grid_] > .block {
  margin-bottom: 0;
}

@media (min-width: 576px) {
  .grid_mobile_100 {
    grid-template-columns: 1fr;
  }
  .grid_mobile_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_mobile_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_mobile_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_mobile_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_mobile_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_mobile_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_mobile_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_mobile_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_mobile_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_mobile_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_mobile_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_mobile_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_mobile_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_mobile_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_mobile_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .gap_mobile_0 {
    grid-gap: 0;
  }
  .gap_mobile_1 {
    grid-gap: 1rem;
  }
  .gap_mobile_2 {
    grid-gap: 2rem;
  }
  .gap_mobile_3 {
    grid-gap: 3rem;
  }
  .gap_mobile_4 {
    grid-gap: 4rem;
  }
  .gap_mobile_5 {
    grid-gap: 5rem;
  }
  .gap_mobile_6 {
    grid-gap: 6rem;
  }
  .gap_mobile_7 {
    grid-gap: 7rem;
  }
  .gap_mobile_8 {
    grid-gap: 8rem;
  }
  .gap_mobile_9 {
    grid-gap: 9rem;
  }
  .gap_mobile_10 {
    grid-gap: 10rem;
  }
  .gap_mobile_11 {
    grid-gap: 11rem;
  }
  .gap_mobile_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 768px) {
  .grid_tablet_100 {
    grid-template-columns: 1fr;
  }
  .grid_tablet_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_tablet_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_tablet_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_tablet_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_tablet_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_tablet_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_tablet_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_tablet_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_tablet_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_tablet_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_tablet_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_tablet_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_tablet_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_tablet_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_tablet_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_tablet_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_tablet_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_tablet_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .gap_tablet_0 {
    grid-gap: 0;
  }
  .gap_tablet_1 {
    grid-gap: 1rem;
  }
  .gap_tablet_2 {
    grid-gap: 2rem;
  }
  .gap_tablet_3 {
    grid-gap: 3rem;
  }
  .gap_tablet_4 {
    grid-gap: 4rem;
  }
  .gap_tablet_5 {
    grid-gap: 5rem;
  }
  .gap_tablet_6 {
    grid-gap: 6rem;
  }
  .gap_tablet_7 {
    grid-gap: 7rem;
  }
  .gap_tablet_8 {
    grid-gap: 8rem;
  }
  .gap_tablet_9 {
    grid-gap: 9rem;
  }
  .gap_tablet_10 {
    grid-gap: 10rem;
  }
  .gap_tablet_11 {
    grid-gap: 11rem;
  }
  .gap_tablet_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 992px) {
  .grid_desktop_100 {
    grid-template-columns: 1fr;
  }
  .grid_desktop_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_desktop_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_desktop_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_desktop_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_desktop_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_desktop_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_desktop_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_desktop_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_desktop_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_desktop_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_desktop_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_desktop_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .grid_desktop_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_desktop_40_20_20_20 {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  .grid_desktop_20_40_20_20 {
    grid-template-columns: 1fr 2fr 1fr 1fr;
  }
  .grid_desktop_20_20_40_20 {
    grid-template-columns: 1fr 1fr 2fr 1fr;
  }
  .grid_desktop_20_20_20_40 {
    grid-template-columns: 1fr 1fr 1fr 2fr;
  }
  .grid_desktop_20_20_20_20_20 {
    grid-template-columns: repeat(5, 1fr);
  }
  .gap_desktop_0 {
    grid-gap: 0;
  }
  .gap_desktop_1 {
    grid-gap: 1rem;
  }
  .gap_desktop_2 {
    grid-gap: 2rem;
  }
  .gap_desktop_3 {
    grid-gap: 3rem;
  }
  .gap_desktop_4 {
    grid-gap: 4rem;
  }
  .gap_desktop_5 {
    grid-gap: 5rem;
  }
  .gap_desktop_6 {
    grid-gap: 6rem;
  }
  .gap_desktop_7 {
    grid-gap: 7rem;
  }
  .gap_desktop_8 {
    grid-gap: 8rem;
  }
  .gap_desktop_9 {
    grid-gap: 9rem;
  }
  .gap_desktop_10 {
    grid-gap: 10rem;
  }
  .gap_desktop_11 {
    grid-gap: 11rem;
  }
  .gap_desktop_12 {
    grid-gap: 12rem;
  }
}

/*# sourceMappingURL=clickpress-grid.css.map */

/* ============================================================
   Meyers Keller · Jockl Kaiser — Theme
   Selektoren zielen auf Contao-5-Markup:
   Sections = Article-IDs, CEs = .content-headline/-text/-image,
   Spalten = Clickpress-Grid. Kein Struktur-HTML im Backend.
   ============================================================ */

/* --- Schriften, selbst gehostet (kein Google-CDN) --- */
@font-face{
  font-family:'Kaiserfront';
  src:url('../../files/themes/jockl-kaiser/fonts/kaiserfront.woff2') format('woff2'),
      url('../../files/themes/jockl-kaiser/fonts/kaiserfront.woff') format('woff');
  font-weight:400 700;font-display:swap;
}
@font-face{
  font-family:'Jost';
  src:url('../../files/themes/jockl-kaiser/fonts/jost-latin.woff2') format('woff2');
  font-weight:300 600;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Jost';
  src:url('../../files/themes/jockl-kaiser/fonts/jost-latin-ext.woff2') format('woff2');
  font-weight:300 600;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --paper:#faf7ef; --paper2:#f2ece0; --paper0:#fffdf8;
  --ink:#1c1a16; --ink-dim:#5f5b52;
  --bronze:#a17c34; --gold:#c5a253; --line:#e2dac9;
  --disp:'Kaiserfront',Georgia,serif;
  --body:'Jost',system-ui,sans-serif;
  --bund:1180px;
}

/* --- Reset --- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:400;
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
/* Contao rendert Bilder in <figure> — der UA-Rand von 40px muss weg */
figure{margin:0}
a{color:inherit;text-decoration:none}
/* Pflichtfeld-Präfix in Formularen unsichtbar, aber für Screenreader da */
.invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Grundraster ---
   Der Artikel traegt die Sektionsfarbe und muss deshalb ueber die volle
   Breite laufen. Begrenzt wird erst der Inhalt darin, sonst endet der
   Hintergrund bei 1180px mitten im Bild. */
#main .inside{max-width:none;width:100%;padding:0;margin:0}
.mod_article{width:100%}
.mod_article > *{max-width:var(--bund);margin-left:auto;margin-right:auto;
  padding-left:40px;padding-right:40px}
#header .inside,#footer .inside{max-width:var(--bund);margin:0 auto;
  padding-left:40px;padding-right:40px}
/* Breite Sektionen (Kopfbild, Ticker) duerfen weiter aufmachen */
.section--wide > *,#hero > *,#termin-ticker > *{max-width:1440px}

/* --- Typografie --- */
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:1.06}
h1{font-size:clamp(46px,9vw,124px);line-height:.94;letter-spacing:-.01em}
h2{font-size:clamp(30px,4.4vw,54px)}
h3{font-size:clamp(28px,3.6vw,44px)}
h4{font-size:clamp(24px,2.4vw,34px)}
/* Akzente laufen über Farbe — Kaiserfront hat keine Kursive */
h1 em,h2 em,h3 em,h4 em{font-style:normal;color:var(--bronze)}
p{margin-bottom:1em}
p:last-child{margin-bottom:0}
.content-text{color:var(--ink-dim)}
/* Eyebrow: über StyleManager-Klasse auf das CE */
.eyebrow,.eyebrow h2,.eyebrow h3{font-family:var(--body);font-size:12px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--bronze);font-weight:500;line-height:1.5}

/* --- Buttons --- */
.btn,.content-hyperlink a{display:inline-block;text-align:center;border:1px solid var(--ink);
  padding:12px 26px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;transition:.35s;line-height:1.2;background:transparent;color:var(--ink)}
.btn:hover,.content-hyperlink a:hover{background:var(--ink);color:var(--paper)}
.btn--dark a,.btn--dark.content-hyperlink a{background:var(--ink);color:var(--paper)}
.btn--dark a:hover{background:var(--bronze);border-color:var(--bronze)}
.btn--gold a{background:var(--gold);border-color:var(--gold);color:var(--ink);padding:15px 40px}
.btn--gold a:hover{background:var(--bronze);border-color:var(--bronze);color:#fff}

/* --- Section-Farbenspiel (Modifier über cssID am Article) --- */
.section{padding:120px 0}
/* Abstaende 1:1 aus dem Entwurf, dort war jede Sektion eigen gesetzt */
#manifest{padding:140px 0}
#wege{padding:20px 0 130px}
#kueche{padding:140px 0 130px}
#culatello{padding:96px 0}
#ausgezeichnet{padding:100px 0}
#gutschein{padding:0}
#reservieren{padding:130px 0}
#marken{padding:100px 0}
.section--paper{background:var(--paper)}
.section--sand{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--hell{background:var(--paper0);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--dunkel{background:var(--ink);color:var(--paper)}
.section--dunkel h1,.section--dunkel h2,.section--dunkel h3,.section--dunkel h4{color:var(--paper)}
.section--dunkel .content-text{color:#c9c2b4}
.section--dunkel .eyebrow{color:var(--gold)}
.section--zentriert{text-align:center}
.zentriert{text-align:center;margin-top:56px}
/* Zentriert nur die Einleitung, die Karten im Grid bleiben linksbuendig */
.section--kopf-zentriert > .content-headline,
.section--kopf-zentriert > .content-text{text-align:center;margin-left:auto;margin-right:auto}
.section--kopf-zentriert > .content-text{max-width:640px}


/* --- Vertikaler Rhythmus ---
   Contao-Inhaltselemente bringen keine Abstaende mit. Im Entwurf war jeder
   Abstand einzeln gesetzt; hier als System, damit es pflegbar bleibt. */
.mod_article > * + *{margin-top:20px}
/* Eyebrow klebt an der Ueberschrift darunter */
.mod_article > .eyebrow + *{margin-top:10px}
.ce_cp_column_start > .eyebrow + *{margin-top:10px}
/* Vor und nach einem Grid mehr Luft */
.mod_article > * + .ce_cp_grid_start{margin-top:60px}
.mod_article > .ce_cp_grid_start + *{margin-top:56px}
/* Innerhalb einer Spalte enger */
.ce_cp_column_start > * + *{margin-top:12px}
.ce_cp_column_start > .content-image + *{margin-top:24px}
.ce_cp_column_start > * + .content-hyperlink{margin-top:20px}
.ce_cp_column_start > * + .gerichte{margin-top:28px}
.ce_cp_column_start > .gerichte + *{margin-top:32px}
/* Highlights: Text sitzt unten, Rhythmus enger */
.highlight > * + *{margin-top:12px}
.highlight > .eyebrow + *{margin-top:8px}

/* --- Header --- */
#header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.4s}
#header .inside{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px}
#header.ist-gescrollt{background:rgba(250,247,239,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#header.ist-gescrollt .inside{padding-top:13px;padding-bottom:13px}
#header .content-image img{height:28px;width:auto}
.mod_navigation ul{display:flex;gap:18px;list-style:none;flex-wrap:nowrap}
.mod_navigation li{white-space:nowrap}
.mod_navigation .invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mod_navigation a,.mod_navigation strong{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:400;transition:color .3s}
.mod_navigation a:hover,.mod_navigation strong{color:var(--bronze)}
@media(max-width:1240px){.mod_navigation ul{display:none}}

/* Manifest laeuft schmaler als der uebrige Bund */
#manifest > *{max-width:960px}

/* --- Hero --- */
#hero{padding:168px 0 0;text-align:center}
#hero .content-text{max-width:600px;margin-left:auto;margin-right:auto;font-size:18px;text-wrap:balance}

/* --- Swiper (fritzmg/contao-swiper) --- */
.ce_swiperStart{margin-top:62px}
.ce_swiperStart .swiper-container{aspect-ratio:16/8;background:var(--paper2)}
.ce_swiperStart .swiper-wrapper,.ce_swiperStart .swiper-slide{height:100%}
.ce_swiperStart .swiper-slide img{width:100%;height:100%;object-fit:cover}
.ce_swiperStart figure{height:100%}
.swiper-pagination-bullet{width:34px;height:3px;border-radius:0;background:rgba(250,247,239,.45);opacity:1}
.swiper-pagination-bullet-active{background:var(--paper)}
.swiper-button-next,.swiper-button-prev{width:42px;height:42px;border:1px solid rgba(250,247,239,.5);
  background:rgba(28,26,22,.22);backdrop-filter:blur(6px);color:var(--paper)}
.swiper-button-next::after,.swiper-button-prev::after{font-size:15px}
@media(max-width:760px){.ce_swiperStart .swiper-container{aspect-ratio:4/3}
  .swiper-button-next,.swiper-button-prev{display:none}}

/* --- Termin-Ticker (Event-Listen im Grid) --- */
#termin-ticker{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
#termin-ticker .mod_article{max-width:1440px}
#termin-ticker .ticker-label{display:flex;align-items:center;padding:0 26px 0 0;margin:0}
.ticker-label{font-family:var(--body);font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--bronze);font-weight:500;line-height:1.4}
#termin-ticker .ticker-label{max-width:150px}
#termin-ticker .mod_eventlist{border-right:1px solid var(--line);height:100%;
  padding:18px 22px;margin:0;transition:background .3s}
#termin-ticker .mod_eventlist:hover{background:var(--paper)}
#termin-ticker .mod_eventlist .header{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze);font-variant-numeric:tabular-nums;margin-bottom:4px}
#termin-ticker .mod_eventlist .header .day{display:none}
#termin-ticker .mod_eventlist .event{padding:0}
#termin-ticker .mod_eventlist h2{font-family:var(--disp);font-size:20px;line-height:1.2;margin:0}
#termin-ticker .mod_eventlist .info,
#termin-ticker .mod_eventlist time{display:none}
#termin-ticker .mod_eventlist .ce_text,
#termin-ticker .mod_eventlist .teaser p{font-size:13px;color:var(--ink-dim);margin:2px 0 0}
#termin-ticker .mod_eventlist .more{display:none}

#termin-ticker .mod_article > * + *,#termin-ticker .ce_cp_column_start > * + *{margin-top:0}

#kueche [class*=grid_desktop]{gap:80px}

/* --- Kacheln (Grid-Items) ---
   Wichtig: Contao rendert .content-image > figure > img. Die figure braucht
   height:100%, sonst laeuft das aspect-ratio des Containers ins Leere. */
.kachel .content-image{overflow:hidden;aspect-ratio:16/11;margin-bottom:24px}
.kachel .content-image figure{height:100%}
.kachel .content-image img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.6,.3,1)}
.kachel:hover .content-image img{transform:scale(1.05)}
/* Malzboden-Kacheln stehen hochkant wie im Entwurf */
#malzboden .kachel .content-image{aspect-ratio:3/4}
/* Event-Kacheln flacher */
#events .kachel .content-image{aspect-ratio:3/2}

/* --- Gerichte-Liste, gekoppelt mit der Bildspalte --- */
.gerichte{border-top:1px solid var(--line);margin:28px 0 32px}
.gerichte ul,.gerichte ol{list-style:none;margin:0;padding:0}
.gerichte button{display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:100%;
  padding:15px 4px 15px 0;border:0;border-bottom:1px solid var(--line);background:transparent;
  text-align:left;cursor:pointer;font-family:var(--body);color:var(--ink);position:relative;
  transition:padding .3s}
.gerichte button::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:2px;
  background:var(--bronze);transform:scaleY(0);transition:transform .35s}
.gerichte button:hover,.gerichte button.ist-aktiv{padding-left:14px}
.gerichte button.ist-aktiv::before{transform:scaleY(1)}
.gerichte .name{font-family:var(--disp);font-size:25px;transition:color .3s}
.gerichte button.ist-aktiv .name{color:var(--bronze)}
.gerichte .zusatz{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);white-space:nowrap}
.gericht-bilder{position:relative;aspect-ratio:4/5;overflow:hidden}
.gericht-bilder .content-image{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease}
.gericht-bilder figure{height:100%}
.gericht-bilder .content-image.ist-aktiv{opacity:1}
.gericht-bilder img{width:100%;height:100%;object-fit:cover}

/* --- Culatello mit überragendem Siegel --- */
.culatello-bild{position:relative;overflow:visible}
.culatello-bild > .content-image:not(.culatello-siegel){aspect-ratio:4/5;overflow:hidden}
.culatello-bild > .content-image:not(.culatello-siegel) figure{height:100%}
.culatello-bild > .content-image:not(.culatello-siegel) img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s ease}
.culatello-bild:hover > .content-image:not(.culatello-siegel) img{transform:scale(1.04)}
.culatello-siegel{position:absolute;right:-46px;bottom:-38px;width:190px;aspect-ratio:1;z-index:3;
  background:var(--paper);border-radius:50%;padding:16px;
  box-shadow:0 16px 40px rgba(28,26,22,.20);transition:transform .5s;display:flex;align-items:center;justify-content:center}
.culatello-siegel img{max-width:100%;max-height:100%;object-fit:contain}
.culatello-bild:hover .culatello-siegel{transform:rotate(-5deg) scale(1.04)}
@media(max-width:820px){.culatello-siegel{width:128px;right:-12px;bottom:-24px;padding:11px}}

/* --- Jahres-Highlights: Bild als Hintergrund, Text darüber --- */
.highlight{position:relative;overflow:hidden;min-height:520px;display:flex;
  flex-direction:column;justify-content:flex-end;padding:44px}
.highlight .content-image{position:absolute;inset:0}
.highlight .content-image figure{height:100%}
.highlight .content-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.highlight:hover .content-image img{transform:scale(1.04)}
.highlight::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,9,8,.96) 0%,rgba(10,9,8,.90) 30%,rgba(10,9,8,.62) 62%,rgba(10,9,8,.30) 100%)}
.highlight>*:not(.content-image){position:relative;z-index:2;color:var(--paper)}
.highlight .content-text{color:#d8d2c6;max-width:480px}
@media(max-width:900px){.highlight{min-height:420px;padding:34px}}

/* --- Auszeichnungen --- */
#ausgezeichnet [class*=grid_desktop]{display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:26px 46px}
#ausgezeichnet [class*=grid_desktop] > *{margin:0}
#ausgezeichnet .content-text{font-size:18px;color:var(--ink)}
#ausgezeichnet .content-text strong{font-family:var(--disp);color:var(--bronze);font-size:26px;font-weight:400}
#ausgezeichnet img{height:52px;width:auto;filter:grayscale(1);opacity:.72;transition:.35s}
#ausgezeichnet img:hover{filter:none;opacity:1}
.auszeichnungen-note{max-width:820px;margin:34px auto 0;font-size:15px;color:var(--ink-dim)}

/* --- Marken (Section-ID, nicht Klasse) --- */
#marken .grid_start{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
#marken img{height:60px;width:auto;filter:grayscale(1);opacity:.6;transition:.35s}
#marken img:hover{filter:none;opacity:1}
@media(max-width:760px){#marken .grid_start{justify-content:center;gap:30px}#marken img{height:44px}}

/* --- Newsletter --- */
.mod_subscribe .widget{margin-bottom:0}
.mod_subscribe input[type=text],.mod_subscribe input[type=email]{width:100%;background:transparent;
  border:0;border-bottom:1px solid var(--line);padding:14px 2px;color:var(--ink);
  font-family:var(--body);font-size:17px;outline:none}
.mod_subscribe input::placeholder{color:var(--ink-dim)}
.mod_subscribe .widget-checkbox{display:flex;gap:11px;align-items:flex-start;margin-top:18px;max-width:440px}
.mod_subscribe .widget-checkbox input{appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:19px;height:19px;margin-top:3px;border:1px solid var(--bronze);background:transparent;
  cursor:pointer;position:relative;transition:.25s}
.mod_subscribe .widget-checkbox input:checked{background:var(--bronze)}
.mod_subscribe .widget-checkbox input:checked::after{content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.mod_subscribe .widget-checkbox label{font-size:13.5px;line-height:1.55;color:var(--ink-dim)}
.mod_subscribe .widget-checkbox label a{border-bottom:1px solid var(--line)}
.mod_subscribe .widget-submit button{margin-top:20px;border:1px solid var(--ink);background:var(--ink);
  color:var(--paper);padding:12px 26px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--body);font-weight:500;cursor:pointer;transition:.35s}
.mod_subscribe .widget-submit button:hover{background:var(--bronze);border-color:var(--bronze)}

/* --- Footer --- */
#footer{padding:70px 0 36px}
#footer h2,#footer h3,#footer h4{font-family:var(--body);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze);font-weight:500;margin-bottom:14px}
#footer .content-text,#footer .mod_customnav a{color:var(--ink-dim);font-size:15px}
#footer .mod_customnav ul{list-style:none}
#footer .mod_customnav li{margin-bottom:6px}
#footer .mod_customnav a:hover{color:var(--bronze)}
#footer .content-image img{height:62px;width:auto}
.footer-unten{display:flex;justify-content:space-between;padding-top:24px;
  border-top:1px solid var(--line);font-size:14px;color:var(--ink-dim);flex-wrap:wrap;gap:12px}
.footer-unten a{border-bottom:1px solid var(--line);transition:.3s}
.footer-unten a:hover{color:var(--bronze);border-color:var(--bronze)}

/* --- Einblenden beim Scrollen (WOW.js) --- */
.wow{visibility:hidden}

/* --- Mobiles Menü --- */
/* Der Burger liegt über dem geöffneten Panel, sonst ist er verdeckt und
   das Menü lässt sich nicht mehr schließen. */
.nav-burger{display:none;background:transparent;border:0;cursor:pointer;padding:8px;
  color:var(--ink);position:relative;z-index:101}
@media(max-width:1240px){
  .nav-burger{display:block}
  .mod_navigation.ist-offen ul{display:flex;flex-direction:column;position:fixed;inset:0 30% 0 0;
    background:var(--paper);padding:100px 40px;gap:18px;z-index:99;box-shadow:0 0 60px rgba(0,0,0,.15)}
  /* Klickfläche auf 44px, sonst sind die Einträge auf dem Handy zu fummelig */
  .mod_navigation.ist-offen a{font-size:16px;display:flex;align-items:center;min-height:44px}
  .mod_navigation.ist-offen li{display:flex}
}

/* Unter 600px passen Logo, Burger und die beiden Buttons nicht mehr in eine
   Zeile — die Buttons standen rechts außerhalb und waren nur als
   angeschnittener Rahmen zu sehen. Sie wandern deshalb ins offene Menü,
   damit "Reservieren" auf dem Handy erreichbar bleibt. */
@media(max-width:600px){
  /* Die H1 startet bei 46px. Ein langes Kompositum wie "Datenschutzerklärung"
     passt damit nicht mehr in die Zeile und hat die ganze Seite auf 479px
     aufgezogen. Silbentrennung fängt das ab, ohne die Schriftgröße überall
     zu drücken — mehrwortige Überschriften bleiben unberührt. */
  h1,h2{hyphens:auto;overflow-wrap:break-word}

  /* Das Panel ließ rechts 30% frei. Auf dem Handy reicht der Rest nicht für
     die langen Einträge — sie liefen über die Kante hinaus. Volle Breite,
     und lange Titel dürfen umbrechen statt zu überstehen. */
  .mod_navigation.ist-offen ul{inset:0}
  .mod_navigation.ist-offen li{white-space:normal}
  #header .ce_cp_grid_start{display:none}
  #header .mod_navigation.ist-offen ~ .ce_cp_grid_start{display:block;position:fixed;
    left:40px;bottom:56px;z-index:100}
  #header .mod_navigation.ist-offen ~ .ce_cp_grid_start .btn--klein a{padding:13px 20px}
}

/* ============================================================
   Feinabstimmung gegen den Entwurf
   Der Entwurf setzt je Komponente eigene Schriftgrößen; eine globale
   Überschriften-Skala trifft das nicht. Werte 1:1 gemessen übernommen.
   ============================================================ */

/* Manifest */
#manifest h2{font-size:clamp(28px,4.2vw,52px);line-height:1.24}

/* Kacheln "Zu Gast" und "Feiern" */
#wege .kachel h2{font-size:clamp(32px,4vw,50px);line-height:1}
#wege .kachel .content-text{font-size:17px;max-width:420px}

/* Textlink mit Pfeil — im Entwurf kein Button, sondern Unterstrich */
.link-pfeil a{border:0;background:transparent;padding:0 0 4px;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;
  color:var(--bronze);border-bottom:1px solid var(--line);transition:.35s}
.link-pfeil a:hover{background:transparent;color:var(--bronze);border-color:var(--bronze)}
.link-pfeil a::after{content:" →"}
.section--dunkel .link-pfeil a{color:var(--gold);border-color:rgba(197,162,83,.4)}
.section--dunkel .link-pfeil a:hover{border-color:var(--gold)}

/* Küche */
#kueche h2{font-size:clamp(30px,4vw,52px);line-height:1.04}

/* Event-Karten */
#events .kachel h3{font-size:34px;line-height:1.1}
#events .kachel .content-text{font-size:16px}
#events .kachel .eyebrow{font-size:12px;letter-spacing:.16em}

/* Jahres-Highlights */
.highlight h2{font-size:clamp(38px,5vw,64px);line-height:1}
.highlight .eyebrow{font-size:13px;letter-spacing:.2em;color:var(--gold)}
.highlight .content-text{font-size:17px}

/* Malzboden-Kacheln */
#malzboden .kachel h3{font-size:29px;line-height:1.2}
#malzboden .kachel .content-text{font-size:16px}

/* Culatello */
#culatello h2{font-size:clamp(30px,4vw,50px);line-height:1.06}

/* Gutschein und Newsletter */
#gutschein h2{font-size:clamp(28px,3.4vw,44px)}
#gutschein .content-text{font-size:16px;max-width:420px}

/* Reservierung */
#reservieren h2{font-size:clamp(30px,4.6vw,56px)}

/* Navigation und Footer */
.mod_navigation a,.mod_navigation strong{font-size:13px;letter-spacing:.1em}
#footer .footer-unten{font-size:14px}

/* --- Kopfzeile unter dem Slider --- */
.hero-meta p{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin:0}
#hero .hero-meta{margin-top:18px;max-width:1440px}

/* --- Header-Buttons rechts --- */
#header .ce_cp_grid_start{margin:0;padding:0;flex:0 0 auto}
#header [class*=grid_desktop]{display:flex;gap:10px}
.btn--klein a{padding:10px 20px}

/* --- Gutschein und Newsletter: zwei Hälften wie im Entwurf --- */
#gutschein [class*=grid_desktop]{gap:0}
#gutschein .ce_cp_column_start{padding:100px 60px}
#gutschein .ce_cp_column_start:first-child{background:var(--paper);border-right:1px solid var(--line)}
#gutschein .ce_cp_column_start:last-child{background:var(--paper2)}
#gutschein > *{max-width:1440px;padding-left:0;padding-right:0}
@media(max-width:760px){
  #gutschein .ce_cp_column_start{padding:70px 40px}
  #gutschein .ce_cp_column_start:first-child{border-right:0;border-bottom:1px solid var(--line)}
}

/* --- Trennlinie unter der Marken-Überschrift --- */
#marken > .content-headline{position:relative;padding-bottom:18px}
#marken > .content-headline::after{content:"";position:absolute;left:40px;right:40px;bottom:0;
  height:1px;background:var(--line)}
#marken .ce_cp_grid_start{margin-top:48px}

/* --- Auszeichnungen: Abstand unter der Überschrift --- */
#ausgezeichnet > .content-headline{margin-bottom:34px}

/* --- Newsletter: Datenschutz-Zustimmung --- */
.nl-datenschutz{display:flex;gap:11px;align-items:flex-start;margin-top:18px;max-width:440px}
.nl-datenschutz input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:19px;height:19px;
  margin-top:3px;border:1px solid var(--bronze);background:transparent;cursor:pointer;
  position:relative;transition:.25s}
.nl-datenschutz input:checked{background:var(--bronze)}
.nl-datenschutz input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.nl-datenschutz input:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.nl-datenschutz label{font-size:13.5px;line-height:1.55;color:var(--ink-dim);cursor:pointer}
.nl-datenschutz label p{margin:0}

/* ============================================================
   Korrekturen Desktop-Feinschliff
   ============================================================ */

/* Im Hero laufen nur Slider und Kopfzeile breit, Text bleibt im Bund.
   Vorher lief auch die H1 auf 1425px und brach dadurch anders um. */
#hero > *{max-width:var(--bund)}
#hero > .ce_swiperStart,#hero > .hero-meta{max-width:1440px}

/* Siegel: das figure ist Flex-Kind und kollabierte auf 0x0 */
.culatello-siegel figure{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.culatello-siegel img{width:100%;height:auto;max-height:100%;object-fit:contain}

/* --- Abstände je Sektion, gemessen aus der Vorlage ---
   Der pauschale Eyebrow-Abstand von 10px war überall zu eng;
   die Vorlage arbeitet je Kontext mit 14 bis 29px. */
#hero > .eyebrow + *{margin-top:29px}
#hero > h1 + *{margin-top:22px}
#kueche .ce_cp_column_start > .eyebrow + *{margin-top:16px}
#kueche .ce_cp_column_start > h2 + *{margin-top:18px}
#culatello .ce_cp_column_start > .eyebrow + *{margin-top:19px}
.highlight > .eyebrow + *{margin-top:14px}
.highlight > h2 + *{margin-top:14px}
#events .kachel > .content-image + *{margin-top:29px}
#events .kachel > .eyebrow + *{margin-top:13px}
#malzboden .kachel > h3 + *{margin-top:6px}
#wege .kachel > .content-image + *{margin-top:24px}

/* Logo darf im Flex-Header nicht schrumpfen; das globale max-width:100%
   hatte es zusammen mit der Flex-Stauchung auf 16px gedrückt. */
#header .content-image{flex:0 0 auto;margin:0}
#header .content-image figure{width:auto}
#header .content-image img{height:28px;width:auto;max-width:none}
#header .mod_navigation{flex:1 1 auto;display:flex;justify-content:center}

/* Header läuft wie im Entwurf über die volle Breite, nicht im 1180er-Bund.
   Sonst reicht der Platz für sieben Menüpunkte plus zwei Buttons nicht. */
#header .inside{max-width:none;padding-left:40px;padding-right:40px}
#header .mod_navigation{justify-content:flex-end;margin-right:8px}

/* ============================================================
   Ticker-Abstand und Hover-Flächen
   ============================================================ */

/* Im Entwurf steht der Ticker 54px unter der Kopfzeile */
#termin-ticker{margin-top:54px}

/* Ganze Kachel klickbar machen.
   Contao verlinkt nur den Titel bzw. den Pfeil-Link; im Entwurf war die
   komplette Kachel ein Link. Der gestreckte Pseudo-Layer holt das nach,
   ohne das Markup im Backend zu verbiegen. */
#termin-ticker .mod_eventlist{position:relative}
#termin-ticker .mod_eventlist h2 a::after{content:"";position:absolute;inset:0;z-index:1}

.kachel{position:relative}
.kachel .link-pfeil a::after{content:"";position:absolute;inset:0;z-index:1}

.highlight{position:relative}
.highlight .link-pfeil a::after{content:"";position:absolute;inset:0;z-index:1}

/* Hover-Rückmeldung auf der ganzen Kachel, nicht nur auf dem Link */
.kachel:hover .link-pfeil a{border-color:var(--bronze)}
.highlight:hover .link-pfeil a{border-color:var(--gold)}
#termin-ticker .mod_eventlist:hover h2{color:var(--bronze)}
#termin-ticker .mod_eventlist{cursor:pointer}
.kachel,.highlight{cursor:pointer}

/* Sichtbarer Fokus für Tastaturbedienung, sonst ist die gestreckte
   Fläche für Tastaturnutzer nicht nachvollziehbar. */
.kachel:focus-within,.highlight:focus-within,
#termin-ticker .mod_eventlist:focus-within{outline:2px solid var(--bronze);outline-offset:4px}

/* ============================================================
   Spaltenabstände
   Clickpress liefert pauschal 16px. Der Entwurf lag je nach Sektion
   bei 34 bis 70px; hier bewusst noch etwas großzügiger.
   ============================================================ */
#events [class*=grid_desktop]{gap:64px}
#highlights [class*=grid_desktop]{gap:60px}
#malzboden [class*=grid_desktop]{gap:48px}
#culatello [class*=grid_desktop]{gap:90px}
#wege [class*=grid_desktop]{gap:56px}
#footer [class*=grid_desktop]{gap:48px}

/* Footer: die Trennlinie klebte direkt an der Mailadresse */
#footer .footer-unten{margin-top:44px}

@media(max-width:900px){
  #events [class*=grid_desktop],#highlights [class*=grid_desktop],
  #malzboden [class*=grid_desktop],#culatello [class*=grid_desktop],
  #wege [class*=grid_desktop]{gap:44px}
}

/* Download-Element als Button.
   Die Basisregel greift auf .content-hyperlink; Contao rendert Downloads
   aber als .content-download, dadurch fehlten Polsterung und Rahmen. */
.content-download a{display:inline-block;text-align:center;border:1px solid var(--ink);
  padding:12px 26px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;line-height:1.2;transition:.35s;background:transparent;color:var(--ink)}
.content-download a:hover{background:var(--ink);color:var(--paper)}
.btn--dark.content-download a{background:var(--ink);color:var(--paper)}
.btn--dark.content-download a:hover{background:var(--bronze);border-color:var(--bronze)}
/* Contao hängt Dateigröße und Icon an; beides stört im Button */
.content-download .size,.content-download .ext{display:none}

/* ============================================================
   Unterseiten
   ============================================================ */

/* Seitenkopf: Bild als flaches Band, nicht als hohes Hochformat */
#seitenkopf{padding:168px 0 0}
#seitenkopf > *{max-width:var(--bund)}
#seitenkopf > .kopfbild{max-width:1440px;margin-top:56px}
.kopfbild{aspect-ratio:16/7;overflow:hidden}
.kopfbild figure{height:100%}
.kopfbild img{width:100%;height:100%;object-fit:cover}
#seitenkopf .content-text{max-width:640px;margin-left:auto;margin-right:auto;font-size:18px}
@media(max-width:760px){.kopfbild{aspect-ratio:4/3}}

/* Karten auf den Unterseiten */
.namensteil,.haltung-karte,.box-karte{border-top:1px solid var(--line);padding-top:24px}
.namensteil h3,.haltung-karte h3,.box-karte h3{font-size:26px;margin-bottom:10px}
.section--dunkel .namensteil,.section--dunkel .haltung-karte{border-color:rgba(226,218,201,.22)}
.box-karte{background:var(--paper);border:1px solid var(--line);padding:34px}

/* Aufzählungen mit Bronze-Marker statt Standardpunkt */
.leistungsliste ul,.dna-liste ul,.marken-liste ul,.box-karte ul{list-style:none;padding:0;margin:0}
.leistungsliste li,.dna-liste li,.marken-liste li,.box-karte li{position:relative;
  padding:12px 0 12px 26px;border-bottom:1px solid var(--line)}
.leistungsliste li::before,.dna-liste li::before,.marken-liste li::before,.box-karte li::before{
  content:"";position:absolute;left:0;top:22px;width:10px;height:1px;background:var(--bronze)}
.box-karte li{border-bottom:0;padding:6px 0 6px 26px}
.dna-liste li{font-family:var(--disp);font-size:22px}
.leistungsliste{max-width:760px;margin-left:auto;margin-right:auto;text-align:left}

/* Statische Gerichtebilder auf der Restaurant-Seite */
.gericht-bilder-statisch .content-image{aspect-ratio:4/5;overflow:hidden}
.gericht-bilder-statisch figure{height:100%}
.gericht-bilder-statisch img{width:100%;height:100%;object-fit:cover}

/* Abschluss-Bereich je Unterseite */
#seiten-cta{padding:120px 0}

/* Sichtbar markierter Platzhalter, damit er nicht live geht */
.platzhalter{border:1px dashed var(--bronze);padding:18px 22px;max-width:720px;
  margin-left:auto;margin-right:auto;color:var(--bronze);font-size:15px}

.nachsatz{max-width:760px;margin-left:auto;margin-right:auto}

/* ============================================================
   Grundwert für alle Raster
   Clickpress liefert pauschal 16px. Statt das je Sektion einzeln zu
   korrigieren, hier ein tragfähiger Grundwert; die Sektionen weiter
   oben überschreiben ihn, wo sie enger oder weiter brauchen.
   ============================================================ */
[class*=grid_desktop]{gap:56px}
@media(max-width:900px){[class*=grid_desktop]{gap:44px}}

/* Vierspaltige Raster vertragen etwas weniger */
[class*=grid_desktop_25_25_25_25]{gap:40px}

/* Galeriebilder in einer Reihe */
.galeriebild{aspect-ratio:4/3;overflow:hidden}
.galeriebild figure{height:100%}
.galeriebild img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s ease}
.galeriebild:hover img{transform:scale(1.04)}

/* Bildkacheln auf Unterseiten: gleiche Höhe, sauberer Beschnitt */
.kachel .content-image{aspect-ratio:16/11}
#hochzeiten-orte .kachel .content-image,
#orte .kachel .content-image{aspect-ratio:4/5}

/* ============================================================
   Terminliste auf der Termine-Seite
   Contao gibt .header (Datum) und .event (Inhalt) als GESCHWISTER aus,
   nicht verschachtelt. Ein zweispaltiges Grid fügt beide je Termin
   automatisch zu einer Zeile — ohne Template-Eingriff.
   ============================================================ */
#terminliste .mod_eventlist{display:grid;grid-template-columns:210px 1fr;
  border-top:1px solid var(--line)}

#terminliste .mod_eventlist .header{
  display:flex;flex-direction:column;justify-content:center;
  padding:28px 24px 28px 0;border-bottom:1px solid var(--line)}
#terminliste .mod_eventlist .header .day{font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:2px}
#terminliste .mod_eventlist .header .date{font-family:var(--disp);font-size:30px;
  line-height:1;color:var(--bronze);font-variant-numeric:tabular-nums}

/* Feste Spalten für Uhrzeit und Preis. Vorher lief die Zeile über Flex,
   dadurch schob ein langer Titel beide nach rechts und sie standen von
   Termin zu Termin versetzt. Mit festen Breiten fluchten sie untereinander. */
#terminliste .mod_eventlist .event{
  display:grid;grid-template-columns:minmax(0,1fr) 100px 120px;
  align-items:baseline;gap:6px 20px;
  padding:28px 0;border-bottom:1px solid var(--line);transition:background .3s}
#terminliste .mod_eventlist .event h2{font-family:var(--disp);font-size:30px;
  line-height:1.1;margin:0}
/* Ort und Bild bleiben ganze Zeile, sonst rutschen sie in die Zahlenspalten */
#terminliste .mod_eventlist .event .location,
#terminliste .mod_eventlist .event .content-image{grid-column:1 / -1}
#terminliste .mod_eventlist .event h2 a{transition:color .3s}
#terminliste .mod_eventlist .event .time{font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);margin:0;font-variant-numeric:tabular-nums}
#terminliste .mod_eventlist .event .ce_text{margin:0}
#terminliste .mod_eventlist .event .ce_text p{font-size:15px;color:var(--bronze);margin:0;
  white-space:nowrap}
#terminliste .mod_eventlist .event .ce_text p::after{content:" →";opacity:.6}

/* Ganze Zeile reagiert, nicht nur der Titel */
#terminliste .mod_eventlist .event:hover{background:var(--paper0)}
#terminliste .mod_eventlist .event:hover h2 a{color:var(--bronze)}
#terminliste .mod_eventlist .event h2 a::after{content:"";position:absolute;inset:0}
#terminliste .mod_eventlist .event{position:relative;cursor:pointer}

/* Leermeldung, falls kein Termin ansteht */
#terminliste .mod_eventlist > p.empty{grid-column:1 / -1;padding:28px 0;color:var(--ink-dim)}

@media(max-width:700px){
  #terminliste .mod_eventlist{grid-template-columns:1fr}
  #terminliste .mod_eventlist .header{padding:24px 0 0;border-bottom:0}
  #terminliste .mod_eventlist .header .date{font-size:24px}
  /* Auf dem Handy ist für drei Spalten kein Platz: Titel über die volle
     Breite, darunter Uhrzeit und Preis nebeneinander. */
  #terminliste .mod_eventlist .event{display:flex;flex-wrap:wrap;gap:6px 20px;
    padding:8px 0 24px}
  #terminliste .mod_eventlist .event h2{flex:1 1 100%}
}

/* ============================================================
   Gleich breite Rasterspalten
   Clickpress rechnet die Spalten in Prozent. Zusammen mit dem
   Spaltenabstand geht das nicht auf, die letzte Spalte bekommt den
   Rest und wird breiter — sichtbar an unterschiedlich hohen Bildern.
   Mit 1fr teilen sich alle Spalten den Platz nach Abzug der Abstände.
   ============================================================ */
[class*=grid_desktop_50_50]{grid-template-columns:repeat(2,minmax(0,1fr))}
[class*=grid_desktop_33_33_33]{grid-template-columns:repeat(3,minmax(0,1fr))}
[class*=grid_desktop_25_25_25_25]{grid-template-columns:repeat(4,minmax(0,1fr))}
[class*=grid_desktop_20_20_20_20_20]{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:900px){
  [class*=grid_tablet_100]{grid-template-columns:1fr}
  [class*=grid_tablet_50_50]{grid-template-columns:repeat(2,minmax(0,1fr))}
  [class*=grid_tablet_33_33_33]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  [class*=grid_mobile_100]{grid-template-columns:1fr}
  [class*=grid_mobile_50_50]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   Footer-Unterzeile
   Das Flex-Layout lag auf dem Inhaltselement, die beiden Angaben
   stecken aber im Absatz darin — dadurch standen sie inline
   nebeneinander statt links und rechts.
   ============================================================ */
#footer .footer-unten{display:block}
#footer .footer-unten .rte p{display:flex;justify-content:space-between;
  align-items:baseline;gap:16px;flex-wrap:wrap;margin:0}
#footer .footer-unten .rte p span:last-child{margin-left:auto;text-align:right}
@media(max-width:600px){
  #footer .footer-unten .rte p{flex-direction:column;gap:8px}
  #footer .footer-unten .rte p span:last-child{margin-left:0;text-align:left}
}

/* Lange Komposita brechen um, statt die Rasterspalte zu verbreitern */
.ce_cp_column_start{min-width:0;overflow-wrap:break-word}

/* ============================================================
   Klickflächen auf dem Handy
   Textlinks lagen bei 21 bis 25px Höhe und waren mit dem Daumen
   schwer zu treffen. Die Fläche wächst über padding, ein negatives
   margin gleicht es aus — dadurch bleibt das Layout unverändert
   und der Unterstrich sitzt weiter direkt unter dem Text.
   ============================================================ */
@media(max-width:600px){
  .link-pfeil a{font-size:14px;padding-top:24px;margin-top:-24px}
  .event.layout_list h2 a{display:inline-block;padding:10px 0;margin:-10px 0}
  #footer .mod_customnav a,#footer .mod_navigation a{display:inline-block;
    padding:8px 0;margin:-8px 0}
}

/* ============================================================
   Text-Bild-Sektionen auf den Unterseiten
   Der Text bekommt mehr Breite als das Bild (60/40). Zusätzlich
   werden beide Spalten vertikal zentriert, sonst zieht sich das
   Bild auf die volle Texthöhe und wirkt erschlagend.
   ============================================================ */
[class*=grid_desktop_60_40]{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
[class*=grid_desktop_40_60]{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
[class*=grid_desktop_60_40],[class*=grid_desktop_40_60]{align-items:center}

/* Bild in dieser Sektion ruhiger proportionieren */

/* ============================================================
   Wirtshaus-Klassiker als bebilderte Karte
   Ersetzt die frühere Textliste: Zu jedem Gericht liegt ein Foto
   vor. Die Vorlagen sind teils quer, teils hoch aufgenommen,
   deshalb bekommen alle Kacheln dasselbe Seitenverhältnis und
   das Bild wird beschnitten statt verzerrt.
   ============================================================ */
#laib-und-seele .klassiker .content-image{aspect-ratio:4/3;overflow:hidden;margin-bottom:14px}
#laib-und-seele .klassiker figure{height:100%;margin:0}
#laib-und-seele .klassiker img{width:100%;height:100%;object-fit:cover}
#laib-und-seele .klassiker h3{font-family:var(--disp);font-size:22px;line-height:1.2;margin:0}
#laib-und-seele .saisonal{margin-top:36px;text-align:center;
  font-family:var(--disp);font-size:22px;color:var(--bronze)}
#laib-und-seele .saisonal p{margin:0}

/* ============================================================
   Casual Fine Dining: gestaffelte Teller statt gleichförmiger Säule
   Drei gleich große Bilder untereinander ergaben eine Spalte, neben
   der die zwei Absätze Text verloren wirkten. Jetzt trägt ein großer
   Teller den Kopf, zwei kleinere folgen darunter. Der Versatz rechts
   nimmt der Reihe die Symmetrie.
   ============================================================ */
#fine-dining .teller-gross .content-image{aspect-ratio:3/2;margin:0;overflow:hidden}
#fine-dining .teller-gross img{width:100%;height:100%;object-fit:cover}

#fine-dining .teller-klein .content-image{aspect-ratio:4/3;margin:0;overflow:hidden}
#fine-dining .teller-klein img{width:100%;height:100%;object-fit:cover}
#fine-dining .teller-versetzt{margin-top:64px}

/* Der Versatz lohnt sich nur, solange zwei Bilder nebeneinander stehen.
   Einspaltig würde er zu einer unerklärlichen Lücke. */
@media(max-width:600px){
  #fine-dining .teller-versetzt{margin-top:0}
}
#brauereikeller .kachel .content-image,
#rahmen .kachel .content-image,
#teambuilding .kachel .content-image,
#geschichte .kachel .content-image,
#raeumlichkeiten .kachel .content-image,
#arbeitsweise .kachel .content-image{aspect-ratio:4/3}

@media(max-width:900px){
  [class*=grid_desktop_60_40],[class*=grid_desktop_40_60]{grid-template-columns:1fr}
}

/* Vier Orte: zwei Spalten auf zwei Zeilen, dadurch deutlich größere Bilder */
#orte .kachel .content-image{aspect-ratio:16/10}
#orte [class*=grid_desktop]{row-gap:64px}

/* ============================================================
   Team-Kacheln auf der Karriere-Seite
   Die Vorlagen sind Hochformat-Porträts. Ein 16:11-Beschnitt schneidet
   die Gesichter an. Daher Hochformat-Kachel und object-position oben:
   Köpfe bleiben im Bild, auch wenn unten beschnitten wird.
   ============================================================ */
#gastlichkeit .kachel .content-image{aspect-ratio:4/5}
#gastlichkeit .kachel .content-image img{object-position:center top}