/***** code dump der swiper-bundle.min.css statt eigene css-Datei. *****/ /* Swiper 10.3.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * Copyright 2014-2023 Vladimir Kharlampidi * Released under the MIT License * Released on: September 21, 2023 */ @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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;overflow:clip;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.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%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,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.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display: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;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.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-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);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:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-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:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,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-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-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;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-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-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} /* BASIS – Ressourcen */ /* BASIS – Ressourcen */ /* BASIS – Ressourcen */ /* @import url("https://use.typekit.net/ohp0nrh.css"); */ /* Museo, Gill Sans, Adobe */ /* BASIS – globale Einstellungen die überall zum Einsatz kommen können */ /* BASIS – globale Einstellungen die überall zum Einsatz kommen können */ /* BASIS – globale Einstellungen die überall zum Einsatz kommen können */ :root { interpolate-size: allow-keywords; /* auto-animation von intrinsischen Größen auf fixe Werte.*/ --maxwidth: min(1600px, 90vw); /* maximale Spaltenbreite von row / grid innerhalb der 100vw-sections. kann mit fullwidth etc. außer kraft gesetzt werden wo nötig. */ --maxwidthlimit: clamp( calc( var(--maxwidth) * 0.5 ), 100vw, var(--maxwidth)); /* vor allem als gap-basis genutzt. skaliert zwischen NEU 0.5 / 0.25*maxwidth und maxwidth basiserend auf viewport. nicht kleiner als max/2, nicht größer als max.*/ --sidenavwidth: min(12vw, 300px); /*GUIDOR mitlaufende sidebar!*/ --navheight:5rem; /* derzeit: javascript misst und überschreibt diese Variable dann im DOM! Funktion layoutinit(); */ --navoffset:2rem; /* für Abstand für Sticky-Elemente unterhalb des Menüs */ --gapratio: 0.03; /* wird mit maxwidthlimit multipliziert. Spaltenmaß-Starter für .row .grid, das sind effektiv x% der Breite, limitiert nach oben und unten per maxwidthlimit */ --radiusratio: 0.015; /* neu: wie gapratio handhaben, radien passen sich an maxwidthlimit-vw-breite an. */ --gapfactorrow: 0; /* guidor: lästiges row-padding deaktiviert? */ --base-gap: 1rem; /* neues row-col-system mit flex-gap statt margin */ --base-vgap-col:1rem; /* neues row-col-system ... cols haben kein margin mehr, also auch nicht mehr vertikal ... hier könnte ein default eingestellt werden, dann muss nicht jede col damit versehen werden. oder 0. /* neuer Ansatz mit OKLCH ausprobieren: https://blog.logrocket.com/oklch-css-consistent-accessible-color-palettes/ */ /* neuer Ansatz mit OKLCH ausprobieren: https://blog.logrocket.com/oklch-css-consistent-accessible-color-palettes/ */ /* neuer Ansatz mit OKLCH ausprobieren: https://blog.logrocket.com/oklch-css-consistent-accessible-color-palettes/ */ /* --clr-warning-100: oklch(97% 0.02 80); --clr-warning-200: oklch(89% 0.05 80); --clr-warning-300: oklch(80% 0.12 80); --clr-warning-400: oklch(71% 0.19 80); --clr-warning-500: oklch(60% 0.27 80); --clr-warning-600: oklch(49% 0.19 80); --clr-warning-700: oklch(38% 0.12 80); --clr-warning-800: oklch(25% 0.05 80); --clr-warning-900: oklch(12% 0.02 80); */ --base-transition: all 0.125s ease-out; --color-weiss: hwb(206 100% 0%); --color-weiss-a50: hwba(206 100% 0% / 0.5); --color-grau-3: hwb(0 96% 2%); --color-grau-2: hwb(0 93% 5%); --color-grau-1: hwb(0 84% 11%); --color-grau: hwb(0 70% 22%); --color-grau--1: hwb(0 45% 45%); --color-grau--2: hwb(0 30% 64%); --color-grau--3: hwb(0 15% 81%); --color-schwarz: hwb(0 0% 100%); --color-rot-2: hwb(0 66% 0%); --color-rot-1: hwb(0 33% 0%); --color-rot: hwb(0 0% 0%); --color-rot--1: hwb(0 0% 33%); --color-rot--2: hwb(0 0% 66%); --color-orange-2: hwb(30 66% 0%); --color-orange-1: hwb(30 33% 0%); --color-orange: rgb(255, 128, 0); --color-orange--1: hwb(30 0% 33%); --color-orange--2: hwb(30 0% 66%); --color-gelb-2: hwb(50 66% 0%); --color-gelb-1: hwb(50 33% 0%); --color-gelb: hwb(50 0% 0%); --color-gelb--1: hwb(50 0% 33%); --color-gelb--2: hwb(50 0% 66%); --color-gruen-2: hwb(90 66% 4%); --color-gruen-1: hwb(90 33% 8%); --color-gruen: hwb(90 0% 16%); --color-gruen--1: hwb(90 0% 33%); --color-gruen--2: hwb(90 0% 66%); --color-tuerkis-2: hwb(180 66% 4%); --color-tuerkis-1: hwb(180 33% 8%); --color-tuerkis: hwb(180 0% 16%); --color-tuerkis--1: hwb(180 0% 33%); --color-tuerkis--2: hwb(180 0% 66%); --color-blau-2: hwb(203 24% 15%); --color-blau-1: hwb(203 14% 35%); --color-blau: hwb(203 4% 65%); --color-blau--1: hwb(203 4% 75%); --color-blau--2: hwb(203 4% 85%); --color-violett-2: hwb(260 66% 4%); --color-violett-1: hwb(260 33% 8%); --color-violett: hwb(260 0% 16%); --color-violett--1: hwb(260 0% 33%); --color-violett--2: hwb(260 0% 66%); --color-lila-2: hwb(300 66% 4%); --color-lila-1: hwb(300 33% 8%); --color-lila: hwb(300 0% 16%); --color-lila--1: hwb(300 0% 33%); --color-lila--2: hwb(300 0% 66%); --color-K4: fuchsia; --color-site: var(--color-orange); /* basis-farbe für Text/Akzent auf Site */ --color-page: var(--color-site); /* basis-farbe für Text/Akzent auf Page. kann im body überschrieben werden für sonderfarben */ --color-selection: var(--color-weiss); --bg-selection: var(--color-orange); --font-text: "gill-sans-nova", "Segoe UI", "SegoeUI", sans-serif; --font-head: "museo", "Segoe UI", "SegoeUI", sans-serif; --font-special: "museo", "Segoe UI", "SegoeUI", sans-serif; --font-factor: 1; /* textskalierung 1x REM aus html {} */ --cursor-default: default; --cursor-pointer: pointer; --duotone-fg: linear-gradient(45deg, var(--color-rot--2) 20%, var(--color-rot-1) 80%); --duotone-fg-blend: plus-lighter; --duotone-bg: linear-gradient(-45deg, var(--color-gelb-1) 20%, var(--color-weiss) 80%); --duotone-bg-blend: multiply; --duotone-filter: grayscale(100%) contrast(1.1) brightness(0.8); } /* DEVTOOLS - Anmerkungen etc. */ * { --outlinewidth:0px; } .k4-kommentar-on { position:fixed; z-index:1000; top:5px; right:5px; cursor:var(--cursor-pointer); width:25px; height:25px; border-radius:25px; background-color:var(--color-K4); display:grid; place-items:center; } .k4-kommentar { display:block; --font-factor:0.75; } /* BASIS – Presets, Resets, HTML, BODY */ /* BASIS – Presets, Resets, HTML, BODY */ /* BASIS – Presets, Resets, HTML, BODY */ *,*::before,*::after { box-sizing:border-box; } body { margin:unset; } body { cursor: var(--cursor-default); } hr { display: block; height: 1px; border: 0; border-top: 1px solid black; margin: 1em 0; padding: 0; } audio,canvas,iframe,img,svg,video { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } blockquote cite { display:block; padding:0; } ::selection { background: var(--bg-selection); color:var(--color-selection); text-shadow: none; } html { caret-color: var(--bg-selection); color: var(--color-schwarz); font-family: var(--font-text); font-variant-numeric: proportional-nums; font-weight:300; font-size: 19px; line-height: 1.4; width:100%; /* entfernt ALLE overflow-meldungen in sections in firefox ... grund eher unbekannt.*/ overflow-x:clip; /* hidden oder clip ... nicht sicher was besser ist */ overflow-y:scroll; scroll-behavior: smooth; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--color-weiss) var(--color-blau); } body { background-color: var(--color-weiss); font-size:calc( var(--font-factor) * clamp(0.85rem, 1vw, 1rem) ); } /* ACHTUNG schriftgröße generell variabel gemacht. wenn das blöd ist: nur p, li ... siehe unten! */ body.basics { --color-page: var(--color-blau); } /*Seiten-Sonder-Akzentfarbe, basierend meist auf $cid */ body.notizen { --color-page: var(--color-K4); } /*Seiten-Sonder-Akzentfarbe, basierend meist auf $cid */ /* BASIS - Typografie */ /* BASIS - Typografie */ /* BASIS - Typografie */ p, li, th, td, h1, h2, h3, h4, h5, h6, ul, ol { margin:0; } p + p {margin-top:1em;} sup { font-size:0.4em; vertical-align:1.05em; line-height: 0; } ul { list-style-type:disc; padding-left:1em; } /*ul > li::marker { }*/ /* Basis-Styling der Liste zurücksetzen */ ul.arrow-list { list-style: none; padding-left: 0; margin: 0; } /* Flexbox für die einzelnen Listenpunkte */ ul.arrow-list li { display: flex; align-items: flex-start; /* 'flex-start' hält den Pfeil oben, falls der Text mehrzeilig wird */ gap: 0.66em; /* Abstand zwischen Pfeil und Text */ margin-bottom: 0.5em; /* Abstand zwischen den Listenpunkten */ } ul.arrow-list li::before { content: ""; flex-shrink: 0; /* Verhindert, dass das Icon verkleinert wird, wenn der Text umbricht */ width: 1em; height: 1em; background-image: url('../img/arr-upright-orange.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: translateY(0.15em); } /* H4 mit Pfeilen davor */ .h4.arrow { display: flex; align-items: flex-start; /* 'flex-start' hält den Pfeil oben, falls der Text mehrzeilig wird */ gap: 0.66em; /* Abstand zwischen Pfeil und Text */ } .h4.arrow::before { content: ""; flex-shrink: 0; /* Verhindert, dass das Icon verkleinert wird, wenn der Text umbricht */ width: 1em; height: 1em; background-image: url('../img/arr-upright-orange.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: translateY(0.05em); } ol { list-style-type:decimal; } ol > li { padding-left: 0.33em; } a, a:any-link { text-decoration:none; color:var(--color-schwarz); cursor:var(--cursor-pointer); } p a, p a:any-link, label a, label a:any-link, .legal li a, .legal li a:any-link { /* zu testen ... unterstreicht alle Links, kollidiert aber mit Navigation, Dropdowns etc. wenn zu locker */ border-bottom:2px solid var(--color-grau); } p, li, th, td, cite, label, .col, input, textarea, select, option { /* ACHTUNG: habe ich auch zu body kopiert ... wenn das dort schwierigketien macht, nur hier */ font-size:calc( var(--font-factor) * clamp(0.85rem, 1vw, 1rem) ); } p, li, th, td, cite, label { text-wrap:pretty; /* chrome - verhindert Orphans widows ... ohne balanced */ hyphens: auto; hyphenate-limit-chars: 12 5 5; /*sehr grobe Erlaubnis für Trennung langer Wörter mit langen Vor/Nachsilben*/ hyphenate-limit-lines: 2; /* 2025 noch nicht unterstützt - maximal 2 Trennungen */ hyphenate-limit-zone: 50px; /* 2025 noch nicht unterstützt - innerhalb von 2em wird NICHT getrennt --> mehr Flattersatz als Rausatz? */ overflow-wrap: break-word; /* umbruch von überlangen Worten - alias zu word-wrap */ } input, textarea, *[contenteditable="true"] { text-wrap:stable; /* Inputfelder, eigentlich nur textareas oder wenn etwas editable ist */ } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { text-rendering:optimizeLegibility; font-kerning: normal; text-wrap:balance; text-align:left; font-family: var(--font-head); line-height:1.1; font-weight: 700; color: var(--color-orange); } h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--color-blau); } h5, .h5, h6, .h6 { font-family: var(--font-text); } .h0 { font-size:calc( var(--font-factor) * clamp(3rem, 10vw, 10rem) ); line-height: 1; font-weight: 700; font-style:italic; } h1, .h1 { font-size:calc( var(--font-factor) * clamp(2.5rem, 5vw, 5rem) ); line-height:1.1; } h2, .h2 { font-size:calc( var(--font-factor) * clamp(1.7rem, 3vw, 3rem) ); font-weight:300; } h3, .h3 { font-size:calc( var(--font-factor) * clamp(1.2rem, 1.5vw, 1.7rem) ); font-weight:700; } h4, .h4 { font-size:calc( var(--font-factor) * clamp(1rem, 1.25vw, 1.25rem) ); font-weight:700; } h5, .h5 { font-size:calc( var(--font-factor) * clamp(1rem, 1.1vw, 1.1rem) ); } h6, .h6 { font-size:calc( var(--font-factor) * clamp(1rem, 1vw, 1rem) ); font-weight:500; } .firstline { font-weight:300; } .firstline::first-line { font-weight:700; } @media (max-width:1023px) { .firstline { font-weight:700; } .firstline br { display:none; } } /* H-containerquery sizes - mal testen ob das praktibel ist. die .col wird als container-inlinesize deklariert, die Hs passen sich dann alle(?) daran an statt der bisherigen fontsize? */ .container-inlinesize { container-type: inline-size; /*container-name: colcontainer;*/ } .container-size-1 { font-size:1cqw !important; } .container-size-1-5 { font-size:1.5cqw !important; } .container-size-1-66 { font-size:1.66cqw !important; font-size:max( 1.66cqw, 1rem) !important; } .container-size-2 { font-size:2cqw !important; font-size:max( 2cqw, 1rem) !important; } .container-size-3 { font-size:3cqw !important; } .container-size-4 { font-size:4cqw !important; } .container-size-5 { font-size:5cqw !important; } .container-size-75 { font-size:7.5cqw !important; font-size:max( 7.5cqw, 2.5rem) !important; } .container-size-10 { font-size:10cqw !important; } .container-size-125 { font-size:12.5cqw !important; } .container-size-15 { font-size:15cqw !important; } .container-size-175 { font-size:17.5cqw !important; } .container-size-20 { font-size:20cqw !important; } .container-size-225 { font-size:22.5cqw !important; } .container-size-25 { font-size:25cqw !important; } .container-size-275 { font-size:27.5cqw !important; } .container-size-30 { font-size:30cqw !important; } /* Tabellen */ table { width:100%; border-spacing:0px; border-collapse: collapse; --gapratio: 0.01; /* kann überschrieben weden mit .gap-xx, wird aber unten noch halbiert, weil feinere Abstufungen nötig */ table-layout:fixed; overflow-wrap: break-word; /* einzelne Worte umbrechen wenn es nicht anders geht */ } table.auto { table-layout:auto; } table th, table td { text-align:left; vertical-align:top; padding:calc( var(--maxwidthlimit) * var(--gapratio) * 0.5 ) 1rem; text-wrap:pretty; border-bottom:2px solid var(--color-grau-2); } /*guidor*/ table:not(.no-header) td:first-child, table:not(.no-header) tr:first-child td { font-weight:500; } table { background-color:var(--color-grau-2); } table td, table th { border-color:var(--color-weiss); } table td:not(:first-child), table th:not(:first-child) { border-left:2px solid var(--color-weiss); } table th { font-weight:500; } /*guidor*/ table.streifen thead tr { background-color:var(--color-grau); } table.streifen tr:nth-child(2n) { background-color:var(--color-weiss); } table.streifen :not(thead) tr:nth-child(2n+1) { background-color:var(--color-grau-2); } table.linien tr:not(:last-child) { border-bottom:1px solid var(--color-grau); } .scroll-hint-btn.hidden { display:none; } @media (max-width:767px) { .table-responsive table { min-width:200% !important; } /* oder width:200%; ... vielleicht das auch direkt in jeder Tabelle überschreiben, weil abhängig vom Inhalt */ /* Dein angepasster Wrapper */ .table-responsive { position: relative; width: 100%; } .table-scroll { width: 100%; overflow-x: auto; scroll-behavior: smooth; /* Sorgt für weiches Scrollen beim Klick */ } /* Der Button mit Verlauf */ .scroll-hint-btn { position: absolute; top: 0; right: 0; height: 100%; width: 15%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%); border: none; font-size: 1.5rem; color: #333; text-align: right; padding-right: 10px; cursor: pointer; transition: opacity 0.3s ease; display:grid; place-items:center; } .scroll-hint-btn.hidden { display:none; } .scroll-hint-btn > div { top:50%; height:auto; transform:rotate(0deg) translateY(-50%) translateX(10%) !important; } /* Hilfsklasse für das Ausblenden am Ende der Tabelle */ .scroll-hint-btn.hidden { opacity: 0; pointer-events: none; } } /* quotes und bubbles */ blockquote { position:relative; padding:0; margin:0; display:grid; grid-template-columns:auto 1fr; grid-template-areas: "sign text" ". cite"; grid-gap:1rem; font-family:var(--font-special); font-size:clamp(1rem, 1.7vw, 1.33rem); line-height:1.2; font-style:italic; text-wrap: balance; } blockquote:before { grid-area:sign; content:"»"; font-size:400%; text-align:right; line-height:0.25; font-weight:500; color:var(--color-page); } blockquote.noquote:before { content:""; } blockquote p { grid-area:text; } blockquote cite { grid-area:cite; font-family:var(--font-text); font-weight:600; color:var(--color-page); } blockquote cite:before { content:"— "; } .speechbubble { --handlesize:1em; background-color:var(--color-page); color:var(--color-weiss); padding:0.666em; padding-top:0.5em; position:relative; width:fit-content; margin-bottom:var(--handlesize); overflow:visible !important; } .speechbubble::after { content:""; position:absolute; left:1em; bottom:calc( var(--handlesize) * -1 ); width:var(--handlesize); height:var(--handlesize); background-image:conic-gradient(at 100% 100%, transparent 0deg, transparent 315deg, var(--color-page) 315deg, var(--color-page) 350deg, transparent 350deg ); } /*Datenschutz, Impressum*/ .legal { --font-factor:0.9; } .legal h1, .legal h2, .legal h3, .legal h4, .legal h5, .legal h6 { margin:2rem 0 1rem 0; text-align:left; } .legal h2, .legal h3, .legal h4, .legal h5, .legal h6 { font-family:var(--font-text); } .legal h2 { font-size:1.7rem; } .legal h3 { font-size:1.15rem; } .legal ul { list-style-type:disc; margin:0.5rem 0 0.5rem 0rem; } .legal p + p { margin-top: 0.5rem; } .legal b, .legal strong { font-weight:500; } /* BASIS – Stil-Addons für Blockelemente */ /* BASIS – Stil-Addons für Blockelemente */ /* BASIS – Stil-Addons für Blockelemente */ /* Hintergrund Farben, ... */ .bg-rot-2 { background-color: var(--color-rot-2) !important; } .bg-rot-1 { background-color: var(--color-rot-1) !important; } .bg-rot { background-color: var(--color-rot) !important; } .bg-rot--1 { background-color: var(--color-rot--1) !important; } .bg-rot--2 { background-color: var(--color-rot--2) !important; } .bg-orange-2 { background-color: var(--color-orange-2) !important; } .bg-orange-1 { background-color: var(--color-orange-1) !important; } .bg-orange { background-color: var(--color-orange) !important; } .bg-orange--1 { background-color: var(--color-orange--1) !important; } .bg-orange--2 { background-color: var(--color-orange--2) !important; } .bg-gelb-2 { background-color: var(--color-gelb-2) !important; } .bg-gelb-1 { background-color: var(--color-gelb-1) !important; } .bg-gelb { background-color: var(--color-gelb) !important; } .bg-gelb--1 { background-color: var(--color-gelb--1) !important; } .bg-gelb--2 { background-color: var(--color-gelb--2) !important; } .bg-gruen-2 { background-color: var(--color-gruen-2) !important; } .bg-gruen-1 { background-color: var(--color-gruen-1) !important; } .bg-gruen { background-color: var(--color-gruen) !important; } .bg-gruen--1 { background-color: var(--color-gruen--1) !important; } .bg-gruen--2 { background-color: var(--color-gruen--2) !important; } .bg-tuerkis-2 { background-color: var(--color-tuerkis-2) !important; } .bg-tuerkis-1 { background-color: var(--color-tuerkis-1) !important; } .bg-tuerkis { background-color: var(--color-tuerkis) !important; } .bg-tuerkis--1 { background-color: var(--color-tuerkis--1) !important; } .bg-tuerkis--2 { background-color: var(--color-tuerkis--2) !important; } .bg-blau-2 { background-color: var(--color-blau-2) !important; } .bg-blau-1 { background-color: var(--color-blau-1) !important; } .bg-blau { background-color: var(--color-blau) !important; } .bg-blau--1 { background-color: var(--color-blau--1) !important; } .bg-blau--2 { background-color: var(--color-blau--2) !important; } .bg-violett-2 { background-color: var(--color-violett-2) !important; } .bg-violett-1 { background-color: var(--color-violett-1) !important; } .bg-violett { background-color: var(--color-violett) !important; } .bg-violett--1 { background-color: var(--color-violett--1) !important; } .bg-violett--2 { background-color: var(--color-violett--2) !important; } .bg-lila-2 { background-color: var(--color-lila-2) !important; } .bg-lila-1 { background-color: var(--color-lila-1) !important; } .bg-lila { background-color: var(--color-lila) !important; } .bg-lila--1 { background-color: var(--color-lila--1) !important; } .bg-lila--2 { background-color: var(--color-lila--2) !important; } .bg-weiss { background-color: var(--color-weiss) !important; } .bg-grau-3 { background-color: var(--color-grau-3) !important; } .bg-grau-2 { background-color: var(--color-grau-2) !important; } .bg-grau-1 { background-color: var(--color-grau-1) !important; } .bg-grau { background-color: var(--color-grau) !important; } .bg-grau--1 { background-color: var(--color-grau--1) !important; } .bg-grau--2 { background-color: var(--color-grau--2) !important; } .bg-grau--3 { background-color: var(--color-grau--3) !important; } .bg-schwarz { background-color: var(--color-schwarz) !important; } .bg-site { background-color: var(--color-site) !important; } .bg-page { background-color: var(--color-page) !important; } .bg-K4, .bg-k4 { background-color: var(--color-K4) !important; } /* todo: das ist ausbaufähig ...*/ .bg-transparent { background-color:transparent !important; } .bg-glass { background-color: var(--color-weiss-a50); backdrop-filter:blur(10px); } .bg-textur { background-image:url('img/bild.jpg'); background-size:cover; background-repeat:no-repeat; } .bg-radial-weiss-grau-1 { background: radial-gradient(ellipse at 33% 33%, var(--color-weiss) 0%, var(--color-grau-1) 100%); } .bg-linear-rot { background: linear-gradient(var(--color-rot) 0%, var(--color-rot--1) 100%); } .bg-linear-orange { background: linear-gradient(var(--color-orange) 0%, var(--color-orange--1) 100%); } .bg-linear-gelb { background: linear-gradient(var(--color-gelb) 0%, var(--color-gelb--1) 100%); } .bg-linear-gruen { background: linear-gradient(var(--color-gruen) 0%, var(--color-gruen--1) 100%); } .bg-linear-tuerkis { background: linear-gradient(var(--color-tuerkis) 0%, var(--color-tuerkis--1) 100%); } .bg-linear-blau { background: linear-gradient(var(--color-blau) 0%, var(--color-blau--1) 100%); } .bg-linear-violett { background: linear-gradient(var(--color-violett) 0%, var(--color-violett--1) 100%); } .bg-linear-lila { background: linear-gradient(var(--color-lila) 0%, var(--color-lila--1) 100%); } .bg-linear-grau { background: linear-gradient(var(--color-grau) 0%, var(--color-grau--1) 100%); } /* Schatten ... https://shadows.brumm.af */ .shadow-100 { box-shadow: 0px 5.4px 4.5px -20px rgba(0, 0, 0, 0.07), 0px 13.8px 12.5px -20px rgba(0, 0, 0, 0.1), 0px 31.1px 30.1px -20px rgba(0, 0, 0, 0.13), 0px 99px 100px -20px rgba(0, 0, 0, 0.2); } .shadow-75 { box-shadow: 0px 4.1px 3.4px -15px rgba(0, 0, 0, 0.07), 0px 10.5px 9.4px -15px rgba(0, 0, 0, 0.1), 0px 23.5px 22.6px -15px rgba(0, 0, 0, 0.13), 0px 75px 75px -15px rgba(0, 0, 0, 0.2); } .shadow, .shadow-50 { box-shadow: 0px 2.7px 2.3px -15px rgba(0, 0, 0, 0.07), 0px 7px 6.3px -15px rgba(0, 0, 0, 0.1), 0px 15.7px 15.1px -15px rgba(0, 0, 0, 0.13), 0px 50px 50px -15px rgba(0, 0, 0, 0.2); } .shadow-33 { box-shadow: 0px 1.8px 1.5px -15px rgba(0, 0, 0, 0.07), 0px 4.6px 4.1px -15px rgba(0, 0, 0, 0.1), 0px 10.4px 9.9px -15px rgba(0, 0, 0, 0.13), 0px 33px 33px -15px rgba(0, 0, 0, 0.2); } .shadow-25 { box-shadow: 0px 1.4px 1.1px -15px rgba(0, 0, 0, 0.07), 0px 3.5px 3.1px -15px rgba(0, 0, 0, 0.1), 0px 7.8px 7.5px -15px rgba(0, 0, 0, 0.13), 0px 25px 25px -15px rgba(0, 0, 0, 0.2); } .shadow-20 { box-shadow: 0px 1.1px 0.9px -15px rgba(0, 0, 0, 0.07), 0px 2.8px 2.5px -15px rgba(0, 0, 0, 0.1), 0px 6.3px 6px -15px rgba(0, 0, 0, 0.13), 0px 20px 20px -15px rgba(0, 0, 0, 0.2); } .shadow-15 { box-shadow: 0px 0.8px 0.7px -15px rgba(0, 0, 0, 0.087), 0px 2.1px 1.9px -15px rgba(0, 0, 0, 0.125), 0px 4.7px 4.5px -15px rgba(0, 0, 0, 0.163), 0px 15px 15px -15px rgba(0, 0, 0, 0.25); } .shadow-10 { box-shadow: 0px 0.5px 0.5px -10px rgba(0, 0, 0, 0.105), 0px 1.4px 1.3px -10px rgba(0, 0, 0, 0.15), 0px 3.1px 3px -10px rgba(0, 0, 0, 0.195), 0px 10px 10px -10px rgba(0, 0, 0, 0.3); } /* Radius */ .radius-0 { border-radius: 0; overflow:hidden; background-clip: padding-box; } .radius-025 { border-radius: calc( 0.25 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-05 { border-radius: calc( 0.5 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-1 { border-radius: calc( 1 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-15 { border-radius: calc( 1.5 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-2 { border-radius: calc( 2 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-3 { border-radius: calc( 3 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-4 { border-radius: calc( 4 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-5 { border-radius: calc( 5 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-6 { border-radius: calc( 6 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-100 { border-radius: calc( 100 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-025rem { border-radius: 0.25rem; overflow:hidden; background-clip: padding-box; } .radius-05rem { border-radius: 0.5rem; overflow:hidden; background-clip: padding-box; } .radius-1rem { border-radius: 1rem; overflow:hidden; background-clip: padding-box; } .radius-15rem { border-radius: 1.5rem; overflow:hidden; background-clip: padding-box; } .radius-2rem { border-radius: 2rem; overflow:hidden; background-clip: padding-box; } .radius-3rem { border-radius: 3rem; overflow:hidden; background-clip: padding-box; } .radius-4rem { border-radius: 4rem; overflow:hidden; background-clip: padding-box; } .radius-5rem { border-radius: 5rem; overflow:hidden; background-clip: padding-box; } .radius-6rem { border-radius: 6rem; overflow:hidden; background-clip: padding-box; } .radius-7rem { border-radius: 7rem; overflow:hidden; background-clip: padding-box; } .radius-8rem { border-radius: 8rem; overflow:hidden; background-clip: padding-box; } .radius-9rem { border-radius: 9rem; overflow:hidden; background-clip: padding-box; } .radius-10rem { border-radius: 10rem; overflow:hidden; background-clip: padding-box; } .radius-025p { border-radius: 2.5%; overflow:hidden; background-clip: padding-box; } /*TODO: das erzeugt verzerrte Radien weil Höhe anders als Breite. Lösung vielleicht container-queries cqw-Einheit? Noch zu lernen ... */ .radius-5p { border-radius: 5%; overflow:hidden; background-clip: padding-box; } .radius-10p { border-radius: 10%; overflow:hidden; background-clip: padding-box; } .radius-20p { border-radius: 20%; overflow:hidden; background-clip: padding-box; } .radius-25p { border-radius: 25%; overflow:hidden; background-clip: padding-box; } .radius-33p { border-radius: 33%; overflow:hidden; background-clip: padding-box; } .radius-50p { border-radius: 50%; overflow:hidden; background-clip: padding-box; } /* clippath sammlung. todo: systematisieren? */ .clippath-1 { clip-path: polygon(20% 0%,95% 0%,100% 20%,80% 100%,5% 100%,0% 80%); } .clippath-2 { clip-path: polygon(20% 0%,100% 0%,100% 100%,0% 100%); } .clippath-2-flip { clip-path: polygon(0% 0%,100% 0%,80% 100%,0% 100%); } /* duotone-Bilder / videos */ .duotone { background-image: var(--duotone-bg); transition:all 0.33s ease-in-out; } .duotone img, .duotone video { filter:var(--duotone-filter); mix-blend-mode:var(--duotone-bg-blend); position:relative; transition:all 0.33s ease-in-out; } .duotone::before { content:''; background-image: var(--duotone-fg); mix-blend-mode:var(--duotone-fg-blend); position:absolute; height:100%; width:100%; z-index:1; transition:all 0.33s ease-in-out; } .duotone:hover { background-image: var(--duotone-bg); background-image-opacity:0; } .duotone:hover img, .duotone:hover video { filter:grayscale(0%) contrast(1); mix-blend-mode:normal; } .duotone:hover::before { opacity:0; } /* Border */ .border-0 { border:0px solid var(--color-orange); } .border-1 { border:1px solid var(--color-orange); } .border-15 { border:1.5px solid var(--color-orange); } .border-2 { border:2px solid var(--color-orange); } .border-3 { border:3px solid var(--color-orange); } .border-4 { border:4px solid var(--color-orange); } .border-t-0 { border-top: 1px solid var(--color-orange); } .border-t-1 { border-top: 1px solid var(--color-orange); } .border-t-15 { border-top: 1.5px solid var(--color-orange); } .border-t-2 { border-top: 2px solid var(--color-orange); } .border-t-3 { border-top: 3px solid var(--color-orange); } .border-t-4 { border-top: 4px solid var(--color-orange); } .border-b-0 { border-bottom: 1px solid var(--color-orange); } .border-b-1 { border-bottom: 1px solid var(--color-orange); } .border-b-15 { border-bottom: 1.5px solid var(--color-orange); } .border-b-2 { border-bottom: 2px solid var(--color-orange); } .border-b-3 { border-bottom: 3px solid var(--color-orange); } .border-b-4 { border-bottom: 4px solid var(--color-orange); } .border-l-0 { border-left: 1px solid var(--color-orange); } .border-l-1 { border-left: 1px solid var(--color-orange); } .border-l-15 { border-left: 1.5px solid var(--color-orange); } .border-l-2 { border-left: 2px solid var(--color-orange); } .border-l-3 { border-left: 3px solid var(--color-orange); } .border-l-4 { border-left: 4px solid var(--color-orange); } .border-r-0 { border-right: 1px solid var(--color-orange); } .border-r-1 { border-right: 1px solid var(--color-orange); } .border-r-15 { border-right: 1.5px solid var(--color-orange); } .border-r-2 { border-right: 2px solid var(--color-orange); } .border-r-3 { border-right: 3px solid var(--color-orange); } .border-r-4 { border-right: 4px solid var(--color-orange); } @media (max-width:1023px) { .border-m-l-0 { border-left-width: 0px; } } .border-color-page { border-color: var(--color-page); } .border-color-rot { border-color: var(--color-rot); } .border-color-blau { border-color: var(--color-blau); } .border-color-weiss { border-color: var(--color-weiss); } .border-color-grau-2 { border-color: var(--color-grau-2); } .border-color-grau-1 { border-color: var(--color-grau-1); } .border-color-grau { border-color: var(--color-grau); } .border-color-grau--1 { border-color: var(--color-grau--1); } .border-color-grau--2 { border-color: var(--color-grau--2); } .border-color-schwarz { border-color: var(--color-schwarz); } /* Hover Mouseover */ .hover-25 { transition:var(--base-transition); transform: scale(var(--hover-scale)); } .button, .hover-50 { transition:var(--base-transition); transform: scale(var(--hover-scale)); } .hover-75 { transition:var(--base-transition); transform: scale(var(--hover-scale)); } .hover-100 { transition:var(--base-transition); transform: scale(var(--hover-scale)); } .hover-25:hover { --hover-scale:1.025; } .button:hover, .hover-50:hover { --hover-scale:1.05; } .hover-75:hover { --hover-scale:1.075; } .hover-100:hover { --hover-scale:1.1; } /* BASIS - Stil-Addons für Text */ /* BASIS - Stil-Addons für Text */ /* BASIS - Stil-Addons für Text */ /* Ausrichtungen */ .t-left { text-align:left; } .t-right { text-align:right; } .t-center { text-align:center; } .t-justify { text-align:justify; } .t-balance { text-wrap: balance; } .t-pretty { text-wrap: balance; text-wrap: pretty; } .t-nobalance { text-wrap: wrap; } @media (max-width:1365px) { .t-xl-left { text-align:left; } .t-xl-right { text-align:right; } .t-xl-center { text-align:center; } .t-xl-justify { text-align:justify; } .t-xl-balance { text-wrap: balance; } .t-xl-pretty { text-wrap: balance; text-wrap: pretty; } .t-xl-nobalance { text-wrap: wrap; } } @media (max-width:1279px) { .t-l-left { text-align:left; } .t-l-right { text-align:right; } .t-l-center { text-align:center; } .t-l-justify { text-align:justify; } .t-l-balance { text-wrap: balance; } .t-l-pretty { text-wrap: balance; text-wrap: pretty; } .t-l-nobalance { text-wrap: wrap; } } @media (max-width:1023px) { .t-m-left { text-align:left; } .t-m-right { text-align:right; } .t-m-center { text-align:center; } .t-m-justify { text-align:justify; } .t-m-balance { text-wrap: balance; } .t-m-pretty { text-wrap: balance; text-wrap: pretty; } .t-m-nobalance { text-wrap: wrap; } } @media (max-width:767px) { .t-s-left { text-align:left; } .t-s-right { text-align:right; } .t-s-center { text-align:center; } .t-s-justify { text-align:justify; } .t-s-balance { text-wrap: balance; } .t-s-pretty { text-wrap: balance; text-wrap: pretty; } .t-s-nobalance { text-wrap: wrap; } } @media (max-width:479px) { .t-xs-left { text-align:left; } .t-xs-right { text-align:right; } .t-xs-center { text-align:center; } .t-xs-justify { text-align:justify; } .t-xs-balance { text-wrap: balance; } .t-xs-pretty { text-wrap: balance; text-wrap: pretty; } .t-xs-nobalance { text-wrap: wrap; } } /* Größen */ .t-200 { --font-factor:2.0; } .t-150 { --font-factor:1.5; } .t-140 { --font-factor:1.4; } .t-130 { --font-factor:1.3; } .t-120 { --font-factor:1.2; } .t-110 { --font-factor:1.1; } .t-100 { --font-factor:1.0; } .t-90 { --font-factor:0.9; } .t-80 { --font-factor:0.8; } .t-70 { --font-factor:0.7; } .t-60 { --font-factor:0.6; } .t-50 { --font-factor:0.5; } .t-40 { --font-factor:0.4; } .t-200p { font-size:200%; } .t-150p { font-size:150%; } .t-140p { font-size:140%; } .t-130p { font-size:130%; } .t-120p { font-size:120%; } .t-110p { font-size:110%; } .t-100p { font-size:100%; } .t-90p { font-size: 90%; } .t-80p { font-size: 80%; } .t-70p { font-size: 70%; } .t-60p { font-size: 60%; } .t-50p { font-size: 50%; } .t-40p { font-size: 40%; } .t-9vw { font-size: calc( 0.09 * var(--maxwidthlimit) ); } /*vw-abhängig, aber mit maxwidthlimit nach oben und unten limitiert*/ .t-8vw { font-size: calc( 0.08 * var(--maxwidthlimit) ); } .t-7vw { font-size: calc( 0.07 * var(--maxwidthlimit) ); } .t-6vw { font-size: calc( 0.06 * var(--maxwidthlimit) ); } .t-5vw { font-size: calc( 0.05 * var(--maxwidthlimit) ); } .t-45vw { font-size: calc( 0.045 * var(--maxwidthlimit) ); } .t-4vw { font-size: calc( 0.04 * var(--maxwidthlimit) ); } .t-35vw { font-size: calc( 0.035 * var(--maxwidthlimit) ); } .t-3vw { font-size: calc( 0.03 * var(--maxwidthlimit) ); } .t-25vw { font-size: calc( 0.025 * var(--maxwidthlimit) ); } .t-2vw { font-size: calc( 0.02 * var(--maxwidthlimit) ); } .t-15vw { font-size: calc( 0.015 * var(--maxwidthlimit) ); } .t-1vw { font-size: calc( 0.01 * var(--maxwidthlimit) ); } .t-05vw { font-size: calc( 0.005 * var(--maxwidthlimit) ); } /* Gewicht */ b, strong { font-weight:600; } .t-w900, .t-black { font-weight:900; } .t-w800, .t-extrabold { font-weight:800; } .t-w700, .t-bold { font-weight:700; } .t-w600, .t-semibold { font-weight:600; } .t-w500, .t-medium { font-weight:500; } .t-w400, .t-regular { font-weight:400; } .t-w300, .t-light { font-weight:300; } .t-w200, .t-extralight { font-weight:200; } .t-w100, .t-thin { font-weight:100; } /* style */ i, em { font-style:italic; } .t-italic { font-style:italic; } mark { background-color:var(--color-site); color:var(--color-weiss); padding:0.1em 0.666em; border-radius:5em; box-decoration-break:clone; } :is(h1, h2, h3, h4, h5, h6):has(mark) { line-height:1.666; } u { text-decoration-line:underline; text-decoration-color:var(--color-rot); text-decoration-thickness:0.15em; text-decoration-skip-ink:all; text-underline-offset:0.2em; } /* case */ .t-normalcase { text-transform:initial; } .t-lowercase { text-transform:lowercase; } .t-uppercase { text-transform:uppercase; letter-spacing:0.075em; } /*Todo: Opentype?*/ /* Farbe */ .t-rot-2 { color: var(--color-rot-2) !important; } .t-rot-1 { color: var(--color-rot-1) !important; } .t-rot { color: var(--color-rot) !important; } .t-rot--1 { color: var(--color-rot--1) !important; } .t-rot--2 { color: var(--color-rot--2) !important; } .t-orange-2 { color: var(--color-orange-2) !important; } .t-orange-1 { color: var(--color-orange-1) !important; } .t-orange { color: var(--color-orange) !important; } .t-orange--1 { color: var(--color-orange--1) !important; } .t-orange--2 { color: var(--color-orange--2) !important; } .t-gelb-2 { color: var(--color-gelb-2) !important; } .t-gelb-1 { color: var(--color-gelb-1) !important; } .t-gelb { color: var(--color-gelb) !important; } .t-gelb--1 { color: var(--color-gelb--1) !important; } .t-gelb--2 { color: var(--color-gelb--2) !important; } .t-gruen-2 { color: var(--color-gruen-2) !important; } .t-gruen-1 { color: var(--color-gruen-1) !important; } .t-gruen { color: var(--color-gruen) !important; } .t-gruen--1 { color: var(--color-gruen--1) !important; } .t-gruen--2 { color: var(--color-gruen--2) !important; } .t-tuerkis-2 { color: var(--color-tuerkis-2) !important; } .t-tuerkis-1 { color: var(--color-tuerkis-1) !important; } .t-tuerkis { color: var(--color-tuerkis) !important; } .t-tuerkis--1 { color: var(--color-tuerkis--1) !important; } .t-tuerkis--2 { color: var(--color-tuerkis--2) !important; } .t-blau-2 { color: var(--color-blau-2) !important; } .t-blau-1 { color: var(--color-blau-1) !important; } .t-blau { color: var(--color-blau) !important; } .t-blau--1 { color: var(--color-blau--1) !important; } .t-blau--2 { color: var(--color-blau--2) !important; } .t-violett-2 { color: var(--color-violett-2) !important; } .t-violett-1 { color: var(--color-violett-1) !important; } .t-violett { color: var(--color-violett) !important; } .t-violett--1 { color: var(--color-violett--1) !important; } .t-violett--2 { color: var(--color-violett--2) !important; } .t-lila-2 { color: var(--color-lila-2) !important; } .t-lila-1 { color: var(--color-lila-1) !important; } .t-lila { color: var(--color-lila) !important; } .t-lila--1 { color: var(--color-lila--1) !important; } .t-lila--2 { color: var(--color-lila--2) !important; } .t-weiss { color: var(--color-weiss) !important; } .t-grau-3 { color: var(--color-grau-3) !important; } .t-grau-2 { color: var(--color-grau-2) !important; } .t-grau-1 { color: var(--color-grau-1) !important; } .t-grau { color: var(--color-grau) !important; } .t-grau--1 { color: var(--color-grau--1) !important; } .t-grau--2 { color: var(--color-grau--2) !important; } .t-grau--3 { color: var(--color-grau--3) !important; } .t-schwarz { color: var(--color-schwarz) !important; } .t-sitecolor { color: var(--color-site) !important; } .t-pagecolor { color: var(--color-page) !important; } .t-K4, .t-k4 { color: var(--color-K4) !important; } .t-linear-rot { background-image: linear-gradient(90deg, var(--color-rot) 0%, var(--color-rot--2) 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-orange { background-image: linear-gradient(90deg, var(--color-orange) 0%, var(--color-orange--2) 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-gelb { background-image: linear-gradient(90deg, var(--color-gelb) 0%, var(--color-gelb--2) 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-gruen { background-image: linear-gradient(90deg, var(--color-gruen) 0%, var(--color-gruen--2) 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-tuerkis { background-image: linear-gradient(90deg, var(--color-tuerkis) 0%, var(--color-tuerkis--2) 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-blau { background-image: linear-gradient(90deg, var(--color-blau) 0%, var(--color-blau--2) 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-violett { background-image: linear-gradient(90deg, var(--color-violett) 0%, var(--color-violett--2) 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-lila { background-image: linear-gradient(90deg, var(--color-lila) 0%, var(--color-lila--2) 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-grau { background-image: linear-gradient(90deg, var(--color-grau) 0%, var(--color-grau--2) 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Schatten */ .t-shadow-1 { text-shadow: 0px 10px 25px rgba(0,0,0,0.33), 0px 1px 4px rgba(255,255,255,0.90); } .t-shadow-2 { text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8), 0px 6px 12px rgba(0, 0, 0, 0.4), 0px 12px 24px rgba(0, 0, 0, 0.2); } .t-shadow-3 { text-shadow: 0px 10px 5px rgba(0, 0, 0, 0.1), 5px 15px 5px rgba(0, 0, 0, 0.05), -5px 15px 5px rgba(0, 0, 0, 0.05); } .t-shadow-3D { text-shadow: 0px 4px 0px var(--color-grau), 2px 14px 10px rgba(0,0,0,0.15), 2px 24px 4px rgba(0,0,0,0.1), 2px 24px 30px rgba(0,0,0,0.1); } .t-shadow-emboss { text-shadow: 2px 4px 8px rgba(0,0,0,0.2), 0px -5px 14px rgba(255,255,255,0.5); } /* Marker-Effekt - braucht ein parent, weil das * zwingend inline sein muss, und col flex sind und dessen kinder kein inline sein können */ /* NEU jetzt mit -Tag, viel eleganter .t-marker > * { display: inline; align-self:center; padding:0.125ch 0.5ch; line-height:1.66; background-color:var(--color-page); -webkit-box-decoration-break:clone; box-decoration-break:clone; } */ /* BASIS – UI-Elemente */ /* BASIS – UI-Elemente */ /* BASIS – UI-Elemente */ /* icon */ .icon { --icon-height: 2rem; background-color:var(--color-grau--1); border-radius:20%; aspect-ratio:1/1; height:var(--icon-height); } .icon-height-auto { --icon-height:auto; } /* number: details testen! */ .number { display:grid; place-items:center; /*border-radius:20%;*/ aspect-ratio:1/1; height:var(--icon-height); /*gemeinsame Variable intern*/ font-weight:600; } /*ausbauen?*/ .number-1, .icon-1 { --icon-height:1rem; } .number-15, .icon-15 { --icon-height:1.5rem; } .number-2, .icon-2 { --icon-height:2rem; } .number-25, .icon-25 { --icon-height:2.5rem; } .number-3, .icon-3 { --icon-height:3rem; } .number-4, .icon-4 { --icon-height:4rem; } .number-5, .icon-5 { --icon-height:5rem; } .number-6, .icon-6 { --icon-height:6rem; } /* button */ .button, input.button, button { cursor:var(--cursor-pointer); display:block; width:fit-content; padding:0.5em 1em; text-align:center; text-decoration:none; text-transform:uppercase; letter-spacing:0.05em; font-weight:500; font-size:calc( var(--font-factor) * clamp(0.85rem, 1vw, 1rem) ); /* animation: anibuttonreverse 0.1666s 1 ease-in-out; animation-fill-mode: forwards; */ } /*.button:hover, input.button:hover, button:hover { animation:anibutton 0.1666s 1 ease-in-out; animation-fill-mode: forwards; }*/ .button.animation-stop:hover, input.button.animation-stop:hover, button.animation-stop:hover { animation:none !important; animation-fill-mode: none !important; } .button-100, .button-fullwidth { width:100%; } @media (max-width:767px) { .button-s-100 { width:100%; } } .button-arrow { display: flex; align-items: center; gap: 0.66em; } .button-arrow::after { content: ""; width: 1em; height: 1em; background-image: url('../img/arr-upright-orange.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; } .button-arrow-upright::after { background-image: url('../img/arr-upright-orange.svg'); } .button-arrow-down::after { background-image: url('../img/arr-down-orange.svg'); } .button-arrow-upright.button-arrow-blau::after { background-image: url('../img/arr-upright-blau.svg'); } /* alte animation, bei zfx eingesetzt, zu spezifisch. @keyframes anibutton { 0% { transform:scaleX(1) scaleY(1) ; } 50% { transform:scaleX(1.05) scaleY(1) ; } 100% { transform:scaleX(1.1) scaleY(1.1) ; } } @keyframes anibuttonreverse { 0% { transform:scaleX(1.1) scaleY(1.1) ; } 50% { transform:scaleX(1.05) scaleY(0.8) ; } 100% { transform:scaleX(1) scaleY(1) ; } } */ /*TODO: der muss weg, stattdessen mit bg-texture oder sowas verallgemeinern! */ .button-color { background-image: url('/img/button-hg.jpg'); background-repeat: no-repeat; background-position: center; background-size:cover; color: white !important; } /*2026 Download-Element */ .downloads { display:flex; flex-direction:column; gap:0; text-wrap:balance; } .downloads .download { border-bottom:1px solid var(--color-grau); padding: 0.5rem 0.25rem; display:flex; flex-direction:row; justify-content:start; gap:0.5rem; align-items:center; } .downloads .download:before { content:""; background-image:url('../img/arr-left-orange.svg'); background-repeat:no-repeat; background-size:100% auto; width:1.5rem; aspect-ratio:1/1; transform:rotate(0deg); transition:all 0.25s ease-in-out; } .downloads .download:hover:before { transform:rotate(-45deg); } .downloads .download .annotation { font-size:0.8rem; margin-left:auto; } @media (max-width:767px) { .downloads .download { display:grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "arrow first" "arrow second" "arrow third"; } .downloads .download:before { grid-area:arrow; } .downloads .download .annotation { font-size:0.8rem; margin-left:0; } } /*TODO: wo gehört das hin? */ .reveal .reveal-show { z-index:1; opacity:0; transition:opacity 0.5s ease-out; } .reveal .reveal-hide { transition:opacity 0.125s ease-out; } .reveal:hover .reveal-show { opacity:1; } .reveal:hover .reveal-hide { opacity:0; } /* formulare */ /* TODO: reihenfolgen sortieren? form-float dokumentieren*/ /*TODO - prototyp für pseudo-fieldset. braucht ein
label, .form-float > input, .form-float > textarea { grid-row: 1 / -1; grid-column: 1 / -1; } .form-float label { position:relative; z-index:2; height:3.5rem; width:fit-content; padding:0.5rem 1rem; pointer-events:none; font-style:italic; transition:var(--base-transition); opacity:0.75; transform-origin: top left; display:grid; place-items:center left; } .form-float input:focus ~ label, .form-float input:not(:placeholder-shown) ~ label, .form-float textarea:focus ~ label, .form-float textarea:not(:placeholder-shown) ~ label { opacity:0.5; transform: scale(0.65); padding:0 calc( 1 / 0.65 * 1rem ) !important; height:2rem; } .form-check { display:grid; grid-template-columns: auto 1fr; place-items: center left; --ck-gap: 0.25em; --ck-size: 1.5em; grid-gap: var(--ck-gap); } .form-check-row { display:flex; } .form-check-cols { --ck-n: 4; grid-template-columns: repeat(auto-fit, var(--ck-size) calc( 100% / var(--ck-n) - var(--ck-gap) / var(--ck-n) * (var(--ck-n) - 1) - var(--ck-gap) - var(--ck-size) ) ); /* X Spalten, label-breiten vermindert um alle check- und gap-breiten ... hurra. */ } .form-check-cols-1 { --ck-n: 1; } .form-check-cols-2 { --ck-n: 2; } .form-check-cols-3 { --ck-n: 3; } .form-check-cols-4 { --ck-n: 4; } .form-check-cols-5 { --ck-n: 5; } .form-check-cols-6 { --ck-n: 6; } .form-check-cols-7 { --ck-n: 7; } .form-check-cols-8 { --ck-n: 8; } .form-check-cols label { width:100%; } .form-check label { cursor:var(--cursor-pointer); text-wrap:balance; padding-right:1rem; } .form-check input[type="checkbox"], .form-check input[type="radio"] { width:var(--ck-size); height:var(--ck-size); margin:0; accent-color:var(--color-site); } /* 2026 KI-gemini select mit css */ /* 1. Opt-in in den anpassbaren Modus */ select, ::picker(select) { appearance: base-select; } /* 2. Formatierung des sichtbaren Buttons */ select { padding:0.5rem 1rem; border: none; border-radius:0; background-color: var(--color-weiss); color:var(--color-schwarz); width: 100%; height:3.5rem; font-weight:300; font-family: var(--font-text); font-style:italic; text-transform:none !important; display: flex; /* Stellt sicher, dass das Flex-Modell greift */ align-items: center; /* Zentriert Text und Icon vertikal */ } /* 3. Drehung des Pfeils bei geöffnetem Menü */ select::picker-icon { content: url('../img/arr-upright-blau.svg'); width: 1rem; height: 1rem; transform-origin: center center; /* Verhindert ein "Springen" beim Drehen */ transform:rotate(135deg); transition:var(--base-transition); } select:open::picker-icon { transform:rotate(-45deg); } select button { text-transform:none; letter-spacing:0; font-weight:300; font-style:normal; padding:0; } /* 4. Formatierung des ausgeklappten Menüs (Container) */ ::picker(select) { position-area: bottom; padding:0rem; border: none; background-color: #ffffff; box-shadow: 0 4px 12px green; } /* 5. Formatierung der einzelnen Optionen */ option { padding:0.5rem 1rem; border: none; cursor: pointer; font-weight:300; font-family: var(--font-text); } /* 6. Hover- und Auswahl-Zustände */ option:hover { background-color: var(--color-grau-2); } option:checked { background-color: var(--color-orange); color: white; } /* 7. Formatierung des Auswahl-Häkchens */ option::checkmark { color: white; } .errortext { color: var(--color-site); font-weight: 500; font-size: 0.8em; height: 0; /* Geändert von max-height: 0px */ opacity: 0; overflow: hidden; transition: all 0.5s ease-in-out; } .errortext.show { height: auto; /* Geändert von max-height: 25px */ opacity: 1; } /* cards card grid subgrid */ .subgrid { --span: 3; /* kombiniert mit .grid.cards und .col.card --> das meiste wird hier komplett überflüssig. mal deaktivieren und schauen */ /* display:grid; grid-auto-rows:auto; grid-template-rows: auto auto auto auto; grid-template-columns:repeat(var(--repeat), minmax(0, 1fr)); gap:2rem; */ } .subgrid-span-1 { --span: 1; } .subgrid-span-2 { --span: 2; } .subgrid-span-3 { --span: 3; } .subgrid-span-4 { --span: 4; } .subgrid-span-5 { --span: 5; } .subgrid-span-6 { --span: 6; } .subgrid-span-7 { --span: 7; } .subgrid-span-8 { --span: 8; } .subgrid-span-9 { --span: 9; } .subgrid-span-10 { --span: 10; } .subgrid-span-11 { --span: 11; } .subgrid-span-12 { --span: 12; } .subgrid .col { grid-row: span var(--span); display:grid; gap:0rem; /*grid-auto-flow:column;*/ /*nicht notwendig?*/ grid-template-rows: subgrid; } /* störer stopper */ /* todo: details prüfen und verbessern! */ .stopper { position:absolute; z-index:2; right:0px; top:0px; transform:translateY(-20%) translateX(15%) rotate(-7deg) scale(var(--hover-scale, 1)); /* wenn col schon ein hover-xx scale hat, dann setzt sich der scale hier weiter fort. sonst 1 */ width:fit-content; height:auto; aspect-ratio:1/1; padding:0.5rem; display:grid; place-items:center; } .col:has(.stopper) { /* sonst kein Überhang an a.col ... unschön gelöst. */ overflow:visible; } /* akkordeon */ /*.accordion { }*/ .accordion-item { border-bottom:1px solid var(--color-grau); } .accordion-item:last-child { border-bottom:0px solid var(--color-grau); } .accordion-head { cursor:var(--cursor-pointer); text-align: left; border-top: 1px solid var(--color-grau-1); display:flex; gap:1rem; justify-content:start; align-items: center; transition:var(--base-transition); } .accordion-head:first-child { border-top: none; } .accordion-head::before { content:""; background: url('../img/arr-upright-orange.svg') no-repeat center; background-size:100% auto; height:1rem; aspect-ratio:1; flex-shrink:0; align-self:flex-start; transform:translateY(0.2em) rotate(45deg); filter:saturate(0); transition:var(--base-transition); } .accordion-head:not(.collapsed) { color:var(--color-orange); } .accordion-head:not(.collapsed)::before { transform:translateY(0.2em) rotate(0deg); filter:saturate(1); } .accordion-body, .accordion-head { padding:1rem 0.5rem; /* TODO: gap / gapratio sauber für accordions implementieren, das funktioniert noch nicht. Analog Tables? */ } .accordion-body { padding-top:0px; padding-bottom:1rem; display:none; padding-left:2.5rem; text-wrap:balance; } /* tabs */ .tabs { --border:2px; position:relative; } .tabs-border-0 { --border:0px; } .tabs-border-1 { --border:1px; } .tabs-border-2 { --border:2px; } .tabs-border-3 { --border:3px; } .tabs-border-4 { --border:4px; } .tabs-head { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom: calc(var(--border) * -1); position:relative; z-index:2; } .tabs-head .tab-button { cursor:var(--cursor-pointer); border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; border-width: var(--border); border-style: solid; border-color: var(--color-grau-1); /*border-bottom-width: var(--border);*/ /*margin-top:var(--border);*/ box-shadow:inset 0 -5px 10px -10px black; box-shadow:none; transition:all 0.1s ease-in-out; color:var(--color-grau); } .tabs-head .tab-button-aktiv { border-width: var(--border); border-style: solid; color:var(--color-orange); border-color: var(--color-orange); /*border-bottom-width: 0;*/ margin-top: 0; box-shadow:none; } .tabs-body { border-top-left-radius:0 !important; border-style: solid; /*border-width: var(--border);*/ position:relative; z-index:1; } .tabs-body .tab-content { overflow:hidden; } .tabs-body .tab-content-aktiv { height:auto; } /* neues Dropdown - viel flexibler */ .dropdown { --drop-height: 2rem; --drop-padding: 0.5rem; --drop-transition: var(--base-transition); --drop-border:1.5px; --drop-border-color:var(--color-transparent); --drop-radius: calc( var(--drop-height) / 2 + var(--drop-border) ); --drop-background: var(--color-transparent); height:calc( var(--drop-height) + 2 * var(--drop-border) ); overflow:visible; cursor:var(--cursor-pointer); width:100%; /* so breit wie col, aber wenn col-auto oder kein col-xxx, so breit wie Inhalt */ } .dropdowninner { /* für durchgehenden rahmen inkl radius und clip für radius und shadow */ border:var(--drop-border) solid var(--drop-border-color); border-radius:var(--drop-radius); overflow:clip; } .drophead { background-color:var(--drop-background); overflow: hidden; height: var(--drop-height); padding:0; display:grid; grid-template-columns: 1fr var(--drop-height); place-items: center left; } .drophead > div { padding:0 calc( var(--drop-padding) * 0.75 ) 0 var(--drop-padding); } .drophead:after { display:none !important; content:""; background-image:url('img/k4_arrdown-b.svg'); background-size:60% auto; background-repeat:no-repeat; background-position:35% 55%; border-left:var(--drop-border) solid black; height:100%; aspect-ratio:1; display:grid; place-items:center; transition: var(--drop-transition); } ul.droplist { transition: var(--drop-transition); background-color:var(--drop-background); position:relative; z-index:2; list-style-type: none; padding: 0; } ul.droplist > li { display:grid; place-items:stretch; } ul.droplist > li > a { padding:0 0 0 var(--drop-padding); height:0; /*height: var(--drop-height);*/ overflow: hidden; transition: var(--drop-transition); display:grid; grid-template-columns: 1fr calc( var(--drop-padding) + var(--drop-height) ); /* hält rechts den Abstand frei, den auch der Drop-Pfeil braucht. */ grid-template-rows: 1fr 0; /* bold-kompensierung */ place-items: center left; grid-template-areas: ". padding" "bolding ."; } ul.droplist > li > a:after { grid-area:bolding; content: attr(data-text); content: attr(data-text)/""; height: 0; visibility: hidden; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; font-weight:700; } ul.droplist > li.aktiv > a { font-weight:700; color:var(--color-page); } /*hover-aufklappen*/ .dropdown:hover { --drop-background:var(--color-weiss); --drop-border:1.5px; --drop-border-color:var(--color-orange); } .dropdown:hover .drophead:after { border-left-color:var(--drop-background); } .dropdown:hover ul.droplist { padding: 0 0 0.25rem 0; } .dropdown:hover a, .dropdown:hover ul.droplist li:after { height: var(--drop-height); } /*hover-menüpunkte*/ .droplist > li > a:hover { background-color:var(--color-grau-2); } /* UI-LAYOUTGRUPPEN neuer Aufbau 2024 */ /* UI-LAYOUTGRUPPEN neuer Aufbau 2024 */ /* UI-LAYOUTGRUPPEN neuer Aufbau 2024 */ /* Swiper pauschal einbetten */ .row:has(> .swiper) { overflow:hidden; } .swiper { width:100% !important; } /* experiment ... braucht eine Breitenangabe für die Berechnung nach innen. geht das so pauschal für alle swiper, oder einzeln? sonst hier wieder weg!*/ /* Swiper: pauschal nicht benötigte Navigationspfeile deaktivieren */ .swiper-button-disabled { opacity:0.2; pointer-events:none; } .swiper-button-hidden { opacity:0; pointer-events:none; } /* Swiper-Variante: Marquee Endlosdurchlauf */ /*.swiper.swiper-marquee { }*/ .swiper.swiper-marquee .swiper-wrapper { transition-timing-function: linear !important; } /* durchgehendes scrollen ohne anhalten */ /* Swiper-Variante: Pfeilnavigation links/rechts mit grid-platzierung der Pfeile, auch responsive */ .swiper-arrow-grid { display:grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; grid-template-areas: "prev slider next"; } @media (max-width:1023px) { .swiper-arrow-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 4rem; grid-template-areas: "slider slider" "prev next"; } } @media (min-width: 1024px) { .swiper-arrow-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "slider"; } .swiper-arrow-prev, .swiper-arrow-next { display: none !important; } } .swiper-arrow { grid-area:slider; width:100%; } .swiper-arrow-next { grid-area:next; } .swiper-arrow-prev { grid-area:prev; } .swiper-arrow-next, .swiper-arrow-prev { display:grid; grid-template: 1fr / 1fr; place-items:center; cursor:var(--cursor-pointer); } .swiper-arrow-next img, .swiper-arrow-prev img { max-width:none; filter:none; /*undo swiper*/ width:3rem; aspect-ratio:1; transform:rotate(90deg); } .swiper-arrow-next img { transform:rotate(-90deg); } .swiper-arrow-next::after, .swiper-arrow-prev::after { content: none; } /* Swiper-Variante: Pfeilnavigation mit Skalierung. todo: script-Part sauber trennen! */ .swiper-arrow-hero .swiper-slide { transform:scale(0.7); transition:transform 0.25s ease-in-out; } .swiper-arrow-hero .swiper-slide-active { z-index:2; transform:scale(1); } .swiper-arrow-hero .swiper-slide-prev, .swiper-arrow-hero .swiper-slide-next { z-index:1; transform:scale(0.8); } /* Swiper-Variante: Button-Navigation zum durchklicken */ .swiper-navigation-group { overflow-x:hidden; } .swiper-navigation { width:100%; overflow:hidden; } /*.swiper-navigation-button {}*/ .swiper-navigation-button.aktiv { background-color:var(--color-weiss); } /* sidebar */ body:has(.sidebar) { /* body einrücken wenn sidebar vorhanden */ --sidebar-nav: 40px; --sidebar-content: min(360px, calc( 100vw - var(--sidebar-nav) ) ); margin-left:var(--sidebar-nav); } .sidebar { --sidebar-width:calc(var(--sidebar-nav) + var(--sidebar-content)); z-index: 2000; position: fixed; top: 0; bottom: 0; left: 0; width: min( var(--sidebar-width), 100vw); transform: translateX(calc( -1 * var(--sidebar-content) )); /*margin-left: calc( -1 * var(--sidebar-content) );*/ overflow:hidden; transition: var(--base-transition); box-shadow:0px 0px 15px rgba(0,0,0,0.33); } .sidebar.sidebar-aktiv { transform: translateX(0px); /*margin-left:0px;*/ } .sidebar:not(.sidebar-aktiv):hover { transform: translateX(calc( -1 * var(--sidebar-content) + 5px )); /*margin-left: calc( -1 * var(--sidebar-content) + 5px );*/ } .sidebar-nav { width:var(--sidebar-nav) !important; flex-shrink:0; } .sidebar-content { width:var(--sidebar-content) !important; } .sidebar .col.sidebar-open { cursor:var(--cursor-pointer); transition: var(--base-transition); display:grid; grid-template: 1fr / 1fr; place-items:center; } .sidebar .col.sidebar-open:after { content:""; background-image: url('img/k4_arrdown-b.svg'); background-repeat: no-repeat; background-position: center; background-size:100% auto; width:100%; aspect-ratio:1; transform:rotate(-90deg); transition:var(--base-transition); } .sidebar-aktiv .col.sidebar-open { background-color:var(--color-grau-1); } .sidebar-aktiv .col.sidebar-open:after { transform:rotate(-90deg) scaleY(-1); } .sidebar:not(.sidebar-aktiv):hover .col.sidebar-open:after, .sidebar.sidebar-aktiv .col.sidebar-open:hover:after { background-size:120% auto; } .sidebar-backdrop { display:none; position:fixed; top:0; left:0; z-index:1000; width:100vw; height:100vh; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(10px); } /* Lightbox Stage */ #stage { display:grid; opacity:0; /*wegen jquery show muss das hier auf grid sein damit show/hide passt. beim Start per script verstecken über opacity*/ position:fixed; top:0; bottom:0; left:0; right:0; z-index:1000; background-color:rgba(0,0,0,0.5); backdrop-filter:blur(33px); grid-template: max(5vw, 3rem) 1fr max(5vw, 3rem) / max(5vw, 3rem) 1fr max(5vw, 3rem); grid-template-areas: ". . close" ". inner ." ". . ."; } .stage-close { grid-area:close; width:min(80%, 3rem); aspect-ratio:1; place-self: center; background-color:var(--color-weiss); border-radius:50%; display:grid; place-items:center; transition:var(--base-transition); cursor:var(--cursor-pointer); } .stage-close:hover { transform:scale(1.1); } .stage-close:after { content:"×"; font-size:2rem; line-height:1; } .stage-content { /* lokaler Inhalt, versteckt, wir dann in #stage stage-content geklont */ display:none; } #stage .stage-content { display:block; grid-area:inner; background:white; overflow:hidden; } /* LAYOUTGRUPPEN für Grafik / Animation */ /* TODO: sichten, kategorisieren, aufräumen, ist doch projektspezifisch, enstanden bei Zfx */ /* TODO: sichten, kategorisieren, aufräumen, ist doch projektspezifisch, enstanden bei Zfx */ .headlinegroup { /* kombi aus h1 und h2, für Animation von beiden gemeinsam*/ display:grid; place-content:center center; text-transform:uppercase; font-style:italic; } .headlinegroup h2 { transform:translateX(min(5vw, 80px)); } .textgroup { display:grid; height: 100%; place-content: center; font-kerning: normal; text-shadow: 0 3px 15px rgba(0,0,0,0.7); text-transform:uppercase; line-height:0.9; font-family:var(--font-head); letter-spacing:0.2em; font-weight:700; font-style:italic; } .textgroup .text1, .textgroup .text3 { color:white; font-size:clamp(1.15rem,3.333vw,4rem); font-weight:600; } .textgroup .text1 { margin-left:2em; } .textgroup .text2 { color:var(--color-page); font-size:clamp(2.5rem,10vw,12rem); margin-top:-0.5vw; } .textgroup .text3 { margin-right:2em; text-align:right; } .factsandfigures .big { font-style:italic; font-size:clamp(1.7rem, 2.5vw, 2.3rem); color:var(--color-1hell); font-weight:500; } .factsandfigures .big img { max-width:40%; margin:0 auto; } .factsandfigures .medium { font-style:italic; font-size:clamp(1.2rem, 1.66vw, 1.4rem); font-weight:500; margin-top:-0.33em; margin-bottom:0.33em; } .factsandfigures .small { margin-top:auto; font-size:clamp(0.7rem,2vw,1rem); } /* startbereich */ /*TODO: das ist zfx / hannes hagen ... aufräumen */ .startgroup { display:grid; grid-template: 1fr / 1fr; place-items:center center; overflow:hidden; } .startgroup img { grid-column: 1 / -1; grid-row: 1 / -1; } .startlogo { grid-column: 1 / -1; grid-row: 1 / -1; z-index:100; place-self: start end; width: auto !important; height: 100%; } /* bgvideos headervideos */ /* bgvideos headervideos */ /* TODO: das ist alt aus zfx ... vermutlich besser weg und wenn dann nochmal frisch machen? */ .videobox { position: fixed; z-index:-1; top:0px; left:0px; width: 100vw; max-height: 100vh; overflow:hidden; } .bgvideo { width: 100vw; height: 100vh; object-fit:cover; } .bgvideocanvas { width: 100vw; height: auto; aspect-ratio:1/1; object-fit:cover; } @media (max-width:767px) { .videobox { width: 100vw; max-height: 100vw; margin-top:140px !important; } .bgvideo { width: 100vw; height: 100vw; object-fit:cover; /* könnte contain sein wenn quadratisches video */ } .headertextgroup { margin-top:140px; } .headertextgroup .stack { width:100vw !important; height:100vw !important; min-height:auto !important; max-height:auto !important; } } .flyin { width:clamp(370px, 40vw, 800px) !important; border:2px solid var(--color-page); border-right-width:0px; background-color:var(--color-grau--1); border-radius:5px 0 0 5px; } /* NAV Sonderformate */ /* NAV Sonderformate */ /* NAV Sonderformate */ .navsection { /* height:var(--navheight); */ background-color:transparent; transition:background-color 0.125s ease-out; z-index:20 !important; /* hacky, damit .fixed flexibler verwendet werden kann, das hat üblicherweise z-index:1 */ } @media (max-width:1023px) { .navsection { background-color:var(--color-weiss); } } ul.menu { list-style-type: none; padding: 0; margin: 0; height:100%; display:flex; gap:clamp(1rem,2vw,2rem); align-items:stretch; } .menumobile { display:none; } /* @media (max-width:1279px) { ul.menu { } .menumobile { } } */ ul.menu li { display: block; text-align:center; font-family:var(--font-text); font-weight:500; font-size:clamp(0.8rem, 0.7vw, 1rem) !important; line-height:1.2; } ul.menu a { display: block; height:100%; font-weight:400; text-transform:uppercase; letter-spacing:0.1em; text-decoration: none; transition:all 0.25s ease; display:flex; align-items:center; } ul.menu a:hover { transform:scale(1.1); } ul.menu li.aktiv a { font-weight:700; color:var(--color-page); } /* sichten, kategorisieren, aufräumen, ist doch projektspezifisch, enstanden bei Zfx */ /* sichten, kategorisieren, aufräumen, ist doch projektspezifisch, enstanden bei Zfx */ /* sichten, kategorisieren, aufräumen, ist doch projektspezifisch, enstanden bei Zfx */ /* sichten, kategorisieren, aufräumen, ist doch projektspezifisch, enstanden bei Zfx */ /* BASIS – Layoutsystem Abschnitte, Zeilen, Grid, Spalten */ /* BASIS – Layoutsystem Abschnitte, Zeilen, Grid, Spalten */ /* BASIS – Layoutsystem Abschnitte, Zeilen, Grid, Spalten */ /* große Seitenabschnitte */ section { display:grid; /* ist kein echtes grid, nur für Ausrichtung innerhalb einer Section in Spezialfällen, z.B. bei 100vw 100vh-Sections */ justify-items:center; /* zentriert dann seine .row- oder .grid-Kind */ width:100%; /* haben immer volle Breite, für Hintergrundfarbstreifen. Breitenlimit kommt in der Regel über row / grid-Breiten. war vh, aber jetzt % wegen sidebar die im body außerhalb der sections hängt */ overflow-x:clip; scroll-margin:var(--navheight); } .stack { /* am besten angewendet auf
-Elemente, die dann in sich row oder grid stapeln statt untereinander positionieren. Ausbauen zu Responsive-Auflösung des stacks, bisher mit .s-block gemacht, aber block ist nicht unbedingt gut. */ display:grid !important; grid-template: 1fr / 1fr; grid-template-areas: "stack"; } .stack > * { /* zwingt alle direkten Child-Elemente in eine einzelne Zelle als Z-index-Stapel, und gleicht deren Größen aneinander an, das größte Child-Element bestimmt. außer das child hat eine andere größe, z.b. row-80 ... */ grid-area: stack; width: 100%; height: 100%; } /*hebt stack wieder auf ... TODO: geht davon aus dass das eine row war und jetzt flex-column richtig ist. geht das zurück zum Urpsrung, inherit? dann könnte undo auch auf grid oder col gesetzt werden. */ .nostack { display: flex !important; flex-direction:column; } /* @media (max-width:1365px) { .xl-nostack { display: flex !important; flex-direction:column; } } @media (max-width:1279px) { .l-nostack { display: flex !important; flex-direction:column; } } @media (max-width:1023px) { .m-nostack { display: flex !important; flex-direction:column; } } @media (max-width:767px) { .s-nostack { display: flex !important; flex-direction:column; } } @media (max-width:479px) { .xs-nostack { display: flex !important; flex-direction:column; } } */ @media (max-width:1365px) { .xl-nostack { display: inherit !important; } } @media (max-width:1279px) { .l-nostack { display: inherit !important; } } @media (max-width:1023px) { .m-nostack { display: inherit !important; } } @media (max-width:767px) { .s-nostack { display: inherit !important; } } @media (max-width:479px) { .xs-nostack { display: inherit !important; } } /*faktoren für row und grid gleichermaßen*/ .fullheight { height:100%; } .fullwidth { --maxwidth: calc(100vw - var(--sidebar-nav,0px) ); padding-left: 0; padding-right: 0;} .maxwidth { --maxwidth:var(--maxwidthlimit); } .gap-0 { --gapfactor: 0; } .gap-05 { --gapfactor: 0.5; } .gap-1 { --gapfactor: 1; } .gap-2 { --gapfactor: 2; } .gap-3 { --gapfactor: 3; } .gap-4 { --gapfactor: 4; } .gap-5 { --gapfactor: 5; } .gap-6 { --gapfactor: 6; } .gap-7 { --gapfactor: 7; } .gap-8 { --gapfactor: 8; } @media (max-width:1365px) { .gap-xl-0 { --gapfactor: 0; } .gap-xl-1 { --gapfactor: 1; } .gap-xl-2 { --gapfactor: 2; } .gap-xl-3 { --gapfactor: 3; } .gap-xl-4 { --gapfactor: 4; } .gap-xl-5 { --gapfactor: 5; } .gap-xl-6 { --gapfactor: 6; } .gap-xl-7 { --gapfactor: 7; } .gap-xl-8 { --gapfactor: 8; } } @media (max-width:1279px) { .gap-l-0 { --gapfactor: 0; } .gap-l-1 { --gapfactor: 1; } .gap-l-2 { --gapfactor: 2; } .gap-l-3 { --gapfactor: 3; } .gap-l-4 { --gapfactor: 4; } .gap-l-5 { --gapfactor: 5; } .gap-l-6 { --gapfactor: 6; } .gap-l-7 { --gapfactor: 7; } .gap-l-8 { --gapfactor: 8; } } @media (max-width:1023px) { .gap-m-0 { --gapfactor: 0; } .gap-m-1 { --gapfactor: 1; } .gap-m-2 { --gapfactor: 2; } .gap-m-3 { --gapfactor: 3; } .gap-m-4 { --gapfactor: 4; } .gap-m-5 { --gapfactor: 5; } .gap-m-6 { --gapfactor: 6; } .gap-m-7 { --gapfactor: 7; } .gap-m-8 { --gapfactor: 8; } } @media (max-width:767px) { .gap-s-0 { --gapfactor: 0; } .gap-s-1 { --gapfactor: 1; } .gap-s-2 { --gapfactor: 2; } .gap-s-3 { --gapfactor: 3; } .gap-s-4 { --gapfactor: 4; } .gap-s-5 { --gapfactor: 5; } .gap-s-6 { --gapfactor: 6; } .gap-s-7 { --gapfactor: 7; } .gap-s-8 { --gapfactor: 8; } } @media (max-width:479px) { .gap-xs-0 { --gapfactor: 0; } .gap-xs-1 { --gapfactor: 1; } .gap-xs-2 { --gapfactor: 2; } .gap-xs-3 { --gapfactor: 3; } .gap-xs-4 { --gapfactor: 4; } .gap-xs-5 { --gapfactor: 5; } .gap-xs-6 { --gapfactor: 6; } .gap-xs-7 { --gapfactor: 7; } .gap-xs-8 { --gapfactor: 8; } } /* Zeile innerhalb einer section. hat in der Regel die maximale Breite --maxwidth. flex-layout für col-Kinder, Alternative dazu ist .grid statt .row */ /* --- ROW & GAPS NEU2026 --- */ .row { width: 100%; max-width: var(--maxwidth); display: flex; flex-wrap: wrap; align-items:stretch; justify-content:center; --gap: calc(var(--gapfactor, 2) * var(--base-gap)); gap:0 var(--gap); outline:var(--outlinewidth) dotted lightskyblue; } .row-nowrap { flex-wrap: nowrap; } .row-wrap { flex-wrap: wrap; } /* Todo: 100% bedeutet zwar 100% der section-Breite, aber das maxwidth-Limit bewirkt, dass das nicht immer durchschlägt sowie dass auf großen Bildschirmen hohe %-Werte in einer fullwidth-Row etwas anderes bedeuten wie in einer normalen row. Überlegen, ob man das mit einem Faktor auf maxwidthlimit löst statt mit %-Angaben?**/ .row-100 { width:100%; } .row-96 { width: 96%; } .row-90 { width: 90%; } .row-80 { width: 80%; } .row-70 { width: 70%; } .row-60 { width: 60%; } .row-50 { width: 50%; } .row-40 { width: 40%; } @media (max-width:1365px) { .row-xl-nowrap { flex-wrap: nowrap; } .row-xl-wrap { flex-wrap: wrap; } .row-xl-100 { width:100%; } .row-xl-96 { width: 96%; } .row-xl-90 { width: 90%; } .row-xl-80 { width: 80%; } .row-xl-70 { width: 70%; } .row-xl-60 { width: 60%; } .row-xl-50 { width: 50%; } .row-xl-40 { width: 40%; } } @media (max-width:1279px) { .row-l-nowrap { flex-wrap: nowrap; } .row-l-wrap { flex-wrap: wrap; } .row-l-100 { width:100%; } .row-l-96 { width: 96%; } .row-l-90 { width: 90%; } .row-l-80 { width: 80%; } .row-l-70 { width: 70%; } .row-l-60 { width: 60%; } .row-l-50 { width: 50%; } .row-l-40 { width: 40%; } } @media (max-width:1023px) { .row-m-nowrap { flex-wrap: nowrap; } .row-m-wrap { flex-wrap: wrap; } .row-m-100 { width:100%; } .row-m-96 { width: 96%; } .row-m-90 { width: 90%; } .row-m-80 { width: 80%; } .row-m-70 { width: 70%; } .row-m-60 { width: 60%; } .row-m-50 { width: 50%; } .row-m-40 { width: 40%; } } @media (max-width:767px) { .row-s-nowrap { flex-wrap: nowrap; } .row-s-wrap { flex-wrap: wrap; } .row-s-100 { width:100%; } .row-s-96 { width: 96%; } .row-s-90 { width: 90%; } .row-s-80 { width: 80%; } .row-s-70 { width: 70%; } .row-s-60 { width: 60%; } .row-s-50 { width: 50%; } .row-s-40 { width: 40%; } } @media (max-width:479px) { .row-xs-nowrap { flex-wrap: nowrap; } .row-xs-wrap { flex-wrap: wrap; } .row-xs-100 { width:100%; } .row-xs-96 { width: 96%; } .row-xs-90 { width: 90%; } .row-xs-80 { width: 80%; } .row-xs-70 { width: 70%; } .row-xs-60 { width: 60%; } .row-xs-50 { width: 50%; } .row-xs-40 { width: 40%; } } .row.V-top { align-items:flex-start; } .row.V-center { align-items:center; } .row.V-bottom { align-items:flex-end; align-content:flex-end; } /* beides, wegen flex-wrap */ .row.V-stretch { align-items:stretch; } .row.H-left { justify-content:flex-start; } .row.H-center { justify-content:center; } .row.H-right { justify-content:flex-end; } .row.H-between { justify-content:space-between; } .row.H-stretch > .col { flex-grow:1; } @media (max-width:1365px) { .row.V-xl-top { align-items:flex-start; } .row.V-xl-center { align-items:center; } .row.V-xl-bottom { align-items:flex-end; align-content:flex-end; } .row.V-xl-stretch { align-items:stretch; } .row.H-xl-left { justify-content:flex-start; } .row.H-xl-center { justify-content:center; } .row.H-xl-right { justify-content:flex-end; } .row.H-xl-between { justify-content:space-between; } } @media (max-width:1279px) { .row.V-l-top { align-items:flex-start; } .row.V-l-center { align-items:center; } .row.V-l-bottom { align-items:flex-end; align-content:flex-end; } .row.V-l-stretch { align-items:stretch; } .row.H-l-left { justify-content:flex-start; } .row.H-l-center { justify-content:center; } .row.H-l-right { justify-content:flex-end; } .row.H-l-between { justify-content:space-between; } } @media (max-width:1023px) { .row.V-m-top { align-items:flex-start; } .row.V-m-center { align-items:center; } .row.V-m-bottom { align-items:flex-end; align-content:flex-end; } .row.V-m-stretch { align-items:stretch; } .row.H-m-left { justify-content:flex-start; } .row.H-m-center { justify-content:center; } .row.H-m-right { justify-content:flex-end; } .row.H-m-between { justify-content:space-between; } } @media (max-width:767px) { .row.V-s-top { align-items:flex-start; } .row.V-s-center { align-items:center; } .row.V-s-bottom { align-items:flex-end; align-content:flex-end; } .row.V-s-stretch { align-items:stretch; } .row.H-s-left { justify-content:flex-start; } .row.H-s-center { justify-content:center; } .row.H-s-right { justify-content:flex-end; } .row.H-s-between { justify-content:space-between; } } @media (max-width:479px) { .row.V-xs-top { align-items:flex-start; } .row.V-xs-center { align-items:center; } .row.V-xs-bottom { align-items:flex-end; align-content:flex-end; } .row.V-xs-stretch { align-items:stretch; } .row.H-xs-left { justify-content:flex-start; } .row.H-xs-center { justify-content:center; } .row.H-xs-right { justify-content:flex-end; } .row.H-xs-between { justify-content:space-between; } } .grid { --repeat:3; width:100%; max-width:var(--maxwidth); padding-left: var(--colgap); padding-right: var(--colgap); padding-left: 0; /* neu 2026 */ padding-right: 0; display:grid; grid-template-columns:repeat(var(--repeat), minmax(0, 1fr)); /* Firefox-bug, bei nur 1fr erzeugt FF Spalten mit 2 Milliarden Pixel Breite und swiper dreht dann in Folge durch und flackert */ grid-template-rows:auto; --gap: calc(var(--gapfactor, 2) * var(--base-gap)); grid-gap:var(--gap); place-items:stretch; grid-auto-flow:row dense; } .grid-flow-row { grid-auto-flow:row dense; } .grid-flow-col { grid-auto-flow:column dense; } .grid-cols-1 { --repeat:1; } .grid-cols-2 { --repeat:2; } .grid-cols-3 { --repeat:3; } .grid-cols-4 { --repeat:4; } .grid-cols-5 { --repeat:5; } .grid-cols-6 { --repeat:6; } .grid-cols-7 { --repeat:7; } .grid-cols-8 { --repeat:8; } .grid-cols-9 { --repeat:9; } .grid-cols-10 { --repeat:10; } .grid-cols-11 { --repeat:11; } .grid-cols-12 { --repeat:12; } @media (max-width:1365px) { .grid-cols-xl-1 { --repeat:1; } .grid-cols-xl-2 { --repeat:2; } .grid-cols-xl-3 { --repeat:3; } .grid-cols-xl-4 { --repeat:4; } .grid-cols-xl-5 { --repeat:5; } .grid-cols-xl-6 { --repeat:6; } .grid-cols-xl-7 { --repeat:7; } .grid-cols-xl-8 { --repeat:8; } .grid-cols-xl-9 { --repeat:9; } .grid-cols-xl-10 { --repeat:10; } .grid-cols-xl-11 { --repeat:11; } .grid-cols-xl-12 { --repeat:12; } } @media (max-width:1279px) { .grid-cols-l-1 { --repeat:1; } .grid-cols-l-2 { --repeat:2; } .grid-cols-l-3 { --repeat:3; } .grid-cols-l-4 { --repeat:4; } .grid-cols-l-5 { --repeat:5; } .grid-cols-l-6 { --repeat:6; } .grid-cols-l-7 { --repeat:7; } .grid-cols-l-8 { --repeat:8; } .grid-cols-l-9 { --repeat:9; } .grid-cols-l-10 { --repeat:10; } .grid-cols-l-11 { --repeat:11; } .grid-cols-l-12 { --repeat:12; } } @media (max-width:1023px) { .grid-cols-m-1 { --repeat:1; } .grid-cols-m-2 { --repeat:2; } .grid-cols-m-3 { --repeat:3; } .grid-cols-m-4 { --repeat:4; } .grid-cols-m-5 { --repeat:5; } .grid-cols-m-6 { --repeat:6; } .grid-cols-m-7 { --repeat:7; } .grid-cols-m-8 { --repeat:8; } .grid-cols-m-9 { --repeat:9; } .grid-cols-m-10 { --repeat:10; } .grid-cols-m-11 { --repeat:11; } .grid-cols-m-12 { --repeat:12; } } @media (max-width:767px) { .grid-cols-s-1 { --repeat:1; } .grid-cols-s-2 { --repeat:2; } .grid-cols-s-3 { --repeat:3; } .grid-cols-s-4 { --repeat:4; } .grid-cols-s-5 { --repeat:5; } .grid-cols-s-6 { --repeat:6; } .grid-cols-s-7 { --repeat:7; } .grid-cols-s-8 { --repeat:8; } .grid-cols-s-9 { --repeat:9; } .grid-cols-s-10 { --repeat:10; } .grid-cols-s-11 { --repeat:11; } .grid-cols-s-12 { --repeat:12; } } @media (max-width:479px) { .grid-cols-xs-1 { --repeat:1; } .grid-cols-xs-2 { --repeat:2; } .grid-cols-xs-3 { --repeat:3; } .grid-cols-xs-4 { --repeat:4; } .grid-cols-xs-5 { --repeat:5; } .grid-cols-xs-6 { --repeat:6; } .grid-cols-xs-7 { --repeat:7; } .grid-cols-xs-8 { --repeat:8; } .grid-cols-xs-9 { --repeat:9; } .grid-cols-xs-10 { --repeat:10; } .grid-cols-xs-11 { --repeat:11; } .grid-cols-xs-12 { --repeat:12; } } /* Todo: 100% bedeutet zwar 100% der section-Breite, aber das maxwidth-Limit bewirkt, dass das nicht immer durchschlägt sowie dass auf großen Bildschirmen hohe %-Werte in einer fullwidth-Row etwas anderes bedeuten wie in einer normalen row. Überlegen, ob man das mit einem Faktor auf maxwidthlimit löst statt mit %-Angaben?**/ .grid-100 { width:100%; } .grid-96 { width: 96%; } .grid-90 { width: 90%; } .grid-80 { width: 80%; } .grid-70 { width: 70%; } .grid-60 { width: 60%; } .grid-50 { width: 50%; } .grid-40 { width: 40%; } @media (max-width:1365px) { .grid-xl-100 { width:100%; } .grid-xl-96 { width: 96%; } .grid-xl-90 { width: 90%; } .grid-xl-80 { width: 80%; } .grid-xl-70 { width: 70%; } .grid-xl-60 { width: 60%; } .grid-xl-50 { width: 50%; } .grid-xl-40 { width: 40%; } } @media (max-width:1279px) { .grid-l-100 { width:100%; } .grid-l-96 { width: 96%; } .grid-l-90 { width: 90%; } .grid-l-80 { width: 80%; } .grid-l-70 { width: 70%; } .grid-l-60 { width: 60%; } .grid-l-50 { width: 50%; } .grid-l-40 { width: 40%; } } @media (max-width:1023px) { .grid-m-100 { width:100%; } .grid-m-96 { width: 96%; } .grid-m-90 { width: 90%; } .grid-m-80 { width: 80%; } .grid-m-70 { width: 70%; } .grid-m-60 { width: 60%; } .grid-m-50 { width: 50%; } .grid-m-40 { width: 40%; } } @media (max-width:767px) { .grid-s-100 { width:100%; } .grid-s-96 { width: 96%; } .grid-s-90 { width: 90%; } .grid-s-80 { width: 80%; } .grid-s-70 { width: 70%; } .grid-s-60 { width: 60%; } .grid-s-50 { width: 50%; } .grid-s-40 { width: 40%; } } @media (max-width:479px) { .grid-xs-100 { width:100%; } .grid-xs-96 { width: 96%; } .grid-xs-90 { width: 90%; } .grid-xs-80 { width: 80%; } .grid-xs-70 { width: 70%; } .grid-xs-60 { width: 60%; } .grid-xs-50 { width: 50%; } .grid-xs-40 { width: 40%; } } .col { box-sizing: border-box; flex-grow: 0; flex-shrink: 0; margin-block: calc(var(--gapfactor, 2) * var(--base-vgap-col)); display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; position:relative; outline:var(--outlinewidth) dotted lightsalmon; } a.col { overflow:hidden; } .col-auto { width: fit-content; } .col-noauto { width: inherit; } .col-grow { flex-grow:1; } .col-shrink { flex-shrink:1; } .col-noshrink { flex-shrink:0; } .col-0 { display: none; } .col-5 { flex-basis: calc(5% - (var(--gap) * 0.95)); } .col-8 { flex-basis: calc(8.3333% - (var(--gap) * 0.916667)); } /* 1/12 */ .col-10 { flex-basis: calc(10% - (var(--gap) * 0.9)); } .col-15 { flex-basis: calc(15% - (var(--gap) * 0.85)); } .col-17 { flex-basis: calc(16.6667% - (var(--gap) * 0.833333)); } /* 2/12 */ .col-20 { flex-basis: calc(20% - (var(--gap) * 0.8)); } .col-25 { flex-basis: calc(25% - (var(--gap) * 0.75)); } .col-30 { flex-basis: calc(30% - (var(--gap) * 0.7)); } .col-33 { flex-basis: calc(33.3333% - (var(--gap) * 0.666667)); } /* 4/12 */ .col-35 { flex-basis: calc(35% - (var(--gap) * 0.65)); } .col-40 { flex-basis: calc(40% - (var(--gap) * 0.6)); } .col-42 { flex-basis: calc(41.6667% - (var(--gap) * 0.583333)); } /* 5/12 */ .col-45 { flex-basis: calc(45% - (var(--gap) * 0.55)); } .col-50 { flex-basis: calc(50% - (var(--gap) * 0.5)); } .col-55 { flex-basis: calc(55% - (var(--gap) * 0.45)); } .col-58 { flex-basis: calc(58.3333% - (var(--gap) * 0.416667)); } /* 7/12 */ .col-60 { flex-basis: calc(60% - (var(--gap) * 0.4)); } .col-65 { flex-basis: calc(65% - (var(--gap) * 0.35)); } .col-66 { flex-basis: calc(66.6667% - (var(--gap) * 0.333333)); } /* 8/12 */ .col-70 { flex-basis: calc(70% - (var(--gap) * 0.3)); } .col-75 { flex-basis: calc(75% - (var(--gap) * 0.25)); } .col-80 { flex-basis: calc(80% - (var(--gap) * 0.2)); } .col-83 { flex-basis: calc(83.3333% - (var(--gap) * 0.166667)); } /* 10/12 */ .col-85 { flex-basis: calc(85% - (var(--gap) * 0.15)); } .col-90 { flex-basis: calc(90% - (var(--gap) * 0.1)); } .col-92 { flex-basis: calc(91.6667% - (var(--gap) * 0.083333)); } /* 11/12 */ .col-95 { flex-basis: calc(95% - (var(--gap) * 0.05)); } .col-100 { flex-basis: 100%; } .grid .col { --colwidth:100%; } /* wenn keine col-xx deklariert: default für grid-cols: immer volle Breite. ACHTUNG: so kann es keine .col-50 in .grid mehr geben, spezifizität!. bei rows auto. */ /*für grid*/ .col-span-1 { grid-column: span 1; } .col-span-2 { grid-column: span 2; } .col-span-3 { grid-column: span 3; } .col-span-4 { grid-column: span 4; } .col-span-5 { grid-column: span 5; } .col-span-6 { grid-column: span 6; } .col-span-7 { grid-column: span 7; } .col-span-8 { grid-column: span 8; } .col-span-9 { grid-column: span 9; } .col-span-10 { grid-column: span 10; } .col-span-11 { grid-column: span 11; } .col-span-12 { grid-column: span 12; } .row-span-1 { grid-row: span 1; } .row-span-2 { grid-row: span 2; } .row-span-3 { grid-row: span 3; } .row-span-4 { grid-row: span 4; } .row-span-5 { grid-row: span 5; } .row-span-6 { grid-row: span 6; } .row-span-7 { grid-row: span 7; } .row-span-8 { grid-row: span 8; } .row-span-9 { grid-row: span 9; } .row-span-10 { grid-row: span 10; } .row-span-11 { grid-row: span 11; } .row-span-12 { grid-row: span 12; } @media (max-width:1365px) { .col-xl-auto { width: fit-content; } .col-xl-noauto { width: inherit; } .col-xl-grow { flex-grow:1; } .col-xl-shrink { flex-shrink:1; } .col-xl-noshrink { flex-shrink:0; } .col-xl-0 { display: none; } .col-xl-5 { flex-basis: calc(5% - (var(--gap) * 0.95)); } .col-xl-8 { flex-basis: calc(8.3333% - (var(--gap) * 0.916667)); } /* 1/12 */ .col-xl-10 { flex-basis: calc(10% - (var(--gap) * 0.9)); } .col-xl-15 { flex-basis: calc(15% - (var(--gap) * 0.85)); } .col-xl-17 { flex-basis: calc(16.6667% - (var(--gap) * 0.833333)); } /* 2/12 */ .col-xl-20 { flex-basis: calc(20% - (var(--gap) * 0.8)); } .col-xl-25 { flex-basis: calc(25% - (var(--gap) * 0.75)); } .col-xl-30 { flex-basis: calc(30% - (var(--gap) * 0.7)); } .col-xl-33 { flex-basis: calc(33.3333% - (var(--gap) * 0.666667)); } /* 4/12 */ .col-xl-35 { flex-basis: calc(35% - (var(--gap) * 0.65)); } .col-xl-40 { flex-basis: calc(40% - (var(--gap) * 0.6)); } .col-xl-42 { flex-basis: calc(41.6667% - (var(--gap) * 0.583333)); } /* 5/12 */ .col-xl-45 { flex-basis: calc(45% - (var(--gap) * 0.55)); } .col-xl-50 { flex-basis: calc(50% - (var(--gap) * 0.5)); } .col-xl-55 { flex-basis: calc(55% - (var(--gap) * 0.45)); } .col-xl-58 { flex-basis: calc(58.3333% - (var(--gap) * 0.416667)); } /* 7/12 */ .col-xl-60 { flex-basis: calc(60% - (var(--gap) * 0.4)); } .col-xl-65 { flex-basis: calc(65% - (var(--gap) * 0.35)); } .col-xl-66 { flex-basis: calc(66.6667% - (var(--gap) * 0.333333)); } /* 8/12 */ .col-xl-70 { flex-basis: calc(70% - (var(--gap) * 0.3)); } .col-xl-75 { flex-basis: calc(75% - (var(--gap) * 0.25)); } .col-xl-80 { flex-basis: calc(80% - (var(--gap) * 0.2)); } .col-xl-83 { flex-basis: calc(83.3333% - (var(--gap) * 0.166667)); } /* 10/12 */ .col-xl-85 { flex-basis: calc(85% - (var(--gap) * 0.15)); } .col-xl-90 { flex-basis: calc(90% - (var(--gap) * 0.1)); } .col-xl-92 { flex-basis: calc(91.6667% - (var(--gap) * 0.083333)); } /* 11/12 */ .col-xl-95 { flex-basis: calc(95% - (var(--gap) * 0.05)); } .col-xl-100 { flex-basis: 100%; } /*für grid*/ .col-span-xl-1 { grid-column: span 1; } .col-span-xl-2 { grid-column: span 2; } .col-span-xl-3 { grid-column: span 3; } .col-span-xl-4 { grid-column: span 4; } .col-span-xl-5 { grid-column: span 5; } .col-span-xl-6 { grid-column: span 6; } .col-span-xl-7 { grid-column: span 7; } .col-span-xl-8 { grid-column: span 8; } .col-span-xl-9 { grid-column: span 9; } .col-span-xl-10 { grid-column: span 10; } .col-span-xl-11 { grid-column: span 11; } .col-span-xl-12 { grid-column: span 12; } .row-span-xl-1 { grid-row: span 1; } .row-span-xl-2 { grid-row: span 2; } .row-span-xl-3 { grid-row: span 3; } .row-span-xl-4 { grid-row: span 4; } .row-span-xl-5 { grid-row: span 5; } .row-span-xl-6 { grid-row: span 6; } .row-span-xl-7 { grid-row: span 7; } .row-span-xl-8 { grid-row: span 8; } .row-span-xl-9 { grid-row: span 9; } .row-span-xl-10 { grid-row: span 10; } .row-span-xl-11 { grid-row: span 11; } .row-span-xl-12 { grid-row: span 12; } } @media (max-width:1279px) { .col-l-auto { width: fit-content; } .col-l-noauto { width: inherit; } .col-l-grow { flex-grow:1; } .col-l-shrink { flex-shrink:1; } .col-l-noshrink { flex-shrink:0; } .col-l-0 { display: none; } .col-l-5 { flex-basis: calc(5% - (var(--gap) * 0.95)); } .col-l-8 { flex-basis: calc(8.3333% - (var(--gap) * 0.916667)); } /* 1/12 */ .col-l-10 { flex-basis: calc(10% - (var(--gap) * 0.9)); } .col-l-15 { flex-basis: calc(15% - (var(--gap) * 0.85)); } .col-l-17 { flex-basis: calc(16.6667% - (var(--gap) * 0.833333)); } /* 2/12 */ .col-l-20 { flex-basis: calc(20% - (var(--gap) * 0.8)); } .col-l-25 { flex-basis: calc(25% - (var(--gap) * 0.75)); } .col-l-30 { flex-basis: calc(30% - (var(--gap) * 0.7)); } .col-l-33 { flex-basis: calc(33.3333% - (var(--gap) * 0.666667)); } /* 4/12 */ .col-l-35 { flex-basis: calc(35% - (var(--gap) * 0.65)); } .col-l-40 { flex-basis: calc(40% - (var(--gap) * 0.6)); } .col-l-42 { flex-basis: calc(41.6667% - (var(--gap) * 0.583333)); } /* 5/12 */ .col-l-45 { flex-basis: calc(45% - (var(--gap) * 0.55)); } .col-l-50 { flex-basis: calc(50% - (var(--gap) * 0.5)); } .col-l-55 { flex-basis: calc(55% - (var(--gap) * 0.45)); } .col-l-58 { flex-basis: calc(58.3333% - (var(--gap) * 0.416667)); } /* 7/12 */ .col-l-60 { flex-basis: calc(60% - (var(--gap) * 0.4)); } .col-l-65 { flex-basis: calc(65% - (var(--gap) * 0.35)); } .col-l-66 { flex-basis: calc(66.6667% - (var(--gap) * 0.333333)); } /* 8/12 */ .col-l-70 { flex-basis: calc(70% - (var(--gap) * 0.3)); } .col-l-75 { flex-basis: calc(75% - (var(--gap) * 0.25)); } .col-l-80 { flex-basis: calc(80% - (var(--gap) * 0.2)); } .col-l-83 { flex-basis: calc(83.3333% - (var(--gap) * 0.166667)); } /* 10/12 */ .col-l-85 { flex-basis: calc(85% - (var(--gap) * 0.15)); } .col-l-90 { flex-basis: calc(90% - (var(--gap) * 0.1)); } .col-l-92 { flex-basis: calc(91.6667% - (var(--gap) * 0.083333)); } /* 11/12 */ .col-l-95 { flex-basis: calc(95% - (var(--gap) * 0.05)); } .col-l-100 { flex-basis: 100%; } /*für grid*/ .col-span-l-1 { grid-column: span 1; } .col-span-l-2 { grid-column: span 2; } .col-span-l-3 { grid-column: span 3; } .col-span-l-4 { grid-column: span 4; } .col-span-l-5 { grid-column: span 5; } .col-span-l-6 { grid-column: span 6; } .col-span-l-7 { grid-column: span 7; } .col-span-l-8 { grid-column: span 8; } .col-span-l-9 { grid-column: span 9; } .col-span-l-10 { grid-column: span 10; } .col-span-l-11 { grid-column: span 11; } .col-span-l-12 { grid-column: span 12; } .row-span-l-1 { grid-row: span 1; } .row-span-l-2 { grid-row: span 2; } .row-span-l-3 { grid-row: span 3; } .row-span-l-4 { grid-row: span 4; } .row-span-l-5 { grid-row: span 5; } .row-span-l-6 { grid-row: span 6; } .row-span-l-7 { grid-row: span 7; } .row-span-l-8 { grid-row: span 8; } .row-span-l-9 { grid-row: span 9; } .row-span-l-10 { grid-row: span 10; } .row-span-l-11 { grid-row: span 11; } .row-span-l-12 { grid-row: span 12; } } @media (max-width:1023px) { .col-m-auto { width: fit-content; } .col-m-noauto { width: inherit; } .col-m-grow { flex-grow:1; } .col-m-shrink { flex-shrink:1; } .col-m-noshrink { flex-shrink:0; } .col-m-0 { display: none; } .col-m-5 { flex-basis: calc(5% - (var(--gap) * 0.95)); } .col-m-8 { flex-basis: calc(8.3333% - (var(--gap) * 0.916667)); } /* 1/12 */ .col-m-10 { flex-basis: calc(10% - (var(--gap) * 0.9)); } .col-m-15 { flex-basis: calc(15% - (var(--gap) * 0.85)); } .col-m-17 { flex-basis: calc(16.6667% - (var(--gap) * 0.833333)); } /* 2/12 */ .col-m-20 { flex-basis: calc(20% - (var(--gap) * 0.8)); } .col-m-25 { flex-basis: calc(25% - (var(--gap) * 0.75)); } .col-m-30 { flex-basis: calc(30% - (var(--gap) * 0.7)); } .col-m-33 { flex-basis: calc(33.3333% - (var(--gap) * 0.666667)); } /* 4/12 */ .col-m-35 { flex-basis: calc(35% - (var(--gap) * 0.65)); } .col-m-40 { flex-basis: calc(40% - (var(--gap) * 0.6)); } .col-m-42 { flex-basis: calc(41.6667% - (var(--gap) * 0.583333)); } /* 5/12 */ .col-m-45 { flex-basis: calc(45% - (var(--gap) * 0.55)); } .col-m-50 { flex-basis: calc(50% - (var(--gap) * 0.5)); } .col-m-55 { flex-basis: calc(55% - (var(--gap) * 0.45)); } .col-m-58 { flex-basis: calc(58.3333% - (var(--gap) * 0.416667)); } /* 7/12 */ .col-m-60 { flex-basis: calc(60% - (var(--gap) * 0.4)); } .col-m-65 { flex-basis: calc(65% - (var(--gap) * 0.35)); } .col-m-66 { flex-basis: calc(66.6667% - (var(--gap) * 0.333333)); } /* 8/12 */ .col-m-70 { flex-basis: calc(70% - (var(--gap) * 0.3)); } .col-m-75 { flex-basis: calc(75% - (var(--gap) * 0.25)); } .col-m-80 { flex-basis: calc(80% - (var(--gap) * 0.2)); } .col-m-83 { flex-basis: calc(83.3333% - (var(--gap) * 0.166667)); } /* 10/12 */ .col-m-85 { flex-basis: calc(85% - (var(--gap) * 0.15)); } .col-m-90 { flex-basis: calc(90% - (var(--gap) * 0.1)); } .col-m-92 { flex-basis: calc(91.6667% - (var(--gap) * 0.083333)); } /* 11/12 */ .col-m-95 { flex-basis: calc(95% - (var(--gap) * 0.05)); } .col-m-100 { flex-basis: 100%; } /*für grid*/ .col-span-m-1 { grid-column: span 1; } .col-span-m-2 { grid-column: span 2; } .col-span-m-3 { grid-column: span 3; } .col-span-m-4 { grid-column: span 4; } .col-span-m-5 { grid-column: span 5; } .col-span-m-6 { grid-column: span 6; } .col-span-m-7 { grid-column: span 7; } .col-span-m-8 { grid-column: span 8; } .col-span-m-9 { grid-column: span 9; } .col-span-m-10 { grid-column: span 10; } .col-span-m-11 { grid-column: span 11; } .col-span-m-12 { grid-column: span 12; } .row-span-m-1 { grid-row: span 1; } .row-span-m-2 { grid-row: span 2; } .row-span-m-3 { grid-row: span 3; } .row-span-m-4 { grid-row: span 4; } .row-span-m-5 { grid-row: span 5; } .row-span-m-6 { grid-row: span 6; } .row-span-m-7 { grid-row: span 7; } .row-span-m-8 { grid-row: span 8; } .row-span-m-9 { grid-row: span 9; } .row-span-m-10 { grid-row: span 10; } .row-span-m-11 { grid-row: span 11; } .row-span-m-12 { grid-row: span 12; } } @media (max-width:767px) { .col-s-auto { width: fit-content; } .col-s-noauto { width: inherit; } .col-s-grow { flex-grow:1; } .col-s-shrink { flex-shrink:1; } .col-s-noshrink { flex-shrink:0; } .col-s-0 { display: none; } .col-s-5 { flex-basis: calc(5% - (var(--gap) * 0.95)); } .col-s-8 { flex-basis: calc(8.3333% - (var(--gap) * 0.916667)); } /* 1/12 */ .col-s-10 { flex-basis: calc(10% - (var(--gap) * 0.9)); } .col-s-15 { flex-basis: calc(15% - (var(--gap) * 0.85)); } .col-s-17 { flex-basis: calc(16.6667% - (var(--gap) * 0.833333)); } /* 2/12 */ .col-s-20 { flex-basis: calc(20% - (var(--gap) * 0.8)); } .col-s-25 { flex-basis: calc(25% - (var(--gap) * 0.75)); } .col-s-30 { flex-basis: calc(30% - (var(--gap) * 0.7)); } .col-s-33 { flex-basis: calc(33.3333% - (var(--gap) * 0.666667)); } /* 4/12 */ .col-s-35 { flex-basis: calc(35% - (var(--gap) * 0.65)); } .col-s-40 { flex-basis: calc(40% - (var(--gap) * 0.6)); } .col-s-42 { flex-basis: calc(41.6667% - (var(--gap) * 0.583333)); } /* 5/12 */ .col-s-45 { flex-basis: calc(45% - (var(--gap) * 0.55)); } .col-s-50 { flex-basis: calc(50% - (var(--gap) * 0.5)); } .col-s-55 { flex-basis: calc(55% - (var(--gap) * 0.45)); } .col-s-58 { flex-basis: calc(58.3333% - (var(--gap) * 0.416667)); } /* 7/12 */ .col-s-60 { flex-basis: calc(60% - (var(--gap) * 0.4)); } .col-s-65 { flex-basis: calc(65% - (var(--gap) * 0.35)); } .col-s-66 { flex-basis: calc(66.6667% - (var(--gap) * 0.333333)); } /* 8/12 */ .col-s-70 { flex-basis: calc(70% - (var(--gap) * 0.3)); } .col-s-75 { flex-basis: calc(75% - (var(--gap) * 0.25)); } .col-s-80 { flex-basis: calc(80% - (var(--gap) * 0.2)); } .col-s-83 { flex-basis: calc(83.3333% - (var(--gap) * 0.166667)); } /* 10/12 */ .col-s-85 { flex-basis: calc(85% - (var(--gap) * 0.15)); } .col-s-90 { flex-basis: calc(90% - (var(--gap) * 0.1)); } .col-s-92 { flex-basis: calc(91.6667% - (var(--gap) * 0.083333)); } /* 11/12 */ .col-s-95 { flex-basis: calc(95% - (var(--gap) * 0.05)); } .col-s-100 { flex-basis: 100%; } /*für grid*/ .col-span-s-1 { grid-column: span 1; } .col-span-s-2 { grid-column: span 2; } .col-span-s-3 { grid-column: span 3; } .col-span-s-4 { grid-column: span 4; } .col-span-s-5 { grid-column: span 5; } .col-span-s-6 { grid-column: span 6; } .col-span-s-7 { grid-column: span 7; } .col-span-s-8 { grid-column: span 8; } .col-span-s-9 { grid-column: span 9; } .col-span-s-10 { grid-column: span 10; } .col-span-s-11 { grid-column: span 11; } .col-span-s-12 { grid-column: span 12; } .row-span-s-1 { grid-row: span 1; } .row-span-s-2 { grid-row: span 2; } .row-span-s-3 { grid-row: span 3; } .row-span-s-4 { grid-row: span 4; } .row-span-s-5 { grid-row: span 5; } .row-span-s-6 { grid-row: span 6; } .row-span-s-7 { grid-row: span 7; } .row-span-s-8 { grid-row: span 8; } .row-span-s-9 { grid-row: span 9; } .row-span-s-10 { grid-row: span 10; } .row-span-s-11 { grid-row: span 11; } .row-span-s-12 { grid-row: span 12; } } @media (max-width:479px) { .col-xs-auto { width: fit-content; } .col-xs-noauto { width: inherit; } .col-xs-grow { flex-grow:1; } .col-xs-shrink { flex-shrink:1; } .col-xs-noshrink { flex-shrink:0; } .col-xs-0 { display: none; } .col-xs-5 { flex-basis: calc(5% - (var(--gap) * 0.95)); } .col-xs-8 { flex-basis: calc(8.3333% - (var(--gap) * 0.916667)); } /* 1/12 */ .col-xs-10 { flex-basis: calc(10% - (var(--gap) * 0.9)); } .col-xs-15 { flex-basis: calc(15% - (var(--gap) * 0.85)); } .col-xs-17 { flex-basis: calc(16.6667% - (var(--gap) * 0.833333)); } /* 2/12 */ .col-xs-20 { flex-basis: calc(20% - (var(--gap) * 0.8)); } .col-xs-25 { flex-basis: calc(25% - (var(--gap) * 0.75)); } .col-xs-30 { flex-basis: calc(30% - (var(--gap) * 0.7)); } .col-xs-33 { flex-basis: calc(33.3333% - (var(--gap) * 0.666667)); } /* 4/12 */ .col-xs-35 { flex-basis: calc(35% - (var(--gap) * 0.65)); } .col-xs-40 { flex-basis: calc(40% - (var(--gap) * 0.6)); } .col-xs-42 { flex-basis: calc(41.6667% - (var(--gap) * 0.583333)); } /* 5/12 */ .col-xs-45 { flex-basis: calc(45% - (var(--gap) * 0.55)); } .col-xs-50 { flex-basis: calc(50% - (var(--gap) * 0.5)); } .col-xs-55 { flex-basis: calc(55% - (var(--gap) * 0.45)); } .col-xs-58 { flex-basis: calc(58.3333% - (var(--gap) * 0.416667)); } /* 7/12 */ .col-xs-60 { flex-basis: calc(60% - (var(--gap) * 0.4)); } .col-xs-65 { flex-basis: calc(65% - (var(--gap) * 0.35)); } .col-xs-66 { flex-basis: calc(66.6667% - (var(--gap) * 0.333333)); } /* 8/12 */ .col-xs-70 { flex-basis: calc(70% - (var(--gap) * 0.3)); } .col-xs-75 { flex-basis: calc(75% - (var(--gap) * 0.25)); } .col-xs-80 { flex-basis: calc(80% - (var(--gap) * 0.2)); } .col-xs-83 { flex-basis: calc(83.3333% - (var(--gap) * 0.166667)); } /* 10/12 */ .col-xs-85 { flex-basis: calc(85% - (var(--gap) * 0.15)); } .col-xs-90 { flex-basis: calc(90% - (var(--gap) * 0.1)); } .col-xs-92 { flex-basis: calc(91.6667% - (var(--gap) * 0.083333)); } /* 11/12 */ .col-xs-95 { flex-basis: calc(95% - (var(--gap) * 0.05)); } .col-xs-100 { flex-basis: 100%; } /*für grid*/ .col-span-xs-1 { grid-column: span 1; } .col-span-xs-2 { grid-column: span 2; } .col-span-xs-3 { grid-column: span 3; } .col-span-xs-4 { grid-column: span 4; } .col-span-xs-5 { grid-column: span 5; } .col-span-xs-6 { grid-column: span 6; } .col-span-xs-7 { grid-column: span 7; } .col-span-xs-8 { grid-column: span 8; } .col-span-xs-9 { grid-column: span 9; } .col-span-xs-10 { grid-column: span 10; } .col-span-xs-11 { grid-column: span 11; } .col-span-xs-12 { grid-column: span 12; } .row-span-xs-1 { grid-row: span 1; } .row-span-xs-2 { grid-row: span 2; } .row-span-xs-3 { grid-row: span 3; } .row-span-xs-4 { grid-row: span 4; } .row-span-xs-5 { grid-row: span 5; } .row-span-xs-6 { grid-row: span 6; } .row-span-xs-7 { grid-row: span 7; } .row-span-xs-8 { grid-row: span 8; } .row-span-xs-9 { grid-row: span 9; } .row-span-xs-10 { grid-row: span 10; } .row-span-xs-11 { grid-row: span 11; } .row-span-xs-12 { grid-row: span 12; } } .col.V-top { justify-content:flex-start; } /* die inhalte von cols (sollten texte etc. sein) innerhalb der col ausrichten */ .col.V-center { justify-content:center; } .col.V-bottom { justify-content:flex-end; } .col.V-between { justify-content:space-between; } .col.V-spacearound { justify-content:space-around; } .col.V-spaceevenly { justify-content:space-evenly; } .col.H-left { align-items:flex-start; } .col.H-center { align-items:center; } .col.H-right { align-items:flex-end; } .col.H-stretch { align-items:stretch; } .col.H-between { align-items:space-between; } @media (max-width:1365px) { .col.V-xl-top { justify-content:flex-start; } .col.V-xl-center { justify-content:center; } .col.V-xl-bottom { justify-content:flex-end; } .col.V-xl-between { justify-content:space-between; } .col.V-xl-spacearound { justify-content:space-around; } .col.V-xl-spaceevenly { justify-content:space-evenly; } .col.H-xl-left { align-items:flex-start; } .col.H-xl-center { align-items:center; } .col.H-xl-right { align-items:flex-end; } .col.H-xl-stretch { align-items:stretch; } .col.H-xl-between { align-items:space-between; } } @media (max-width:1279px) { .col.V-l-top { justify-content:flex-start; } .col.V-l-center { justify-content:center; } .col.V-l-bottom { justify-content:flex-end; } .col.V-l-between { justify-content:space-between; } .col.V-l-spacearound { justify-content:space-around; } .col.V-l-spaceevenly { justify-content:space-evenly; } .col.H-l-left { align-items:flex-start; } .col.H-l-center { align-items:center; } .col.H-l-right { align-items:flex-end; } .col.H-l-stretch { align-items:stretch; } .col.H-l-between { align-items:space-between; } } @media (max-width:1023px) { .col.V-m-top { justify-content:flex-start; } .col.V-m-center { justify-content:center; } .col.V-m-bottom { justify-content:flex-end; } .col.V-m-between { justify-content:space-between; } .col.V-m-spacearound { justify-content:space-around; } .col.V-m-spaceevenly { justify-content:space-evenly; } .col.H-m-left { align-items:flex-start; } .col.H-m-center { align-items:center; } .col.H-m-right { align-items:flex-end; } .col.H-m-stretch { align-items:stretch; } .col.H-m-between { align-items:space-between; } } @media (max-width:767px) { .col.V-s-top { justify-content:flex-start; } .col.V-s-center { justify-content:center; } .col.V-s-bottom { justify-content:flex-end; } .col.V-s-between { justify-content:space-between; } .col.V-s-spacearound { justify-content:space-around; } .col.V-s-spaceevenly { justify-content:space-evenly; } .col.H-s-left { align-items:flex-start; } .col.H-s-center { align-items:center; } .col.H-s-right { align-items:flex-end; } .col.H-s-stretch { align-items:stretch; } .col.H-s-between { align-items:space-between; } } @media (max-width:479px) { .col.V-xs-top { justify-content:flex-start; } .col.V-xs-center { justify-content:center; } .col.V-xs-bottom { justify-content:flex-end; } .col.V-xs-between { justify-content:space-between; } .col.V-xs-spacearound { justify-content:space-around; } .col.V-xs-spaceevenly { justify-content:space-evenly; } .col.H-xs-left { align-items:flex-start; } .col.H-xs-center { align-items:center; } .col.H-xs-right { align-items:flex-end; } .col.H-xs-stretch { align-items:stretch; } .col.H-xs-between { align-items:space-between; } } .pushl--20 { margin-left:-20%; } .pushl--15 { margin-left:-15%; } .pushl--10 { margin-left:-10%; } .pushl--5 { margin-left:-5%; } .pushl-5 { margin-left:5%; } .pushl-10 { margin-left:10%; } .pushl-15 { margin-left:15%; } .pushl-20 { margin-left:20%; } .pushr-20 { margin-right:-20%; width:120%; } .bleedleft { /* margin-left: calc( -1 * max(0px, (100vw - var(--maxwidth)) / 2) - var(--sidenavwidth) - var(--colgap-l) ); width: calc( 100% + max(0px, (100vw - var(--maxwidth)) / 2) + var(--sidenavwidth) + var(--colgap-l) ) !important;*/ margin-left: calc( -1 * max(0px, (100vw - var(--maxwidth)) / 2) - var(--sidenavwidth) ); width: calc( 100% + max(0px, (100vw - var(--maxwidth)) / 2) + var(--sidenavwidth) ) !important; /* quickfix: wenn .col mit neuem flex-basis-system gemacht ist, ist das wichtiger als die width hier ... das schaltet das wieder aus. wir aber nur für .col gebraucht, normalerweise sind bleeds auf bilder, nicht divs. */ flex-basis: unset; flex-grow: 1; flex-shrink: 1; } .bleedright { /* margin-right: calc( -1 * max(0px, (100vw - var(--maxwidth)) / 2) - var(--colgap-r) ); width: calc( 100% + max(0px, (100vw - var(--maxwidth)) / 2) + var(--colgap-r) ) !important;*/ margin-right: calc( -1 * max(0px, (100vw - var(--maxwidth)) / 2 ) ); width: calc( 100% + max(0px, (100vw - var(--maxwidth)) / 2) ) !important; /* quickfix: wenn .col mit neuem flex-basis-system gemacht ist, ist das wichtiger als die width hier ... das schaltet das wieder aus. wir aber nur für .col gebraucht, normalerweise sind bleeds auf bilder, nicht divs. */ flex-basis: unset; flex-grow: 1; flex-shrink: 1; } @media (max-width:1023px) { .flex-m-column { flex-direction:column; } .flex-m-reverse { flex-direction:column-reverse; } /*warum das column-reverse sein muss, verstehen wir nicht. eigentlich haben wir rows die wrappen. */ .order-m-1 { order:1; } .order-m-2 { order:2; } .order-m-3 { order:3; } .order-m-4 { order:4; } .order-m-5 { order:5; } .order-m-6 { order:6; } } @media (max-width:767px) { .flex-s-column { flex-direction:column; } .flex-s-reverse { flex-direction:column-reverse; } /*warum das column-reverse sein muss, verstehen wir nicht. eigentlich haben wir rows die wrappen. */ .order-s-1 { order:1; } .order-s-2 { order:2; } .order-s-3 { order:3; } .order-s-4 { order:4; } .order-s-5 { order:5; } .order-s-6 { order:6; } } .doubleimg { display:grid; grid-template: 1fr / 1fr; overflow:visible; } .doubleimg > * { grid-column: 1 / -1; grid-row: 1 / -1; width: 100%; height: auto; display:grid; place-items:end end; /* quickfix für den einen anwendungsfall ... wenn öfter verwendet, muss das flexibler sein */ } /*bilder in boxen platzieren*/ img, picture, video, svg { width:100%; height:auto; display:block; } .cover { /* bilder/videos in box einpassen ohne ränder. nützlih bei ar-boxen oder fixen containermaßen */ width:100%; height:100%; object-fit: cover; overflow: hidden; /* nötig für images die in grid-zellen gecovert werden sollen? komisches verhalten */ --obj-pos-h:50%; --obj-pos-v:50%; object-position:var(--obj-pos-h) var(--obj-pos-v); } .parallax { width: 100%; /* Passe die Breite an dein Layout an */ overflow: clip; } .parallax img { width: 100%; height: 100%; object-fit: cover; /* Verbindet die Animation mit der Scroll-Position des Elements im Viewport */ animation: parallax-scroll linear both; animation-timeline: view(); /* Definiert, wann die Animation startet und endet: entry 0% = Element taucht gerade unten im Viewport auf exit 100% = Element verschwindet komplett oben aus dem Viewport */ animation-range: entry 10% exit 80%; } @keyframes parallax-scroll { 0% { object-position: 0% 0%; /* Fokus am oberen Bildrand beim Reinsollen */ } 100% { object-position: 100% 100%; /* Fokus am unteren Bildrand beim Rausscrollen */ } } .parallax .cover { --obj-pos-h:0%; --obj-pos-v:0%; } .cover-h-0 { --obj-pos-h:0%; } .cover-h-5 { --obj-pos-h:5%; } .cover-h-10 { --obj-pos-h:10%; } .cover-h-15 { --obj-pos-h:15%; } .cover-h-20 { --obj-pos-h:20%; } .cover-h-25 { --obj-pos-h:25%; } .cover-h-30 { --obj-pos-h:30%; } .cover-h-35 { --obj-pos-h:35%; } .cover-h-40 { --obj-pos-h:40%; } .cover-h-45 { --obj-pos-h:45%; } .cover-h-50 { --obj-pos-h:50%; } .cover-h-55 { --obj-pos-h:55%; } .cover-h-60 { --obj-pos-h:60%; } .cover-h-65 { --obj-pos-h:65%; } .cover-h-70 { --obj-pos-h:70%; } .cover-h-75 { --obj-pos-h:75%; } .cover-h-80 { --obj-pos-h:80%; } .cover-h-85 { --obj-pos-h:85%; } .cover-h-90 { --obj-pos-h:90%; } .cover-h-95 { --obj-pos-h:95%; } .cover-h-100 { --obj-pos-h:100%;} .cover-v-0 { --obj-pos-v:0%; } .cover-v-5 { --obj-pos-v:5%; } .cover-v-10 { --obj-pos-v:10%; } .cover-v-15 { --obj-pos-v:15%; } .cover-v-20 { --obj-pos-v:20%; } .cover-v-25 { --obj-pos-v:25%; } .cover-v-30 { --obj-pos-v:30%; } .cover-v-35 { --obj-pos-v:35%; } .cover-v-40 { --obj-pos-v:40%; } .cover-v-45 { --obj-pos-v:45%; } .cover-v-50 { --obj-pos-v:50%; } .cover-v-55 { --obj-pos-v:55%; } .cover-v-60 { --obj-pos-v:60%; } .cover-v-65 { --obj-pos-v:65%; } .cover-v-70 { --obj-pos-v:70%; } .cover-v-75 { --obj-pos-v:75%; } .cover-v-80 { --obj-pos-v:80%; } .cover-v-85 { --obj-pos-v:85%; } .cover-v-90 { --obj-pos-v:90%; } .cover-v-95 { --obj-pos-v:95%; } .cover-v-100 { --obj-pos-v:100%;} .contain { /* bilder in box einpassen, mit ränder (ganzes Bild immer sichtbar, aber so groß wie möglich*/ width:100%; height:100%; object-fit:contain; object-position:50% 50%; } /** noch richtig einsortieren - ist neu und erst gemeint, aber weiß nicht wo hin damit genau **/ figure { margin:0; display:grid; grid-template-rows:1fr auto 1rem; grid-template-columns:1rem 1fr 2rem; } figure img, figure video { grid-row: 1 / span 2; grid-column: 2 / -1; } figure figcaption { grid-row: 2 / span 2; grid-column: 1 / -2; width:fit-content; padding: 0.5rem 1rem; display:grid; place-items:center; background-color:var(--color-weiss); color:var(--color-schwarz); } /* layout overrides */ /** PADDING **/ /** PADDING **/ .p-0 { padding: 0rem; } .p-025 { padding: 0.25rem; } .p-05 { padding: 0.5rem; } .p-1 { padding: 1rem; } .p-2 { padding: 2rem; } .p-3 { padding: 3rem; } .p-4 { padding: 4rem; } .p-5 { padding: 5rem; } .p-6 { padding: 6rem; } .p-7 { padding: 7rem; } .p-8 { padding: 8rem; } .p-9 { padding: 9rem; } .p-10 { padding: 10rem; } .p-025p { padding: 2.5%; } .p-5p { padding: 5%; } .p-10p { padding: 10%; } .p-20p { padding: 20%; } .p-30p { padding: 30%; } .p-40p { padding: 40%; } .p-50p { padding: 50%; } .p-60p { padding: 60%; } .p-70p { padding: 70%; } .p-80p { padding: 80%; } .p-90p { padding: 90%; } .p-100p { padding: 100%; } .p-1vw { padding: 1vw; } .p-2vw { padding: 2vw; } .p-3vw { padding: 3vw; } .p-4vw { padding: 4vw; } .p-5vw { padding: 5vw; } .p-6vw { padding: 6vw; } .p-7vw { padding: 7vw; } .p-8vw { padding: 8vw; } .p-9vw { padding: 9vw; } .p-10vw { padding: 10vw; } .p-20vw { padding: 20vw; } .p-30vw { padding: 30vw; } .p-40vw { padding: 40vw; } .p-50vw { padding: 50vw; } .p-60vw { padding: 60vw; } .p-70vw { padding: 70vw; } .p-80vw { padding: 80vw; } .p-90vw { padding: 90vw; } .p-05gap { padding: calc(0.5 * var(--colgap) ); } .p-1gap { padding: calc(1 * var(--colgap) ); } .p-2gap { padding: calc(2 * var(--colgap) ); } .p-3gap { padding: calc(3 * var(--colgap) ); } .p-4gap { padding: calc(4 * var(--colgap) ); } .p-5gap { padding: calc(5 * var(--colgap) ); } .pt-0 { padding-top: 0rem; } .pt-05 { padding-top: 0.5rem; } .pt-1 { padding-top: 1rem; } .pt-2 { padding-top: 2rem; } .pt-3 { padding-top: 3rem; } .pt-4 { padding-top: 4rem; } .pt-5 { padding-top: 5rem; } .pt-6 { padding-top: 6rem; } .pt-7 { padding-top: 7rem; } .pt-8 { padding-top: 8rem; } .pt-9 { padding-top: 9rem; } .pt-10 { padding-top: 10rem; } .pt-025p { padding-top: 2.5%; } .pt-5p { padding-top: 5%; } .pt-10p { padding-top: 10%; } .pt-20p { padding-top: 20%; } .pt-30p { padding-top: 30%; } .pt-40p { padding-top: 40%; } .pt-50p { padding-top: 50%; } .pt-60p { padding-top: 60%; } .pt-70p { padding-top: 70%; } .pt-80p { padding-top: 80%; } .pt-90p { padding-top: 90%; } .pt-100p { padding-top: 100%; } .pt-1vw { padding-top: 1vw; } .pt-2vw { padding-top: 2vw; } .pt-3vw { padding-top: 3vw; } .pt-4vw { padding-top: 4vw; } .pt-5vw { padding-top: 5vw; } .pt-6vw { padding-top: 6vw; } .pt-7vw { padding-top: 7vw; } .pt-8vw { padding-top: 8vw; } .pt-9vw { padding-top: 9vw; } .pt-10vw { padding-top: 10vw; } .pt-20vw { padding-top: 20vw; } .pt-30vw { padding-top: 30vw; } .pt-40vw { padding-top: 40vw; } .pt-50vw { padding-top: 50vw; } .pt-60vw { padding-top: 60vw; } .pt-70vw { padding-top: 70vw; } .pt-80vw { padding-top: 80vw; } .pt-90vw { padding-top: 90vw; } .pt-05gap { padding-top: calc(0.5 * var(--colgap) ); } .pt-1gap { padding-top: calc(1 * var(--colgap) ); } .pt-2gap { padding-top: calc(2 * var(--colgap) ); } .pt-3gap { padding-top: calc(3 * var(--colgap) ); } .pt-4gap { padding-top: calc(4 * var(--colgap) ); } .pt-5gap { padding-top: calc(5 * var(--colgap) ); } .pb-0 { padding-bottom: 0rem; } .pb-05 { padding-bottom: 0.5rem; } .pb-1 { padding-bottom: 1rem; } .pb-2 { padding-bottom: 2rem; } .pb-3 { padding-bottom: 3rem; } .pb-4 { padding-bottom: 4rem; } .pb-5 { padding-bottom: 5rem; } .pb-6 { padding-bottom: 6rem; } .pb-7 { padding-bottom: 7rem; } .pb-8 { padding-bottom: 8rem; } .pb-9 { padding-bottom: 9rem; } .pb-10 { padding-bottom: 10rem; } .pb-025p { padding-bottom: 2.5%; } .pb-5p { padding-bottom: 5%; } .pb-10p { padding-bottom: 10%; } .pb-20p { padding-bottom: 20%; } .pb-30p { padding-bottom: 30%; } .pb-40p { padding-bottom: 40%; } .pb-50p { padding-bottom: 50%; } .pb-60p { padding-bottom: 60%; } .pb-70p { padding-bottom: 70%; } .pb-80p { padding-bottom: 80%; } .pb-90p { padding-bottom: 90%; } .pb-100p { padding-bottom: 100%; } .pb-1vw { padding-bottom: 1vw; } .pb-2vw { padding-bottom: 2vw; } .pb-3vw { padding-bottom: 3vw; } .pb-4vw { padding-bottom: 4vw; } .pb-5vw { padding-bottom: 5vw; } .pb-6vw { padding-bottom: 6vw; } .pb-7vw { padding-bottom: 7vw; } .pb-8vw { padding-bottom: 8vw; } .pb-9vw { padding-bottom: 9vw; } .pb-10vw { padding-bottom: 10vw; } .pb-20vw { padding-bottom: 20vw; } .pb-30vw { padding-bottom: 30vw; } .pb-40vw { padding-bottom: 40vw; } .pb-50vw { padding-bottom: 50vw; } .pb-60vw { padding-bottom: 60vw; } .pb-70vw { padding-bottom: 70vw; } .pb-80vw { padding-bottom: 80vw; } .pb-90vw { padding-bottom: 90vw; } .pb-1vh { padding-bottom: 1vh; } .pb-2vh { padding-bottom: 2vh; } .pb-3vh { padding-bottom: 3vh; } .pb-4vh { padding-bottom: 4vh; } .pb-5vh { padding-bottom: 5vh; } .pb-6vh { padding-bottom: 6vh; } .pb-7vh { padding-bottom: 7vh; } .pb-8vh { padding-bottom: 8vh; } .pb-9vh { padding-bottom: 9vh; } .pb-10vh { padding-bottom: 10vh; } .pb-20vh { padding-bottom: 20vh; } .pb-30vh { padding-bottom: 30vh; } .pb-40vh { padding-bottom: 40vh; } .pb-50vh { padding-bottom: 50vh; } .pb-60vh { padding-bottom: 60vh; } .pb-70vh { padding-bottom: 70vh; } .pb-80vh { padding-bottom: 80vh; } .pb-90vh { padding-bottom: 90vh; } .pb-05gap { padding-bottom: calc(0.5 * var(--colgap) ); } .pb-1gap { padding-bottom: calc(1 * var(--colgap) ); } .pb-2gap { padding-bottom: calc(2 * var(--colgap) ); } .pb-3gap { padding-bottom: calc(3 * var(--colgap) ); } .pb-4gap { padding-bottom: calc(4 * var(--colgap) ); } .pb-5gap { padding-bottom: calc(5 * var(--colgap) ); } .pl-0 { padding-left: 0rem; } .pl-05 { padding-left: 0.5rem; } .pl-1 { padding-left: 1rem; } .pl-2 { padding-left: 2rem; } .pl-3 { padding-left: 3rem; } .pl-4 { padding-left: 4rem; } .pl-5 { padding-left: 5rem; } .pl-6 { padding-left: 6rem; } .pl-7 { padding-left: 7rem; } .pl-8 { padding-left: 8rem; } .pl-9 { padding-left: 9rem; } .pl-10 { padding-left: 10rem; } .pl-025p { padding-left: 2.5%; } .pl-5p { padding-left: 5%; } .pl-10p { padding-left: 10%; } .pl-20p { padding-left: 20%; } .pl-30p { padding-left: 30%; } .pl-40p { padding-left: 40%; } .pl-50p { padding-left: 50%; } .pl-60p { padding-left: 60%; } .pl-70p { padding-left: 70%; } .pl-80p { padding-left: 80%; } .pl-90p { padding-left: 90%; } .pl-100p { padding-left: 100%; } .pl-1vw { padding-left: 1vw; } .pl-2vw { padding-left: 2vw; } .pl-3vw { padding-left: 3vw; } .pl-4vw { padding-left: 4vw; } .pl-5vw { padding-left: 5vw; } .pl-6vw { padding-left: 6vw; } .pl-7vw { padding-left: 7vw; } .pl-8vw { padding-left: 8vw; } .pl-9vw { padding-left: 9vw; } .pl-10vw { padding-left: 10vw; } .pl-20vw { padding-left: 20vw; } .pl-30vw { padding-left: 30vw; } .pl-40vw { padding-left: 40vw; } .pl-50vw { padding-left: 50vw; } .pl-60vw { padding-left: 60vw; } .pl-70vw { padding-left: 70vw; } .pl-80vw { padding-left: 80vw; } .pl-90vw { padding-left: 90vw; } .pl-05gap { padding-left: calc(0.5 * var(--colgap) ); } .pl-1gap { padding-left: calc(1 * var(--colgap) ); } .pl-2gap { padding-left: calc(2 * var(--colgap) ); } .pl-3gap { padding-left: calc(3 * var(--colgap) ); } .pl-4gap { padding-left: calc(4 * var(--colgap) ); } .pl-5gap { padding-left: calc(5 * var(--colgap) ); } .pr-0 { padding-right: 0rem; } .pr-05 { padding-right: 0.5rem; } .pr-1 { padding-right: 1rem; } .pr-2 { padding-right: 2rem; } .pr-3 { padding-right: 3rem; } .pr-4 { padding-right: 4rem; } .pr-5 { padding-right: 5rem; } .pr-6 { padding-right: 6rem; } .pr-7 { padding-right: 7rem; } .pr-8 { padding-right: 8rem; } .pr-9 { padding-right: 9rem; } .pr-10 { padding-right: 10rem; } .pr-025p { padding-right: 2.5%; } .pr-5p { padding-right: 5%; } .pr-10p { padding-right: 10%; } .pr-20p { padding-right: 20%; } .pr-30p { padding-right: 30%; } .pr-40p { padding-right: 40%; } .pr-50p { padding-right: 50%; } .pr-60p { padding-right: 60%; } .pr-70p { padding-right: 70%; } .pr-80p { padding-right: 80%; } .pr-90p { padding-right: 90%; } .pr-100p { padding-right: 100%; } .pr-1vw { padding-right: 1vw; } .pr-2vw { padding-right: 2vw; } .pr-3vw { padding-right: 3vw; } .pr-4vw { padding-right: 4vw; } .pr-5vw { padding-right: 5vw; } .pr-6vw { padding-right: 6vw; } .pr-7vw { padding-right: 7vw; } .pr-8vw { padding-right: 8vw; } .pr-9vw { padding-right: 9vw; } .pr-10vw { padding-right: 10vw; } .pr-20vw { padding-right: 20vw; } .pr-30vw { padding-right: 30vw; } .pr-40vw { padding-right: 40vw; } .pr-50vw { padding-right: 50vw; } .pr-60vw { padding-right: 60vw; } .pr-70vw { padding-right: 70vw; } .pr-80vw { padding-right: 80vw; } .pr-90vw { padding-right: 90vw; } .pr-05gap { padding-right: calc(0.5 * var(--colgap) ); } .pr-1gap { padding-right: calc(1 * var(--colgap) ); } .pr-2gap { padding-right: calc(2 * var(--colgap) ); } .pr-3gap { padding-right: calc(3 * var(--colgap) ); } .pr-4gap { padding-right: calc(4 * var(--colgap) ); } .pr-5gap { padding-right: calc(5 * var(--colgap) ); } /* Padding p-xl- -l- -s- -xs- ausgelassen ... vermutlich brauchen wir nur -m-, sonst ergänzen */ @media (max-width:1023px) { .p-m-0 { padding: 0rem; } .p-m-05 { padding: 0.5rem; } .p-m-1 { padding: 1rem; } .p-m-2 { padding: 2rem; } .p-m-3 { padding: 3rem; } .p-m-4 { padding: 4rem; } .p-m-5 { padding: 5rem; } .p-m-6 { padding: 6rem; } .p-m-7 { padding: 7rem; } .p-m-8 { padding: 8rem; } .p-m-9 { padding: 9rem; } .p-m-10 { padding: 10rem; } .p-m-025p { padding: 2.5%; } .p-m-5p { padding: 5%; } .p-m-10p { padding: 10%; } .p-m-20p { padding: 20%; } .p-m-30p { padding: 30%; } .p-m-40p { padding: 40%; } .p-m-50p { padding: 50%; } .p-m-60p { padding: 60%; } .p-m-70p { padding: 70%; } .p-m-80p { padding: 80%; } .p-m-90p { padding: 90%; } .p-m-100p { padding: 100%; } .p-m-1vw { padding: 1vw; } .p-m-2vw { padding: 2vw; } .p-m-3vw { padding: 3vw; } .p-m-4vw { padding: 4vw; } .p-m-5vw { padding: 5vw; } .p-m-6vw { padding: 6vw; } .p-m-7vw { padding: 7vw; } .p-m-8vw { padding: 8vw; } .p-m-9vw { padding: 9vw; } .p-m-10vw { padding: 10vw; } .p-m-20vw { padding: 20vw; } .p-m-30vw { padding: 30vw; } .p-m-40vw { padding: 40vw; } .p-m-50vw { padding: 50vw; } .p-m-60vw { padding: 60vw; } .p-m-70vw { padding: 70vw; } .p-m-80vw { padding: 80vw; } .p-m-90vw { padding: 90vw; } .p-m-05gap { padding: calc(0.5 * var(--colgap) ); } .p-m-1gap { padding: calc(1 * var(--colgap) ); } .p-m-2gap { padding: calc(2 * var(--colgap) ); } .p-m-3gap { padding: calc(3 * var(--colgap) ); } .p-m-4gap { padding: calc(4 * var(--colgap) ); } .p-m-5gap { padding: calc(5 * var(--colgap) ); } .pt-m-0 { padding-top: 0rem; } .pt-m-05 { padding-top: 0.5rem; } .pt-m-1 { padding-top: 1rem; } .pt-m-2 { padding-top: 2rem; } .pt-m-3 { padding-top: 3rem; } .pt-m-4 { padding-top: 4rem; } .pt-m-5 { padding-top: 5rem; } .pt-m-6 { padding-top: 6rem; } .pt-m-7 { padding-top: 7rem; } .pt-m-8 { padding-top: 8rem; } .pt-m-9 { padding-top: 9rem; } .pt-m-10 { padding-top: 10rem; } .pt-m-025p { padding-top: 2.5%; } .pt-m-5p { padding-top: 5%; } .pt-m-10p { padding-top: 10%; } .pt-m-20p { padding-top: 20%; } .pt-m-30p { padding-top: 30%; } .pt-m-40p { padding-top: 40%; } .pt-m-50p { padding-top: 50%; } .pt-m-60p { padding-top: 60%; } .pt-m-70p { padding-top: 70%; } .pt-m-80p { padding-top: 80%; } .pt-m-90p { padding-top: 90%; } .pt-m-100p { padding-top: 100%; } .pt-m-1vw { padding-top: 1vw; } .pt-m-2vw { padding-top: 2vw; } .pt-m-3vw { padding-top: 3vw; } .pt-m-4vw { padding-top: 4vw; } .pt-m-5vw { padding-top: 5vw; } .pt-m-6vw { padding-top: 6vw; } .pt-m-7vw { padding-top: 7vw; } .pt-m-8vw { padding-top: 8vw; } .pt-m-9vw { padding-top: 9vw; } .pt-m-10vw { padding-top: 10vw; } .pt-m-20vw { padding-top: 20vw; } .pt-m-30vw { padding-top: 30vw; } .pt-m-40vw { padding-top: 40vw; } .pt-m-50vw { padding-top: 50vw; } .pt-m-60vw { padding-top: 60vw; } .pt-m-70vw { padding-top: 70vw; } .pt-m-80vw { padding-top: 80vw; } .pt-m-90vw { padding-top: 90vw; } .pt-m-05gap { padding-top: calc(0.5 * var(--colgap) ); } .pt-m-1gap { padding-top: calc(1 * var(--colgap) ); } .pt-m-2gap { padding-top: calc(2 * var(--colgap) ); } .pt-m-3gap { padding-top: calc(3 * var(--colgap) ); } .pt-m-4gap { padding-top: calc(4 * var(--colgap) ); } .pt-m-5gap { padding-top: calc(5 * var(--colgap) ); } .pb-m-0 { padding-bottom: 0rem; } .pb-m-05 { padding-bottom: 0.5rem; } .pb-m-1 { padding-bottom: 1rem; } .pb-m-2 { padding-bottom: 2rem; } .pb-m-3 { padding-bottom: 3rem; } .pb-m-4 { padding-bottom: 4rem; } .pb-m-5 { padding-bottom: 5rem; } .pb-m-6 { padding-bottom: 6rem; } .pb-m-7 { padding-bottom: 7rem; } .pb-m-8 { padding-bottom: 8rem; } .pb-m-9 { padding-bottom: 9rem; } .pb-m-10 { padding-bottom: 10rem; } .pb-m-025p { padding-bottom: 2.5%; } .pb-m-5p { padding-bottom: 5%; } .pb-m-10p { padding-bottom: 10%; } .pb-m-20p { padding-bottom: 20%; } .pb-m-30p { padding-bottom: 30%; } .pb-m-40p { padding-bottom: 40%; } .pb-m-50p { padding-bottom: 50%; } .pb-m-60p { padding-bottom: 60%; } .pb-m-70p { padding-bottom: 70%; } .pb-m-80p { padding-bottom: 80%; } .pb-m-90p { padding-bottom: 90%; } .pb-m-100p { padding-bottom: 100%; } .pb-m-1vw { padding-bottom: 1vw; } .pb-m-2vw { padding-bottom: 2vw; } .pb-m-3vw { padding-bottom: 3vw; } .pb-m-4vw { padding-bottom: 4vw; } .pb-m-5vw { padding-bottom: 5vw; } .pb-m-6vw { padding-bottom: 6vw; } .pb-m-7vw { padding-bottom: 7vw; } .pb-m-8vw { padding-bottom: 8vw; } .pb-m-9vw { padding-bottom: 9vw; } .pb-m-10vw { padding-bottom: 10vw; } .pb-m-20vw { padding-bottom: 20vw; } .pb-m-30vw { padding-bottom: 30vw; } .pb-m-40vw { padding-bottom: 40vw; } .pb-m-50vw { padding-bottom: 50vw; } .pb-m-60vw { padding-bottom: 60vw; } .pb-m-70vw { padding-bottom: 70vw; } .pb-m-80vw { padding-bottom: 80vw; } .pb-m-90vw { padding-bottom: 90vw; } .pb-m-05gap { padding-bottom: calc(0.5 * var(--colgap) ); } .pb-m-1gap { padding-bottom: calc(1 * var(--colgap) ); } .pb-m-2gap { padding-bottom: calc(2 * var(--colgap) ); } .pb-m-3gap { padding-bottom: calc(3 * var(--colgap) ); } .pb-m-4gap { padding-bottom: calc(4 * var(--colgap) ); } .pb-m-5gap { padding-bottom: calc(5 * var(--colgap) ); } .pl-m-0 { padding-left: 0rem; } .pl-m-05 { padding-left: 0.5rem; } .pl-m-1 { padding-left: 1rem; } .pl-m-2 { padding-left: 2rem; } .pl-m-3 { padding-left: 3rem; } .pl-m-4 { padding-left: 4rem; } .pl-m-5 { padding-left: 5rem; } .pl-m-6 { padding-left: 6rem; } .pl-m-7 { padding-left: 7rem; } .pl-m-8 { padding-left: 8rem; } .pl-m-9 { padding-left: 9rem; } .pl-m-10 { padding-left: 10rem; } .pl-m-025p { padding-left: 2.5%; } .pl-m-5p { padding-left: 5%; } .pl-m-10p { padding-left: 10%; } .pl-m-20p { padding-left: 20%; } .pl-m-30p { padding-left: 30%; } .pl-m-40p { padding-left: 40%; } .pl-m-50p { padding-left: 50%; } .pl-m-60p { padding-left: 60%; } .pl-m-70p { padding-left: 70%; } .pl-m-80p { padding-left: 80%; } .pl-m-90p { padding-left: 90%; } .pl-m-100p { padding-left: 100%; } .pl-m-1vw { padding-left: 1vw; } .pl-m-2vw { padding-left: 2vw; } .pl-m-3vw { padding-left: 3vw; } .pl-m-4vw { padding-left: 4vw; } .pl-m-5vw { padding-left: 5vw; } .pl-m-6vw { padding-left: 6vw; } .pl-m-7vw { padding-left: 7vw; } .pl-m-8vw { padding-left: 8vw; } .pl-m-9vw { padding-left: 9vw; } .pl-m-10vw { padding-left: 10vw; } .pl-m-20vw { padding-left: 20vw; } .pl-m-30vw { padding-left: 30vw; } .pl-m-40vw { padding-left: 40vw; } .pl-m-50vw { padding-left: 50vw; } .pl-m-60vw { padding-left: 60vw; } .pl-m-70vw { padding-left: 70vw; } .pl-m-80vw { padding-left: 80vw; } .pl-m-90vw { padding-left: 90vw; } .pl-m-05gap { padding-left: calc(0.5 * var(--colgap) ); } .pl-m-1gap { padding-left: calc(1 * var(--colgap) ); } .pl-m-2gap { padding-left: calc(2 * var(--colgap) ); } .pl-m-3gap { padding-left: calc(3 * var(--colgap) ); } .pl-m-4gap { padding-left: calc(4 * var(--colgap) ); } .pl-m-5gap { padding-left: calc(5 * var(--colgap) ); } .pr-m-0 { padding-right: 0rem; } .pr-m-05 { padding-right: 0.5rem; } .pr-m-1 { padding-right: 1rem; } .pr-m-2 { padding-right: 2rem; } .pr-m-3 { padding-right: 3rem; } .pr-m-4 { padding-right: 4rem; } .pr-m-5 { padding-right: 5rem; } .pr-m-6 { padding-right: 6rem; } .pr-m-7 { padding-right: 7rem; } .pr-m-8 { padding-right: 8rem; } .pr-m-9 { padding-right: 9rem; } .pr-m-10 { padding-right: 10rem; } .pr-m-025p { padding-right: 2.5%; } .pr-m-5p { padding-right: 5%; } .pr-m-10p { padding-right: 10%; } .pr-m-20p { padding-right: 20%; } .pr-m-30p { padding-right: 30%; } .pr-m-40p { padding-right: 40%; } .pr-m-50p { padding-right: 50%; } .pr-m-60p { padding-right: 60%; } .pr-m-70p { padding-right: 70%; } .pr-m-80p { padding-right: 80%; } .pr-m-90p { padding-right: 90%; } .pr-m-100p { padding-right: 100%; } .pr-m-1vw { padding-right: 1vw; } .pr-m-2vw { padding-right: 2vw; } .pr-m-3vw { padding-right: 3vw; } .pr-m-4vw { padding-right: 4vw; } .pr-m-5vw { padding-right: 5vw; } .pr-m-6vw { padding-right: 6vw; } .pr-m-7vw { padding-right: 7vw; } .pr-m-8vw { padding-right: 8vw; } .pr-m-9vw { padding-right: 9vw; } .pr-m-10vw { padding-right: 10vw; } .pr-m-20vw { padding-right: 20vw; } .pr-m-30vw { padding-right: 30vw; } .pr-m-40vw { padding-right: 40vw; } .pr-m-50vw { padding-right: 50vw; } .pr-m-60vw { padding-right: 60vw; } .pr-m-70vw { padding-right: 70vw; } .pr-m-80vw { padding-right: 80vw; } .pr-m-90vw { padding-right: 90vw; } .pr-m-05gap { padding-right: calc(0.5 * var(--colgap) ); } .pr-m-1gap { padding-right: calc(1 * var(--colgap) ); } .pr-m-2gap { padding-right: calc(2 * var(--colgap) ); } .pr-m-3gap { padding-right: calc(3 * var(--colgap) ); } .pr-m-4gap { padding-right: calc(4 * var(--colgap) ); } .pr-m-5gap { padding-right: calc(5 * var(--colgap) ); } } /*** MARGINS ***/ /*** MARGINS ***/ .m-auto { margin: auto; } .m-noauto { margin: inherit !important; } .m-0 { --colgap: 0; margin:var(--colgap); } .m-05 { --colgap: 0.5rem; margin:var(--colgap); } .m-1 { --colgap: 1rem; margin:var(--colgap); } .m-2 { --colgap: 2rem; margin:var(--colgap); } .m-3 { --colgap: 3rem; margin:var(--colgap); } .m-4 { --colgap: 4rem; margin:var(--colgap); } .m-5 { --colgap: 5rem; margin:var(--colgap); } .m-6 { --colgap: 6rem; margin:var(--colgap); } .m-7 { --colgap: 7rem; margin:var(--colgap); } .m-8 { --colgap: 8rem; margin:var(--colgap); } .m-9 { --colgap: 9rem; margin:var(--colgap); } .m-10 { --colgap: 10rem; margin:var(--colgap); } .m-25p { --colgap: 2.5%; margin:var(--colgap); } .m-5p { --colgap: 5% ; margin:var(--colgap); } .m-10p { --colgap: 10% ; margin:var(--colgap); } .m-20p { --colgap: 20% ; margin:var(--colgap); } .m-30p { --colgap: 30% ; margin:var(--colgap); } .m-40p { --colgap: 40% ; margin:var(--colgap); } .m-50p { --colgap: 50% ; margin:var(--colgap); } .m-60p { --colgap: 60% ; margin:var(--colgap); } .m-70p { --colgap: 70% ; margin:var(--colgap); } .m-80p { --colgap: 80% ; margin:var(--colgap); } .m-90p { --colgap: 90% ; margin:var(--colgap); } .m-100p { --colgap: 100% ; margin:var(--colgap); } .m-1vw { --colgap: calc( var(--maxwidthlimit) * 0.01 ); margin:var(--colgap); } .m-2vw { --colgap: calc( var(--maxwidthlimit) * 0.02 ); margin:var(--colgap); } .m-025vw { --colgap: calc( var(--maxwidthlimit) * 0.025 ); margin:var(--colgap); } .m-3vw { --colgap: calc( var(--maxwidthlimit) * 0.03 ); margin:var(--colgap); } .m-4vw { --colgap: calc( var(--maxwidthlimit) * 0.04 ); margin:var(--colgap); } .m-5vw { --colgap: calc( var(--maxwidthlimit) * 0.05 ); margin:var(--colgap); } .m-10vw { --colgap: calc( var(--maxwidthlimit) * 0.1 ); margin:var(--colgap); } .m-20vw { --colgap: calc( var(--maxwidthlimit) * 0.2 ); margin:var(--colgap); } .m-30vw { --colgap: calc( var(--maxwidthlimit) * 0.3 ); margin:var(--colgap); } .m-40vw { --colgap: calc( var(--maxwidthlimit) * 0.4 ); margin:var(--colgap); } .m-50vw { --colgap: calc( var(--maxwidthlimit) * 0.5 ); margin:var(--colgap); } .m-60vw { --colgap: calc( var(--maxwidthlimit) * 0.6 ); margin:var(--colgap); } .m-70vw { --colgap: calc( var(--maxwidthlimit) * 0.7 ); margin:var(--colgap); } .m-80vw { --colgap: calc( var(--maxwidthlimit) * 0.8 ); margin:var(--colgap); } .m-90vw { --colgap: calc( var(--maxwidthlimit) * 0.9 ); margin:var(--colgap); } .m-100vw { --colgap: calc( var(--maxwidthlimit) * 100 ); margin:var(--colgap); } .m-0gap { --colgap: calc( 0 * var(--colgap) ); margin:var(--colgap); } .m-1gap { --colgap: calc( 1 * var(--colgap) ); margin:var(--colgap); } .m-2gap { --colgap: calc( 2 * var(--colgap) ); margin:var(--colgap); } .m-3gap { --colgap: calc( 3 * var(--colgap) ); margin:var(--colgap); } .m-4gap { --colgap: calc( 4 * var(--colgap) ); margin:var(--colgap); } .m-5gap { --colgap: calc( 5 * var(--colgap) ); margin:var(--colgap); } .m-6gap { --colgap: calc( 6 * var(--colgap) ); margin:var(--colgap); } .m-7gap { --colgap: calc( 7 * var(--colgap) ); margin:var(--colgap); } .m-8gap { --colgap: calc( 8 * var(--colgap) ); margin:var(--colgap); } .m-9gap { --colgap: calc( 9 * var(--colgap) ); margin:var(--colgap); } .m-10gap { --colgap: calc( 10 * var(--colgap) ); margin:var(--colgap); } .mt-auto { margin-top: auto ; } .mt-0 { margin-top: 0 ; } .mt--10 { margin-top: -10rem ; } .mt--9 { margin-top: -9rem ; } .mt--8 { margin-top: -8rem ; } .mt--7 { margin-top: -7rem ; } .mt--6 { margin-top: -6rem ; } .mt--5 { margin-top: -5rem ; } .mt--4 { margin-top: -4rem ; } .mt--3 { margin-top: -3rem ; } .mt--2 { margin-top: -2rem ; } .mt--1 { margin-top: -1rem ; } .mt-05 { margin-top: 0.5rem ; } .mt-1 { margin-top: 1rem ; } .mt-2 { margin-top: 2rem ; } .mt-3 { margin-top: 3rem ; } .mt-4 { margin-top: 4rem ; } .mt-5 { margin-top: 5rem ; } .mt-6 { margin-top: 6rem ; } .mt-7 { margin-top: 7rem ; } .mt-8 { margin-top: 8rem ; } .mt-9 { margin-top: 9rem ; } .mt-10 { margin-top: 10rem ; } .mt--30p { margin-top: -30% ; } .mt--20p { margin-top: -20% ; } .mt--15p { margin-top: -15% ; } .mt--10p { margin-top: -10% ; } .mt--5p { margin-top: -5% ; } .mt--025p { margin-top: -2.5% ; } .mt--02p { margin-top: -2% ; } .mt-025p { margin-top: 2.5% ; } .mt-5p { margin-top: 5% ; } .mt-10p { margin-top: 10% ; } .mt-15p { margin-top: 15% ; } .mt-20p { margin-top: 20% ; } .mt-30p { margin-top: 30% ; } .mt-1vh { margin-top: 1svh ; } .mt-2vh { margin-top: 2svh ; } .mt-3vh { margin-top: 3svh ; } .mt-4vh { margin-top: 4svh ; } .mt-5vh { margin-top: 5svh ; } .mt-6vh { margin-top: 6svh ; } .mt-7vh { margin-top: 7svh ; } .mt-8vh { margin-top: 8svh ; } .mt-9vh { margin-top: 9svh ; } .mt-10vh { margin-top: 10svh ; } .mt-15vh { margin-top: 15svh ; } .mt-25vh { margin-top: 25svh ; } .mt-33vh { margin-top: 33.33svh ; } .mt-50vh { margin-top: 50svh ; } .mt-66vh { margin-top: 66.66svh ; } .mt-100vh { margin-top: 100svh ; } .mt-05gap { margin-top: calc(0.5 * var(--colgap) ) ; } .mt-1gap { margin-top: var(--colgap) ; } .mt-2gap { margin-top: calc(2 * var(--colgap) ) ; } .mt-3gap { margin-top: calc(3 * var(--colgap) ) ; } .mt-4gap { margin-top: calc(4 * var(--colgap) ) ; } .mt-5gap { margin-top: calc(5 * var(--colgap) ) ; } .mt--3nav { margin-top: calc(-3 * var(--navheight)); } .mt--2nav { margin-top: calc(-2 * var(--navheight)); } .mt--1nav { margin-top: calc(-1 * var(--navheight)); } .mt-1nav { margin-top: var(--navheight); } .mt-2nav { margin-top: calc(2 * var(--navheight)) ; } .mt-3nav { margin-top: calc(3 * var(--navheight)) ; } .mb-auto { margin-bottom: auto ; } .mb-0 { margin-bottom: 0 ; } .mb--10 { margin-bottom: -10rem ; } .mb--9 { margin-bottom: -9rem ; } .mb--8 { margin-bottom: -8rem ; } .mb--7 { margin-bottom: -7rem ; } .mb--6 { margin-bottom: -6rem ; } .mb--5 { margin-bottom: -5rem ; } .mb--4 { margin-bottom: -4rem ; } .mb--3 { margin-bottom: -3rem ; } .mb--2 { margin-bottom: -2rem ; } .mb--1 { margin-bottom: -1rem ; } .mb-05 { margin-bottom: 0.5rem ; } .mb-1 { margin-bottom: 1rem ; } .mb-2 { margin-bottom: 2rem ; } .mb-3 { margin-bottom: 3rem ; } .mb-4 { margin-bottom: 4rem ; } .mb-5 { margin-bottom: 5rem ; } .mb-6 { margin-bottom: 6rem ; } .mb-7 { margin-bottom: 7rem ; } .mb-8 { margin-bottom: 8rem ; } .mb-9 { margin-bottom: 9rem ; } .mb-10 { margin-bottom: 10rem ; } .mb--30p { margin-bottom: -30% ; } .mb--20p { margin-bottom: -20% ; } .mb--15p { margin-bottom: -15% ; } .mb--10p { margin-bottom: -10% ; } .mb--5p { margin-bottom: -5% ; } .mb--025p { margin-bottom: -2.5% ; } .mb-025p { margin-bottom: 2.5% ; } .mb-5p { margin-bottom: 5% ; } .mb-10p { margin-bottom: 10% ; } .mb-15p { margin-bottom: 15% ; } .mb-20p { margin-bottom: 20% ; } .mb-30p { margin-bottom: 30% ; } .mb-1vh { margin-bottom: 1svh ; } .mb-2vh { margin-bottom: 2svh ; } .mb-3vh { margin-bottom: 3svh ; } .mb-4vh { margin-bottom: 4svh ; } .mb-5vh { margin-bottom: 5svh ; } .mb-6vh { margin-bottom: 6svh ; } .mb-7vh { margin-bottom: 7svh ; } .mb-8vh { margin-bottom: 8svh ; } .mb-9vh { margin-bottom: 9svh ; } .mb-10vh { margin-bottom: 10svh ; } .mb-15vh { margin-bottom: 15svh ; } .mb-25vh { margin-bottom: 25svh ; } .mb-33vh { margin-bottom: 33.33svh ; } .mb-50vh { margin-bottom: 50svh ; } .mb-66vh { margin-bottom: 66.66svh ; } .mb-100vh { margin-bottom: 100svh ; } .mb-05gap { margin-bottom: calc(0.5 * var(--colgap) ); } .mb-1gap { margin-bottom: calc(1 * var(--colgap) ); } .mb-2gap { margin-bottom: calc(2 * var(--colgap) ); } .mb-3gap { margin-bottom: calc(3 * var(--colgap) ); } .mb-4gap { margin-bottom: calc(4 * var(--colgap) ); } .mb-5gap { margin-bottom: calc(5 * var(--colgap) ); } .mb--3nav { margin-bottom: calc(-3 * var(--navheight)); } .mb--2nav { margin-bottom: calc(-2 * var(--navheight)); } .mb--1nav { margin-bottom: calc(-1 * var(--navheight)); } .mb-1nav { margin-bottom: calc(2 * var(--navheight)); } .mb-2nav { margin-bottom: calc(2 * var(--navheight)); } .mb-3nav { margin-bottom: calc(3 * var(--navheight)); } .ml-auto { margin-left: auto; } .ml-noauto { margin-left: inherit !important; } .ml-0 { --colgap-l: 0; } .ml-05 { --colgap-l: 0.5rem; margin-left: var(--colgap-l); } .ml-1 { --colgap-l: 1rem; margin-left: var(--colgap-l); } .ml-2 { --colgap-l: 2rem; margin-left: var(--colgap-l); } .ml-3 { --colgap-l: 3rem; margin-left: var(--colgap-l); } .ml-4 { --colgap-l: 4rem; margin-left: var(--colgap-l); } .ml-5 { --colgap-l: 5rem; margin-left: var(--colgap-l); } .ml-6 { --colgap-l: 6rem; margin-left: var(--colgap-l); } .ml-7 { --colgap-l: 7rem; margin-left: var(--colgap-l); } .ml-8 { --colgap-l: 8rem; margin-left: var(--colgap-l); } .ml-9 { --colgap-l: 9rem; margin-left: var(--colgap-l); } .ml-10 { --colgap-l: 10rem; margin-left: var(--colgap-l); } .ml-25p { --colgap-l: 2.5%; margin-left: var(--colgap-l); } .ml-5p { --colgap-l: 5% ; margin-left: var(--colgap-l); } .ml-10p { --colgap-l: 10% ; margin-left: var(--colgap-l); } .ml-20p { --colgap-l: 20% ; margin-left: var(--colgap-l); } .ml-30p { --colgap-l: 30% ; margin-left: var(--colgap-l); } .ml-40p { --colgap-l: 40% ; margin-left: var(--colgap-l); } .ml-50p { --colgap-l: 50% ; margin-left: var(--colgap-l); } .ml-60p { --colgap-l: 60% ; margin-left: var(--colgap-l); } .ml-70p { --colgap-l: 70% ; margin-left: var(--colgap-l); } .ml-80p { --colgap-l: 80% ; margin-left: var(--colgap-l); } .ml-90p { --colgap-l: 90% ; margin-left: var(--colgap-l); } .ml-100p { --colgap-l: 100% ; margin-left: var(--colgap-l); } .ml-025vw { --colgap-l: calc( var(--maxwidthlimit) * 0.025); margin-left: var(--colgap-l); } .ml-5vw { --colgap-l: calc( var(--maxwidthlimit) * 0.05 ); margin-left: var(--colgap-l); } .ml-10vw { --colgap-l: calc( var(--maxwidthlimit) * 0.1 ); margin-left: var(--colgap-l); } .ml-20vw { --colgap-l: calc( var(--maxwidthlimit) * 0.2 ); margin-left: var(--colgap-l); } .ml-30vw { --colgap-l: calc( var(--maxwidthlimit) * 0.3 ); margin-left: var(--colgap-l); } .ml-40vw { --colgap-l: calc( var(--maxwidthlimit) * 0.4 ); margin-left: var(--colgap-l); } .ml-50vw { --colgap-l: calc( var(--maxwidthlimit) * 0.5 ); margin-left: var(--colgap-l); } .ml-60vw { --colgap-l: calc( var(--maxwidthlimit) * 0.6 ); margin-left: var(--colgap-l); } .ml-70vw { --colgap-l: calc( var(--maxwidthlimit) * 0.7 ); margin-left: var(--colgap-l); } .ml-80vw { --colgap-l: calc( var(--maxwidthlimit) * 0.8 ); margin-left: var(--colgap-l); } .ml-90vw { --colgap-l: calc( var(--maxwidthlimit) * 0.9 ); margin-left: var(--colgap-l); } .ml-100vw { --colgap-l: calc( var(--maxwidthlimit) * 100 ); margin-left: var(--colgap-l); } .ml-0gap { --colgap-l: calc( 0 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-1gap { --colgap-l: calc( 1 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-2gap { --colgap-l: calc( 2 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-3gap { --colgap-l: calc( 3 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-4gap { --colgap-l: calc( 4 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-5gap { --colgap-l: calc( 5 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-6gap { --colgap-l: calc( 6 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-7gap { --colgap-l: calc( 7 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-8gap { --colgap-l: calc( 8 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-9gap { --colgap-l: calc( 9 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-10gap { --colgap-l: calc( 10 * var(--colgap)); margin-left: var(--colgap-l); } .mr-auto { margin-right: auto; } .mr-noauto { margin-right: inherit !important; } .mr-0 { --colgap-r: 0; } .mr-05 { --colgap-r: 0.5rem; margin-right: var(--colgap-r); } .mr-1 { --colgap-r: 1rem; margin-right: var(--colgap-r); } .mr-2 { --colgap-r: 2rem; margin-right: var(--colgap-r); } .mr-3 { --colgap-r: 3rem; margin-right: var(--colgap-r); } .mr-4 { --colgap-r: 4rem; margin-right: var(--colgap-r); } .mr-5 { --colgap-r: 5rem; margin-right: var(--colgap-r); } .mr-6 { --colgap-r: 6rem; margin-right: var(--colgap-r); } .mr-7 { --colgap-r: 7rem; margin-right: var(--colgap-r); } .mr-8 { --colgap-r: 8rem; margin-right: var(--colgap-r); } .mr-9 { --colgap-r: 9rem; margin-right: var(--colgap-r); } .mr-10 { --colgap-r: 10rem; margin-right: var(--colgap-r); } .mr-25p { --colgap-r: 2.5%; margin-right: var(--colgap-r); } .mr-5p { --colgap-r: 5% ; margin-right: var(--colgap-r); } .mr-10p { --colgap-r: 10% ; margin-right: var(--colgap-r); } .mr-20p { --colgap-r: 20% ; margin-right: var(--colgap-r); } .mr-30p { --colgap-r: 30% ; margin-right: var(--colgap-r); } .mr-40p { --colgap-r: 40% ; margin-right: var(--colgap-r); } .mr-50p { --colgap-r: 50% ; margin-right: var(--colgap-r); } .mr-60p { --colgap-r: 60% ; margin-right: var(--colgap-r); } .mr-70p { --colgap-r: 70% ; margin-right: var(--colgap-r); } .mr-80p { --colgap-r: 80% ; margin-right: var(--colgap-r); } .mr-90p { --colgap-r: 90% ; margin-right: var(--colgap-r); } .mr-100p { --colgap-r: 100% ; margin-right: var(--colgap-r); } .mr-025vw { --colgap-r: calc( var(--maxwidthlimit) * 0.025); margin-right: var(--colgap-r); } .mr-5vw { --colgap-r: calc( var(--maxwidthlimit) * 0.05 ); margin-right: var(--colgap-r); } .mr-10vw { --colgap-r: calc( var(--maxwidthlimit) * 0.1 ); margin-right: var(--colgap-r); } .mr-20vw { --colgap-r: calc( var(--maxwidthlimit) * 0.2 ); margin-right: var(--colgap-r); } .mr-30vw { --colgap-r: calc( var(--maxwidthlimit) * 0.3 ); margin-right: var(--colgap-r); } .mr-40vw { --colgap-r: calc( var(--maxwidthlimit) * 0.4 ); margin-right: var(--colgap-r); } .mr-50vw { --colgap-r: calc( var(--maxwidthlimit) * 0.5 ); margin-right: var(--colgap-r); } .mr-60vw { --colgap-r: calc( var(--maxwidthlimit) * 0.6 ); margin-right: var(--colgap-r); } .mr-70vw { --colgap-r: calc( var(--maxwidthlimit) * 0.7 ); margin-right: var(--colgap-r); } .mr-80vw { --colgap-r: calc( var(--maxwidthlimit) * 0.8 ); margin-right: var(--colgap-r); } .mr-90vw { --colgap-r: calc( var(--maxwidthlimit) * 0.9 ); margin-right: var(--colgap-r); } .mr-100vw { --colgap-r: calc( var(--maxwidthlimit) * 100 ); margin-right: var(--colgap-r); } .mr-0gap { --colgap-r: calc( 0 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-1gap { --colgap-r: calc( 1 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-2gap { --colgap-r: calc( 2 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-3gap { --colgap-r: calc( 3 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-4gap { --colgap-r: calc( 4 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-5gap { --colgap-r: calc( 5 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-6gap { --colgap-r: calc( 6 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-7gap { --colgap-r: calc( 7 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-8gap { --colgap-r: calc( 8 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-9gap { --colgap-r: calc( 9 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-10gap { --colgap-r: calc( 10 * var(--colgap)); margin-right: var(--colgap-r); } @media (max-width:1365px) { .m-xl-auto { margin: auto; } .m-xl-noauto { margin: inherit !important; } .m-xl-0 { --colgap: 0; margin:var(--colgap); } .m-xl-05 { --colgap: 0.5rem; margin:var(--colgap); } .m-xl-1 { --colgap: 1rem; margin:var(--colgap); } .m-xl-2 { --colgap: 2rem; margin:var(--colgap); } .m-xl-3 { --colgap: 3rem; margin:var(--colgap); } .m-xl-4 { --colgap: 4rem; margin:var(--colgap); } .m-xl-5 { --colgap: 5rem; margin:var(--colgap); } .m-xl-6 { --colgap: 6rem; margin:var(--colgap); } .m-xl-7 { --colgap: 7rem; margin:var(--colgap); } .m-xl-8 { --colgap: 8rem; margin:var(--colgap); } .m-xl-9 { --colgap: 9rem; margin:var(--colgap); } .m-xl-10 { --colgap: 10rem; margin:var(--colgap); } .m-xl-25p { --colgap: 2.5%; margin:var(--colgap); } .m-xl-5p { --colgap: 5% ; margin:var(--colgap); } .m-xl-10p { --colgap: 10% ; margin:var(--colgap); } .m-xl-20p { --colgap: 20% ; margin:var(--colgap); } .m-xl-30p { --colgap: 30% ; margin:var(--colgap); } .m-xl-40p { --colgap: 40% ; margin:var(--colgap); } .m-xl-50p { --colgap: 50% ; margin:var(--colgap); } .m-xl-60p { --colgap: 60% ; margin:var(--colgap); } .m-xl-70p { --colgap: 70% ; margin:var(--colgap); } .m-xl-80p { --colgap: 80% ; margin:var(--colgap); } .m-xl-90p { --colgap: 90% ; margin:var(--colgap); } .m-xl-100p { --colgap: 100% ; margin:var(--colgap); } .m-xl-1vw { --colgap: calc( var(--maxwidthlimit) * 0.01 ); margin:var(--colgap); } .m-xl-2vw { --colgap: calc( var(--maxwidthlimit) * 0.02 ); margin:var(--colgap); } .m-xl-025vw { --colgap: calc( var(--maxwidthlimit) * 0.025 ); margin:var(--colgap); } .m-xl-3vw { --colgap: calc( var(--maxwidthlimit) * 0.03 ); margin:var(--colgap); } .m-xl-4vw { --colgap: calc( var(--maxwidthlimit) * 0.04 ); margin:var(--colgap); } .m-xl-5vw { --colgap: calc( var(--maxwidthlimit) * 0.05 ); margin:var(--colgap); } .m-xl-10vw { --colgap: calc( var(--maxwidthlimit) * 0.1 ); margin:var(--colgap); } .m-xl-20vw { --colgap: calc( var(--maxwidthlimit) * 0.2 ); margin:var(--colgap); } .m-xl-30vw { --colgap: calc( var(--maxwidthlimit) * 0.3 ); margin:var(--colgap); } .m-xl-40vw { --colgap: calc( var(--maxwidthlimit) * 0.4 ); margin:var(--colgap); } .m-xl-50vw { --colgap: calc( var(--maxwidthlimit) * 0.5 ); margin:var(--colgap); } .m-xl-60vw { --colgap: calc( var(--maxwidthlimit) * 0.6 ); margin:var(--colgap); } .m-xl-70vw { --colgap: calc( var(--maxwidthlimit) * 0.7 ); margin:var(--colgap); } .m-xl-80vw { --colgap: calc( var(--maxwidthlimit) * 0.8 ); margin:var(--colgap); } .m-xl-90vw { --colgap: calc( var(--maxwidthlimit) * 0.9 ); margin:var(--colgap); } .m-xl-100vw { --colgap: calc( var(--maxwidthlimit) * 100 ); margin:var(--colgap); } .m-xl-0gap { --colgap: calc( 0 * var(--colgap) ); margin:var(--colgap); } .m-xl-1gap { --colgap: calc( 1 * var(--colgap) ); margin:var(--colgap); } .m-xl-2gap { --colgap: calc( 2 * var(--colgap) ); margin:var(--colgap); } .m-xl-3gap { --colgap: calc( 3 * var(--colgap) ); margin:var(--colgap); } .m-xl-4gap { --colgap: calc( 4 * var(--colgap) ); margin:var(--colgap); } .m-xl-5gap { --colgap: calc( 5 * var(--colgap) ); margin:var(--colgap); } .m-xl-6gap { --colgap: calc( 6 * var(--colgap) ); margin:var(--colgap); } .m-xl-7gap { --colgap: calc( 7 * var(--colgap) ); margin:var(--colgap); } .m-xl-8gap { --colgap: calc( 8 * var(--colgap) ); margin:var(--colgap); } .m-xl-9gap { --colgap: calc( 9 * var(--colgap) ); margin:var(--colgap); } .m-xl-10gap { --colgap: calc( 10 * var(--colgap) ); margin:var(--colgap); } .mt-xl-auto { margin-top: auto ; } .mt-xl-noauto { margin-top: inherit !important; } .mt-xl-0 { margin-top: 0 ; } .mt-xl--10 { margin-top: -10rem ; } .mt-xl--9 { margin-top: -9rem ; } .mt-xl--8 { margin-top: -8rem ; } .mt-xl--7 { margin-top: -7rem ; } .mt-xl--6 { margin-top: -6rem ; } .mt-xl--5 { margin-top: -5rem ; } .mt-xl--4 { margin-top: -4rem ; } .mt-xl--3 { margin-top: -3rem ; } .mt-xl--2 { margin-top: -2rem ; } .mt-xl--1 { margin-top: -1rem ; } .mt-xl-05 { margin-top: 0.5rem ; } .mt-xl-1 { margin-top: 1rem ; } .mt-xl-2 { margin-top: 2rem ; } .mt-xl-3 { margin-top: 3rem ; } .mt-xl-4 { margin-top: 4rem ; } .mt-xl-5 { margin-top: 5rem ; } .mt-xl-6 { margin-top: 6rem ; } .mt-xl-7 { margin-top: 7rem ; } .mt-xl-8 { margin-top: 8rem ; } .mt-xl-9 { margin-top: 9rem ; } .mt-xl-10 { margin-top: 10rem ; } .mt-xl--30p { margin-top: -30% ; } .mt-xl--20p { margin-top: -20% ; } .mt-xl--15p { margin-top: -15% ; } .mt-xl--10p { margin-top: -10% ; } .mt-xl--5p { margin-top: -5% ; } .mt-xl--025p { margin-top: -2.5% ; } .mt-xl-025p { margin-top: 2.5% ; } .mt-xl-5p { margin-top: 5% ; } .mt-xl-10p { margin-top: 10% ; } .mt-xl-15p { margin-top: 15% ; } .mt-xl-20p { margin-top: 20% ; } .mt-xl-30p { margin-top: 30% ; } .mt-xl-1vh { margin-top: 1svh ; } .mt-xl-2vh { margin-top: 2svh ; } .mt-xl-3vh { margin-top: 3svh ; } .mt-xl-4vh { margin-top: 4svh ; } .mt-xl-5vh { margin-top: 5svh ; } .mt-xl-6vh { margin-top: 6svh ; } .mt-xl-7vh { margin-top: 7svh ; } .mt-xl-8vh { margin-top: 8svh ; } .mt-xl-9vh { margin-top: 9svh ; } .mt-xl-10vh { margin-top: 10svh ; } .mt-xl-25vh { margin-top: 25svh ; } .mt-xl-33vh { margin-top: 33.33svh ; } .mt-xl-50vh { margin-top: 50svh ; } .mt-xl-66vh { margin-top: 66.66svh ; } .mt-xl-100vh { margin-top: 100svh ; } .mt-xl-05gap { margin-top: calc(0.5 * var(--colgap) ) ; } .mt-xl-1gap { margin-top: var(--colgap) ; } .mt-xl-2gap { margin-top: calc(2 * var(--colgap) ) ; } .mt-xl-3gap { margin-top: calc(3 * var(--colgap) ) ; } .mt-xl-4gap { margin-top: calc(4 * var(--colgap) ) ; } .mt-xl-5gap { margin-top: calc(5 * var(--colgap) ) ; } .mt-xl--3nav { margin-top: calc(-3 * var(--navheight)); } .mt-xl--2nav { margin-top: calc(-2 * var(--navheight)); } .mt-xl--1nav { margin-top: calc(-1 * var(--navheight)); } .mt-xl-1nav { margin-top: var(--navheight); } .mt-xl-2nav { margin-top: calc(2 * var(--navheight)) ; } .mt-xl-3nav { margin-top: calc(3 * var(--navheight)) ; } .mb-xl-auto { margin-bottom: auto ; } .mb-xl-noauto { margin-bottom: inherit !important; } .mb-xl-0 { margin-bottom: 0 ; } .mb-xl--10 { margin-bottom: -10rem ; } .mb-xl--9 { margin-bottom: -9rem ; } .mb-xl--8 { margin-bottom: -8rem ; } .mb-xl--7 { margin-bottom: -7rem ; } .mb-xl--6 { margin-bottom: -6rem ; } .mb-xl--5 { margin-bottom: -5rem ; } .mb-xl--4 { margin-bottom: -4rem ; } .mb-xl--3 { margin-bottom: -3rem ; } .mb-xl--2 { margin-bottom: -2rem ; } .mb-xl--1 { margin-bottom: -1rem ; } .mb-xl-05 { margin-bottom: 0.5rem ; } .mb-xl-1 { margin-bottom: 1rem ; } .mb-xl-2 { margin-bottom: 2rem ; } .mb-xl-3 { margin-bottom: 3rem ; } .mb-xl-4 { margin-bottom: 4rem ; } .mb-xl-5 { margin-bottom: 5rem ; } .mb-xl-6 { margin-bottom: 6rem ; } .mb-xl-7 { margin-bottom: 7rem ; } .mb-xl-8 { margin-bottom: 8rem ; } .mb-xl-9 { margin-bottom: 9rem ; } .mb-xl-10 { margin-bottom: 10rem ; } .mb-xl--30p { margin-bottom: -30% ; } .mb-xl--20p { margin-bottom: -20% ; } .mb-xl--15p { margin-bottom: -15% ; } .mb-xl--10p { margin-bottom: -10% ; } .mb-xl--5p { margin-bottom: -5% ; } .mb-xl--025p { margin-bottom: -2.5% ; } .mb-xl-025p { margin-bottom: 2.5% ; } .mb-xl-5p { margin-bottom: 5% ; } .mb-xl-10p { margin-bottom: 10% ; } .mb-xl-15p { margin-bottom: 15% ; } .mb-xl-20p { margin-bottom: 20% ; } .mb-xl-30p { margin-bottom: 30% ; } .mb-xl-1vh { margin-bottom: 1svh ; } .mb-xl-2vh { margin-bottom: 2svh ; } .mb-xl-3vh { margin-bottom: 3svh ; } .mb-xl-4vh { margin-bottom: 4svh ; } .mb-xl-5vh { margin-bottom: 5svh ; } .mb-xl-6vh { margin-bottom: 6svh ; } .mb-xl-7vh { margin-bottom: 7svh ; } .mb-xl-8vh { margin-bottom: 8svh ; } .mb-xl-9vh { margin-bottom: 9svh ; } .mb-xl-10vh { margin-bottom: 10svh ; } .mb-xl-25vh { margin-bottom: 25svh ; } .mb-xl-33vh { margin-bottom: 33.33svh ; } .mb-xl-50vh { margin-bottom: 50svh ; } .mb-xl-66vh { margin-bottom: 66.66svh ; } .mb-xl-100vh { margin-bottom: 100svh ; } .mb-xl-05gap { margin-bottom: calc(0.5 * var(--colgap) ) ; } .mb-xl-1gap { margin-bottom: var(--colgap) ; } .mb-xl-2gap { margin-bottom: calc(2 * var(--colgap) ) ; } .mb-xl-3gap { margin-bottom: calc(3 * var(--colgap) ) ; } .mb-xl-4gap { margin-bottom: calc(4 * var(--colgap) ) ; } .mb-xl-5gap { margin-bottom: calc(5 * var(--colgap) ) ; } .mb-xl--3nav { margin-bottom: calc(-3 * var(--navheight)); } .mb-xl--2nav { margin-bottom: calc(-2 * var(--navheight)); } .mb-xl--1nav { margin-bottom: calc(-1 * var(--navheight)); } .mb-xl-1nav { margin-bottom: var(--navheight); } .mb-xl-2nav { margin-bottom: calc(2 * var(--navheight)) ; } .mb-xl-3nav { margin-bottom: calc(3 * var(--navheight)) ; } .ml-xl-auto { margin-left: auto; } .ml-xl-noauto { margin-left: inherit !important; } .ml-xl-0 { --colgap-l: 0; margin-left: var(--colgap-l); } .ml-xl-05 { --colgap-l: 0.5rem; margin-left: var(--colgap-l); } .ml-xl-1 { --colgap-l: 1rem; margin-left: var(--colgap-l); } .ml-xl-2 { --colgap-l: 2rem; margin-left: var(--colgap-l); } .ml-xl-3 { --colgap-l: 3rem; margin-left: var(--colgap-l); } .ml-xl-4 { --colgap-l: 4rem; margin-left: var(--colgap-l); } .ml-xl-5 { --colgap-l: 5rem; margin-left: var(--colgap-l); } .ml-xl-6 { --colgap-l: 6rem; margin-left: var(--colgap-l); } .ml-xl-7 { --colgap-l: 7rem; margin-left: var(--colgap-l); } .ml-xl-8 { --colgap-l: 8rem; margin-left: var(--colgap-l); } .ml-xl-9 { --colgap-l: 9rem; margin-left: var(--colgap-l); } .ml-xl-10 { --colgap-l: 10rem; margin-left: var(--colgap-l); } .ml-xl-25p { --colgap-l: 2.5%; margin-left: var(--colgap-l); } .ml-xl-5p { --colgap-l: 5% ; margin-left: var(--colgap-l); } .ml-xl-10p { --colgap-l: 10% ; margin-left: var(--colgap-l); } .ml-xl-20p { --colgap-l: 20% ; margin-left: var(--colgap-l); } .ml-xl-30p { --colgap-l: 30% ; margin-left: var(--colgap-l); } .ml-xl-40p { --colgap-l: 40% ; margin-left: var(--colgap-l); } .ml-xl-50p { --colgap-l: 50% ; margin-left: var(--colgap-l); } .ml-xl-60p { --colgap-l: 60% ; margin-left: var(--colgap-l); } .ml-xl-70p { --colgap-l: 70% ; margin-left: var(--colgap-l); } .ml-xl-80p { --colgap-l: 80% ; margin-left: var(--colgap-l); } .ml-xl-90p { --colgap-l: 90% ; margin-left: var(--colgap-l); } .ml-xl-100p { --colgap-l: 100% ; margin-left: var(--colgap-l); } .ml-xl-025vw { --colgap-l: calc( var(--maxwidthlimit) * 0.025); margin-left: var(--colgap-l); } .ml-xl-5vw { --colgap-l: calc( var(--maxwidthlimit) * 0.05 ); margin-left: var(--colgap-l); } .ml-xl-10vw { --colgap-l: calc( var(--maxwidthlimit) * 0.1 ); margin-left: var(--colgap-l); } .ml-xl-20vw { --colgap-l: calc( var(--maxwidthlimit) * 0.2 ); margin-left: var(--colgap-l); } .ml-xl-30vw { --colgap-l: calc( var(--maxwidthlimit) * 0.3 ); margin-left: var(--colgap-l); } .ml-xl-40vw { --colgap-l: calc( var(--maxwidthlimit) * 0.4 ); margin-left: var(--colgap-l); } .ml-xl-50vw { --colgap-l: calc( var(--maxwidthlimit) * 0.5 ); margin-left: var(--colgap-l); } .ml-xl-60vw { --colgap-l: calc( var(--maxwidthlimit) * 0.6 ); margin-left: var(--colgap-l); } .ml-xl-70vw { --colgap-l: calc( var(--maxwidthlimit) * 0.7 ); margin-left: var(--colgap-l); } .ml-xl-80vw { --colgap-l: calc( var(--maxwidthlimit) * 0.8 ); margin-left: var(--colgap-l); } .ml-xl-90vw { --colgap-l: calc( var(--maxwidthlimit) * 0.9 ); margin-left: var(--colgap-l); } .ml-xl-100vw { --colgap-l: calc( var(--maxwidthlimit) * 100 ); margin-left: var(--colgap-l); } .ml-xl-0gap { --colgap-l: calc( 0 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-1gap { --colgap-l: calc( 1 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-2gap { --colgap-l: calc( 2 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-3gap { --colgap-l: calc( 3 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-4gap { --colgap-l: calc( 4 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-5gap { --colgap-l: calc( 5 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-6gap { --colgap-l: calc( 6 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-7gap { --colgap-l: calc( 7 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-8gap { --colgap-l: calc( 8 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-9gap { --colgap-l: calc( 9 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-10gap { --colgap-l: calc( 10 * var(--colgap)); margin-left: var(--colgap-l); } .mr-xl-auto { margin-right: auto; } .mr-xl-noauto { margin-right: inherit !important; } .mr-xl-0 { --colgap-r: 0; margin-right: var(--colgap-r); } .mr-xl-05 { --colgap-r: 0.5rem; margin-right: var(--colgap-r); } .mr-xl-1 { --colgap-r: 1rem; margin-right: var(--colgap-r); } .mr-xl-2 { --colgap-r: 2rem; margin-right: var(--colgap-r); } .mr-xl-3 { --colgap-r: 3rem; margin-right: var(--colgap-r); } .mr-xl-4 { --colgap-r: 4rem; margin-right: var(--colgap-r); } .mr-xl-5 { --colgap-r: 5rem; margin-right: var(--colgap-r); } .mr-xl-6 { --colgap-r: 6rem; margin-right: var(--colgap-r); } .mr-xl-7 { --colgap-r: 7rem; margin-right: var(--colgap-r); } .mr-xl-8 { --colgap-r: 8rem; margin-right: var(--colgap-r); } .mr-xl-9 { --colgap-r: 9rem; margin-right: var(--colgap-r); } .mr-xl-10 { --colgap-r: 10rem; margin-right: var(--colgap-r); } .mr-xl-25p { --colgap-r: 2.5%; margin-right: var(--colgap-r); } .mr-xl-5p { --colgap-r: 5% ; margin-right: var(--colgap-r); } .mr-xl-10p { --colgap-r: 10% ; margin-right: var(--colgap-r); } .mr-xl-20p { --colgap-r: 20% ; margin-right: var(--colgap-r); } .mr-xl-30p { --colgap-r: 30% ; margin-right: var(--colgap-r); } .mr-xl-40p { --colgap-r: 40% ; margin-right: var(--colgap-r); } .mr-xl-50p { --colgap-r: 50% ; margin-right: var(--colgap-r); } .mr-xl-60p { --colgap-r: 60% ; margin-right: var(--colgap-r); } .mr-xl-70p { --colgap-r: 70% ; margin-right: var(--colgap-r); } .mr-xl-80p { --colgap-r: 80% ; margin-right: var(--colgap-r); } .mr-xl-90p { --colgap-r: 90% ; margin-right: var(--colgap-r); } .mr-xl-100p { --colgap-r: 100% ; margin-right: var(--colgap-r); } .mr-xl-025vw { --colgap-r: calc( var(--maxwidthlimit) * 0.025); margin-right: var(--colgap-r); } .mr-xl-5vw { --colgap-r: calc( var(--maxwidthlimit) * 0.05 ); margin-right: var(--colgap-r); } .mr-xl-10vw { --colgap-r: calc( var(--maxwidthlimit) * 0.1 ); margin-right: var(--colgap-r); } .mr-xl-20vw { --colgap-r: calc( var(--maxwidthlimit) * 0.2 ); margin-right: var(--colgap-r); } .mr-xl-30vw { --colgap-r: calc( var(--maxwidthlimit) * 0.3 ); margin-right: var(--colgap-r); } .mr-xl-40vw { --colgap-r: calc( var(--maxwidthlimit) * 0.4 ); margin-right: var(--colgap-r); } .mr-xl-50vw { --colgap-r: calc( var(--maxwidthlimit) * 0.5 ); margin-right: var(--colgap-r); } .mr-xl-60vw { --colgap-r: calc( var(--maxwidthlimit) * 0.6 ); margin-right: var(--colgap-r); } .mr-xl-70vw { --colgap-r: calc( var(--maxwidthlimit) * 0.7 ); margin-right: var(--colgap-r); } .mr-xl-80vw { --colgap-r: calc( var(--maxwidthlimit) * 0.8 ); margin-right: var(--colgap-r); } .mr-xl-90vw { --colgap-r: calc( var(--maxwidthlimit) * 0.9 ); margin-right: var(--colgap-r); } .mr-xl-100vw { --colgap-r: calc( var(--maxwidthlimit) * 100 ); margin-right: var(--colgap-r); } .mr-xl-0gap { --colgap-r: calc( 0 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-1gap { --colgap-r: calc( 1 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-2gap { --colgap-r: calc( 2 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-3gap { --colgap-r: calc( 3 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-4gap { --colgap-r: calc( 4 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-5gap { --colgap-r: calc( 5 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-6gap { --colgap-r: calc( 6 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-7gap { --colgap-r: calc( 7 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-8gap { --colgap-r: calc( 8 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-9gap { --colgap-r: calc( 9 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-10gap { --colgap-r: calc( 10 * var(--colgap)); margin-right: var(--colgap-r); } } @media (max-width:1279px) { .m-l-auto { margin: auto; } .m-l-noauto { margin: inherit !important; } .m-l-0 { --colgap: 0; margin:var(--colgap); } .m-l-05 { --colgap: 0.5rem; margin:var(--colgap); } .m-l-1 { --colgap: 1rem; margin:var(--colgap); } .m-l-2 { --colgap: 2rem; margin:var(--colgap); } .m-l-3 { --colgap: 3rem; margin:var(--colgap); } .m-l-4 { --colgap: 4rem; margin:var(--colgap); } .m-l-5 { --colgap: 5rem; margin:var(--colgap); } .m-l-6 { --colgap: 6rem; margin:var(--colgap); } .m-l-7 { --colgap: 7rem; margin:var(--colgap); } .m-l-8 { --colgap: 8rem; margin:var(--colgap); } .m-l-9 { --colgap: 9rem; margin:var(--colgap); } .m-l-10 { --colgap: 10rem; margin:var(--colgap); } .m-l-25p { --colgap: 2.5%; margin:var(--colgap); } .m-l-5p { --colgap: 5% ; margin:var(--colgap); } .m-l-10p { --colgap: 10% ; margin:var(--colgap); } .m-l-20p { --colgap: 20% ; margin:var(--colgap); } .m-l-30p { --colgap: 30% ; margin:var(--colgap); } .m-l-40p { --colgap: 40% ; margin:var(--colgap); } .m-l-50p { --colgap: 50% ; margin:var(--colgap); } .m-l-60p { --colgap: 60% ; margin:var(--colgap); } .m-l-70p { --colgap: 70% ; margin:var(--colgap); } .m-l-80p { --colgap: 80% ; margin:var(--colgap); } .m-l-90p { --colgap: 90% ; margin:var(--colgap); } .m-l-100p { --colgap: 100% ; margin:var(--colgap); } .m-l-1vw { --colgap: calc( var(--maxwidthlimit) * 0.01 ); margin:var(--colgap); } .m-l-2vw { --colgap: calc( var(--maxwidthlimit) * 0.02 ); margin:var(--colgap); } .m-l-025vw { --colgap: calc( var(--maxwidthlimit) * 0.025 ); margin:var(--colgap); } .m-l-3vw { --colgap: calc( var(--maxwidthlimit) * 0.03 ); margin:var(--colgap); } .m-l-4vw { --colgap: calc( var(--maxwidthlimit) * 0.04 ); margin:var(--colgap); } .m-l-5vw { --colgap: calc( var(--maxwidthlimit) * 0.05 ); margin:var(--colgap); } .m-l-10vw { --colgap: calc( var(--maxwidthlimit) * 0.1 ); margin:var(--colgap); } .m-l-20vw { --colgap: calc( var(--maxwidthlimit) * 0.2 ); margin:var(--colgap); } .m-l-30vw { --colgap: calc( var(--maxwidthlimit) * 0.3 ); margin:var(--colgap); } .m-l-40vw { --colgap: calc( var(--maxwidthlimit) * 0.4 ); margin:var(--colgap); } .m-l-50vw { --colgap: calc( var(--maxwidthlimit) * 0.5 ); margin:var(--colgap); } .m-l-60vw { --colgap: calc( var(--maxwidthlimit) * 0.6 ); margin:var(--colgap); } .m-l-70vw { --colgap: calc( var(--maxwidthlimit) * 0.7 ); margin:var(--colgap); } .m-l-80vw { --colgap: calc( var(--maxwidthlimit) * 0.8 ); margin:var(--colgap); } .m-l-90vw { --colgap: calc( var(--maxwidthlimit) * 0.9 ); margin:var(--colgap); } .m-l-100vw { --colgap: calc( var(--maxwidthlimit) * 100 ); margin:var(--colgap); } .m-l-0gap { --colgap: calc( 0 * var(--colgap) ); margin:var(--colgap); } .m-l-1gap { --colgap: calc( 1 * var(--colgap) ); margin:var(--colgap); } .m-l-2gap { --colgap: calc( 2 * var(--colgap) ); margin:var(--colgap); } .m-l-3gap { --colgap: calc( 3 * var(--colgap) ); margin:var(--colgap); } .m-l-4gap { --colgap: calc( 4 * var(--colgap) ); margin:var(--colgap); } .m-l-5gap { --colgap: calc( 5 * var(--colgap) ); margin:var(--colgap); } .m-l-6gap { --colgap: calc( 6 * var(--colgap) ); margin:var(--colgap); } .m-l-7gap { --colgap: calc( 7 * var(--colgap) ); margin:var(--colgap); } .m-l-8gap { --colgap: calc( 8 * var(--colgap) ); margin:var(--colgap); } .m-l-9gap { --colgap: calc( 9 * var(--colgap) ); margin:var(--colgap); } .m-l-10gap { --colgap: calc( 10 * var(--colgap) ); margin:var(--colgap); } .mt-l-auto { margin-top: auto ; } .mt-l-noauto { margin: inherit !important; } .mt-l-0 { margin-top: 0 ; } .mt-l--10 { margin-top: -10rem ; } .mt-l--9 { margin-top: -9rem ; } .mt-l--8 { margin-top: -8rem ; } .mt-l--7 { margin-top: -7rem ; } .mt-l--6 { margin-top: -6rem ; } .mt-l--5 { margin-top: -5rem ; } .mt-l--4 { margin-top: -4rem ; } .mt-l--3 { margin-top: -3rem ; } .mt-l--2 { margin-top: -2rem ; } .mt-l--1 { margin-top: -1rem ; } .mt-l-05 { margin-top: 0.5rem ; } .mt-l-1 { margin-top: 1rem ; } .mt-l-2 { margin-top: 2rem ; } .mt-l-3 { margin-top: 3rem ; } .mt-l-4 { margin-top: 4rem ; } .mt-l-5 { margin-top: 5rem ; } .mt-l-6 { margin-top: 6rem ; } .mt-l-7 { margin-top: 7rem ; } .mt-l-8 { margin-top: 8rem ; } .mt-l-9 { margin-top: 9rem ; } .mt-l-10 { margin-top: 10rem ; } .mt-l--30p { margin-top: -30% ; } .mt-l--20p { margin-top: -20% ; } .mt-l--15p { margin-top: -15% ; } .mt-l--10p { margin-top: -10% ; } .mt-l--5p { margin-top: -5% ; } .mt-l--025p { margin-top: -2.5% ; } .mt-l-025p { margin-top: 2.5% ; } .mt-l-5p { margin-top: 5% ; } .mt-l-10p { margin-top: 10% ; } .mt-l-15p { margin-top: 15% ; } .mt-l-20p { margin-top: 20% ; } .mt-l-30p { margin-top: 30% ; } .mt-l-1vh { margin-top: 1svh ; } .mt-l-2vh { margin-top: 2svh ; } .mt-l-3vh { margin-top: 3svh ; } .mt-l-4vh { margin-top: 4svh ; } .mt-l-5vh { margin-top: 5svh ; } .mt-l-6vh { margin-top: 6svh ; } .mt-l-7vh { margin-top: 7svh ; } .mt-l-8vh { margin-top: 8svh ; } .mt-l-9vh { margin-top: 9svh ; } .mt-l-10vh { margin-top: 10svh ; } .mt-l-25vh { margin-top: 25svh ; } .mt-l-33vh { margin-top: 33.33svh ; } .mt-l-50vh { margin-top: 50svh ; } .mt-l-66vh { margin-top: 66.66svh ; } .mt-l-100vh { margin-top: 100svh ; } .mt-l-05gap { margin-top: calc(0.5 * var(--colgap) ) ; } .mt-l-1gap { margin-top: var(--colgap) ; } .mt-l-2gap { margin-top: calc(2 * var(--colgap) ) ; } .mt-l-3gap { margin-top: calc(3 * var(--colgap) ) ; } .mt-l-4gap { margin-top: calc(4 * var(--colgap) ) ; } .mt-l-5gap { margin-top: calc(5 * var(--colgap) ) ; } .mt-l--3nav { margin-top: calc(-3 * var(--navheight)); } .mt-l--2nav { margin-top: calc(-2 * var(--navheight)); } .mt-l--1nav { margin-top: calc(-1 * var(--navheight)); } .mt-l-1nav { margin-top: var(--navheight); } .mt-l-2nav { margin-top: calc(2 * var(--navheight)) ; } .mt-l-3nav { margin-top: calc(3 * var(--navheight)) ; } .mb-l-auto { margin-bottom: auto ; } .mb-l-noauto { margin-bottom: inherit !important; } .mb-l-0 { margin-bottom: 0 ; } .mb-l--10 { margin-bottom: -10rem ; } .mb-l--9 { margin-bottom: -9rem ; } .mb-l--8 { margin-bottom: -8rem ; } .mb-l--7 { margin-bottom: -7rem ; } .mb-l--6 { margin-bottom: -6rem ; } .mb-l--5 { margin-bottom: -5rem ; } .mb-l--4 { margin-bottom: -4rem ; } .mb-l--3 { margin-bottom: -3rem ; } .mb-l--2 { margin-bottom: -2rem ; } .mb-l--1 { margin-bottom: -1rem ; } .mb-l-05 { margin-bottom: 0.5rem ; } .mb-l-1 { margin-bottom: 1rem ; } .mb-l-2 { margin-bottom: 2rem ; } .mb-l-3 { margin-bottom: 3rem ; } .mb-l-4 { margin-bottom: 4rem ; } .mb-l-5 { margin-bottom: 5rem ; } .mb-l-6 { margin-bottom: 6rem ; } .mb-l-7 { margin-bottom: 7rem ; } .mb-l-8 { margin-bottom: 8rem ; } .mb-l-9 { margin-bottom: 9rem ; } .mb-l-10 { margin-bottom: 10rem ; } .mb-l--30p { margin-bottom: -30% ; } .mb-l--20p { margin-bottom: -20% ; } .mb-l--15p { margin-bottom: -15% ; } .mb-l--10p { margin-bottom: -10% ; } .mb-l--5p { margin-bottom: -5% ; } .mb-l--025p { margin-bottom: -2.5% ; } .mb-l-025p { margin-bottom: 2.5% ; } .mb-l-5p { margin-bottom: 5% ; } .mb-l-10p { margin-bottom: 10% ; } .mb-l-15p { margin-bottom: 15% ; } .mb-l-20p { margin-bottom: 20% ; } .mb-l-30p { margin-bottom: 30% ; } .mb-l-1vh { margin-bottom: 1svh ; } .mb-l-2vh { margin-bottom: 2svh ; } .mb-l-3vh { margin-bottom: 3svh ; } .mb-l-4vh { margin-bottom: 4svh ; } .mb-l-5vh { margin-bottom: 5svh ; } .mb-l-6vh { margin-bottom: 6svh ; } .mb-l-7vh { margin-bottom: 7svh ; } .mb-l-8vh { margin-bottom: 8svh ; } .mb-l-9vh { margin-bottom: 9svh ; } .mb-l-10vh { margin-bottom: 10svh ; } .mb-l-25vh { margin-bottom: 25svh ; } .mb-l-33vh { margin-bottom: 33.33svh ; } .mb-l-50vh { margin-bottom: 50svh ; } .mb-l-66vh { margin-bottom: 66.66svh ; } .mb-l-100vh { margin-bottom: 100svh ; } .mb-l-05gap { margin-bottom: calc(0.5 * var(--colgap) ) ; } .mb-l-1gap { margin-bottom: var(--colgap) ; } .mb-l-2gap { margin-bottom: calc(2 * var(--colgap) ) ; } .mb-l-3gap { margin-bottom: calc(3 * var(--colgap) ) ; } .mb-l-4gap { margin-bottom: calc(4 * var(--colgap) ) ; } .mb-l-5gap { margin-bottom: calc(5 * var(--colgap) ) ; } .mb-l--3nav { margin-bottom: calc(-3 * var(--navheight)); } .mb-l--2nav { margin-bottom: calc(-2 * var(--navheight)); } .mb-l--1nav { margin-bottom: calc(-1 * var(--navheight)); } .mb-l-1nav { margin-bottom: var(--navheight); } .mb-l-2nav { margin-bottom: calc(2 * var(--navheight)) ; } .mb-l-3nav { margin-bottom: calc(3 * var(--navheight)) ; } .ml-l-auto { margin-left: auto; } .ml-l-noauto { margin-left: inherit !important; } .ml-l-0 { --colgap-l: 0; margin-left: var(--colgap-l); } .ml-l-05 { --colgap-l: 0.5rem; margin-left: var(--colgap-l); } .ml-l-1 { --colgap-l: 1rem; margin-left: var(--colgap-l); } .ml-l-2 { --colgap-l: 2rem; margin-left: var(--colgap-l); } .ml-l-3 { --colgap-l: 3rem; margin-left: var(--colgap-l); } .ml-l-4 { --colgap-l: 4rem; margin-left: var(--colgap-l); } .ml-l-5 { --colgap-l: 5rem; margin-left: var(--colgap-l); } .ml-l-6 { --colgap-l: 6rem; margin-left: var(--colgap-l); } .ml-l-7 { --colgap-l: 7rem; margin-left: var(--colgap-l); } .ml-l-8 { --colgap-l: 8rem; margin-left: var(--colgap-l); } .ml-l-9 { --colgap-l: 9rem; margin-left: var(--colgap-l); } .ml-l-10 { --colgap-l: 10rem; margin-left: var(--colgap-l); } .ml-l-25p { --colgap-l: 2.5%; margin-left: var(--colgap-l); } .ml-l-5p { --colgap-l: 5% ; margin-left: var(--colgap-l); } .ml-l-10p { --colgap-l: 10% ; margin-left: var(--colgap-l); } .ml-l-20p { --colgap-l: 20% ; margin-left: var(--colgap-l); } .ml-l-30p { --colgap-l: 30% ; margin-left: var(--colgap-l); } .ml-l-40p { --colgap-l: 40% ; margin-left: var(--colgap-l); } .ml-l-50p { --colgap-l: 50% ; margin-left: var(--colgap-l); } .ml-l-60p { --colgap-l: 60% ; margin-left: var(--colgap-l); } .ml-l-70p { --colgap-l: 70% ; margin-left: var(--colgap-l); } .ml-l-80p { --colgap-l: 80% ; margin-left: var(--colgap-l); } .ml-l-90p { --colgap-l: 90% ; margin-left: var(--colgap-l); } .ml-l-100p { --colgap-l: 100% ; margin-left: var(--colgap-l); } .ml-l-025vw { --colgap-l: calc( var(--maxwidthlimit) * 0.025); margin-left: var(--colgap-l); } .ml-l-5vw { --colgap-l: calc( var(--maxwidthlimit) * 0.05 ); margin-left: var(--colgap-l); } .ml-l-10vw { --colgap-l: calc( var(--maxwidthlimit) * 0.1 ); margin-left: var(--colgap-l); } .ml-l-20vw { --colgap-l: calc( var(--maxwidthlimit) * 0.2 ); margin-left: var(--colgap-l); } .ml-l-30vw { --colgap-l: calc( var(--maxwidthlimit) * 0.3 ); margin-left: var(--colgap-l); } .ml-l-40vw { --colgap-l: calc( var(--maxwidthlimit) * 0.4 ); margin-left: var(--colgap-l); } .ml-l-50vw { --colgap-l: calc( var(--maxwidthlimit) * 0.5 ); margin-left: var(--colgap-l); } .ml-l-60vw { --colgap-l: calc( var(--maxwidthlimit) * 0.6 ); margin-left: var(--colgap-l); } .ml-l-70vw { --colgap-l: calc( var(--maxwidthlimit) * 0.7 ); margin-left: var(--colgap-l); } .ml-l-80vw { --colgap-l: calc( var(--maxwidthlimit) * 0.8 ); margin-left: var(--colgap-l); } .ml-l-90vw { --colgap-l: calc( var(--maxwidthlimit) * 0.9 ); margin-left: var(--colgap-l); } .ml-l-100vw { --colgap-l: calc( var(--maxwidthlimit) * 100 ); margin-left: var(--colgap-l); } .ml-l-0gap { --colgap-l: calc( 0 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-1gap { --colgap-l: calc( 1 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-2gap { --colgap-l: calc( 2 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-3gap { --colgap-l: calc( 3 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-4gap { --colgap-l: calc( 4 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-5gap { --colgap-l: calc( 5 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-6gap { --colgap-l: calc( 6 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-7gap { --colgap-l: calc( 7 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-8gap { --colgap-l: calc( 8 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-9gap { --colgap-l: calc( 9 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-10gap { --colgap-l: calc( 10 * var(--colgap)); margin-left: var(--colgap-l); } .mr-l-auto { margin-right: auto; } .mr-l-noauto { margin-right: inherit !important; } .mr-l-0 { --colgap-r: 0; margin-right: var(--colgap-r); } .mr-l-05 { --colgap-r: 0.5rem; margin-right: var(--colgap-r); } .mr-l-1 { --colgap-r: 1rem; margin-right: var(--colgap-r); } .mr-l-2 { --colgap-r: 2rem; margin-right: var(--colgap-r); } .mr-l-3 { --colgap-r: 3rem; margin-right: var(--colgap-r); } .mr-l-4 { --colgap-r: 4rem; margin-right: var(--colgap-r); } .mr-l-5 { --colgap-r: 5rem; margin-right: var(--colgap-r); } .mr-l-6 { --colgap-r: 6rem; margin-right: var(--colgap-r); } .mr-l-7 { --colgap-r: 7rem; margin-right: var(--colgap-r); } .mr-l-8 { --colgap-r: 8rem; margin-right: var(--colgap-r); } .mr-l-9 { --colgap-r: 9rem; margin-right: var(--colgap-r); } .mr-l-10 { --colgap-r: 10rem; margin-right: var(--colgap-r); } .mr-l-25p { --colgap-r: 2.5%; margin-right: var(--colgap-r); } .mr-l-5p { --colgap-r: 5% ; margin-right: var(--colgap-r); } .mr-l-10p { --colgap-r: 10% ; margin-right: var(--colgap-r); } .mr-l-20p { --colgap-r: 20% ; margin-right: var(--colgap-r); } .mr-l-30p { --colgap-r: 30% ; margin-right: var(--colgap-r); } .mr-l-40p { --colgap-r: 40% ; margin-right: var(--colgap-r); } .mr-l-50p { --colgap-r: 50% ; margin-right: var(--colgap-r); } .mr-l-60p { --colgap-r: 60% ; margin-right: var(--colgap-r); } .mr-l-70p { --colgap-r: 70% ; margin-right: var(--colgap-r); } .mr-l-80p { --colgap-r: 80% ; margin-right: var(--colgap-r); } .mr-l-90p { --colgap-r: 90% ; margin-right: var(--colgap-r); } .mr-l-100p { --colgap-r: 100% ; margin-right: var(--colgap-r); } .mr-l-025vw { --colgap-r: calc( var(--maxwidthlimit) * 0.025); margin-right: var(--colgap-r); } .mr-l-5vw { --colgap-r: calc( var(--maxwidthlimit) * 0.05 ); margin-right: var(--colgap-r); } .mr-l-10vw { --colgap-r: calc( var(--maxwidthlimit) * 0.1 ); margin-right: var(--colgap-r); } .mr-l-20vw { --colgap-r: calc( var(--maxwidthlimit) * 0.2 ); margin-right: var(--colgap-r); } .mr-l-30vw { --colgap-r: calc( var(--maxwidthlimit) * 0.3 ); margin-right: var(--colgap-r); } .mr-l-40vw { --colgap-r: calc( var(--maxwidthlimit) * 0.4 ); margin-right: var(--colgap-r); } .mr-l-50vw { --colgap-r: calc( var(--maxwidthlimit) * 0.5 ); margin-right: var(--colgap-r); } .mr-l-60vw { --colgap-r: calc( var(--maxwidthlimit) * 0.6 ); margin-right: var(--colgap-r); } .mr-l-70vw { --colgap-r: calc( var(--maxwidthlimit) * 0.7 ); margin-right: var(--colgap-r); } .mr-l-80vw { --colgap-r: calc( var(--maxwidthlimit) * 0.8 ); margin-right: var(--colgap-r); } .mr-l-90vw { --colgap-r: calc( var(--maxwidthlimit) * 0.9 ); margin-right: var(--colgap-r); } .mr-l-100vw { --colgap-r: calc( var(--maxwidthlimit) * 100 ); margin-right: var(--colgap-r); } .mr-l-0gap { --colgap-r: calc( 0 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-1gap { --colgap-r: calc( 1 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-2gap { --colgap-r: calc( 2 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-3gap { --colgap-r: calc( 3 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-4gap { --colgap-r: calc( 4 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-5gap { --colgap-r: calc( 5 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-6gap { --colgap-r: calc( 6 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-7gap { --colgap-r: calc( 7 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-8gap { --colgap-r: calc( 8 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-9gap { --colgap-r: calc( 9 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-10gap { --colgap-r: calc( 10 * var(--colgap)); margin-right: var(--colgap-r); } } @media (max-width:1023px) { .m-m-auto { margin: auto; } .m-m-noauto { margin: inherit !important; } .m-m-0 { --colgap: 0; margin:var(--colgap); } .m-m-05 { --colgap: 0.5rem; margin:var(--colgap); } .m-m-1 { --colgap: 1rem; margin:var(--colgap); } .m-m-2 { --colgap: 2rem; margin:var(--colgap); } .m-m-3 { --colgap: 3rem; margin:var(--colgap); } .m-m-4 { --colgap: 4rem; margin:var(--colgap); } .m-m-5 { --colgap: 5rem; margin:var(--colgap); } .m-m-6 { --colgap: 6rem; margin:var(--colgap); } .m-m-7 { --colgap: 7rem; margin:var(--colgap); } .m-m-8 { --colgap: 8rem; margin:var(--colgap); } .m-m-9 { --colgap: 9rem; margin:var(--colgap); } .m-m-10 { --colgap: 10rem; margin:var(--colgap); } .m-m-25p { --colgap: 2.5%; margin:var(--colgap); } .m-m-5p { --colgap: 5% ; margin:var(--colgap); } .m-m-10p { --colgap: 10% ; margin:var(--colgap); } .m-m-20p { --colgap: 20% ; margin:var(--colgap); } .m-m-30p { --colgap: 30% ; margin:var(--colgap); } .m-m-40p { --colgap: 40% ; margin:var(--colgap); } .m-m-50p { --colgap: 50% ; margin:var(--colgap); } .m-m-60p { --colgap: 60% ; margin:var(--colgap); } .m-m-70p { --colgap: 70% ; margin:var(--colgap); } .m-m-80p { --colgap: 80% ; margin:var(--colgap); } .m-m-90p { --colgap: 90% ; margin:var(--colgap); } .m-m-100p { --colgap: 100% ; margin:var(--colgap); } .m-m-1vw { --colgap: calc( var(--maxwidthlimit) * 0.01 ); margin:var(--colgap); } .m-m-2vw { --colgap: calc( var(--maxwidthlimit) * 0.02 ); margin:var(--colgap); } .m-m-025vw { --colgap: calc( var(--maxwidthlimit) * 0.025 ); margin:var(--colgap); } .m-m-3vw { --colgap: calc( var(--maxwidthlimit) * 0.03 ); margin:var(--colgap); } .m-m-4vw { --colgap: calc( var(--maxwidthlimit) * 0.04 ); margin:var(--colgap); } .m-m-5vw { --colgap: calc( var(--maxwidthlimit) * 0.05 ); margin:var(--colgap); } .m-m-10vw { --colgap: calc( var(--maxwidthlimit) * 0.1 ); margin:var(--colgap); } .m-m-20vw { --colgap: calc( var(--maxwidthlimit) * 0.2 ); margin:var(--colgap); } .m-m-30vw { --colgap: calc( var(--maxwidthlimit) * 0.3 ); margin:var(--colgap); } .m-m-40vw { --colgap: calc( var(--maxwidthlimit) * 0.4 ); margin:var(--colgap); } .m-m-50vw { --colgap: calc( var(--maxwidthlimit) * 0.5 ); margin:var(--colgap); } .m-m-60vw { --colgap: calc( var(--maxwidthlimit) * 0.6 ); margin:var(--colgap); } .m-m-70vw { --colgap: calc( var(--maxwidthlimit) * 0.7 ); margin:var(--colgap); } .m-m-80vw { --colgap: calc( var(--maxwidthlimit) * 0.8 ); margin:var(--colgap); } .m-m-90vw { --colgap: calc( var(--maxwidthlimit) * 0.9 ); margin:var(--colgap); } .m-m-100vw { --colgap: calc( var(--maxwidthlimit) * 100 ); margin:var(--colgap); } .m-m-0gap { --colgap: calc( 0 * var(--colgap) ); margin:var(--colgap); } .m-m-1gap { --colgap: calc( 1 * var(--colgap) ); margin:var(--colgap); } .m-m-2gap { --colgap: calc( 2 * var(--colgap) ); margin:var(--colgap); } .m-m-3gap { --colgap: calc( 3 * var(--colgap) ); margin:var(--colgap); } .m-m-4gap { --colgap: calc( 4 * var(--colgap) ); margin:var(--colgap); } .m-m-5gap { --colgap: calc( 5 * var(--colgap) ); margin:var(--colgap); } .m-m-6gap { --colgap: calc( 6 * var(--colgap) ); margin:var(--colgap); } .m-m-7gap { --colgap: calc( 7 * var(--colgap) ); margin:var(--colgap); } .m-m-8gap { --colgap: calc( 8 * var(--colgap) ); margin:var(--colgap); } .m-m-9gap { --colgap: calc( 9 * var(--colgap) ); margin:var(--colgap); } .m-m-10gap { --colgap: calc( 10 * var(--colgap) ); margin:var(--colgap); } .mt-m-auto { margin-top: auto ; } .mt-m-noauto { margin-top: inherit !important; } .mt-m-0 { margin-top: 0 ; } .mt-m--10 { margin-top: -10rem ; } .mt-m--9 { margin-top: -9rem ; } .mt-m--8 { margin-top: -8rem ; } .mt-m--7 { margin-top: -7rem ; } .mt-m--6 { margin-top: -6rem ; } .mt-m--5 { margin-top: -5rem ; } .mt-m--4 { margin-top: -4rem ; } .mt-m--3 { margin-top: -3rem ; } .mt-m--2 { margin-top: -2rem ; } .mt-m--1 { margin-top: -1rem ; } .mt-m-05 { margin-top: 0.5rem ; } .mt-m-1 { margin-top: 1rem ; } .mt-m-2 { margin-top: 2rem ; } .mt-m-3 { margin-top: 3rem ; } .mt-m-4 { margin-top: 4rem ; } .mt-m-5 { margin-top: 5rem ; } .mt-m-6 { margin-top: 6rem ; } .mt-m-7 { margin-top: 7rem ; } .mt-m-8 { margin-top: 8rem ; } .mt-m-9 { margin-top: 9rem ; } .mt-m-10 { margin-top: 10rem ; } .mt-m--30p { margin-top: -30% ; } .mt-m--20p { margin-top: -20% ; } .mt-m--15p { margin-top: -15% ; } .mt-m--10p { margin-top: -10% ; } .mt-m--5p { margin-top: -5% ; } .mt-m--025p { margin-top: -2.5% ; } .mt-m-025p { margin-top: 2.5% ; } .mt-m-5p { margin-top: 5% ; } .mt-m-10p { margin-top: 10% ; } .mt-m-15p { margin-top: 15% ; } .mt-m-20p { margin-top: 20% ; } .mt-m-30p { margin-top: 30% ; } .mt-m-1vh { margin-top: 1svh ; } .mt-m-2vh { margin-top: 2svh ; } .mt-m-3vh { margin-top: 3svh ; } .mt-m-4vh { margin-top: 4svh ; } .mt-m-5vh { margin-top: 5svh ; } .mt-m-6vh { margin-top: 6svh ; } .mt-m-7vh { margin-top: 7svh ; } .mt-m-8vh { margin-top: 8svh ; } .mt-m-9vh { margin-top: 9svh ; } .mt-m-10vh { margin-top: 10svh ; } .mt-m-25vh { margin-top: 25svh ; } .mt-m-33vh { margin-top: 33.33svh ; } .mt-m-50vh { margin-top: 50svh ; } .mt-m-66vh { margin-top: 66.66svh ; } .mt-m-100vh { margin-top: 100svh ; } .mt-m-05gap { margin-top: calc(0.5 * var(--colgap) ) ; } .mt-m-1gap { margin-top: var(--colgap) ; } .mt-m-2gap { margin-top: calc(2 * var(--colgap) ) ; } .mt-m-3gap { margin-top: calc(3 * var(--colgap) ) ; } .mt-m-4gap { margin-top: calc(4 * var(--colgap) ) ; } .mt-m-5gap { margin-top: calc(5 * var(--colgap) ) ; } .mt-m--3nav { margin-top: calc(-3 * var(--navheight)); } .mt-m--2nav { margin-top: calc(-2 * var(--navheight)); } .mt-m--1nav { margin-top: calc(-1 * var(--navheight)); } .mt-m-1nav { margin-top: var(--navheight); } .mt-m-2nav { margin-top: calc(2 * var(--navheight)) ; } .mt-m-3nav { margin-top: calc(3 * var(--navheight)) ; } .mb-m-auto { margin-bottom: auto ; } .mb-m-noauto { margin-bottom: inherit !important; } .mb-m-0 { margin-bottom: 0 ; } .mb-m--10 { margin-bottom: -10rem ; } .mb-m--9 { margin-bottom: -9rem ; } .mb-m--8 { margin-bottom: -8rem ; } .mb-m--7 { margin-bottom: -7rem ; } .mb-m--6 { margin-bottom: -6rem ; } .mb-m--5 { margin-bottom: -5rem ; } .mb-m--4 { margin-bottom: -4rem ; } .mb-m--3 { margin-bottom: -3rem ; } .mb-m--2 { margin-bottom: -2rem ; } .mb-m--1 { margin-bottom: -1rem ; } .mb-m-05 { margin-bottom: 0.5rem ; } .mb-m-1 { margin-bottom: 1rem ; } .mb-m-2 { margin-bottom: 2rem ; } .mb-m-3 { margin-bottom: 3rem ; } .mb-m-4 { margin-bottom: 4rem ; } .mb-m-5 { margin-bottom: 5rem ; } .mb-m-6 { margin-bottom: 6rem ; } .mb-m-7 { margin-bottom: 7rem ; } .mb-m-8 { margin-bottom: 8rem ; } .mb-m-9 { margin-bottom: 9rem ; } .mb-m-10 { margin-bottom: 10rem ; } .mb-m--30p { margin-bottom: -30% ; } .mb-m--20p { margin-bottom: -20% ; } .mb-m--15p { margin-bottom: -15% ; } .mb-m--10p { margin-bottom: -10% ; } .mb-m--5p { margin-bottom: -5% ; } .mb-m--025p { margin-bottom: -2.5% ; } .mb-m-025p { margin-bottom: 2.5% ; } .mb-m-5p { margin-bottom: 5% ; } .mb-m-10p { margin-bottom: 10% ; } .mb-m-15p { margin-bottom: 15% ; } .mb-m-20p { margin-bottom: 20% ; } .mb-m-30p { margin-bottom: 30% ; } .mb-m-1vh { margin-bottom: 1svh ; } .mb-m-2vh { margin-bottom: 2svh ; } .mb-m-3vh { margin-bottom: 3svh ; } .mb-m-4vh { margin-bottom: 4svh ; } .mb-m-5vh { margin-bottom: 5svh ; } .mb-m-6vh { margin-bottom: 6svh ; } .mb-m-7vh { margin-bottom: 7svh ; } .mb-m-8vh { margin-bottom: 8svh ; } .mb-m-9vh { margin-bottom: 9svh ; } .mb-m-10vh { margin-bottom: 10svh ; } .mb-m-25vh { margin-bottom: 25svh ; } .mb-m-33vh { margin-bottom: 33.33svh ; } .mb-m-50vh { margin-bottom: 50svh ; } .mb-m-66vh { margin-bottom: 66.66svh ; } .mb-m-100vh { margin-bottom: 100svh ; } .mb-m-05gap { margin-bottom: calc(0.5 * var(--colgap) ) ; } .mb-m-1gap { margin-bottom: var(--colgap) ; } .mb-m-2gap { margin-bottom: calc(2 * var(--colgap) ) ; } .mb-m-3gap { margin-bottom: calc(3 * var(--colgap) ) ; } .mb-m-4gap { margin-bottom: calc(4 * var(--colgap) ) ; } .mb-m-5gap { margin-bottom: calc(5 * var(--colgap) ) ; } .mb-m--3nav { margin-bottom: calc(-3 * var(--navheight)); } .mb-m--2nav { margin-bottom: calc(-2 * var(--navheight)); } .mb-m--1nav { margin-bottom: calc(-1 * var(--navheight)); } .mb-m-1nav { margin-bottom: var(--navheight); } .mb-m-2nav { margin-bottom: calc(2 * var(--navheight)) ; } .mb-m-3nav { margin-bottom: calc(3 * var(--navheight)) ; } .ml-m-auto { margin-left: auto; } .ml-m-noauto { margin-left: inherit !important; } .ml-m-0 { --colgap-l: 0; margin-left: var(--colgap-l); } .ml-m-05 { --colgap-l: 0.5rem; margin-left: var(--colgap-l); } .ml-m-1 { --colgap-l: 1rem; margin-left: var(--colgap-l); } .ml-m-2 { --colgap-l: 2rem; margin-left: var(--colgap-l); } .ml-m-3 { --colgap-l: 3rem; margin-left: var(--colgap-l); } .ml-m-4 { --colgap-l: 4rem; margin-left: var(--colgap-l); } .ml-m-5 { --colgap-l: 5rem; margin-left: var(--colgap-l); } .ml-m-6 { --colgap-l: 6rem; margin-left: var(--colgap-l); } .ml-m-7 { --colgap-l: 7rem; margin-left: var(--colgap-l); } .ml-m-8 { --colgap-l: 8rem; margin-left: var(--colgap-l); } .ml-m-9 { --colgap-l: 9rem; margin-left: var(--colgap-l); } .ml-m-10 { --colgap-l: 10rem; margin-left: var(--colgap-l); } .ml-m-25p { --colgap-l: 2.5%; margin-left: var(--colgap-l); } .ml-m-5p { --colgap-l: 5% ; margin-left: var(--colgap-l); } .ml-m-10p { --colgap-l: 10% ; margin-left: var(--colgap-l); } .ml-m-20p { --colgap-l: 20% ; margin-left: var(--colgap-l); } .ml-m-30p { --colgap-l: 30% ; margin-left: var(--colgap-l); } .ml-m-40p { --colgap-l: 40% ; margin-left: var(--colgap-l); } .ml-m-50p { --colgap-l: 50% ; margin-left: var(--colgap-l); } .ml-m-60p { --colgap-l: 60% ; margin-left: var(--colgap-l); } .ml-m-70p { --colgap-l: 70% ; margin-left: var(--colgap-l); } .ml-m-80p { --colgap-l: 80% ; margin-left: var(--colgap-l); } .ml-m-90p { --colgap-l: 90% ; margin-left: var(--colgap-l); } .ml-m-100p { --colgap-l: 100% ; margin-left: var(--colgap-l); } .ml-m-025vw { --colgap-l: calc( var(--maxwidthlimit) * 0.025); margin-left: var(--colgap-l); } .ml-m-5vw { --colgap-l: calc( var(--maxwidthlimit) * 0.05 ); margin-left: var(--colgap-l); } .ml-m-10vw { --colgap-l: calc( var(--maxwidthlimit) * 0.1 ); margin-left: var(--colgap-l); } .ml-m-20vw { --colgap-l: calc( var(--maxwidthlimit) * 0.2 ); margin-left: var(--colgap-l); } .ml-m-30vw { --colgap-l: calc( var(--maxwidthlimit) * 0.3 ); margin-left: var(--colgap-l); } .ml-m-40vw { --colgap-l: calc( var(--maxwidthlimit) * 0.4 ); margin-left: var(--colgap-l); } .ml-m-50vw { --colgap-l: calc( var(--maxwidthlimit) * 0.5 ); margin-left: var(--colgap-l); } .ml-m-60vw { --colgap-l: calc( var(--maxwidthlimit) * 0.6 ); margin-left: var(--colgap-l); } .ml-m-70vw { --colgap-l: calc( var(--maxwidthlimit) * 0.7 ); margin-left: var(--colgap-l); } .ml-m-80vw { --colgap-l: calc( var(--maxwidthlimit) * 0.8 ); margin-left: var(--colgap-l); } .ml-m-90vw { --colgap-l: calc( var(--maxwidthlimit) * 0.9 ); margin-left: var(--colgap-l); } .ml-m-100vw { --colgap-l: calc( var(--maxwidthlimit) * 100 ); margin-left: var(--colgap-l); } .ml-m-0gap { --colgap-l: calc( 0 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-1gap { --colgap-l: calc( 1 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-2gap { --colgap-l: calc( 2 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-3gap { --colgap-l: calc( 3 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-4gap { --colgap-l: calc( 4 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-5gap { --colgap-l: calc( 5 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-6gap { --colgap-l: calc( 6 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-7gap { --colgap-l: calc( 7 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-8gap { --colgap-l: calc( 8 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-9gap { --colgap-l: calc( 9 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-10gap { --colgap-l: calc( 10 * var(--colgap)); margin-left: var(--colgap-l); } .mr-m-auto { margin-right: auto; } .mr-m-noauto { margin-right: inherit !important; } .mr-m-0 { --colgap-r: 0; margin-right: var(--colgap-r); } .mr-m-05 { --colgap-r: 0.5rem; margin-right: var(--colgap-r); } .mr-m-1 { --colgap-r: 1rem; margin-right: var(--colgap-r); } .mr-m-2 { --colgap-r: 2rem; margin-right: var(--colgap-r); } .mr-m-3 { --colgap-r: 3rem; margin-right: var(--colgap-r); } .mr-m-4 { --colgap-r: 4rem; margin-right: var(--colgap-r); } .mr-m-5 { --colgap-r: 5rem; margin-right: var(--colgap-r); } .mr-m-6 { --colgap-r: 6rem; margin-right: var(--colgap-r); } .mr-m-7 { --colgap-r: 7rem; margin-right: var(--colgap-r); } .mr-m-8 { --colgap-r: 8rem; margin-right: var(--colgap-r); } .mr-m-9 { --colgap-r: 9rem; margin-right: var(--colgap-r); } .mr-m-10 { --colgap-r: 10rem; margin-right: var(--colgap-r); } .mr-m-25p { --colgap-r: 2.5%; margin-right: var(--colgap-r); } .mr-m-5p { --colgap-r: 5% ; margin-right: var(--colgap-r); } .mr-m-10p { --colgap-r: 10% ; margin-right: var(--colgap-r); } .mr-m-20p { --colgap-r: 20% ; margin-right: var(--colgap-r); } .mr-m-30p { --colgap-r: 30% ; margin-right: var(--colgap-r); } .mr-m-40p { --colgap-r: 40% ; margin-right: var(--colgap-r); } .mr-m-50p { --colgap-r: 50% ; margin-right: var(--colgap-r); } .mr-m-60p { --colgap-r: 60% ; margin-right: var(--colgap-r); } .mr-m-70p { --colgap-r: 70% ; margin-right: var(--colgap-r); } .mr-m-80p { --colgap-r: 80% ; margin-right: var(--colgap-r); } .mr-m-90p { --colgap-r: 90% ; margin-right: var(--colgap-r); } .mr-m-100p { --colgap-r: 100% ; margin-right: var(--colgap-r); } .mr-m-025vw { --colgap-r: calc( var(--maxwidthlimit) * 0.025); margin-right: var(--colgap-r); } .mr-m-5vw { --colgap-r: calc( var(--maxwidthlimit) * 0.05 ); margin-right: var(--colgap-r); } .mr-m-10vw { --colgap-r: calc( var(--maxwidthlimit) * 0.1 ); margin-right: var(--colgap-r); } .mr-m-20vw { --colgap-r: calc( var(--maxwidthlimit) * 0.2 ); margin-right: var(--colgap-r); } .mr-m-30vw { --colgap-r: calc( var(--maxwidthlimit) * 0.3 ); margin-right: var(--colgap-r); } .mr-m-40vw { --colgap-r: calc( var(--maxwidthlimit) * 0.4 ); margin-right: var(--colgap-r); } .mr-m-50vw { --colgap-r: calc( var(--maxwidthlimit) * 0.5 ); margin-right: var(--colgap-r); } .mr-m-60vw { --colgap-r: calc( var(--maxwidthlimit) * 0.6 ); margin-right: var(--colgap-r); } .mr-m-70vw { --colgap-r: calc( var(--maxwidthlimit) * 0.7 ); margin-right: var(--colgap-r); } .mr-m-80vw { --colgap-r: calc( var(--maxwidthlimit) * 0.8 ); margin-right: var(--colgap-r); } .mr-m-90vw { --colgap-r: calc( var(--maxwidthlimit) * 0.9 ); margin-right: var(--colgap-r); } .mr-m-100vw { --colgap-r: calc( var(--maxwidthlimit) * 100 ); margin-right: var(--colgap-r); } .mr-m-0gap { --colgap-r: calc( 0 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-1gap { --colgap-r: calc( 1 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-2gap { --colgap-r: calc( 2 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-3gap { --colgap-r: calc( 3 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-4gap { --colgap-r: calc( 4 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-5gap { --colgap-r: calc( 5 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-6gap { --colgap-r: calc( 6 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-7gap { --colgap-r: calc( 7 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-8gap { --colgap-r: calc( 8 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-9gap { --colgap-r: calc( 9 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-10gap { --colgap-r: calc( 10 * var(--colgap)); margin-right: var(--colgap-r); } } @media (max-width:767px) { .m-s-auto { margin: auto; } .m-s-noauto { margin: inherit !important; } .m-s-0 { --colgap: 0; margin:var(--colgap); } .m-s-05 { --colgap: 0.5rem; margin:var(--colgap); } .m-s-1 { --colgap: 1rem; margin:var(--colgap); } .m-s-2 { --colgap: 2rem; margin:var(--colgap); } .m-s-3 { --colgap: 3rem; margin:var(--colgap); } .m-s-4 { --colgap: 4rem; margin:var(--colgap); } .m-s-5 { --colgap: 5rem; margin:var(--colgap); } .m-s-6 { --colgap: 6rem; margin:var(--colgap); } .m-s-7 { --colgap: 7rem; margin:var(--colgap); } .m-s-8 { --colgap: 8rem; margin:var(--colgap); } .m-s-9 { --colgap: 9rem; margin:var(--colgap); } .m-s-10 { --colgap: 10rem; margin:var(--colgap); } .m-s-25p { --colgap: 2.5%; margin:var(--colgap); } .m-s-5p { --colgap: 5% ; margin:var(--colgap); } .m-s-10p { --colgap: 10% ; margin:var(--colgap); } .m-s-20p { --colgap: 20% ; margin:var(--colgap); } .m-s-30p { --colgap: 30% ; margin:var(--colgap); } .m-s-40p { --colgap: 40% ; margin:var(--colgap); } .m-s-50p { --colgap: 50% ; margin:var(--colgap); } .m-s-60p { --colgap: 60% ; margin:var(--colgap); } .m-s-70p { --colgap: 70% ; margin:var(--colgap); } .m-s-80p { --colgap: 80% ; margin:var(--colgap); } .m-s-90p { --colgap: 90% ; margin:var(--colgap); } .m-s-100p { --colgap: 100% ; margin:var(--colgap); } .m-s-1vw { --colgap: calc( var(--maxwidthlimit) * 0.01 ); margin:var(--colgap); } .m-s-2vw { --colgap: calc( var(--maxwidthlimit) * 0.02 ); margin:var(--colgap); } .m-s-025vw { --colgap: calc( var(--maxwidthlimit) * 0.025 ); margin:var(--colgap); } .m-s-3vw { --colgap: calc( var(--maxwidthlimit) * 0.03 ); margin:var(--colgap); } .m-s-4vw { --colgap: calc( var(--maxwidthlimit) * 0.04 ); margin:var(--colgap); } .m-s-5vw { --colgap: calc( var(--maxwidthlimit) * 0.05 ); margin:var(--colgap); } .m-s-10vw { --colgap: calc( var(--maxwidthlimit) * 0.1 ); margin:var(--colgap); } .m-s-20vw { --colgap: calc( var(--maxwidthlimit) * 0.2 ); margin:var(--colgap); } .m-s-30vw { --colgap: calc( var(--maxwidthlimit) * 0.3 ); margin:var(--colgap); } .m-s-40vw { --colgap: calc( var(--maxwidthlimit) * 0.4 ); margin:var(--colgap); } .m-s-50vw { --colgap: calc( var(--maxwidthlimit) * 0.5 ); margin:var(--colgap); } .m-s-60vw { --colgap: calc( var(--maxwidthlimit) * 0.6 ); margin:var(--colgap); } .m-s-70vw { --colgap: calc( var(--maxwidthlimit) * 0.7 ); margin:var(--colgap); } .m-s-80vw { --colgap: calc( var(--maxwidthlimit) * 0.8 ); margin:var(--colgap); } .m-s-90vw { --colgap: calc( var(--maxwidthlimit) * 0.9 ); margin:var(--colgap); } .m-s-100vw { --colgap: calc( var(--maxwidthlimit) * 100 ); margin:var(--colgap); } .m-s-0gap { --colgap: calc( 0 * var(--colgap) ); margin:var(--colgap); } .m-s-1gap { --colgap: calc( 1 * var(--colgap) ); margin:var(--colgap); } .m-s-2gap { --colgap: calc( 2 * var(--colgap) ); margin:var(--colgap); } .m-s-3gap { --colgap: calc( 3 * var(--colgap) ); margin:var(--colgap); } .m-s-4gap { --colgap: calc( 4 * var(--colgap) ); margin:var(--colgap); } .m-s-5gap { --colgap: calc( 5 * var(--colgap) ); margin:var(--colgap); } .m-s-6gap { --colgap: calc( 6 * var(--colgap) ); margin:var(--colgap); } .m-s-7gap { --colgap: calc( 7 * var(--colgap) ); margin:var(--colgap); } .m-s-8gap { --colgap: calc( 8 * var(--colgap) ); margin:var(--colgap); } .m-s-9gap { --colgap: calc( 9 * var(--colgap) ); margin:var(--colgap); } .m-s-10gap { --colgap: calc( 10 * var(--colgap) ); margin:var(--colgap); } .mt-s-auto { margin-top: auto ; } .mt-s-noauto { margin-top: inherit !important; } .mt-s-0 { margin-top: 0 ; } .mt-s--10 { margin-top: -10rem ; } .mt-s--9 { margin-top: -9rem ; } .mt-s--8 { margin-top: -8rem ; } .mt-s--7 { margin-top: -7rem ; } .mt-s--6 { margin-top: -6rem ; } .mt-s--5 { margin-top: -5rem ; } .mt-s--4 { margin-top: -4rem ; } .mt-s--3 { margin-top: -3rem ; } .mt-s--2 { margin-top: -2rem ; } .mt-s--1 { margin-top: -1rem ; } .mt-s-05 { margin-top: 0.5rem ; } .mt-s-1 { margin-top: 1rem ; } .mt-s-2 { margin-top: 2rem ; } .mt-s-3 { margin-top: 3rem ; } .mt-s-4 { margin-top: 4rem ; } .mt-s-5 { margin-top: 5rem ; } .mt-s-6 { margin-top: 6rem ; } .mt-s-7 { margin-top: 7rem ; } .mt-s-8 { margin-top: 8rem ; } .mt-s-9 { margin-top: 9rem ; } .mt-s-10 { margin-top: 10rem ; } .mt-s--30p { margin-top: -30% ; } .mt-s--20p { margin-top: -20% ; } .mt-s--15p { margin-top: -15% ; } .mt-s--10p { margin-top: -10% ; } .mt-s--5p { margin-top: -5% ; } .mt-s--025p { margin-top: -2.5% ; } .mt-s-025p { margin-top: 2.5% ; } .mt-s-5p { margin-top: 5% ; } .mt-s-10p { margin-top: 10% ; } .mt-s-15p { margin-top: 15% ; } .mt-s-20p { margin-top: 20% ; } .mt-s-30p { margin-top: 30% ; } .mt-s-1vh { margin-top: 1svh ; } .mt-s-2vh { margin-top: 2svh ; } .mt-s-3vh { margin-top: 3svh ; } .mt-s-4vh { margin-top: 4svh ; } .mt-s-5vh { margin-top: 5svh ; } .mt-s-6vh { margin-top: 6svh ; } .mt-s-7vh { margin-top: 7svh ; } .mt-s-8vh { margin-top: 8svh ; } .mt-s-9vh { margin-top: 9svh ; } .mt-s-10vh { margin-top: 10svh ; } .mt-s-25vh { margin-top: 25svh ; } .mt-s-33vh { margin-top: 33.33svh ; } .mt-s-50vh { margin-top: 50svh ; } .mt-s-66vh { margin-top: 66.66svh ; } .mt-s-100vh { margin-top: 100svh ; } .mt-s-05gap { margin-top: calc(0.5 * var(--colgap) ) ; } .mt-s-1gap { margin-top: var(--colgap) ; } .mt-s-2gap { margin-top: calc(2 * var(--colgap) ) ; } .mt-s-3gap { margin-top: calc(3 * var(--colgap) ) ; } .mt-s-4gap { margin-top: calc(4 * var(--colgap) ) ; } .mt-s-5gap { margin-top: calc(5 * var(--colgap) ) ; } .mt-s--3nav { margin-top: calc(-3 * var(--navheight)); } .mt-s--2nav { margin-top: calc(-2 * var(--navheight)); } .mt-s--1nav { margin-top: calc(-1 * var(--navheight)); } .mt-s-1nav { margin-top: var(--navheight); } .mt-s-2nav { margin-top: calc(2 * var(--navheight)) ; } .mt-s-3nav { margin-top: calc(3 * var(--navheight)) ; } .mb-s-auto { margin-bottom: auto ; } .mb-s-noauto { margin-bottom: inherit !important; } .mb-s-0 { margin-bottom: 0 ; } .mb-s--10 { margin-bottom: -10rem ; } .mb-s--9 { margin-bottom: -9rem ; } .mb-s--8 { margin-bottom: -8rem ; } .mb-s--7 { margin-bottom: -7rem ; } .mb-s--6 { margin-bottom: -6rem ; } .mb-s--5 { margin-bottom: -5rem ; } .mb-s--4 { margin-bottom: -4rem ; } .mb-s--3 { margin-bottom: -3rem ; } .mb-s--2 { margin-bottom: -2rem ; } .mb-s--1 { margin-bottom: -1rem ; } .mb-s-05 { margin-bottom: 0.5rem ; } .mb-s-1 { margin-bottom: 1rem ; } .mb-s-2 { margin-bottom: 2rem ; } .mb-s-3 { margin-bottom: 3rem ; } .mb-s-4 { margin-bottom: 4rem ; } .mb-s-5 { margin-bottom: 5rem ; } .mb-s-6 { margin-bottom: 6rem ; } .mb-s-7 { margin-bottom: 7rem ; } .mb-s-8 { margin-bottom: 8rem ; } .mb-s-9 { margin-bottom: 9rem ; } .mb-s-10 { margin-bottom: 10rem ; } .mb-s--30p { margin-bottom: -30% ; } .mb-s--20p { margin-bottom: -20% ; } .mb-s--15p { margin-bottom: -15% ; } .mb-s--10p { margin-bottom: -10% ; } .mb-s--5p { margin-bottom: -5% ; } .mb-s--025p { margin-bottom: -2.5% ; } .mb-s-025p { margin-bottom: 2.5% ; } .mb-s-5p { margin-bottom: 5% ; } .mb-s-10p { margin-bottom: 10% ; } .mb-s-15p { margin-bottom: 15% ; } .mb-s-20p { margin-bottom: 20% ; } .mb-s-30p { margin-bottom: 30% ; } .mb-s-1vh { margin-bottom: 1svh ; } .mb-s-2vh { margin-bottom: 2svh ; } .mb-s-3vh { margin-bottom: 3svh ; } .mb-s-4vh { margin-bottom: 4svh ; } .mb-s-5vh { margin-bottom: 5svh ; } .mb-s-6vh { margin-bottom: 6svh ; } .mb-s-7vh { margin-bottom: 7svh ; } .mb-s-8vh { margin-bottom: 8svh ; } .mb-s-9vh { margin-bottom: 9svh ; } .mb-s-10vh { margin-bottom: 10svh ; } .mb-s-25vh { margin-bottom: 25svh ; } .mb-s-33vh { margin-bottom: 33.33svh ; } .mb-s-50vh { margin-bottom: 50svh ; } .mb-s-66vh { margin-bottom: 66.66svh ; } .mb-s-100vh { margin-bottom: 100svh ; } .mb-s-05gap { margin-bottom: calc(0.5 * var(--colgap) ) ; } .mb-s-1gap { margin-bottom: var(--colgap) ; } .mb-s-2gap { margin-bottom: calc(2 * var(--colgap) ) ; } .mb-s-3gap { margin-bottom: calc(3 * var(--colgap) ) ; } .mb-s-4gap { margin-bottom: calc(4 * var(--colgap) ) ; } .mb-s-5gap { margin-bottom: calc(5 * var(--colgap) ) ; } .mb-s--3nav { margin-bottom: calc(-3 * var(--navheight)); } .mb-s--2nav { margin-bottom: calc(-2 * var(--navheight)); } .mb-s--1nav { margin-bottom: calc(-1 * var(--navheight)); } .mb-s-1nav { margin-bottom: var(--navheight); } .mb-s-2nav { margin-bottom: calc(2 * var(--navheight)) ; } .mb-s-3nav { margin-bottom: calc(3 * var(--navheight)) ; } .ml-s-auto { margin-left: auto; } .ml-s-noauto { margin-left: inherit !important; } .ml-s-0 { --colgap-l: 0; margin-left: var(--colgap-l); } .ml-s-05 { --colgap-l: 0.5rem; margin-left: var(--colgap-l); } .ml-s-1 { --colgap-l: 1rem; margin-left: var(--colgap-l); } .ml-s-2 { --colgap-l: 2rem; margin-left: var(--colgap-l); } .ml-s-3 { --colgap-l: 3rem; margin-left: var(--colgap-l); } .ml-s-4 { --colgap-l: 4rem; margin-left: var(--colgap-l); } .ml-s-5 { --colgap-l: 5rem; margin-left: var(--colgap-l); } .ml-s-6 { --colgap-l: 6rem; margin-left: var(--colgap-l); } .ml-s-7 { --colgap-l: 7rem; margin-left: var(--colgap-l); } .ml-s-8 { --colgap-l: 8rem; margin-left: var(--colgap-l); } .ml-s-9 { --colgap-l: 9rem; margin-left: var(--colgap-l); } .ml-s-10 { --colgap-l: 10rem; margin-left: var(--colgap-l); } .ml-s-25p { --colgap-l: 2.5%; margin-left: var(--colgap-l); } .ml-s-5p { --colgap-l: 5% ; margin-left: var(--colgap-l); } .ml-s-10p { --colgap-l: 10% ; margin-left: var(--colgap-l); } .ml-s-20p { --colgap-l: 20% ; margin-left: var(--colgap-l); } .ml-s-30p { --colgap-l: 30% ; margin-left: var(--colgap-l); } .ml-s-40p { --colgap-l: 40% ; margin-left: var(--colgap-l); } .ml-s-50p { --colgap-l: 50% ; margin-left: var(--colgap-l); } .ml-s-60p { --colgap-l: 60% ; margin-left: var(--colgap-l); } .ml-s-70p { --colgap-l: 70% ; margin-left: var(--colgap-l); } .ml-s-80p { --colgap-l: 80% ; margin-left: var(--colgap-l); } .ml-s-90p { --colgap-l: 90% ; margin-left: var(--colgap-l); } .ml-s-100p { --colgap-l: 100% ; margin-left: var(--colgap-l); } .ml-s-025vw { --colgap-l: calc( var(--maxwidthlimit) * 0.025); margin-left: var(--colgap-l); } .ml-s-1vw { --colgap-l: calc( var(--maxwidthlimit) * 0.02 ); margin-left: 1vw !important; } .ml-s-5vw { --colgap-l: calc( var(--maxwidthlimit) * 0.05 ); margin-left: var(--colgap-l); } .ml-s-10vw { --colgap-l: calc( var(--maxwidthlimit) * 0.1 ); margin-left: var(--colgap-l); } .ml-s-20vw { --colgap-l: calc( var(--maxwidthlimit) * 0.2 ); margin-left: var(--colgap-l); } .ml-s-30vw { --colgap-l: calc( var(--maxwidthlimit) * 0.3 ); margin-left: var(--colgap-l); } .ml-s-40vw { --colgap-l: calc( var(--maxwidthlimit) * 0.4 ); margin-left: var(--colgap-l); } .ml-s-50vw { --colgap-l: calc( var(--maxwidthlimit) * 0.5 ); margin-left: var(--colgap-l); } .ml-s-60vw { --colgap-l: calc( var(--maxwidthlimit) * 0.6 ); margin-left: var(--colgap-l); } .ml-s-70vw { --colgap-l: calc( var(--maxwidthlimit) * 0.7 ); margin-left: var(--colgap-l); } .ml-s-80vw { --colgap-l: calc( var(--maxwidthlimit) * 0.8 ); margin-left: var(--colgap-l); } .ml-s-90vw { --colgap-l: calc( var(--maxwidthlimit) * 0.9 ); margin-left: var(--colgap-l); } .ml-s-100vw { --colgap-l: calc( var(--maxwidthlimit) * 100 ); margin-left: var(--colgap-l); } .ml-s-0gap { --colgap-l: calc( 0 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-1gap { --colgap-l: calc( 1 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-2gap { --colgap-l: calc( 2 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-3gap { --colgap-l: calc( 3 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-4gap { --colgap-l: calc( 4 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-5gap { --colgap-l: calc( 5 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-6gap { --colgap-l: calc( 6 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-7gap { --colgap-l: calc( 7 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-8gap { --colgap-l: calc( 8 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-9gap { --colgap-l: calc( 9 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-10gap { --colgap-l: calc( 10 * var(--colgap)); margin-left: var(--colgap-l); } .mr-s-auto { margin-right: auto; } .mr-s-noauto { margin-right: inherit !important; } .mr-s-0 { --colgap-r: 0; margin-right: var(--colgap-r); } .mr-s-05 { --colgap-r: 0.5rem; margin-right: var(--colgap-r); } .mr-s-1 { --colgap-r: 1rem; margin-right: var(--colgap-r); } .mr-s-2 { --colgap-r: 2rem; margin-right: var(--colgap-r); } .mr-s-3 { --colgap-r: 3rem; margin-right: var(--colgap-r); } .mr-s-4 { --colgap-r: 4rem; margin-right: var(--colgap-r); } .mr-s-5 { --colgap-r: 5rem; margin-right: var(--colgap-r); } .mr-s-6 { --colgap-r: 6rem; margin-right: var(--colgap-r); } .mr-s-7 { --colgap-r: 7rem; margin-right: var(--colgap-r); } .mr-s-8 { --colgap-r: 8rem; margin-right: var(--colgap-r); } .mr-s-9 { --colgap-r: 9rem; margin-right: var(--colgap-r); } .mr-s-10 { --colgap-r: 10rem; margin-right: var(--colgap-r); } .mr-s-25p { --colgap-r: 2.5%; margin-right: var(--colgap-r); } .mr-s-5p { --colgap-r: 5% ; margin-right: var(--colgap-r); } .mr-s-10p { --colgap-r: 10% ; margin-right: var(--colgap-r); } .mr-s-20p { --colgap-r: 20% ; margin-right: var(--colgap-r); } .mr-s-30p { --colgap-r: 30% ; margin-right: var(--colgap-r); } .mr-s-40p { --colgap-r: 40% ; margin-right: var(--colgap-r); } .mr-s-50p { --colgap-r: 50% ; margin-right: var(--colgap-r); } .mr-s-60p { --colgap-r: 60% ; margin-right: var(--colgap-r); } .mr-s-70p { --colgap-r: 70% ; margin-right: var(--colgap-r); } .mr-s-80p { --colgap-r: 80% ; margin-right: var(--colgap-r); } .mr-s-90p { --colgap-r: 90% ; margin-right: var(--colgap-r); } .mr-s-100p { --colgap-r: 100% ; margin-right: var(--colgap-r); } .mr-s-025vw { --colgap-r: calc( var(--maxwidthlimit) * 0.025); margin-right: var(--colgap-r); } .mr-s-5vw { --colgap-r: calc( var(--maxwidthlimit) * 0.05 ); margin-right: var(--colgap-r); } .mr-s-10vw { --colgap-r: calc( var(--maxwidthlimit) * 0.1 ); margin-right: var(--colgap-r); } .mr-s-20vw { --colgap-r: calc( var(--maxwidthlimit) * 0.2 ); margin-right: var(--colgap-r); } .mr-s-30vw { --colgap-r: calc( var(--maxwidthlimit) * 0.3 ); margin-right: var(--colgap-r); } .mr-s-40vw { --colgap-r: calc( var(--maxwidthlimit) * 0.4 ); margin-right: var(--colgap-r); } .mr-s-50vw { --colgap-r: calc( var(--maxwidthlimit) * 0.5 ); margin-right: var(--colgap-r); } .mr-s-60vw { --colgap-r: calc( var(--maxwidthlimit) * 0.6 ); margin-right: var(--colgap-r); } .mr-s-70vw { --colgap-r: calc( var(--maxwidthlimit) * 0.7 ); margin-right: var(--colgap-r); } .mr-s-80vw { --colgap-r: calc( var(--maxwidthlimit) * 0.8 ); margin-right: var(--colgap-r); } .mr-s-90vw { --colgap-r: calc( var(--maxwidthlimit) * 0.9 ); margin-right: var(--colgap-r); } .mr-s-100vw { --colgap-r: calc( var(--maxwidthlimit) * 100 ); margin-right: var(--colgap-r); } .mr-s-0gap { --colgap-r: calc( 0 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-1gap { --colgap-r: calc( 1 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-2gap { --colgap-r: calc( 2 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-3gap { --colgap-r: calc( 3 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-4gap { --colgap-r: calc( 4 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-5gap { --colgap-r: calc( 5 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-6gap { --colgap-r: calc( 6 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-7gap { --colgap-r: calc( 7 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-8gap { --colgap-r: calc( 8 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-9gap { --colgap-r: calc( 9 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-10gap { --colgap-r: calc( 10 * var(--colgap)); margin-right: var(--colgap-r); } } @media (max-width:479px) { .m-xs-auto { margin: auto; } .m-xs-noauto { margin: inherit !important; } .m-xs-0 { --colgap: 0; margin:var(--colgap); } .m-xs-05 { --colgap: 0.5rem; margin:var(--colgap); } .m-xs-1 { --colgap: 1rem; margin:var(--colgap); } .m-xs-2 { --colgap: 2rem; margin:var(--colgap); } .m-xs-3 { --colgap: 3rem; margin:var(--colgap); } .m-xs-4 { --colgap: 4rem; margin:var(--colgap); } .m-xs-5 { --colgap: 5rem; margin:var(--colgap); } .m-xs-6 { --colgap: 6rem; margin:var(--colgap); } .m-xs-7 { --colgap: 7rem; margin:var(--colgap); } .m-xs-8 { --colgap: 8rem; margin:var(--colgap); } .m-xs-9 { --colgap: 9rem; margin:var(--colgap); } .m-xs-10 { --colgap: 10rem; margin:var(--colgap); } .m-xs-25p { --colgap: 2.5%; margin:var(--colgap); } .m-xs-5p { --colgap: 5% ; margin:var(--colgap); } .m-xs-10p { --colgap: 10% ; margin:var(--colgap); } .m-xs-20p { --colgap: 20% ; margin:var(--colgap); } .m-xs-30p { --colgap: 30% ; margin:var(--colgap); } .m-xs-40p { --colgap: 40% ; margin:var(--colgap); } .m-xs-50p { --colgap: 50% ; margin:var(--colgap); } .m-xs-60p { --colgap: 60% ; margin:var(--colgap); } .m-xs-70p { --colgap: 70% ; margin:var(--colgap); } .m-xs-80p { --colgap: 80% ; margin:var(--colgap); } .m-xs-90p { --colgap: 90% ; margin:var(--colgap); } .m-xs-100p { --colgap: 100% ; margin:var(--colgap); } .m-xs-1vw { --colgap: calc( var(--maxwidthlimit) * 0.01 ); margin:var(--colgap); } .m-xs-2vw { --colgap: calc( var(--maxwidthlimit) * 0.02 ); margin:var(--colgap); } .m-xs-025vw { --colgap: calc( var(--maxwidthlimit) * 0.025 ); margin:var(--colgap); } .m-xs-3vw { --colgap: calc( var(--maxwidthlimit) * 0.03 ); margin:var(--colgap); } .m-xs-4vw { --colgap: calc( var(--maxwidthlimit) * 0.04 ); margin:var(--colgap); } .m-xs-5vw { --colgap: calc( var(--maxwidthlimit) * 0.05 ); margin:var(--colgap); } .m-xs-10vw { --colgap: calc( var(--maxwidthlimit) * 0.1 ); margin:var(--colgap); } .m-xs-20vw { --colgap: calc( var(--maxwidthlimit) * 0.2 ); margin:var(--colgap); } .m-xs-30vw { --colgap: calc( var(--maxwidthlimit) * 0.3 ); margin:var(--colgap); } .m-xs-40vw { --colgap: calc( var(--maxwidthlimit) * 0.4 ); margin:var(--colgap); } .m-xs-50vw { --colgap: calc( var(--maxwidthlimit) * 0.5 ); margin:var(--colgap); } .m-xs-60vw { --colgap: calc( var(--maxwidthlimit) * 0.6 ); margin:var(--colgap); } .m-xs-70vw { --colgap: calc( var(--maxwidthlimit) * 0.7 ); margin:var(--colgap); } .m-xs-80vw { --colgap: calc( var(--maxwidthlimit) * 0.8 ); margin:var(--colgap); } .m-xs-90vw { --colgap: calc( var(--maxwidthlimit) * 0.9 ); margin:var(--colgap); } .m-xs-100vw { --colgap: calc( var(--maxwidthlimit) * 100 ); margin:var(--colgap); } .m-xs-0gap { --colgap: calc( 0 * var(--colgap) ); margin:var(--colgap); } .m-xs-1gap { --colgap: calc( 1 * var(--colgap) ); margin:var(--colgap); } .m-xs-2gap { --colgap: calc( 2 * var(--colgap) ); margin:var(--colgap); } .m-xs-3gap { --colgap: calc( 3 * var(--colgap) ); margin:var(--colgap); } .m-xs-4gap { --colgap: calc( 4 * var(--colgap) ); margin:var(--colgap); } .m-xs-5gap { --colgap: calc( 5 * var(--colgap) ); margin:var(--colgap); } .m-xs-6gap { --colgap: calc( 6 * var(--colgap) ); margin:var(--colgap); } .m-xs-7gap { --colgap: calc( 7 * var(--colgap) ); margin:var(--colgap); } .m-xs-8gap { --colgap: calc( 8 * var(--colgap) ); margin:var(--colgap); } .m-xs-9gap { --colgap: calc( 9 * var(--colgap) ); margin:var(--colgap); } .m-xs-10gap { --colgap: calc( 10 * var(--colgap) ); margin:var(--colgap); } .mt-xs-auto { margin-top: auto ; } .mt-xs-noauto { margin-top: inherit !important; } .mt-xs-0 { margin-top: 0 ; } .mt-xs--10 { margin-top: -10rem ; } .mt-xs--9 { margin-top: -9rem ; } .mt-xs--8 { margin-top: -8rem ; } .mt-xs--7 { margin-top: -7rem ; } .mt-xs--6 { margin-top: -6rem ; } .mt-xs--5 { margin-top: -5rem ; } .mt-xs--4 { margin-top: -4rem ; } .mt-xs--3 { margin-top: -3rem ; } .mt-xs--2 { margin-top: -2rem ; } .mt-xs--1 { margin-top: -1rem ; } .mt-xs-05 { margin-top: 0.5rem ; } .mt-xs-1 { margin-top: 1rem ; } .mt-xs-2 { margin-top: 2rem ; } .mt-xs-3 { margin-top: 3rem ; } .mt-xs-4 { margin-top: 4rem ; } .mt-xs-5 { margin-top: 5rem ; } .mt-xs-6 { margin-top: 6rem ; } .mt-xs-7 { margin-top: 7rem ; } .mt-xs-8 { margin-top: 8rem ; } .mt-xs-9 { margin-top: 9rem ; } .mt-xs-10 { margin-top: 10rem ; } .mt-xs--30p { margin-top: -30% ; } .mt-xs--20p { margin-top: -20% ; } .mt-xs--15p { margin-top: -15% ; } .mt-xs--10p { margin-top: -10% ; } .mt-xs--5p { margin-top: -5% ; } .mt-xs--025p { margin-top: -2.5% ; } .mt-xs-025p { margin-top: 2.5% ; } .mt-xs-5p { margin-top: 5% ; } .mt-xs-10p { margin-top: 10% ; } .mt-xs-15p { margin-top: 15% ; } .mt-xs-20p { margin-top: 20% ; } .mt-xs-30p { margin-top: 30% ; } .mt-xs-1vh { margin-top: 1svh ; } .mt-xs-2vh { margin-top: 2svh ; } .mt-xs-3vh { margin-top: 3svh ; } .mt-xs-4vh { margin-top: 4svh ; } .mt-xs-5vh { margin-top: 5svh ; } .mt-xs-6vh { margin-top: 6svh ; } .mt-xs-7vh { margin-top: 7svh ; } .mt-xs-8vh { margin-top: 8svh ; } .mt-xs-9vh { margin-top: 9svh ; } .mt-xs-10vh { margin-top: 10svh ; } .mt-xs-25vh { margin-top: 25svh ; } .mt-xs-33vh { margin-top: 33.33svh ; } .mt-xs-50vh { margin-top: 50svh ; } .mt-xs-66vh { margin-top: 66.66svh ; } .mt-xs-100vh { margin-top: 100svh ; } .mt-xs-05gap { margin-top: calc(0.5 * var(--colgap) ) ; } .mt-xs-1gap { margin-top: var(--colgap) ; } .mt-xs-2gap { margin-top: calc(2 * var(--colgap) ) ; } .mt-xs-3gap { margin-top: calc(3 * var(--colgap) ) ; } .mt-xs-4gap { margin-top: calc(4 * var(--colgap) ) ; } .mt-xs-5gap { margin-top: calc(5 * var(--colgap) ) ; } .mt-xs--3nav { margin-top: calc(-3 * var(--navheight)); } .mt-xs--2nav { margin-top: calc(-2 * var(--navheight)); } .mt-xs--1nav { margin-top: calc(-1 * var(--navheight)); } .mt-xs-1nav { margin-top: var(--navheight); } .mt-xs-2nav { margin-top: calc(2 * var(--navheight)) ; } .mt-xs-3nav { margin-top: calc(3 * var(--navheight)) ; } .mb-xs-auto { margin-bottom: auto ; } .mb-xs-noauto { margin-bottom: inherit !important; } .mb-xs-0 { margin-bottom: 0 ; } .mb-xs--10 { margin-bottom: -10rem ; } .mb-xs--9 { margin-bottom: -9rem ; } .mb-xs--8 { margin-bottom: -8rem ; } .mb-xs--7 { margin-bottom: -7rem ; } .mb-xs--6 { margin-bottom: -6rem ; } .mb-xs--5 { margin-bottom: -5rem ; } .mb-xs--4 { margin-bottom: -4rem ; } .mb-xs--3 { margin-bottom: -3rem ; } .mb-xs--2 { margin-bottom: -2rem ; } .mb-xs--1 { margin-bottom: -1rem ; } .mb-xs-05 { margin-bottom: 0.5rem ; } .mb-xs-1 { margin-bottom: 1rem ; } .mb-xs-2 { margin-bottom: 2rem ; } .mb-xs-3 { margin-bottom: 3rem ; } .mb-xs-4 { margin-bottom: 4rem ; } .mb-xs-5 { margin-bottom: 5rem ; } .mb-xs-6 { margin-bottom: 6rem ; } .mb-xs-7 { margin-bottom: 7rem ; } .mb-xs-8 { margin-bottom: 8rem ; } .mb-xs-9 { margin-bottom: 9rem ; } .mb-xs-10 { margin-bottom: 10rem ; } .mb-xs--30p { margin-bottom: -30% ; } .mb-xs--20p { margin-bottom: -20% ; } .mb-xs--15p { margin-bottom: -15% ; } .mb-xs--10p { margin-bottom: -10% ; } .mb-xs--5p { margin-bottom: -5% ; } .mb-xs--025p { margin-bottom: -2.5% ; } .mb-xs-025p { margin-bottom: 2.5% ; } .mb-xs-5p { margin-bottom: 5% ; } .mb-xs-10p { margin-bottom: 10% ; } .mb-xs-15p { margin-bottom: 15% ; } .mb-xs-20p { margin-bottom: 20% ; } .mb-xs-30p { margin-bottom: 30% ; } .mb-xs-1vh { margin-bottom: 1svh ; } .mb-xs-2vh { margin-bottom: 2svh ; } .mb-xs-3vh { margin-bottom: 3svh ; } .mb-xs-4vh { margin-bottom: 4svh ; } .mb-xs-5vh { margin-bottom: 5svh ; } .mb-xs-6vh { margin-bottom: 6svh ; } .mb-xs-7vh { margin-bottom: 7svh ; } .mb-xs-8vh { margin-bottom: 8svh ; } .mb-xs-9vh { margin-bottom: 9svh ; } .mb-xs-10vh { margin-bottom: 10svh ; } .mb-xs-25vh { margin-bottom: 25svh ; } .mb-xs-33vh { margin-bottom: 33.33svh ; } .mb-xs-50vh { margin-bottom: 50svh ; } .mb-xs-66vh { margin-bottom: 66.66svh ; } .mb-xs-100vh { margin-bottom: 100svh ; } .mb-xs-05gap { margin-bottom: calc(0.5 * var(--colgap) ) ; } .mb-xs-1gap { margin-bottom: var(--colgap) ; } .mb-xs-2gap { margin-bottom: calc(2 * var(--colgap) ) ; } .mb-xs-3gap { margin-bottom: calc(3 * var(--colgap) ) ; } .mb-xs-4gap { margin-bottom: calc(4 * var(--colgap) ) ; } .mb-xs-5gap { margin-bottom: calc(5 * var(--colgap) ) ; } .mb-xs--3nav { margin-bottom: calc(-3 * var(--navheight)); } .mb-xs--2nav { margin-bottom: calc(-2 * var(--navheight)); } .mb-xs--1nav { margin-bottom: calc(-1 * var(--navheight)); } .mb-xs-1nav { margin-bottom: var(--navheight); } .mb-xs-2nav { margin-bottom: calc(2 * var(--navheight)) ; } .mb-xs-3nav { margin-bottom: calc(3 * var(--navheight)) ; } .ml-xs-auto { margin-left: auto; } .ml-xs-noauto { margin-left: inherit !important; } .ml-xs-0 { --colgap-l: 0; margin-left: var(--colgap-l); } .ml-xs-05 { --colgap-l: 0.5rem; margin-left: var(--colgap-l); } .ml-xs-1 { --colgap-l: 1rem; margin-left: var(--colgap-l); } .ml-xs-2 { --colgap-l: 2rem; margin-left: var(--colgap-l); } .ml-xs-3 { --colgap-l: 3rem; margin-left: var(--colgap-l); } .ml-xs-4 { --colgap-l: 4rem; margin-left: var(--colgap-l); } .ml-xs-5 { --colgap-l: 5rem; margin-left: var(--colgap-l); } .ml-xs-6 { --colgap-l: 6rem; margin-left: var(--colgap-l); } .ml-xs-7 { --colgap-l: 7rem; margin-left: var(--colgap-l); } .ml-xs-8 { --colgap-l: 8rem; margin-left: var(--colgap-l); } .ml-xs-9 { --colgap-l: 9rem; margin-left: var(--colgap-l); } .ml-xs-10 { --colgap-l: 10rem; margin-left: var(--colgap-l); } .ml-xs-25p { --colgap-l: 2.5%; margin-left: var(--colgap-l); } .ml-xs-5p { --colgap-l: 5% ; margin-left: var(--colgap-l); } .ml-xs-10p { --colgap-l: 10% ; margin-left: var(--colgap-l); } .ml-xs-20p { --colgap-l: 20% ; margin-left: var(--colgap-l); } .ml-xs-30p { --colgap-l: 30% ; margin-left: var(--colgap-l); } .ml-xs-40p { --colgap-l: 40% ; margin-left: var(--colgap-l); } .ml-xs-50p { --colgap-l: 50% ; margin-left: var(--colgap-l); } .ml-xs-60p { --colgap-l: 60% ; margin-left: var(--colgap-l); } .ml-xs-70p { --colgap-l: 70% ; margin-left: var(--colgap-l); } .ml-xs-80p { --colgap-l: 80% ; margin-left: var(--colgap-l); } .ml-xs-90p { --colgap-l: 90% ; margin-left: var(--colgap-l); } .ml-xs-100p { --colgap-l: 100% ; margin-left: var(--colgap-l); } .ml-xs-025vw { --colgap-l: calc( var(--maxwidthlimit) * 0.025); margin-left: var(--colgap-l); } .ml-xs-5vw { --colgap-l: calc( var(--maxwidthlimit) * 0.05 ); margin-left: var(--colgap-l); } .ml-xs-10vw { --colgap-l: calc( var(--maxwidthlimit) * 0.1 ); margin-left: var(--colgap-l); } .ml-xs-20vw { --colgap-l: calc( var(--maxwidthlimit) * 0.2 ); margin-left: var(--colgap-l); } .ml-xs-30vw { --colgap-l: calc( var(--maxwidthlimit) * 0.3 ); margin-left: var(--colgap-l); } .ml-xs-40vw { --colgap-l: calc( var(--maxwidthlimit) * 0.4 ); margin-left: var(--colgap-l); } .ml-xs-50vw { --colgap-l: calc( var(--maxwidthlimit) * 0.5 ); margin-left: var(--colgap-l); } .ml-xs-60vw { --colgap-l: calc( var(--maxwidthlimit) * 0.6 ); margin-left: var(--colgap-l); } .ml-xs-70vw { --colgap-l: calc( var(--maxwidthlimit) * 0.7 ); margin-left: var(--colgap-l); } .ml-xs-80vw { --colgap-l: calc( var(--maxwidthlimit) * 0.8 ); margin-left: var(--colgap-l); } .ml-xs-90vw { --colgap-l: calc( var(--maxwidthlimit) * 0.9 ); margin-left: var(--colgap-l); } .ml-xs-100vw { --colgap-l: calc( var(--maxwidthlimit) * 100 ); margin-left: var(--colgap-l); } .ml-xs-0gap { --colgap-l: calc( 0 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-1gap { --colgap-l: calc( 1 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-2gap { --colgap-l: calc( 2 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-3gap { --colgap-l: calc( 3 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-4gap { --colgap-l: calc( 4 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-5gap { --colgap-l: calc( 5 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-6gap { --colgap-l: calc( 6 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-7gap { --colgap-l: calc( 7 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-8gap { --colgap-l: calc( 8 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-9gap { --colgap-l: calc( 9 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-10gap { --colgap-l: calc( 10 * var(--colgap)); margin-left: var(--colgap-l); } .mr-xs-auto { margin-right: auto; } .mr-xs-noauto { margin-right: inherit !important; } .mr-xs-0 { --colgap-r: 0; margin-right: var(--colgap-r); } .mr-xs-05 { --colgap-r: 0.5rem; margin-right: var(--colgap-r); } .mr-xs-1 { --colgap-r: 1rem; margin-right: var(--colgap-r); } .mr-xs-2 { --colgap-r: 2rem; margin-right: var(--colgap-r); } .mr-xs-3 { --colgap-r: 3rem; margin-right: var(--colgap-r); } .mr-xs-4 { --colgap-r: 4rem; margin-right: var(--colgap-r); } .mr-xs-5 { --colgap-r: 5rem; margin-right: var(--colgap-r); } .mr-xs-6 { --colgap-r: 6rem; margin-right: var(--colgap-r); } .mr-xs-7 { --colgap-r: 7rem; margin-right: var(--colgap-r); } .mr-xs-8 { --colgap-r: 8rem; margin-right: var(--colgap-r); } .mr-xs-9 { --colgap-r: 9rem; margin-right: var(--colgap-r); } .mr-xs-10 { --colgap-r: 10rem; margin-right: var(--colgap-r); } .mr-xs-25p { --colgap-r: 2.5%; margin-right: var(--colgap-r); } .mr-xs-5p { --colgap-r: 5% ; margin-right: var(--colgap-r); } .mr-xs-10p { --colgap-r: 10% ; margin-right: var(--colgap-r); } .mr-xs-20p { --colgap-r: 20% ; margin-right: var(--colgap-r); } .mr-xs-30p { --colgap-r: 30% ; margin-right: var(--colgap-r); } .mr-xs-40p { --colgap-r: 40% ; margin-right: var(--colgap-r); } .mr-xs-50p { --colgap-r: 50% ; margin-right: var(--colgap-r); } .mr-xs-60p { --colgap-r: 60% ; margin-right: var(--colgap-r); } .mr-xs-70p { --colgap-r: 70% ; margin-right: var(--colgap-r); } .mr-xs-80p { --colgap-r: 80% ; margin-right: var(--colgap-r); } .mr-xs-90p { --colgap-r: 90% ; margin-right: var(--colgap-r); } .mr-xs-100p { --colgap-r: 100% ; margin-right: var(--colgap-r); } .mr-xs-025vw { --colgap-r: calc( var(--maxwidthlimit) * 0.025); margin-right: var(--colgap-r); } .mr-xs-5vw { --colgap-r: calc( var(--maxwidthlimit) * 0.05 ); margin-right: var(--colgap-r); } .mr-xs-10vw { --colgap-r: calc( var(--maxwidthlimit) * 0.1 ); margin-right: var(--colgap-r); } .mr-xs-20vw { --colgap-r: calc( var(--maxwidthlimit) * 0.2 ); margin-right: var(--colgap-r); } .mr-xs-30vw { --colgap-r: calc( var(--maxwidthlimit) * 0.3 ); margin-right: var(--colgap-r); } .mr-xs-40vw { --colgap-r: calc( var(--maxwidthlimit) * 0.4 ); margin-right: var(--colgap-r); } .mr-xs-50vw { --colgap-r: calc( var(--maxwidthlimit) * 0.5 ); margin-right: var(--colgap-r); } .mr-xs-60vw { --colgap-r: calc( var(--maxwidthlimit) * 0.6 ); margin-right: var(--colgap-r); } .mr-xs-70vw { --colgap-r: calc( var(--maxwidthlimit) * 0.7 ); margin-right: var(--colgap-r); } .mr-xs-80vw { --colgap-r: calc( var(--maxwidthlimit) * 0.8 ); margin-right: var(--colgap-r); } .mr-xs-90vw { --colgap-r: calc( var(--maxwidthlimit) * 0.9 ); margin-right: var(--colgap-r); } .mr-xs-100vw { --colgap-r: calc( var(--maxwidthlimit) * 100 ); margin-right: var(--colgap-r); } .mr-xs-0gap { --colgap-r: calc( 0 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-1gap { --colgap-r: calc( 1 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-2gap { --colgap-r: calc( 2 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-3gap { --colgap-r: calc( 3 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-4gap { --colgap-r: calc( 4 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-5gap { --colgap-r: calc( 5 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-6gap { --colgap-r: calc( 6 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-7gap { --colgap-r: calc( 7 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-8gap { --colgap-r: calc( 8 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-9gap { --colgap-r: calc( 9 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-10gap { --colgap-r: calc( 10 * var(--colgap)); margin-right: var(--colgap-r); } } .fixed { position:fixed; top:0px; z-index:100; } .absolute { position:absolute; } .relative { position:relative; } .sticky { position:sticky; top: calc( var(--navheight) + var(--navoffset) ); z-index:1; } .sticky-top-0 { top:0px; } /* 2025: für Hauptmenü. alle anderen sollen --navheight-Abstand berücksichtigen.*/ .display-hide { display: none; } .display-block { display: block; } .display-flex { display: flex; } .display-grid { display: grid; } @media (max-width:1279px) { .display-l-hide { display:none; } .display-l-block, .m-display-show { display:block; } .display-l-flex { display:flex; } .display-l-grid { display:grid; } .l-fixed { position:fixed !important; } .l-sticky { position:sticky !important; } .l-absolute { position:absolute !important; } .l-relative { position:relative !important; } } @media (max-width:1023px) { .display-m-hide { display:none; } .display-m-block, .m-display-show { display:block; } .display-m-flex { display:flex; } .display-m-grid { display:grid; } .m-fixed { position:fixed !important; } .m-sticky { position:sticky !important; } .m-absolute { position:absolute !important; } .m-relative { position:relative !important; } } @media (max-width:767px) { .display-s-hide { display:none; } .display-s-block, .s-display-show { display:block; } .display-s-flex { display:flex; } .display-s-grid { display:grid; } .s-fixed { position:fixed !important; } .s-sticky { position:sticky !important; } .s-absolute { position:absolute !important; } .s-relative { position:relative !important; } } .flex-grow-1 { flex-grow:1; } /* Aspect Ratio */ .ar-1-1 { overflow:clip; aspect-ratio:1/1; height:auto; min-height:0; min-width:0; /* safari-bug */} .ar-5-4 { overflow:clip; aspect-ratio:1.2/1; height:auto; min-height:0; min-width:0; } .ar-4-3 { overflow:clip; aspect-ratio:1.333/1; height:auto; min-height:0; min-width:0; } .ar-3-2 { overflow:clip; aspect-ratio:1.5/1; height:auto; min-height:0; min-width:0; } .ar-16-9 { overflow:clip; aspect-ratio:1.777/1; height:auto; min-height:0; min-width:0; } .ar-16-8, .ar-2-1 { overflow:clip; aspect-ratio:2/1; height:auto; min-height:0; min-width:0; } .ar-5-2 { overflow:clip; aspect-ratio:2.5/1; height:auto; min-height:0; min-width:0; } .ar-15-5, .ar-3-1 { overflow:clip; aspect-ratio:3/1; height:auto; min-height:0; min-width:0; } .ar-4-1 { overflow:clip; aspect-ratio:4/1; height:auto; min-height:0; min-width:0; } .ar-5-1 { overflow:clip; aspect-ratio:5/1; height:auto; min-height:0; min-width:0; } .ar-6-1 { overflow:clip; aspect-ratio:6/1; height:auto; min-height:0; min-width:0; } .ar-auto { overflow:clip; aspect-ratio:auto; min-height:0; min-width:0; } @media (max-width:1365px) { .ar-xl-1-1 { overflow:clip; aspect-ratio:1/1; height:auto; } .ar-xl-5-4 { overflow:clip; aspect-ratio:1.2/1; height:auto; } .ar-xl-4-3 { overflow:clip; aspect-ratio:1.333/1; height:auto; } .ar-xl-3-2 { overflow:clip; aspect-ratio:1.5/1; height:auto; } .ar-xl-16-9 { overflow:clip; aspect-ratio:1.777/1; height:auto; } .ar-xl-16-8, .ar-xl-2-1 { overflow:clip; aspect-ratio:2/1; height:auto; } .ar-xl-5-2 { overflow:clip; aspect-ratio:2.5/1; height:auto; } .ar-xl-15-5, .ar-xl-3-1 { overflow:clip; aspect-ratio:3/1; height:auto; } .ar-xl-auto { overflow:clip; aspect-ratio:auto; } } @media (max-width:1279px) { .ar-l-1-1 { overflow:clip; aspect-ratio:1/1; height:auto; } .ar-l-5-4 { overflow:clip; aspect-ratio:1.2/1; height:auto; } .ar-l-4-3 { overflow:clip; aspect-ratio:1.333/1; height:auto; } .ar-l-3-2 { overflow:clip; aspect-ratio:1.5/1; height:auto; } .ar-l-16-9 { overflow:clip; aspect-ratio:1.777/1; height:auto; } .ar-l-16-8, .ar-l-2-1 { overflow:clip; aspect-ratio:2/1; height:auto; } .ar-l-5-2 { overflow:clip; aspect-ratio:2.5/1; height:auto; } .ar-l-15-5, .ar-l-3-1 { overflow:clip; aspect-ratio:3/1; height:auto; } .ar-l-auto { overflow:clip; aspect-ratio:auto; } } @media (max-width:1023px) { .ar-m-1-1 { overflow:clip; aspect-ratio:1/1; height:auto; } .ar-m-5-4 { overflow:clip; aspect-ratio:1.2/1; height:auto; } .ar-m-4-3 { overflow:clip; aspect-ratio:1.333/1; height:auto; } .ar-m-3-2 { overflow:clip; aspect-ratio:1.5/1; height:auto; } .ar-m-16-9 { overflow:clip; aspect-ratio:1.777/1; height:auto; } .ar-m-16-8, .ar-m-2-1 { overflow:clip; aspect-ratio:2/1; height:auto; } .ar-m-5-2 { overflow:clip; aspect-ratio:2.5/1; height:auto; } .ar-m-15-5, .ar-m-3-1 { overflow:clip; aspect-ratio:3/1; height:auto; } .ar-m-auto { overflow:clip; aspect-ratio:auto; } } @media (max-width:767px) { .ar-s-1-1 { overflow:clip; aspect-ratio:1/1; height:auto; } .ar-s-5-4 { overflow:clip; aspect-ratio:1.2/1; height:auto; } .ar-s-4-3 { overflow:clip; aspect-ratio:1.333/1; height:auto; } .ar-s-3-2 { overflow:clip; aspect-ratio:1.5/1; height:auto; } .ar-s-16-9 { overflow:clip; aspect-ratio:1.777/1; height:auto; } .ar-s-16-8, .ar-s-2-1 { overflow:clip; aspect-ratio:2/1; height:auto; } .ar-s-5-2 { overflow:clip; aspect-ratio:2.5/1; height:auto; } .ar-s-15-5, .ar-s-3-1 { overflow:clip; aspect-ratio:3/1; height:auto; } .ar-s-auto { overflow:clip; aspect-ratio:auto; } } @media (max-width:479px) { .ar-xs-1-1 { overflow:clip; aspect-ratio:1/1; height:auto; } .ar-xs-5-4 { overflow:clip; aspect-ratio:1.2/1; height:auto; } .ar-xs-4-3 { overflow:clip; aspect-ratio:1.333/1; height:auto; } .ar-xs-3-2 { overflow:clip; aspect-ratio:1.5/1; height:auto; } .ar-xs-16-9 { overflow:clip; aspect-ratio:1.777/1; height:auto; } .ar-xs-16-8, .ar-xs-2-1 { overflow:clip; aspect-ratio:2/1; height:auto; } .ar-xs-5-2 { overflow:clip; aspect-ratio:2.5/1; height:auto; } .ar-xs-15-5, .ar-xs-3-1 { overflow:clip; aspect-ratio:3/1; height:auto; } .ar-xs-auto { overflow:clip; aspect-ratio:auto; } } /*TODO: ist das hier richtig?*/ .overflow-hidden { overflow:hidden; } /* call to action flyin rechts */ /* call to action flyin rechts */ /* call to action flyin rechts */ .cta { position: fixed; right:-100%; top:300px; z-index:1000; width: auto; height:auto; width:250px; /* notlösung weil Auto-Widths im Kreis laufen? */ text-decoration:none; border-bottom:none; transition:all 0.25s, right 1s; } .cta-visible { right:0px; } .cta-close { cursor:var(--cursor-pointer); } .cta-forceclosed { right: -100% !important; } .cta:hover { transform:scale(1.05); transform-origin:center right; } /* Dropdownmenüs lng und mobile-menu */ /* Dropdownmenüs lng und mobile-menu */ /* Dropdownmenüs lng und mobile-menu */ /*TODO: Burgermenu kommt von pedalpiraten ... aufräumen oder weg? ist nur ein Button mit Animation, der per JS ein anderes ein fly-in triggert */ .burgermenu { aspect-ratio: 1/1; display:flex; flex-direction:column; justify-content:space-between; width:33px; } .burgermenu > div { background-color:var(--color-schwarz); height:3px; transition:var(--base-transition); } .burgermenu > div:first-child { transform-origin:center; } .burgermenu> div:last-child { transform-origin:center; } .burgermenu:hover { cursor:var(--cursor-pointer); } .burgermenu.aktiv > div:first-child { transform:rotate(-45deg); margin-top:calc(50%); } .burgermenu.aktiv > div:nth-child(2) { display:none; } .burgermenu.aktiv > div:last-child { transform:rotate(45deg); margin-bottom:calc(50%); } /***** MEJS mediaevent js player media player Overrides ****/ .mejs__container:focus { outline:none; } .mejs__overlay-button { padding:0; margin:0; } .mejs__time-current { background:hwb(0 0% 0%); /* kann var(--color-page) werden, wenn in css integriert.*/ } .mejs__container { font-family:inherit !important; } /***** Cookie Cookiebanner banner Klaro ******/ /***** Status: von kapitel4.com rück-portiert, muss hier aufgeräumt werden! ******/ .klaro .cookie-notice:not(.cookie-modal-notice) { top:auto !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:10000 !important; max-width:none !important; border-radius:0px !important; background-color: #ffffff !important; box-shadow:0 0 25px -10px rgba(0,0,0,0.5) !important; border-top:1px solid #000000 !important; } .klaro .cookie-modal p, .klaro .cookie-modal strong, .klaro .cookie-modal h1, .klaro .cookie-modal h2, .klaro .cookie-modal ul, .klaro .cookie-modal li, .klaro .context-notice p, .klaro .context-notice strong, .klaro .context-notice h1, .klaro .context-notice h2, .klaro .context-notice ul, .klaro .context-notice li, .klaro .cookie-notice p, .klaro .cookie-notice strong, .klaro .cookie-notice h1, .klaro .cookie-notice h2, .klaro .cookie-notice ul, .klaro .cookie-notice li { color: #000000 !important; } .klaro .cookie-modal a, .klaro .context-notice a, .klaro .cookie-notice a { color: var(--color-site) !important; } .klaro .cookie-modal .cm-btn, .klaro .context-notice .cm-btn, .klaro .cookie-notice .cm-btn { border-radius:0rem !important; padding:0.5rem 1rem !important; color:#ffffff !important; } .klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success { background-color: var(--color-site) !important; text-wrap:nowrap; } .klaro .cookie-modal .cm-modal.cm-klaro { background-color:#ffffff !important; padding:2rem; } .klaro .cookie-modal .cm-modal .cm-header, .klaro .cookie-modal .cm-modal .cm-body, .klaro .cookie-modal .cm-modal .cm-footer { padding:0 !important; border:none !important; } .klaro .cookie-modal .cm-modal .cm-header, .klaro .cookie-modal .cm-modal .cm-body { margin-bottom:2rem !important; } .klaro .context-notice { padding:2rem !important; } .klaro .context-notice .cm-buttons { display:flex; gap:1rem; } .klaro .cookie-modal .cm-btn, .klaro .context-notice .cm-btn, .klaro .cookie-notice .cm-btn { margin:0rem !important; width:100%; } .klaro .context-notice .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success-var, .klaro .cookie-modal .cm-btn.cm-btn-accept { border:1px solid var(--color-site) !important; background-color: var(--color-site) !important; color:#ffffff !important; } .klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-modal .cm-btn.cm-btn-accept { background-color: #ffffff !important; color: var(--color-site) !important; } .klaro .cookie-modal .cm-btn.cn-decline, .klaro .context-notice .cm-btn.cn-decline, .klaro .cookie-notice .cm-btn.cn-decline { border:1px solid #777777 !important; background-color: #ffffff !important; color: #777777 !important; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p { padding:0.5rem 0 0 0 !important; font-size:0.8rem; line-height:1.3; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body h3 { margin-bottom:0.33rem !important; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a { margin:0 !important; } .klaro .cn-body { max-width:1800px; padding-bottom:0 !important; margin-left:auto !important; margin-right:auto !important; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok { margin-top:1rem !important; margin-bottom:1rem !important; align-items:start !important; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a, .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div { margin-top:0 !important; display:flex; flex-direction:row; justify-content:stretch; gap:0.5rem; } .klaro label { margin-bottom:0px !important; line-height:1.2; } .klaro .cookie-modal .cm-list-title, .klaro .context-notice .cm-list-title, .klaro .cookie-notice .cm-list-title { font-size:0.9rem !important; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p.purposes, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p.purposes, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes, .klaro .cookie-modal .cm-list-description, .klaro .context-notice .cm-list-description, .klaro .cookie-notice .cm-list-description { line-height:1 !important; padding-top:0 !important; } .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider, .klaro .context-notice .cm-list-input:checked + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider { background-color: var(--color-site) !important; } .klaro .cm-powered-by { display:none !important; } .klaro .cookie-modal .cm-modal .hide svg { stroke:#000000 !important; } .klaro .cm-toggle-all { padding-top: 1.5rem !important; margin-top:1.5rem !important; } /***** Cookie Cookiebanner banner Klaro ******/ /*************** GUIDOR-spezifische overrides, großteils generiert! *******************/ /* Grid-Layout stapelt Sidebar-Container und Main übereinander */ .content-wrapper { display: grid; grid-template-columns: 100%; } .sidebar-container, main { grid-column: 1; grid-row: 1; } /* Container, der die Sidebar auf derselben Breite wie die normalen Rows hält */ .sidebar-container { grid-column: 1; grid-row: 1; z-index: 10; pointer-events: none; width: 100%; max-width: var(--maxwidth); /* Entspricht der max-width der normalen .row */ margin: 0 auto; /* Zentriert den Container deckungsgleich zur .row */ margin-top:10svh; } /* Die Sidebar selbst */ #sidebar-toggle { display:none; width:2rem; aspect-ratio:1/1; background-color:fuchsia; } #sidebar { position: sticky; top: 20px; /* Ggf. anpassen, falls du einen Header-Offset benötigst */ width: calc(var(--sidenavwidth) - 2rem); /* Gewünschte Breite der Sidebar */ height: max-content; pointer-events: auto; border-left:1px solid var(--color-orange); padding-left:15px; padding-top:10px; padding-bottom:10px; } #sidebar ul { display:flex; flex-direction:column; gap:1rem; } #sidebar ul li a { font-family:"Museo"; font-size:0.8rem; color:var(--color-grau--1); font-weight:700; text-transform:uppercase; transition:all 0.25s ease-in-out; hyphens:none; text-wrap:balance; } #sidebar ul li a.active { color:var(--color-orange) !important; transform:scale(1.05); transform-origin: center left; } #sidebar ul li a.on-dark-content { color:var(--color-grau-1); text-shadow:0 0 2px rgba(0,0,0,0.4), 0 0 20px rgba(0,0,0,0.4); } section { scroll-margin-top: 10svh; } /* --- Anpassung der Rows innerhalb der Main-Sections --- */ /* Normale .row weicht der Sidebar aus */ main section > .row { padding-left: calc((var(--gapfactorrow) * var(--colgap)) + var(--sidenavwidth)); padding-left: calc(var(--sidenavwidth)); box-sizing: border-box; } /* .row.fullwidth bekommt die Anpassung nicht und darf überlappt werden */ main section > .row.fullwidth { padding-left: 0; /* Bzw. dein normales Standard-Padding, falls du eins hast (z. B. 20px) */ } #sidebar ul { list-style: none; padding: 0; margin: 0; } #sidebar li { margin-bottom: 15px; } #sidebar a { text-decoration: none; color: #333; display: block; } #sidebar a.active { font-weight: bold; } main { width: 100%; box-sizing: border-box; } /* Grundformatierung für alle Sections */ section { } /* Modifikator-Klasse für Sections, die keinen Platz für die Sidebar machen sollen */ section:has(.row.fullwidth) { } /*** mobile Burgemenu***/ /* --- GRUND-SETUP DESKTOP --- */ #mobile-menu-toggle { display: none; /* Auf Desktop unsichtbar */ background: none; border: none; cursor: pointer; padding: 0 3vw; z-index: 100; pointer-events: auto; } .hamburger-line { display: block; width: 100%; /* Füllt immer die 1em Breite des Buttons aus */ height: 0.1em; /* Liniendicke (hier: 10% der Breite, also 3px bei 30px) */ margin: 0.25em 0; /* Abstand zwischen den Linien (hier: 25% der Breite) */ background-color: var(--color-blau); transition: all 0.3s ease; } /* --- MOBILE-ANSICHT --- */ @media (max-width: 1279px) { :root { --sidenavwidth: min(8vw, 300px); } #sidebar { width:100%; border-left:none; padding:0; } .sidebar-container { max-width:100vw; margin-top:5vw; } #mobile-menu-toggle { display: block !important; position: relative; pointer-events: auto !important; /* Extrem wichtig wegen .sidebar-container */ z-index: 1000; /* --- NEUE SKALIERUNG --- */ font-size: min(6.5vw,32px); /* Das ist jetzt deine Basis-Größe für das Icon */ width: 1em; /* Die Breite entspricht exakt der font-size */ padding: 0; /* Padding entfernen, damit 1em exakt den Linien entspricht */ margin-left:2.5vw; background: none; border: none; cursor: pointer; } /* Wir sprechen das ul ZUSÄTZLICH mit #sidebar davor an, um die Spezifität zu erzwingen */ #sidebar ul#sidebar-menu { display: flex !important; /* MUSS flex sein, damit die Animation berechnet werden kann */ flex-direction: column; align-items: start; justify-content: flex-start; /* Rücken die Elemente nach oben */ padding-top: 85px !important; /* Schafft ausreichend Platz für den Toggle-Button */ gap: 15px; /* Steuert den kompakten Abstand zwischen den Menüpunkten */ /* Overlay-Styling */ position: fixed; top: 0; left: 0; height: 100vh; background-color: rgba(255, 255, 255, 0.98); z-index: 999; margin: 0; padding: 0; pointer-events: auto !important; /* Overlay muss Klicks fangen */ width: calc(100vw - 5vw); margin-right: 5vw; padding-left:calc(var(--sidenavwidth) + 2rem); padding-right:2rem; border-right:1px solid var(--color-orange); box-shadow:0 0 5px -2px rgba(0,0,0,0.75); /* --- NEU: Slide-In Logik --- */ transform: translateX(-100%); /* Schiebt das Menü nach links aus dem Viewport */ visibility: hidden; /* Verhindert, dass unsichtbare Links per Tastatur (Tab) fokussiert werden können */ transition: all 0.4s ease-in-out; /* Steuert die fließende Bewegung */ } #sidebar ul#sidebar-menu li { margin: 0; /* Entfernt deinen bisherigen margin: 15px 0, da wir jetzt gap nutzen */ } #sidebar ul#sidebar-menu a { mix-blend-mode: normal !important; padding:0; font-size:0.9rem; } #sidebar ul#sidebar-menu a.on-dark-content { color:var(--color-grau); text-shadow:none !important; } /* --- WENN DAS MENÜ GEÖFFNET IST (Klasse wird via JS gesetzt) --- */ #sidebar.menu-open { position: fixed; /* seb: statt sticky, wenn offen, damit titelbild auch funktioniert */ } #sidebar.menu-open ul#sidebar-menu { transform: translateX(0); /* Schiebt das Menü bündig in den Viewport */ visibility: visible; } #sidebar.menu-open #mobile-menu-toggle .hamburger-line:nth-child(1) { transform: translateY(0.35em) rotate(45deg); } #sidebar.menu-open #mobile-menu-toggle .hamburger-line:nth-child(2) { opacity: 0; } #sidebar.menu-open #mobile-menu-toggle .hamburger-line:nth-child(3) { transform: translateY(-0.35em) rotate(-45deg); } } .swiper-arrow-next, .swiper-arrow-prev, .scroll-hint-btn > div { display:grid; width: 2rem; margin: 10px auto 0; aspect-ratio: 1/1; border: 0px solid var(--color-grau); background-color: var(--color-weiss); background-image: url('../img/arr-left-grau.svg'); background-size: 70% 70%; background-position:50% 50%; background-repeat:no-repeat; color: transparent; border-radius: 50%; padding: 0.5rem; line-height: 0; place-items: center; cursor: pointer; font-weight: bold; transform:rotate(180deg); margin-top:1rem; } .swiper-arrow-next { transform:rotate(0deg); } /* aufklappbare Inhalte mobile */ /* Standard: Button ausblenden (Desktop) */ /* Button */ .expandable-toggle-btn { display: none; width: 2rem; height:auto; margin: 10px auto 0; aspect-ratio: 1/1; border: 0px solid var(--color-grau); background-image: url('../img/arr-down-grau.svg'); background-size: 70% 70%; background-position:50% 50%; background-repeat:no-repeat; color: transparent; border-radius: 50%; padding: 0.5rem; line-height: 0; place-items: center; cursor: pointer; font-weight: bold; transform:rotate(0deg); transition:all 0.33s ease-in-out; } .expandable-toggle-btn.btn-expanded { transform:rotate(180deg); } /* Mobile Ansicht (< 1024px) */ @media (max-width: 1023px) { .expandable { /* Variablen für Höhe und Hintergrundfarbe (Fallback auf weiß) */ --max-h: 100px; --fade-bg: var(--color-weiss, #ffffff); max-height: var(--max-h); overflow: hidden; position: relative; transition: max-height 0.4s ease-in-out; } /* Modifikator für 50px */ .expandable.expandable-50 { --max-h: 50px; } .expandable.expandable-25 { --max-h: 25px; } .expandable.expanded { max-height: max-content; } /* Verlauf am unteren Rand */ .expandable::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; /* Bei 50px max-height evtl. auf 30px reduzieren, siehe unten */ background: linear-gradient(to bottom, transparent, var(--fade-bg)); pointer-events: none; transition: opacity 0.4s ease-in-out; } /* Bei sehr kleinen Elementen (50px) den Verlauf etwas kleiner machen */ .expandable.expandable-50::after { height: 30px; } .expandable.expanded::after { opacity: 0; } /* Button */ .expandable-toggle-btn { display: grid; } } /* styles für GSAP slideright Animation */ img.slideright { visibility: hidden; display: block; width: 100%; height: auto; } .slideright-wrapper { position: relative; display: block; } .slideright-line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background-color: var(--color-orange); z-index: 2; } .masked-container { width: 100%; aspect-ratio: 16 / 9; position: relative; /* Optional: background-color: #000; falls der Hintergrund durch den Rahmen scheinen soll */ } .masked-image { width: 100%; height: 100%; object-fit: cover; } .masked-image { clip-path: inset(clamp(1rem, 2vw, 2rem) round clamp(1rem, 2vw, 2rem)) } .scroll-arrow { /* Grundstyling für das Bild */ display: block; margin-top: 0; margin-bottom: 0; width: 30px; /* Beispielgröße */ height: auto; /* Animationseigenschaften */ animation: scroll-loop 3s ease-in-out infinite; } @keyframes scroll-loop { 0% { opacity: 0; transform: translateY(-1svh); } 20% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; transform: translateY(0.2svh); } 100% { opacity: 0; transform: translateY(1svh); } } .mt-plus {margin-top:calc(-1rem - 50%);} @media (max-width:1023px) { .mt-plus { margin-top:calc(-1rem - 60%); } } .footer-grid { grid-template-rows: 1fr auto; grid-template-columns: 1fr 1fr; grid-template-areas:'puffer puffer' 'links rechts'; } @media (max-width:1023px) { .footer-grid { grid-template-rows: 1fr auto auto; grid-template-columns: 1fr; grid-template-areas:'puffer' 'rechts' 'links'; } }