/* @override https://wetek.de/wp/wp-content/themes/wetek/style.css?* https://dev.wetek.de/wp/wp-content/themes/wetek/style.css?* */ /* Theme Name: WeTeK Berlin Description: Version: 0.6 Author: PD */ /* IMPORTS -------------------------------------------------------------------------------*/ /* @group WEBFONTS */ /* WEBFONTS -------------------------------------------------------------------------------*/ /*https://variable-font-helper.web.app/ */ /* Montserrat */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 750; font-display: swap; src: url(assets/fonts/Montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Montserrat italic */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400 750; font-display: swap; src: url(assets/fonts/Montserrat-latin-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Red Hat Mono */ @font-face { font-family: 'Red Hat Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(assets/fonts/Red_Hat_Mono.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Icon Font – extra here for iframe views in WP Editor and TinyMCE */ @font-face { font-family: 'icons'; font-style: normal; font-weight: normal; src: url('assets/icons/fonts/icons.woff') format('woff'); } /* @end */ /* @group RESET */ /* RESET -------------------------------------------------------------------------------*/ article, aside, figure, footer, header, hgroup, nav, section {display: block;} img, picture, video, canvas, svg {display: block; max-width: 100%; height:auto;} /* force a vertical scrollbar to prevent a jumpy page */ html {overflow-y: scroll;} /* we use a lot of ULs that aren't bulleted. don't forget to restore the bullets within content. */ ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} a {margin: 0; padding: 0; vertical-align: baseline;} del {text-decoration: line-through;} abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;} /* tables still need cellspacing="0" in the markup */ table {border-collapse: collapse; border-spacing: 0;} th {font-weight: 700; vertical-align: bottom;} td {font-weight: normal; vertical-align: top;} input, button, textarea, select { font: inherit; margin: 0; border-radius: 0;} input:focus, textarea:focus, select:focus { AUS_outline: none;} input { /* remove top input shadow */ -webkit-appearance: none; -moz-appearance: none; } *:focus:not(:focus-visible) { outline: none } table {font-size: inherit; font: 100%;} a:hover, a:active {outline: none;} /* standardize any monospaced elements */ pre, code, kbd, samp {font-family: monospace, sans-serif;} /* hand cursor on clickable elements */ .clickable, label, input[type=button], input[type=submit], button {cursor: pointer;} /* prevent flickering on touch */ * { -webkit-tap-highlight-color:transparent; } /* natural box layout model to all elements */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* subscript and superscript */ sub { vertical-align: sub; font-size: 70%; line-height: 0; } sup { vertical-align: super; font-size: 70%; line-height: 0; } /* fine-grained control over hyphenation in text */ * { hyphenate-limit-chars: 10 4 4; } /* @end */ /* @group VARS */ /* VARS -------------------------------------------------------------------------------*/ /* Color Info BG lightgray #F8F7F7 BG lightblue #CCEAFF border #CFCCC9 label #2661D9 wet-orange #F47630 orange-3 #FDE5D8 orange-2 #F5E8DC orange-1 #FEF7F1 wet-red #CB1B57 red-3 #F9D2DF red-2 #FAE1EB red-1 #FEF4F8 wet-blue #4FC6DF blue-3 #D0F0F6 blue-2 #DFEEF0 blue-1 #F3FCFD wet-purple #6B2A80 purple-3 #E8D1F0 purple-2 #EEE1F2 purple-1 #FAF4FC gray-4 #868079 gray-3 #CFCCC9 gray-2 #E7E5E4 gray-1 #F8F7F7 */ :root { --base-font-size: 15px; --base-font-weight: 457; --base-line-height: 147%; --bold-weight: 675; --orange: #F47630; --orange-3: #FDE5D8; --orange-2: #F5E8DC; --orange-1: #FEF7F1; --red: #CB1B57; --red-3: #F9D2DF; --red-2: #FAE1EB; --red-1: #FEF4F8; --blue: #4FC6DF; --blue-3: #D0F0F6; --blue-2 : #DFEEF0; --blue-1 : #F3FCFD; --purple: #6B2A80; --purple-3: #E8D1F0; --purple-2: #EEE1F2; --purple-1: #FEF4F8; --gray-4: #868079; --gray-3: #CFCCC9; --gray-2: #E7E5E4; --gray-1: #F8F7F7; --label-color: #2661D9; --input-blue: #0094FF; --input-blue-light: #CCEAFF; --input-red: #F70808; --input-green: #5FC13E; --body-bg: #FFF; --text-color: #333; --link-color: #333; --link-color-hover: #2661D9; --border-color: #CFCCC9; --primary-color: #333; --secondary-color: #2661D9; --primary-bg: #F8F7F7; --secondary-bg: #CCEAFF; --text-gray: #888; --font-sans: 'Montserrat', sans-serif; --font-mono: 'Red Hat Mono', monospace; --text-tiny: 10px; --text-small: 12px; --text-base: var(--base-font-size); --text-large: 20px; --text-tiny: calc(var(--base-font-size) * .65); --text-small: calc(var(--base-font-size) * .85); --text-base: var(--base-font-size); --text-large: calc(var(--base-font-size) * 1.25); --default-width: calc((620/16) * 1rem); --wide-width: calc((1280/16) * 1rem); --semiwide-width: calc((1200/16) * 1rem); --full-width: 100%; --col-6-width: calc((620/16) * 1rem); --col-8-width: calc((840/16) * 1rem); --col-10-width: calc((1060/16) * 1rem); --page-padding: 80px; --main-padding-top: clamp(40px, 6vw, 60px); --main-padding-bottom: clamp(100px, 15vw, 160px); --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: clamp(32px, 5vw, 48px); --space-60: clamp(48px, 8vw, 60px); --space-80: clamp(60px, 10vw, 80px); --space-100: clamp(60px, 10vw, 100px); --space-160: clamp(100px, 43.75px + 9.375vw, 160px); --space-xs: var(--space-4); --space-sm: var(--space-12); --space-md: var(--block-gap); /*20/default block gap*/ --space-lg: var(--space-40); --space-xl: var(--space-60); --space-xxl: var(--space-80); --space-xxxl: var(--space-100); --space-xxxxl: var(--space-160); --block-gap: 1.25rem; /*20px*/ --columns-gap: clamp(40px, 5vw, 40px); --box-padding: clamp(20px, 5vw, 30px); --radius: 8px; --field-radius: 5px; --header-height: 88px; } @media screen and (max-width: 1024px) { :root { --page-padding: 60px; } } @media screen and (max-width: 600px) { :root { --text-large: 18px; --page-padding: 24px; --header-height: 64px; } } /* @end */ /* @group GENERAL */ /* GENERAL ---------------------------------------------------------------------------------*/ html { height: 100%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } body { height: 100%; font-family: var(--font-sans); font-size: var(--base-font-size); font-weight: var(--base-font-weight); line-height: var(--base-line-height); color: var(--text-color); background: var(--body-bg); } html:has(.logo [src*="dev.wetek.de"])::after { /*dev site only*/ content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; border: 5px solid CYAN; pointer-events: none; } a { position: relative; color: var(--link-color); text-decoration: underline; } a, input { transition: all 200ms ease; } a:visited { } a:active { } a:hover { color: var(--link-color-hover); } img { display: block; max-width: 100%; } svg { display: block; max-width: 100%; } /* TYPOGRAPHY ---------------------------------------------------------------------------------*/ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-bottom: 0; font-weight: var(--bold-weight); } h1, .h1 { --block-gap: var(--space-100); font-size: 42px; /*42/38/28*/ font-size: clamp(28px, 4vw, 42px); line-height: 1.2; } h1 em { /*h1 label*/ font-style: normal; font-weight: normal; font-size: 24px; /*24/22/20*/ font-size: clamp(20px, 3vw, 24px); line-height: 1.3; display: block; } h1 em + br { display: none; } :is(.is-layout-flow, .is-layout-constrained) h1 + * { margin-top: var(--space-100); } h2, .h2 { --block-gap: var(--space-48); font-size: 36px; /*36/32/28*/ font-size: clamp(28px, 4vw, 36px); line-height: 1.3; } h2 em { /*h2 subline*/ font-style: normal; font-weight: normal; line-height: 1.3; display: block; letter-spacing: -.02em; } h2 em + br { display: none; } :is(.is-layout-flow, .is-layout-constrained) h2 + * { margin-top: var(--space-48); } h3, .h3 { --block-gap: var(--space-40); font-size: 20px; line-height: 1.5; } h4, .h4 { --block-gap: var(--space-40); font-size: 16px; line-height: 1.3; } h5, .h5 { --block-gap: var(--space-40); font-size: 15px; line-height: 1.4; } :is(.is-layout-flow, .is-layout-constrained) :where(h3, .h3, h4, .h4, h5, .h5, h6, .h6) + * { margin-top: 8px; border: 0px solid RED; } :is(p,ul,ol) { margin-top: var(--block-gap); margin-bottom: 0; } strong, b { font-weight: var(--bold-weight); } .label { font-size: var(--text-small); text-transform: uppercase; color: var(--label-color); } .label + * { margin-top: var(--space-8); } .text-small { font-size: var(--text-small); } @media screen and (max-width: 1024px) { } @media screen and (max-width: 840px) { } @media screen and (max-width: 600px) { } @media screen and (max-width: 360px) { } /* @end */ /* @group ELEMENTS */ /* === Lists */ ul, ol { } ul { padding-left: 2.5ch; list-style-type: revert; } li { position: relative; margin: 0 0 5px 0; } ul li::marker { } li ul { margin-top: 5px; } ol { padding-left: 2.5ch; } ol li { list-style: revert; } .list-unstyled, .list-unstyled li { padding: 0; margin: 0; list-style: none; } .list-unstyled li:before { display: none; } /* list style: lines */ ul.is-style-lines, ul.is-style-lines ul { list-style: none; padding: 0; } ul.is-style-lines ul li { } ul.is-style-lines li:before { display: none; } ul.is-style-lines, ul.is-style-lines li { padding: 0; } ul.is-style-lines li { padding: 0.8rem 0; margin: 0; border-top: 1px solid var(--border-color); } ul.is-style-lines > li:first-child { border-top: none; } ul.is-style-lines li ul { padding: 0; margin: 0; } ul.is-style-lines ul li { padding-left: 1.5em; } ul.is-style-lines ul li:first-child { margin-top: .8rem; } ul.is-style-lines ul li:last-child { padding-bottom: 0; } /* list style: icon */ ul[class*="is-style-icon"], ul[class*="is-style-icon"] ul { --list-icon-width: 2.2rem; list-style: none; padding-left: 0; } ul[class*="is-style-icon"] li { position: relative; padding-left: calc(var(--list-icon-width)); padding-bottom: .5em; } ul[class*="is-style-icon"] li::before { content: '✓'; position: absolute; left: 0; top: -0.1em; font-family: 'icons'; font-size: 28px; display: inline-flex; width: var(--list-icon-width); align-items: center; line-height: 1; } ul.is-style-icon-check li::before { content: '\e90d'; font-size: 24px; } ul.is-style-icon-download li::before { content: '\e905'; } ul.is-style-icon-arrow li::before { content: '\e907'; } /* === Caption */ /* WP Edit Link */ a.post-edit-link { position: fixed; bottom: 0; left: 0; z-index: 10; font-size: 11px; padding: 8px 12px; text-transform: uppercase; text-decoration: none; background: #0073AA; color: #FFF; } /* === Embeds, iFrames */ .embed-responsive { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .embed-responsive iframe, .embed-responsive object, .embed-responsive embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; } iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16/9; border-radius: var(--radius); } /* === Icons */ i[class^="icon-"] { font-family: 'icons'; } i.icon { font-weight: normal!important; } .icon.download { font-size: 1.9rem; color: var(--link-color); margin: 0 5px 5px 0; vertical-align: middle; display: inline-block; } .icon.download:before { margin: 0; } .icon.bullet { font-size: 85%; } /* === WP Styles */ /* default padding for has-background + override WP default */ :is(p,ul,ol,*).has-background, .has-background { padding: var(--box-padding); border-radius: var(--radius); } .alignfull.has-background { border-radius: 0; } .has-global-padding.alignfull { border-radius: 0; padding-inline: 0; padding-inline: var(--page-padding); } .alignfull:not(.has-global-padding) { AUS_padding: inherit; } .alignfull > .has-background { padding: var(--box-padding); } .alignfull > .has-background > * { /*BE*/ padding-inline: 0; } .is-root-container :where(.has-global-padding:not(.has-background)) { /*BE*/ padding-inline: 0; } :is(ul,ol).has-background { /*add space for bullets*/ padding-left: calc(var(--box-padding) + 1rem); } .has-small-font-size { font-size: var(--text-small); } .has-large-font-size { font-size: var(--text-large); line-height: 1.5; } /* === Highlight Anchor Links */ .entry-content :target { animation: highlight 500ms ease-in; } @keyframes highlight { from { background-color: rgb(253 224 71); } to { background-color: #fff; } } /* Tag Button */ .btn-tag { display: block; font-family: var(--font-mono); font-size: 13px; line-height: 20px; letter-spacing: 0.02em; padding: 10px 16px; border-radius: 4px; border: 1px solid var(--gray-3); text-decoration: none; } .btn-tag:hover { color: #FFF; border-color: var(--text-color); background: var(--text-color); } @media screen and (max-width: 600px) { .btn-tag { line-height: 18px; padding: 8px 16px; letter-spacing: 0; } } /* @end */ /* @group LAYOUT */ /* LAYOUT ----------------------------------------------------------------------------------*/ /* # Container */ .page-wrap { min-height: 100vh; overflow-x: clip; display: grid; grid-template-rows: auto 1fr; /*sticky footer*/ } .container, .container-fluid { position: relative; max-width: calc(var(--wide-width) + 2 * var(--page-padding)); margin: 0 auto; padding: 0 var(--page-padding); } .content-width { /*add to container class*/ max-width: calc(var(--default-width) + 2 * var(--page-padding)); } .entry-content { } .stack > *:first-child { margin-top: 0; } /* .wp-block-post-content is root container for all content blocks in backend editor AND frontend */ .wp-block-post-content { padding-left: var(--page-padding); padding-right: var(--page-padding); } .wp-block-post-content.is-root-container { /*backend editor*/ padding-inline: var(--page-padding)!important; } .wp-block-post-content > *:first-child { margin-top: 0; } /* alignment */ .is-layout-flow > .alignwide { max-width: var(--wide-width); } .is-layout-constrained .alignsemiwide { max-width: var(--semiwide-width); } .is-layout-flow > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } /* default width when contentSize is disabled in theme.json*/ .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { AUS_max-width: var(--default-width); } /* @end */ /* @group HEADER */ /* HEADER --------------------------------------------------------------------------------- */ #header { position: relative; padding: 20px 0; height: var(--header-height); display: flex; align-items: center; z-index: 2; border-bottom: 0px solid #EEE; } #header > .container { position: initial; flex: 1 0 auto; display: flex; align-items: center; gap: 30px; width: 100%; } /* Logo */ .logo { flex: 0 0 auto; width: 175px; } .logo a { display: block; outline-offset: 2px; } .logo img { display: block; width: 100%; height: auto; } @media screen and (max-width: 600px) { .logo { width: 132px; } } /* @end */ /* @group MENU */ /* MENU --------------------------------------------------------------------------------- */ .menu-bar { display: flex; gap: 1px; margin-left: auto; } :where(.menu-bar) a { text-decoration: none; } .menu-button { display: flex; justify-content: center; align-items: center; gap: 4px; line-height: 1; border: none; padding: 12px; font-size: var(--base-font-size); font-weight: var(--bold-weight); color: var(--text-color); border-radius: 4px; transition: all 200ms ease; background: transparent; } .menu-button:hover, .menu-button:focus-visible { background: var(--gray-1); } .menu-button i { font-size: 24px; text-align: center; font-weight: normal; } .menu-button span { white-space: nowrap; } .menu-button * { pointer-events: none; /*prevent JS event bubbling*/ } .menu-button.active { background: var(--gray-1); } @media screen and (max-width: 840px) { /*1024*/ .menu-button span, .menu-button--simple-language, .menu-button--contact{ display: none; } } #nav { position: absolute; top: var(--header-height); left: 0; width: 100%; z-index: 1; opacity: 0; visibility: hidden; transition: all 250ms ease-in-out; padding: 4px; margin-top: 10px; pointer-events: none; } #nav::after { /*helper submenu height*/ content: ""; position: absolute; top: 4px; left: 4px; width: 8px; height: 50px; min-height: var(--submenu-height); z-index: 1; background: MAGENTA; display: none; } #nav::before { /*helper mob submenu height*/ content: ""; position: absolute; top: 4px; left: 13px; width: 8px; height: 50px; min-height: var(--mob-submenu-height); z-index: 10; background: GREEN; display: none; } #nav.active { margin-top: 0; opacity: 1; visibility: visible; pointer-events: auto; } #nav .inner { position: relative; margin: 0 auto; max-width: 52.5rem; /*840*/ background: #FFF; border-radius: 8px; box-shadow: 0px 32px 32px -16px rgba(0, 0, 0, 0.08); min-height: var(--submenu-height); /*JS*/ border: 0px solid #DDD; } #nav .inner > * { max-width: 50%; } #nav .inner::after { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: var(--gray-3); pointer-events: none; } #menu { } #nav ul { position: initial; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 32px; } #nav ul li { position: initial; transition: all 300ms ease; } #nav ul li:hover > a, #nav ul li > a:focus-visible { background: var(--gray-1); } #nav ul li a { position: relative; display: flex; padding: 9px 8px; background: #FFF; border-radius: 4px; } #nav ul > li.menu-item-has-children:hover > a::before { /*bridge hover gap to submenu*/ content: ""; position: absolute; top: 0; right: -100px; height: 100%; width: 100px; background: transparent; } #nav li.menu-item-has-children > a:after { content: "\e918"; position: relative; font-family: 'icons'; margin-left: auto; font-size: 16px; line-height: 1.3; } #nav > ul li.menu-item-has-children { } #nav ul li:hover > a { } #nav ul li.current-menu-item > a { background: var(--gray-1); } #nav ul li a:hover { color: var(--text-color); text-decoration: none; } #nav ul li.menu-item-has-children.active > a { } #nav ul li.current_page_parent a:hover, #nav ul li.current_page_parent:hover a, #nav ul li.current_page_item:hover a { } /*initial element active */ @media screen and (min-width: 1024px) { #nav ul:not(.sub-menu) li:first-child > ul, #nav ul:not(.sub-menu) li:first-child:hover > ul { opacity: 1; visibility: visible; } #nav ul:not(.sub-menu) li:first-child > a, #nav ul:not(.sub-menu) li:first-child > a:hover, #nav ul:not(.sub-menu) li:hover:first-child > a { background: var(--gray-1); } #nav ul:has(a:hover) li:first-child > a { background: transparent; } #nav ul:has(a:hover) li:first-child > ul { opacity: 0; visibility: hidden; } } /* 2nd level*/ #nav ul ul { position: absolute; top: 0; left: 50%; width: 50%; z-index: 1; opacity: 0; visibility: hidden; transition: all 300ms ease; } #nav li:hover ul, #nav li:focus-within ul { opacity: 1; visibility: visible; } AUS_#nav li.focused ul, AUS_#nav li:focus-within ul { opacity: 1; visibility: visible; } #nav li ul.sub-menu li { } #nav li:hover ul.sub-menu li { } #nav .backlink { display: none; } /* 3rd level */ #nav ul ul ul { display: none; } .menu-social { margin-top: 8px; padding: 32px; padding-top: 0; } .menu-social__links { display: flex; gap: 16px; padding-left: 8px; } .menu-social__links a { --size: 32px; width: var(--size); height: var(--size); transition: 150ms; border-radius: 100%; outline-offset: 2px; transition: 150ms; } .menu-social__links a::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; background: var(--primary-color); transition: 150ms; } .menu-social__links a:hover::before { transform: scale(1.21); } .menu-social__links svg { position: relative; fill: var(--primary-color); } .menu-social__links svg circle { stroke: transparent; } /* Mobile Menu --------------------------------------------------------------------------------- */ @media screen and (max-width: 840px) { /*1024*/ #nav .inner { margin: 0 auto; max-width: 590px; overflow: hidden; min-height: var(--mob-submenu-height); } #nav .inner > * { max-width: 100%; } #nav .inner::after { display: none; } #nav ul { padding: 20px; } .menu-social { margin-top: 0; padding: 20px; } /* mob 2nd level*/ #nav ul ul { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; margin: 0; opacity: 0; visibility: hidden; transform: translateX(10%); transition: all 300ms ease; background: #FFF; } #nav ul ul::after { /*cover level 1*/ content: ""; position: absolute; bottom: -50rem; left: 0; width: 100%; height: 50rem; background: #FFF; } #nav li:hover ul, #nav li:focus-within ul { opacity: 0; visibility: hidden; } #nav ul ul.active { opacity: 1; visibility: visible; margin: 0; transform: translateX(0); } #nav .backlink { display: block; margin-bottom: 20px; } #nav .backlink a { background: transparent; color: var(--label-color); } #nav .backlink a:hover { color: var(--label-color); } #nav .backlink a::before { content: "\e917"; position: relative; font-family: 'icons'; font-size: 16px; line-height: 1; margin-left: -4px; margin-right: 6px; transform: translateY(6%); } } /* @end */ /* @group SEARCH */ /* Search */ .site-search { position: absolute; top: var(--header-height); left: 0; width: 100%; z-index: 1; opacity: 0; visibility: hidden; transition: all 250ms ease-in-out; padding: 4px; margin-top: 10px; } .site-search.active { margin-top: 0; opacity: 1; visibility: visible; } .site-search .inner { position: relative; margin: 0 auto; max-width: 52.5rem; /*840*/ padding: 32px; background: #FFF; border-radius: 8px; box-shadow: 0px 32px 32px -16px rgba(0, 0, 0, 0.08); } .searchform { } .searchform { position: relative; margin-top: 8px; width: 100%; } .searchform input.s { width: 100%; padding: 8px 12px; padding-right: 3rem; background: #FFF; font-size: var(--base-font-size); font-weight: var(--base-font-weight); color: var(--text-color); background: var(--gray-1); border: 1px solid var(--gray-3); border-radius: 4px; box-shadow: none /*remove red border */; } .searchform input.s:focus { } .searchform input.s:focus-visible { AUS_outline: revert; } .searchform .searchsubmit { position: absolute; top: 0; right: 0; border: none; display: flex; justify-content: center; align-items: center; font-size: 13px; overflow: hidden; width: 36px; height: 100%; color: #FFF; background: var(--primary-color); border-radius: 0 4px 4px 0; AUS_border: 1px solid var(--gray-3); border-left: none; outline-offset: -2px; } .searchform i { font-size: 1.4rem; } /* @end */ /* @group CONTENT */ /* CONTENT --------------------------------------------------------------------------------- */ #content { position: relative; overflow-x: clip; } main { padding-top: 0; padding-top: var(--main-padding-top); padding-bottom: var(--main-padding-bottom); } /* @end */ /* @group WP BLOCK EDITOR */ /* WP BLOCK EDITOR --------------------------------------------------------------------------------- */ .editor-styles-wrapper { overflow-y: auto; } .is-root-container { overflow: hidden; /*fix for swiper js is-overflow*/ } .is-root-container.wp-block-post-content { AUS_padding: var(--main-padding-top) 0 var(--main-padding-bottom) 0; padding: var(--space-100) 0 var(--main-padding-bottom) 0; } .wp-block { box-sizing: border-box; } .wp-block.components-placeholder { margin-top: var(--block-gap); /*e.g. for Shortcode block*/ } .wp-block[class*="wp-block-acf-"].is-selected { /* for selected custom ACF blocks */ } .wp-block[data-align] { float: none!important; max-width: var(--default-width); } .wp-block[data-align="wide"] { } .wp-block input { /* unset */ -webkit-appearance: auto; -moz-appearance: auto; } .wp-block.acf-block-preview a:not(:is(.acf-icon)) { /*disable link clickability*/ pointer-events: none; } /*fix double root padding in BE (bc has-global-padding is missing on is-root-container on PHP templates)*/ :where(.is-root-container) :where(.has-global-padding:not(.wp-block-block)) { padding-right: 0; padding-left: 0; } /* disable drop cap in block preview */ .has-drop-cap:not(:focus):first-letter { all: unset; } /*remove underlinded links on pattern edit mode */ .block-editor-block-list__layout a:where(:not(.wp-element-button)) { /*text-decoration: unset;*/ } /* ACF fields */ .acf-field { -moz-osx-font-smoothing: auto; } .acf-field ul, .acf-field ol { padding: 0; margin: 0; } .editor-styles-wrapper .acf-fields :where(th,tr,td) { box-sizing: initial; } .acf-field a, .acf-field a:hover { color: #0783BE; text-decoration: none; } a.acf-icon { color: #0783BE; } .acf-fields table { border-collapse: inherit; } /*ACF block in editing mode */ .block-editor-block-list__block.acf-block-component.is-selected { display: block; } /*ACF block - when empty add some height*/ .block-editor-block-list__block.acf-block-component { min-height: 30px; } /* Helper - Block Outline */ .block-editor-block-list__block.acf-block-preview.wp-block, .block-editor-block-list__block.acf-block-preview .wp-block, .block-editor-block-list__block:not([data-type*="acf"]):not(.is-reusable) { outline: 1px solid rgba(0,0,0, .13); } .block-editor-block-preview__content-iframe .block-editor-block-list__block { outline: none!important; /*no block outlines in block previews */ } .block-editor-block-list__block:not([data-type*="acf"]):not(.is-reusable) .wp-block { outline-offset: -1px; /*prevent overlapping outline of nested blocks*/ } /* Helper - Missing Blocks */ .wp-block.wp-block-missing { border: 2px solid RED; } /* TinyMCE - fix CSS conflicts, halbwegs */ .mce-tinymce .mce-btn button { font-size: 20px; } /* reset editor-styles in ACF fields with TinyMCE */ #tinymce { background: #FFF; } #tinymce * { margin: revert; padding: revert; font-size: .938rem; line-height: 1.4; color: #000; font-family: sans-serif; list-style: inside; } #tinymce::before, #tinymce::after { display: none; } #tinymce :where(strong, b) { font-weight: var(--bold-weight); } #tinymce a { color: #2171b1; text-decoration: underline; } #tinymce h1 { font-size: 2rem; } #tinymce h2 { font-size: 1.5rem; } #tinymce h3 { font-size: 1.25rem; } #tinymce :where(p,h1,h2,h3,h4,h5,hr,ul,ol,.wpview) { /*helper border*/ position: relative; border: 1px dashed #CCC; border-color: #CCC; border-color: rgba(1,1,1, 0.25); padding: 2px; } #tinymce :where(h3,h4,h5) { margin-bottom: 0 } #tinymce :where(h1,h2,h3,h4,h5) + :where(p,ol,ul) { margin-top: 0; } #tinymce .wpview iframe { max-width: 80%; /*limit width of youtube embed*/ } /*spacing helper - visualize spaces*/ .spacing-helper { display: flex; align-items: flex-end; gap: 20px; } .spacing-helper :where(.space) { position: relative; flex: 1 1 auto; display: flex; justify-content: center; align-items: center; background: #CCC; height: var(--space); } .space[data-size="xs"] { --space: var(--space-xs); } .space[data-size="sm"] { --space: var(--space-sm); } .space[data-size="md"] { --space: var(--space-md); } .space[data-size="lg"] { --space: var(--space-lg); } .space[data-size="xl"] { --space: var(--space-xl); } .space[data-size="xxl"] { --space: var(--space-xxl); } .space[data-size="xxxl"] { --space: var(--space-xxxl); } .space[data-size="xxxxl"] { --space: var(--space-xxxxl); } .space::after { content: attr(data-size); font-size: 14px; text-transform: uppercase; } .space[data-size="md"] { /*default space*/ background: lightblue; } /*column helper - visualize 12 columns*/ .columns-helper { display: flex; flex-wrap: wrap; gap: 40px; overflow: hidden; border: 1px solid #DDD; } .columns-helper div { flex: 1; font-size: 11px; opacity: .5; height: 60px; background: pink; } /* @end */ /* @group WP BLOCKS */ /* WP BLOCKS --------------------------------------------------------------------------------- */ /* @group WP PARAGRAPH */ /* WP PARAGRAPH --------------------------------------------------------------------------------- */ /*custom style: intro*/ .is-style-intro { margin-top: 80px; /*80/80/60*/ font-size: var(--text-large); line-height: 140%; AUS_max-width: var(--col-8-width); } .is-style-intro + * { margin-top: 80px; /*80/80/60*/ margin-top: clamp(60px, 10vw, 80px); } /*custom style: label*/ .is-style-label { font-size: var(--text-small); text-transform: uppercase; color: var(--label-color); } .is-style-label + * { margin-top:var(--space-8); } /* @end */ /* @group WP IMAGE */ /* WP IMAGE --------------------------------------------------------------------------------- */ .wp-block-image { margin-top: var(--space-60); } .wp-block-image + * { margin-top: var(--space-60); } @media screen and (max-width: 600px) { .wp-block-image, .wp-block-image + * { margin-top: var(--space-48) } } .wp-block-image img { width: 100%; display: inline-block; border-radius: var(--radius); } .wp-block-image.alignwide img, .wp-block-image.alignfull img { width: 100%; } .wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright { display: table; } .wp-block-image .aligncenter > figcaption, .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption { display: table-caption; caption-side: bottom; } figcaption, .wp-block-image figcaption, .wp-block-embed figcaption { font-size: var(--text-small); font-style: italic; line-height: 1.4; margin: 10px 0 0px 0; text-align: left; word-break: break-word; overflow-wrap:break-word; } figure:is(.alignleft, .alignright) figcaption { margin-bottom: 10px; } /*custom style: rounded-none*/ .wp-block-image.is-style-rounded-none img { border-radius: 0; } /*custom style: caption-right*/ .wp-block-image.is-style-caption-right { position: relative; } .wp-block-image.alignwide.is-style-caption-right { max-width: var(--col-8-width); } .is-root-container .wp-block-image.alignwide.is-style-caption-right { max-width: var(--col-8-width); /*for editor*/ } @media screen and (min-width: 1280px) { .wp-block-image.is-style-caption-right figcaption { --width: 11.25rem; /*180px*/ position: absolute; top: 0; right: 0; transform: translateX(100%); margin: 0; padding-left: 40px; max-width: var(--width); } } /* wp lightbox*/ .wp-lightbox-overlay .scrim { /*add custom bg color here*/ } /* for Block Editor */ .wp-block[data-align] > .wp-block-image { } .wp-block[data-align="left"] > .wp-block-image { float: left; } .wp-block[data-align="right"] > .wp-block-image { float: right; } .wp-block-image .components-resizable-box__container { /*remove small space below images*/ vertical-align: top; } /* @end */ /* @group WP MEDIA-TEXT */ /* WP MEDIA-TEXT --------------------------------------------------------------------------------- */ .wp-block-media-text { gap: clamp(30px, 5vw, 60px); } .wp-block-media-text .wp-block-media-text__media { } .wp-block-media-text .wp-block-media-text__content { padding: 0; } .wp-block-media-text__content > :first-child { margin-top: 0; } .wp-block-media-text__content > :last-child { margin-bottom: 0; } :where(.wp-block-media-text__content) > * { /*WP missed this*/ margin-top: var(--block-gap); } @media screen and (max-width: 600px) { .wp-block-media-text__content { } } /* @end */ /* @group WP GALLERY */ /* WP GALLERY --------------------------------------------------------------------------------- */ .wp-block-gallery { --wp--style--gallery-gap-default: 10px; AUS_--block-gap: 4rem; /*override block gap for this block*/ } .wp-block-gallery.is-style-no-gap { /*custom style*/ gap: 0; } .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { background: linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.0) 100%,transparent); bottom:0; box-sizing:border-box; color:#fff; font-size: var(--text-small); padding: 10px 10px; } /* @end */ /* @group WP EMBED */ /* WP EMBED --------------------------------------------------------------------------------- */ .wp-block-embed { } .wp-block-embed__wrapper > * { margin: 0 auto!important; } .wp-block-embed__wrapper iframe { width: 100%; border-radius: var(--radius); } /* @end */ /* @group WP VIDEO */ /* WP VIDEO (self hosted) --------------------------------------------------------------------------------- */ .wp-block-video { } .wp-block-video video { display: block; width: 100%; border-radius: var(--radius); } /* @end */ /* @group WP COVER */ /* WP COVER --------------------------------------------------------------------------------- */ .wp-block-cover { } /* @end */ /* @group WP QUOTE */ /* WP QUOTE --------------------------------------------------------------------------------- */ blockquote.wp-block-quote { margin-block: var(--space-lg); padding-left: 2ch; border-left: 4px solid var(--primary-color); max-width: 40rem; } blockquote.wp-block-quote > * { font-weight: var(--bold-weight); color: var(--primary-color); } .wp-block-quote p + p { } .wp-block-quote cite { display: block; font-style: normal; font-weight: var(--bold-weight); font-size: var(--text-small); color: var(--text-gray); margin: 10px 0 0 0; } /* @end */ /* @group WP COLUMNS */ /* WP COLUMNS --------------------------------------------------------------------------------- */ .wp-block-columns { gap: var(--block-gap) 40px; } /* custom style: breakpoint 1024 */ @media screen and (max-width: 1024px) { .is-style-breakpoint-1024 { flex-wrap: wrap!important; } .is-style-breakpoint-1024> .wp-block-column { flex-basis: 100%!important; max-width: 640px; } } /* custom style: breakpoint 840 */ @media screen and (max-width: 840px) { .is-style-breakpoint-840 { flex-wrap: wrap!important; } .is-style-breakpoint-840 > .wp-block-column { flex-basis: 100%!important; } } /* @end */ /* @group WP COLUMN */ /* WP COLUMN --------------------------------------------------------------------------------- */ .wp-block-column { } /* custom styles: column classes to get some responsive control over columns 6/6/12 6/8/12 8/8/12 8/12/12 10/10/12 10/12/12 */ [class*="is-style-col-"] { /* Calculate the width of columns for use in flex-basis Example: Calculate the width of 8 columns and 7 gaps --example: calc((((100% - (var(--grid-gap) * (12 - 1))) / 12) * 8) + (7 * var(--grid-gap))); */ --gap: 40px; --columns: 8; --width: calc((((100% - (var(--gap) * (12 - 1))) / 12) * var(--columns)) + ((var(--columns) - 1) * var(--gap))); flex-grow: 0!important; flex-basis: var(--width)!important; background: PINK; } /* scheme: col-desktop-laptop-mobile */ /* custom style: col-6-6-12 */ .is-style-col-6-6-12 { --columns: 6; } @media screen and (max-width: 1024px) { .is-style-col-6-6-12 { --columns: 6; } } /* custom style: col-6-8-12 */ .is-style-col-6-8-12 { --columns: 6;} @media screen and (max-width: 1024px) { .is-style-col-6-8-12 { --columns: 8; } } /* custom style: col-8-8-12 */ .is-style-col-8-8-12 { --columns: 8; } @media screen and (max-width: 1024px) { .is-style-col-8-8-12 { --columns: 8; } } /* custom style: col-8-10-12 */ .is-style-col-8-10-12 { --columns: 8; } @media screen and (max-width: 1024px) { .is-style-col-8-10-12 { --columns: 10; } } /* custom style: col-10-10-12 */ .is-style-col-10-10-12 { --columns: 10; } @media screen and (max-width: 1024px) { .is-style-col-10-10-12 { --columns: 10; } } /* custom style: col-10-12-12 */ .is-style-col-10-12-12 { --columns: 10; } @media screen and (max-width: 1024px) { .is-style-col-10-12-12 { flex-basis: 100%!important; background: GREEN; } } /* @end */ /* @group WP SPACER */ /* WP SPACER --------------------------------------------------------------------------------- */ .wp-block-spacer { } /* @end */ /* @group WP FILE */ /* WP FILE --------------------------------------------------------------------------------- */ .wp-block-file { position: relative; background: var(--primary-bg); background: transparent; display: flex; flex-wrap: wrap; align-items: center; gap: 1ch 2ch; padding: 0 0 0 2.2rem; } .wp-block-file::before { position: absolute; top: 0.05em; content: "\e815"; font-family: 'icons'; font-size: 1.8em; line-height: 1; margin-left: -2.2rem; } .wp-block-file + .wp-block-file { margin-top: 0.75em; border-top: 0px solid var(--border-color); } .wp-block-file__embed { border: 1px solid var(--border-color); } .wp-block-file a:not(.wp-block-file__button) { font-size: var(--base-font-size); display: inline-block; } .wp-block-file__button.wp-element-button { background: var(--link-color); font-weight: var(--bold-weight); text-transform: uppercase; font-size: var(--text-tiny); border-radius: 0; padding:4px 15px; margin: 0; border-radius: 100px; background: transparent; color: var(--text-color); border: 1px solid var(--primary-color); } .wp-block-file__button:hover { opacity: .6; } /* @end */ /* @group WP TABLE */ /* WP TABLE --------------------------------------------------------------------------------- */ .wp-block-table { line-height: 1.5; } :is(table) * { font-weight: var(--base-font-weight); } /* for editor */ .wp-block[data-align] table { width: 100%; } .wp-block-table table { width: 100%; max-width: 100%; } .wp-block-table table thead { text-align: left; border-bottom: 3px solid var(--border-color); } table thead td { font-weight: var(--bold-weight); } .wp-block-table tfoot { border-top: 1px solid var(--border-color); } .wp-block-table tr { background: transparent; border-bottom: 1px solid var(--border-color); } .wp-block-table tr:last-child { border-bottom: none; } .wp-block-table tr th { } .wp-block-table th, .wp-block-table td { border-color: var(--border-color); padding: 0.6rem 0.5rem; } .wp-block-table tr td:last-child { padding-right: 0; } .wp-block-table p { margin: 0; } .wp-block-table figcaption { } /* custom style: stripes */ .wp-block-table.is-style-stripes { border-bottom: none; } .wp-block-table.is-style-stripes tbody tr:nth-child(odd){ background: rgba(0,0,0, .04); } .wp-block-table.is-style-stripes th, .wp-block-table.is-style-stripes td { padding-left: 15px; } .wp-block-table.is-style-stripes tr, .wp-block-table.is-style-stripes thead, .wp-block-table.is-style-stripes tfoot { border: none; } /* custom style: blank */ .wp-block-table.is-style-blank { line-height: inherit; } .wp-block-table.is-style-blank :is(thead, tfoot, tr) { border: none; } .wp-block-table.is-style-blank th, .wp-block-table.is-style-blank td { padding-block: 0; padding-left: 0; border: none; } /*for editor - show borders on select*/ .wp-block-table.is-selected table thead, .wp-block-table.is-selected table tfoot, .wp-block-table.is-selected table th, .wp-block-table.is-selected table td, .wp-block-table.is-selected table tr { border: 1px dashed #999; } /* @end */ /* @group WP GROUP */ /* WP GROUP --------------------------------------------------------------------------------- */ .wp-block-group { } .wp-block-group.has-background { } .wp-block-group > .wp-block-group { margin-bottom: 0; } .wp-block-group > :first-child { margin-top: 0; } .wp-block-group > :last-child { margin-bottom: 0; } /*custom style: max width for child elements*/ .is-style-max-col-6 > * { max-width: var(--col-6-width); AUS_max-width: calc(100%/2 - 20px); /*minus a half column gap*/ background: PINK; } .is-style-max-col-8 > * { max-width: var(--col-8-width); background: LIGHTBLUE; AUS_max-width: calc(100%/12 * 8 - 20px); /*minus a half column gap*/ } .is-style-max-col-10 > * { max-width: var(--col-10-width); } /*helper in editor */ .editor-styles-wrapper [class*="is-style-max-col-"] { outline-color: blue!important; } .editor-styles-wrapper [class*="is-style-max-col-"]::before { position: absolute; top: 0; left: 0; line-height: 1; font-size: 10px; padding: 3px; z-index: 1; color: #FFF; background: blue; } .editor-styles-wrapper .is-style-max-col-6::before { content: "max 620px"; } .editor-styles-wrapper .is-style-max-col-8::before { content: "max 840px"; } .editor-styles-wrapper .is-style-max-col-10::before { content: "max 1060px"; } /* @end */ /* @group WP BUTTONS */ /* WP BUTTONS --------------------------------------------------------------------------------- */ .wp-block-buttons { gap: 15px; /*override WP inline default*/ } .wp-block-button { position: relative; z-index: 1; } .wp-block-button__link { --padding: 9px 40px; /*9/40*/ --padding-small: 6px 20px; /*6/20*/ position: relative; width: auto; height: auto; padding: var(--padding); font-size: var(--base-font-size); font-weight: var(--bold-weight); display: inline-flex; justify-content: center; align-items: center; text-align: center; color: #FFF; text-decoration: none; background: var(--primary-color); border: 0px solid var(--primary-color); border-radius: 10rem; outline-offset: 2px; } .wp-block-button__link:hover { color: #FFF; text-decoration: none; } .wp-block-button__link { } .wp-block-button__link::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; border-radius: 10rem; transition: all 200ms ease; background: var(--primary-color); border: 1px solid var(--primary-color); } .wp-block-button__link:hover::before{ transform: scale(1.08); } /*custom style: btn-small*/ .wp-block-button.is-style-btn-small .wp-block-button__link { padding: var(--padding-small); font-size: 12px; color: #FFF; background: var(--primary-color); } .wp-block-button.is-style-btn-small .wp-block-button__link::before { } .wp-block-button.is-style-btn-small .wp-block-button__link:hover { } /*custom style: btn-outline*/ .wp-block-button.is-style-btn-outline .wp-block-button__link { padding: var(--padding); color: var(--text-color); background: transparent; } .wp-block-button.is-style-btn-outline .wp-block-button__link::before { background: transparent; } .wp-block-button.is-style-btn-outline .wp-block-button__link:hover { } /*custom style: btn-outline-small*/ .wp-block-button.is-style-btn-outline-small .wp-block-button__link { padding: var(--padding-small); font-size: 12px; color: var(--text-color); background: transparent; } .wp-block-button.is-style-btn-outline-small .wp-block-button__link::before { background: transparent; } .wp-block-button.is-style-btn-outline .wp-block-button__link:hover { } /*custom style: btn-icon-text */ .wp-block-button[class*=btn-icon-text] .wp-block-button__link { position: relative; display: inline-flex; gap: 12px; padding: 0; padding-left: 32px; text-decoration: none; font-weight: var(--base-font-weight); font-size: var(--base-font-size); color: var(--text-color); text-align: left; background: transparent; } .wp-block-button[class*=btn-icon-text] .wp-block-button__link:hover { color: var(--text-color); text-decoration: underline; } .wp-block-button[class*=btn-icon-text]::before { /*icon*/ content: "\e905"; font-family: 'icons'; font-size: 24px; font-weight: normal; position: absolute; top: -3px; left: 0; right: auto; bottom: auto; width: 24px; height: 24px; z-index: 0; line-height: 1; transform: none; border: none; } .wp-block-button[class*=btn-icon-text--download]::before { content: "\e905";} .wp-block-button[class*=btn-icon-text--arrow]::before { content: "\e907";} .wp-block-button[class*=btn-icon-text--external]::before { content: "\e908";} .wp-block-button[class*=btn-icon-text] .wp-block-button__link::before { display: none; } /* @end */ /* @group WP SHORTCODE */ /* WP SHORTCODE --------------------------------------------------------------------------------- */ .wp-block-shortcode { /* class only in editor */ } /* @end */ /* @group WP HTML */ /* WP HTML --------------------------------------------------------------------------------- */ .wp-block-html { /* class only in editor */ } /* @end */ /* @group WP VIDEO */ /* WP VIDEO --------------------------------------------------------------------------------- */ .wp-block-video { } /* @end */ /* @group WP AUDIO */ /* WP AUDIO --------------------------------------------------------------------------------- */ .wp-block-audio { } /* @end */ /* @group WP CODE */ /* WP CODE --------------------------------------------------------------------------------- */ .wp-block-code { background: #F1F1F1; } .wp-block-code code { background: none; padding: var(--box-padding); font-size: 1rem; } code { margin: 0; } /* @end */ /* @group WP DETAILS */ /* WP DETAILS --------------------------------------------------------------------------------- */ .wp-block-details { --block-gap: 1.4em; } .wp-block-details[open] { padding-bottom: var(--space-md); } .wp-block-details summary { display: inline-flex; align-items: center; gap: 10px; padding: .9em 1.6rem; font-size: var(--text-small); line-height: 1; background: transparent; border-radius: 10rem; border: 1px solid var(--border-color); transition: all 300ms ease; } .wp-block-details summary:hover { color: var(--link-color); } .wp-block-details summary::marker, .wp-block-details summary::-webkit-details-marker { /*::marker has no safari support*/ display: none; } .wp-block-details summary::before { content: "\e911"; display: inline-block; margin-left: -.2em; font-family: 'icons'; font-size: 1.3em; line-height: 1; transform: translateY(4%); } .wp-block-details[open] > summary::before { transform: rotate(180deg) translateY(5%); } .wp-block-details summary + * { } .wp-block-details + .wp-block-details { margin-top: 3px; } .wp-block-details .wp-block-details { /*details within details*/ margin-left: 30px; } /* @end */ /* @group WP FOOTNOTES */ /* WP FOOTNOTES --------------------------------------------------------------------------------- */ .wp-block-footnotes { margin-top: var(--space-40); font-size: var(--text-small); padding-top: var(--space-sm); border-top: 1px solid var(--border-color); } /* @end */ /* @group WP SEPARATOR */ /* WP SEPARATOR --------------------------------------------------------------------------------- */ hr, hr.wp-block-separator { position: relative; display: block; clear: both; height: 1px; border: 0; background: transparent; border-bottom: 1px solid var(--gray-2); margin: var(--space-60) 0; } /* @end */ /* @end */ /* @group CUSTOM BLOCKS */ /* CUSTOM BLOCKS --------------------------------------------------------------------------------- */ /* @group HERO */ /* Hero --------------------------------------------------------------------------------- */ .hero { } .hero + * { margin-top: var(--space-100); } .hero__grid { display: grid; grid-template-columns: 40% auto; gap: 40px; max-width: var(--wide-width); margin: 0 auto; } .hero__content { display: flex; flex-direction: column; justify-content: center; } .hero__title { margin: 0; max-width: max(600px, 70vw); } .hero__images { width: 100%; overflow: hidden; } .hero__images.has-radius { border-radius: var(--radius); } .hero .swiper { } .hero .swiper-slide { border-radius: 0; } .hero-image { position: relative; max-width: 100%; height: 100%; } .hero-image img { width: 100%; height: 100%; object-fit: cover; } .hero-image__no-image { aspect-ratio: 3/2; background: var(--gray-1); } .hero .swiper-navigation-wrap { margin-top: var(--space-48); } @media screen and (max-width: 1024px) { .hero__grid { grid-template-columns: 1fr; } } @media screen and (max-width: 600px) { .hero .swiper-navigation-wrap { margin-top: var(--space-32); } } /* @end */ /* @group BANNER */ /* Banner --------------------------------------------------------------------------------- */ .banner { } .banner__grid { display: grid; grid-template-columns: 40% auto; gap: 40px; } .banner__image { } .banner__image.has-radius { overflow: hidden; border-radius: var(--radius); } .banner__image img { width: 100%; } .banner__no-image { aspect-ratio: 3/2; background: var(--gray-1); } .banner__content { display: flex; flex-direction: column; justify-content: center; } .banner__title { margin: 0; max-width: max(400px, 70vw); } @media screen and (max-width: 1024px) { .banner__grid { grid-template-columns: 1fr; } } /* @end */ /* @group IMAGE-SLIDER */ /* Image-Slider --------------------------------------------------------------------------------- */ .image-slider { --radius: 8px; margin-top: var(--space-60); margin-bottom: var(--space-40); } .image-slider.alignwide { max-width: var(--col-10-width); } .is-root-container .image-slider.alignwide { max-width: var(--col-10-width)!important; /*editor*/ } .image-slider.alignfull { } .image-slider .swiper { } .image-slider .swiper-wrapper { } .image-slider .swiper-slide { } /*size small */ .image-slider .swiper-slide.size-sm { max-width: 26rem; } /*size medium*/ .image-slider .swiper-slide.size-md { max-width: var(--default-width); } .image-slider__image { position: relative; background: rgba(0,0,0, .05); } .image-slider.alignwide .image-slider__image, .image-slider.alignfull .image-slider__image { } .image-slider:not(.alignfull) { border-radius: var(--radius); } .image-slider__image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); } .image-slider__caption { position: absolute; width: 100%; bottom: 0; left: 0; margin: 0; color: #FFF; font-size: var(--text-small); padding: clamp(15px, 4vw, 30px); text-shadow: 0 2px 5px rgba(0,0,0, .5); background: rgba(0,0,0, .4); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0, .6) 90%); } /* style: is-contain */ .image-slider__image.is-contain img { object-fit: contain; } /* style: is-overflow */ .swiper.is-overflow { overflow: visible; } /* @end */ /* @group LOGO-SLIDER */ /* Logo-Slider --------------------------------------------------------------------------------- */ .logo-slider { margin-top: var(--space-60); margin-bottom: var(--space-40); display: grid; /*fix for too wide slider on init*/ } .logo-slider .swiper { max-width: var(--wide-width); } .logo-slider .swiper-slide { max-width: 180px; } .logo-slider__image { aspect-ratio: 1; margin: 0; overflow: hidden; background: var(--gray-1); border-radius: var(--radius); } .logo-slider__image a { display: block; width: 100%; height: 100%; } .logo-slider__image img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius); padding: 10px; mix-blend-mode: multiply; } .logo-slider__caption { font-style: normal; } /* @end */ /* @group GALLERY */ /* Gallery --------------------------------------------------------------------------------- */ .gallery { margin-top: var(--space-60); margin-bottom: var(--space-60); } .gallery__grid { --gallery-gap: clamp(12px, 2vw, 20px); display: flex; flex-wrap: wrap; gap: var(--gallery-gap) 0; margin-left: calc(var(--gallery-gap) * -.5); /* offset gap */ margin-right: calc(var(--gallery-gap) * -.5); /* offset gap */ } .gallery__grid.gap-none { --gallery-gap: 0; } .gallery__grid.columns-align-center { justify-content: center; } .gallery__grid.columns-align-right { justify-content: flex-end; } .gallery__item { position: relative; flex: 0 0 auto; width: calc(100% / 3); /*default 3 colums*/ overflow: hidden; display: flex; flex-direction: column; margin: 0; padding-right: calc(var(--gallery-gap) * .5); padding-left: calc(var(--gallery-gap) * .5); aspect-ratio: unset!important; } .gallery-columns-1 .gallery__item { width: calc(100% / 1); } .gallery-columns-2 .gallery__item { width: calc(100% / 2); } .gallery-columns-3 .gallery__item { width: calc(100% / 3); } .gallery-columns-4 .gallery__item { width: calc(100% / 4); } .gallery-columns-5 .gallery__item { width: calc(100% / 5); } .gallery-columns-6 .gallery__item { width: calc(100% / 6); } @media screen and (max-width: 1024px) { .gallery-columns-2 .gallery__item { width: calc(100% / 2); } .gallery-columns-3 .gallery__item { width: calc(100% / 2); } .gallery-columns-4 .gallery__item { width: calc(100% / 2); } .gallery-columns-5 .gallery__item { width: calc(100% / 3); } .gallery-columns-6 .gallery__item { width: calc(100% / 3); } } @media screen and (max-width: 600px) { .gallery-columns-2 .gallery__item { width: calc(100% / 2); } .gallery-columns-3 .gallery__item { width: calc(100% / 2); } .gallery-columns-4 .gallery__item { width: calc(100% / 2); } .gallery-columns-5 .gallery__item { width: calc(100% / 2); } .gallery-columns-6 .gallery__item { width: calc(100% / 2); } } .gallery .gap-zero .gallery__grid { --gallery-gap: 0; } .gallery__image { overflow: hidden; border-radius: var(--radius); } .gallery__image a { display: block; height: 100%; } .gallery__image img { display: block; margin: 0; width: 100%; transition: all 600ms ease!important; } .gallery__image a:hover img { transform: scale(1.08); opacity: .8; } /* gallery cropped */ .gallery__item.is-cropped { flex: 1 0 auto; /* images in last row take remaining space*/ } .gallery__item.is-cropped img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0 auto; } /* gallery has custom aspect ratio */ .gallery__item.has-ratio .ratio-wrap { position: relative; } .gallery__item.ratio-1-1 .gallery__image { aspect-ratio: 1 } .gallery__item.ratio-4-3 .gallery__image { aspect-ratio: 4/3 } .gallery__item.ratio-3-2 .gallery__image { aspect-ratio: 3/2 } .gallery__item.ratio-16-9 .gallery__image { aspect-ratio: 16/9 } .gallery__item.has-ratio .gallery__image { overflow: hidden; position: relative; } .gallery__item.has-ratio img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0 auto; } .gallery__item figcaption { margin: 0; } /* -- Gallery Masonry (JS) */ .gallery .is-masonry { } .gallery .is-masonry .gallery__item { padding: calc(var(--gallery-gap) / 2); } /* @end */ /* @group ACCORDION */ /* ACCORDION --------------------------------------------------------------------------------- */ .accordion { position: relative; border: none; width: 100%; outline-offset: 1px; } .accordion + .accordion { border-top: none; margin-top: 8px; } .accordion p:empty { display: none; } .accordion-heading { margin: 0; padding: 0; border: none; text-transform: none; } .accordion-trigger { display: block; position: relative; border: none; text-align: left; width: 100%; padding: 8px 0; padding-left: 40px; font-size: var(--base-font-size); line-height: var(--base-line-height); color: var(--link-color); font-weight: var(--bold-weight); background: transparent; transition: all 300ms ease; } .accordion-trigger:hover { text-decoration: none; color: var(--link-color-hover); } .accordion-trigger.active { } .accordion-trigger:hover, .accordion-trigger:hover i { } .accordion-trigger:hover i { text-decoration: none; } .accordion-trigger i::before { position: absolute; top: .15em; left: 0; margin: 0; content: "\e90f"; display: block; line-height: 1; font-family: 'icons'; font-size: 28px; font-weight: normal; font-style: normal; color: var(--text-color); text-decoration: none; border-radius: 4px; background: var(--gray-1); transition: all 250ms ease-in-out; } .accordion-trigger:hover i::before { } .accordion-trigger.active i::before { content: "\e90e"; } .accordion-content { position: relative; padding: 12px 0 12px 40px; } .accordion-content > *:first-child, .accordion-content .acf-innerblocks-container > *:first-child { margin-top: 0; } .wp-block-acf-accordion .accordion-content { display: none; /*WP preview: collapse item*/ } .wp-block-acf-accordion.is-selected .accordion-content, .wp-block-acf-accordion.has-child-selected .accordion-content { display: block; /*WP preview: expand item on select*/ } .wp-block-acf-accordion.is-selected .accordion-trigger i:after { transform: rotate(180deg); /*WP editor*/ } @media screen and (max-width: 600px) { } /* @end */ /* @group FORM */ /* Form --------------------------------------------------------------------------------- */ .form { } /* @end */ /* @group IFRAME EMBED */ /* iframe embed --------------------------------------------------------------------------------- */ .iframe-embed { margin-block: var(--space-60); } .iframe-embed iframe { display: block; width: 100%; height: auto; margin: 0; background: rgba(0,0,0, .05); border-radius: var(--radius); } .wp-block.iframe-embed iframe { pointer-events: none; /*WP*/ } .ratio-1 { aspect-ratio: 1;} .ratio-3-2 { aspect-ratio: 3/2;} .ratio-4-3 { aspect-ratio: 4/3;} .ratio-16-9 { aspect-ratio: 16/9;} .ratio-2-1 { aspect-ratio: 2/1;} /* @end */ /* @group TEASER-IMAGE-TEXT */ /* Teaser Image-Text --------------------------------------------------------------------------------- */ .teaser-image-text { container-type: inline-size; margin-top: var(--space-60); margin-bottom: var(--space-60); } .teaser-image-text__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius); overflow: hidden; background: var(--primary-bg); } .teaser-image-text__image { } .teaser-image-text__image img { aspect-ratio: 16/9; height: 100%; width: 100%; object-fit: cover; display: block; margin: 0; } .teaser-image-text__content { --block-gap: 32px; display: flex; flex-direction: column; justify-content: center; max-width: 40rem; margin: 0 auto; padding: var(--space-80) 24px; text-align: center; justify-content: center; } .teaser-image-text__content > * { max-width: 30rem; } /* option: order */ .teaser-image-text__grid.order-text-first .teaser-image-text__image { order: 2; } @media screen and (max-width: 840px) { .teaser-image-text__grid { grid-template-columns: 1fr; } .teaser-image-text__content { padding-block: 48px } .teaser-image-text__image { order: 0!important; } } @container (max-width: 840px) { .teaser-image-text__grid { grid-template-columns: 1fr; } .teaser-image-text__content { padding-block: 48px } .teaser-image-text__image { order: 0!important; } } /* @end */ /* @group WK-CONTAINER */ /* WK-Container --------------------------------------------------------------------------------- */ .wk-container { } .is-root-container .wk-container { outline-color: var(--blue)!important; } .is-root-container .wk-container .block-editor-block-list__layout { border: 1px dotted var(--blue); /*column outline*/ transition: 250ms ease; } .wk-container [class*=col-] div { } /* @end */ /* @group DOWNLOAD */ /* Download --------------------------------------------------------------------------------- */ .download { margin-top: var(--space-40); } .is-root-container .download { min-height: 25px; } .download > * { margin-top: 0; } .download > * + * { margin-top: 6px; } .download__label { } .download__button { min-height: 24px; } .download__button a { position: relative; display: inline-flex; gap: 12px; margin-top: 2px; margin-bottom: -2px; padding-left: 32px; text-decoration: none; } .download__button a::before { position: absolute; left: 0; content: "\e905"; font-family: 'icons'; font-size: 24px; } .download__button a:hover { color: var(--text-color); text-decoration: underline; } /* @end */ /* @group LINK ENTRY */ /* Link Entry --------------------------------------------------------------------------------- */ .link-entry{ margin-top: var(--space-40); } .is-root-container .link-entry{ min-height: 25px; } .link-entry> * { margin-top: 0; } .link-entry> * + * { margin-top: 6px; } .download__label { } .link-entry__button { min-height: 28px; } .link-entry__button a { position: relative; display: inline-flex; gap: 12px; margin-top: 2px; margin-bottom: -2px; padding-left: 32px; text-decoration: none; } .link-entry__button a::before { position: absolute; left: 0; content: "\e907"; font-family: 'icons'; font-size: 24px; } .link-entry__button--link a[target="_blank"]::before { content: "\e908"; } .link-entry__button--download a::before { content: "\e905"; } .link-entry__button a:hover { color: var(--text-color); text-decoration: underline; } /* @end */ /* @group NEWS CARDS */ /* News Cards --------------------------------------------------------------------------------- */ .news-cards { } .news-cards__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 60px 40px; } .news-card { container-type: inline-size; position: relative; border-radius: var(--radius); } .news-card__image { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); } .news-card__image img { width: 100%; height: 100%; object-fit: cover; } .news-card__content { margin-top: 20px; } .news-card__date { color: var(--label-color); font-size: var(--text-small); line-height: 133%; } .news-card__title { margin-top: 8px; } .news-card__text { margin-top: 20px; } .news-card__button { margin-top: 20px; } .news-card p + p { } @media screen and (max-width: 1024px) { .news-cards__grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media screen and (max-width:840px) { .news-cards__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media screen and (max-width: 600px) { .news-cards__grid { grid-template-columns: 1fr; gap: 40px; } } /* @end */ /* @group NEWS CARDS SLIDER */ /* News Cards Sider --------------------------------------------------------------------------------- */ .news-cards-slider { } .news-cards-slider .swiper-wrapper { /*use as grid*/ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 40px; } @media screen and (max-width: 1024px) { .news-cards-slider .swiper-wrapper { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media screen and (min-width: 840px) { .news-cards-slider :is(.swiper, .swiper-slide) { display: contents; } .news-cards-slider .swiper { display: grid; grid-template-columns: 1fr; gap: 40px; } } @media screen and (max-width: 840px) { .news-cards-slider .swiper-wrapper { display: flex; gap: 0; } .news-cards-slider .swiper { overflow: visible; max-width: calc(100vw - var(--page-padding) * 2); } .news-cards-slider .swiper-slide { height: auto; /*equal height*/ } } /* @end */ /* @group PRESS RELEASES*/ /* Press Releases --------------------------------------------------------------------------------- */ /* same styling: PRESS, JOBS */ .press { } .year-group { padding-bottom: 60px; border-bottom: 1px solid var(--gray-3); } .year-group + .year-group { margin-top: var(--space-60); } .year-group__heading { margin-block: 0; } .press .link-entry:first-child { margin-top: 0; } @media screen and (max-width: 600px) { .year-group { padding-bottom: var(--space-40); } .year-group + .year-group { margin-top: var(--space-40); } } /* @end */ /* @group JOBS */ /* Jobs --------------------------------------------------------------------------------- */ /* same styling: PRESS, JOBS */ .jobs { } .jobs .link-entry:first-child { margin-top: 0; } /* @end */ /* @group TEASER CARDS */ /* Teaser Cards --------------------------------------------------------------------------------- */ .teaser-cards { container-type: inline-size; } .teaser-cards__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; } .teaser-card { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--gray-1); transition: 300ms ease; } .teaser-card:hover { transform: scale(1.005); box-shadow: 0px 32px 32px -16px rgba(0, 0, 0, 0.08); } .teaser-card.color-blue { background: var(--blue-1);} .teaser-card.color-orange { background: var(--orange-1);} .teaser-card.color-purple { background: var(--purple-1);} .teaser-card.color-red { background: var(--red-1);} .teaser-card__image { aspect-ratio: 2/1; } .teaser-card__image img { width: 100%; height: 100%; object-fit: cover; } .teaser-card__content { } .teaser-card__button { padding: 24px; } .teaser-card__button a { font-weight: var(--bold-weight); } .teaser-card.color-blue svg circle { fill: var(--blue-2); } .teaser-card.color-orange svg circle { fill: var(--orange-2); } .teaser-card.color-purple svg circle { fill: var(--purple-2); } .teaser-card.color-red svg circle { fill: var(--red-2); } .teaser-card__button a::before { /*link area*/ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } @media screen and (max-width: 600px) { .teaser-cards__grid { grid-template-columns: 1fr; gap: 24px; } } @container (max-width: 600px) { .teaser-cards__grid { grid-template-columns: 1fr; gap: 24px; } } /* @end */ /* @group TAGS */ /* Tags --------------------------------------------------------------------------------- */ .tags { } .tags__grid { display: flex; flex-wrap: wrap; gap: 12px; } /* @end */ /* @group TEAM SLIDER */ /* Team Slider --------------------------------------------------------------------------------- */ .team { position: relative; overflow: hidden; min-width: 0; } .team.has-background { padding: var(--space-60); max-width: calc(100vw - 2 * var(--page-padding)); /*!*/ } .team-content { } .team-content:empty { display: none; } .team-content:not(:empty) + * { margin-top: var(--space-48); } .team .swiper { max-width: calc(100vw - 2 * var(--page-padding)); /*!!!*/ } .team .swiper-wrapper { } .team .swiper-slide { max-width: 160px; } .team-slide { /*swiper-slide*/ min-width: 160px; overflow-wrap: break-word; } .team-slide__image { width: 140px; aspect-ratio: 1; border-radius: 100%; margin: 0; overflow: hidden; } .team-slide__image img { width: 100%; height: 100%; object-fit: cover; } .team-slide__item { } .team-slide__name { margin-top: 16px; } :where(.team-slide__item) + :where(.team-slide__item) { margin-top: 12px; } .team-slide__label { } .team .swiper-navigation-wrap { margin-top: var(--space-48); } @media screen and (max-width: 840px) { .team .swiper { overflow: visible; } } @media screen and (min-width: 600px) { .team .swiper { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 60px 40px; } .team .swiper-wrapper, .team .swiper-slide { display: contents; } .team .swiper-navigation-wrap { display: none; } } @media screen and (min-width: 840px) { .team .swiper { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media screen and (min-width: 1024px) { .team .swiper { grid-template-columns: repeat(4,minmax(0,1fr)); } } /* @end */ /* @group UPCOMING EVENTS */ /* Upcoming Events --------------------------------------------------------------------------------- */ .upcoming-events { } .upcoming-event { position: relative; display: grid; grid-template-columns: 290px 1fr; background: var(--gray-1); border-radius: var(--radius); overflow: hidden; transition: 300ms ease; } .upcoming-event:hover { box-shadow: 0px 32px 32px -16px rgba(0, 0, 0, 0.08); } .upcoming-event:not(.has-image) { grid-template-columns: 1fr; } .upcoming-event + .upcoming-event { margin-top: 40px; } .upcoming-event__image { aspect-ratio: 3/2; overflow: hidden; } .upcoming-event__image a { display: block; height: 100%; } .upcoming-event__image img { width: 100%; height: 100%; object-fit: cover; } .upcoming-event__content { display: grid; grid-template-columns: auto 1fr; gap: 32px; padding: 32px; } .upcoming-event__content > * { } .upcoming-event__date { margin-top: 2px; font-size: var(--text-small); text-transform: uppercase; color: var(--label-color); line-height: 1.3; } .upcoming-event__date span { display: block; } .upcoming-event__text { } .upcoming-event__title { } .upcoming-event__title a { position: unset; display: block; text-decoration: none; } .upcoming-event__title a:hover { color: var(--text-color); } .upcoming-event__title a::after { /**/ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } @media screen and (min-width: 840px) { .upcoming-events :is(.swiper, .swiper-wrapper, .swiper-slide) { display: contents; } .upcoming-events .swiper { display: grid; grid-template-columns: 1fr; gap: 40px; overflow: visible; } } @media screen and (max-width: 840px) { .upcoming-event { grid-template-columns: 1fr; height: 100%; align-items: flex-start; } .upcoming-event__content { grid-template-columns: 1fr; gap: 8px; padding: 24px; } .upcoming-event__date { margin-top: 0; } .upcoming-event__date span { display: inline; } .upcoming-events .swiper { overflow: visible; max-width: calc(100vw - var(--page-padding) * 2); } .upcoming-events .swiper-slide { height: auto; /*equal height*/ } } /* @end */ /* @group CONTACT */ /* Contact --------------------------------------------------------------------------------- */ .contact { } :is(h2,h3,h4) + .contact { margin-top: 12px; } .contact .row { --gap-y: 24px; } .contact-image { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); } .contact-image img { width: 100%; height: 100%; object-fit: cover; } .contact .row .contact-item:first-child { padding-top: 0 } .contact .row .contact-item:first-child::after { top: 0; } @media screen and (max-width: 1024px) { .contact__grid.has-image { grid-template-columns: 30% 1fr; } } /*Sidebar*/ .contact-sidebar__map { margin-top: 20px; } .contact-sidebar__map + .contact-item { margin-top: 12px; } .contact-item { position: relative; margin-top: 0; padding-left: 32px; padding-block: 20px; border-bottom: 1px solid var(--gray-2); } .contact-item__label { font-size: var(--text-small); text-transform: uppercase; color: var(--label-color); margin-top: 0; } .contact-item .label { margin-top: 0; } .contact-item__label + * { margin-top: 0; } .contact-item p a { display: block; word-break: break-word; overflow-wrap: break-word; } .contact-item::after { content: "\e918"; position: absolute; top: 20px; left: 0; font-size: 24px; color: var(--label-color); font-family: 'icons'; } .contact-item--address::after { content: "\e921";} .contact-item--phone::after { content: "\e91d";} .contact-item--email::after { content: "\e91c";} .contact-item--person::after { content: "\e91e";} .contact-item--website::after { content: "\e919";} .contact-item--newsletter::after { content: "\e91b";} .contact-item--share::after { content: "\e91a";} .contact-item--info { } .contact-item--info p { margin-top: 0; } .contact-item--info::after { display: none; } .contact-item label { } /* @end */ /* @group PROJECTS (Angebote) */ /* Projects --------------------------------------------------------------------------------- */ .projects { margin-block: var(--space-80); } .projects__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 60px 40px; } .project-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); background: var(--gray-1); background: var(--bg-color); /*EM category color*/ overflow: hidden; transition: 250ms ease; } .project-card:hover { transform: scale(1.03); box-shadow: 0px 32px 32px -16px rgba(0, 0, 0, 0.08); } .project-card__image { aspect-ratio: 16/9; flex: 1 0 auto; overflow: hidden; background: rgba(0,0,0,.05); border-radius: var(--radius) var(--radius) 0 0; } .project-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .project-card__content { padding: 32px; height: 100%; display: flex; flex-direction: column; } .project-card__content > *:first-child { margin-top: 0; } .project-card__type { position: absolute; top: 20px; left: 0; font-size: 12px; line-height: 1.5; padding: 1px 4px; color: #FFF; background: var(--text-color); } /* Match event color with cat color, but darker version. If event has hex value of blue-1, it gets blue-3. */ .project-card[style*="f3fcfd" i] .project-card__type { background: var(--blue); } .project-card[style*="fef7f1" i] .project-card__type { background: var(--orange); } .project-card[style*="faf4fc" i] .project-card__type { background: var(--purple); } .project-card[style*="fef4f8" i] .project-card__type { background: var(--red); } .bg-orange { background: var(--orange); } .bg-red { background: var(--red); } .bg-blue { background: var(--blue); } .bg-purple { background: var(--purple); } .project-card__cat { font-size: var(--text-small); line-height: 16px; text-transform: uppercase; color: var(--label-color); } .project-card__title { margin-top: 12px; font-size: var(--base-font-size); } .project-card__text { margin-top: 12px; } .project-card__button { padding-top: 48px; margin-top: auto; } .card-button { position: unset; display: grid; grid-template-columns: auto 1fr; gap: 12px; text-decoration: none; padding-top: 3px; } .card-button:hover { color: var(--text-color); } .card-button + .card-button { margin-top: 6px; } .card-button svg { margin-top: -3px; display: inline-flex; justify-content: center; align-items: center; min-width: 28px; width: 28px; height: 28px; border-radius: 100%; } .card-button svg circle { } /* WETEK Category colors #f3fcfd (blue-1) #fef7f1 (orange-1 ) #faf4fc (purple-1) #fef4f8 (red-1) */ /* Match svg fill color with card color, but darker version. If card has hex value of blue-1, the svg fill gets blue-2. */ .project-card[style*="f3fcfd" i] .card-button svg circle { fill: var(--blue-2); } .project-card[style*="fef7f1" i] .card-button svg circle { fill: var(--orange-2); } .project-card[style*="faf4fc" i] .card-button svg circle { fill: var(--purple-2); } .project-card[style*="fef4f8" i] .card-button svg circle { fill: var(--red-2); } .card-button::after { /*link entire card*/ content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; inset: 0; z-index: 1; cursor: pointer; background: transparent; opacity: .2; } @media screen and (max-width: 1024px) { .projects__grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media screen and (max-width: 840px) { .projects__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media screen and (max-width: 600px) { .projects__grid { grid-template-columns: repeat(1,minmax(0,1fr)); gap: 24px; } } /* @end */ /* @group PROJECTS AJAX (Angebote mit Filter) */ /* Projects Ajax --------------------------------------------------------------------------------- */ /*same as 'projects' but with ALM filter */ .projects-ajax { margin-block: var(--space-80); } /* ALM Filter */ .alm-filter { } .alm-filter:has(.alm-filter--inner:empty) { /*hide filter when empty*/ display: none; } .alm-filter--title h3 { margin: 0; font-size: 15px; line-height: 1.4; } .alm-filter--inner { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 16px; } .alm-filter ul { display: contents; } .alm-filter li { display: contents; } .alm-filter .field-parent.field-1 > .alm-filter--link { /*hide parent term*/ display: none; } .alm-filter .field-0 { /*reset btn*/ } .alm-filter--link { padding: 6px 20px; font-size: 12px; line-height: 16px; text-align: center; border-radius: 10rem; border: 1px solid var(--text-color); font-weight: var(--bold-weight); cursor: pointer; transition: 250ms ease; } .alm-filter--link:hover, .alm-filter--link.active { color: #FFF; background: var(--text-color); } .alm-filters-edit { display: none; } @media screen and (max-width: 840px) { .alm-filter--inner { flex-direction: column; } .alm-filter--link { margin-right: auto; } } /* ALM Taxonomy description */ .taxonomy-description { margin-top: var(--space-80); font-size: 20px; line-height: 28px; width: 73%; } .is-root-container .taxonomy-description { AUS_display: none; /*hide in editor*/ } @media screen and (max-width: 840px) { .taxonomy-description { font-size: 18px; line-height: 26px; width: 100%; } } /* ALM Query */ .alm-listing { margin-top: var(--space-80); } .alm-btn-wrap { margin-top:var(--space-80); display: flex; justify-content: center; } .alm-btn { --padding: 9px 40px; /*9/40*/ --padding-small: 6px 20px; /*6/20*/ position: relative; padding: var(--padding); background: var(--text-color); color: #FFF; font-weight: var(--bold-weight); font-size: var(--base-font-size); display: inline-flex; justify-content: center; align-items: center; text-align: center; color: #FFF; border: none; text-decoration: none; border-radius: 10rem; outline-offset: 2px; gap: 8px; transition: all 200ms ease; } .alm-btn span { /*results*/ } .alm-btn:hover { } .alm-btn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; border-radius: 10rem; transition: all 250ms ease; background: var(--primary-color); border: 1px solid var(--primary-color); } .alm-btn:hover::before { transform: scale(1.08); } .alm-btn-wrap:has(.alm-btn.done) { /*hide when done*/ display: none; } .alm-results-text { display: none; } @media screen and (max-width: 600px) { .alm-btn-wrap { margin-top:var(--space-60); } .alm-btn { --padding: 9px 20px; } } /* @end */ /* @group PROJECTS ARCHIVE /* Projects Archive --------------------------------------------------------------------------------- */ .projects-archive { } .projects-archive .projects__grid { margin-top: 40px; } .projects__year-heading { line-height: 1; margin: 0; } .projects__year-separator { margin-block: 60px; border-top: 1px solid var(--gray-3); } .projects-archive .projects__year-separator:first-child { display: none; } .projects-archive .project-card:hover { transform: none; box-shadow: none; } /* @end */ /* @group PROJECTS REC SLIDER /* Projects Recommendations Slider --------------------------------------------------------------------------------- */ .projects-rec-slider { position: relative; overflow: hidden; max-width: calc(100vw - 2 * var(--page-padding)); /*!*/ } .projects-rec-slider.has-background { padding: var(--space-60); } .project-rec-slider-content:empty { AUS_display: none; } .project-rec-slider-content:not(:empty) + * { margin-top: var(--space-48); } .projects-rec-slider .swiper { display: grid; /*equal height*/ grid-template-columns: 100%; max-width: calc(100vw - 2 * var(--page-padding)); /*!!!*/ } .projects-rec-slider .swiper-slide { border-radius: 0; } .project-rec-slide { /*swiper-slide*/ position: relative; height: 100%; overflow-wrap: break-word; padding-bottom: 32px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid var(--gray-2); } .project-rec-slide > *:first-child { margin-top: 0; } .project-rec-slide__image { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius) } .project-rec-slide__image img { width: 100%; height: 100%; object-fit: cover; } .project-rec-slide a { position: unset; display: block; text-decoration: none; } .project-rec-slide a:hover { color: var(--text-color); text-decoration: underline; } .project-rec-slide a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .projects-rec-slider .swiper-navigation-wrap { margin-top: 48px; } @media screen and (max-width: 600px) { .projects-rec-slider .swiper { overflow: visible; } .projects-rec-slider .swiper-slide { max-width: 240px; } } /* @end */ /* @end */ /* @group SINGLE PROJECT */ /* Single Project --------------------------------------------------------------------------------- */ .project-grid { display: grid; grid-template-areas: "g g g g g g g . s s s s" "c c c c c c c . s s s s" ; grid-template-columns: repeat(12, minmax(0,1fr)); grid-auto-rows: auto 1fr auto; gap: 40px; align-items: start; } .project-grid__gallery { grid-area: g; } .project-grid__content { grid-area: c; } .project-grid__sidebar { grid-area: s; width: 100%; } .project-grid > * { border: 0px solid #333; } @media screen and (max-width: 1024px) { .project-grid { grid-template-areas: "g g g g g g g g g g g g" "c c c c c c c s s s s s" ; } .project-grid__column-wrap { display: contents; } } @media screen and (max-width: 840px) { .project-grid { display: flex; flex-direction: column; grid-template-areas: unset; grid-template-columns: 1fr; } .project-grid > * { grid-area: unset; } } .project-grid__gallery { max-width: calc(100vw - 2 * var(--page-padding)); align-self: start; } .project-grid__content { max-width: var(--col-6-width); align-self: start; } .project-uc-events { } .project-uc-event { container-type: inline-size; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--gray-2); } .project-uc-event:first-child { } .project-uc-event__content { flex: 1; display: flex; flex-wrap: wrap; gap: 0; } .project-uc-event__date { } .project-uc-event__location { flex: 1; } .project-uc-event__location::before { content: "\00a0|"; display: inline-block; } .project-uc-event__button { margin-left: auto; } @media screen and (max-width: 840px) { .project-uc-event__content { flex-direction: column; } .project-uc-event__location::before { display: none; } } @container (max-width: 500px) { .project-uc-event__content { flex-direction: column; } .project-uc-event__location::before { display: none; } } .btn-download { position: relative; display: flex; align-items: center; padding-left: 32px; } .btn-download + .btn-download { margin-top: 12px; } .btn-download::before { content: "\e905"; position: absolute; left: 0; font-family: 'icons'; font-size: 24px; text-decoration: none; } .project-tags { display: flex; flex-wrap: wrap; gap: 12px } .project-sponsors { display: grid; grid-template-columns: repeat(4, minmax(0,110px)); gap: 40px; } .project-sponsor { margin: 0; } .project-sponsor__image { aspect-ratio: 1; margin: 0; overflow: hidden; background: var(--gray-1); border-radius: var(--radius); transform: translate3d(0,0,0); /*safari fix for mix-blend-mode*/ } .project-sponsor__image a { display: block; width: 100%; height: 100%; } .project-sponsor__image img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius); padding: 10px; mix-blend-mode: multiply; } .project-sponsor__caption { font-style: normal; } @media screen and (max-width: 600px) { .project-sponsors { grid-template-columns: repeat(2, minmax(0,110px)); } } .contact-sidebar { padding: 32px; border-radius: var(--radius); background: var(--gray-1); } .contact-sidebar__map { } .contact-sidebar__map iframe { width: 100%; height: 100%; aspect-ratio: 1/1; } /* @end */ /* @group PAGINATION */ /* Pagination --------------------------------------------------------------------------------- */ .pagination { margin-top: var(--space-60); } .pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; } :where(.pagination) a { text-decoration: none; } .pagination .page-numbers { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 5px; font-size: var(--base-font-size); line-height: 1; height: 40px; min-width: 40px; transition: 100ms; border-bottom: 2px solid transparent; } .pagination .page-numbers.dots { border: none; font-weight: normal; margin-inline: -5px; color: var(--text-color); } .pagination .page-numbers.current { color: var(--text-color); border-color: inherit; } .pagination a:hover { color: var(--text-color); border-color: inherit; } .pagination a.prev, .pagination a.next { gap: 10px; } a.prev span, a.next span { /* prev next*/ display: none; } body:not(.paged) .pagination a.next, body:not(.paged) .pagination a.next { } .pagination a.prev:before, .pagination a.next:after { font-family: 'icons'; font-weight: normal; font-size: 24px; } .pagination a.prev:before { content: "\e917"; } .pagination a.next:after { content: "\e918"; } @media screen and (max-width: 600px) { } /* @end */ /* @group SEARCH PAGE*/ /* Search Page --------------------------------------------------------------------------------- */ .search-result { margin-bottom: var(--space-xl); } .search-result__title { } .search-result__title span { } .search-result.no-result .searchform { } .searchform-wrap { position: relative; margin-top: var(--space-md); } .search-result .searchform { } .search-result .searchform input[type="text"] { } .search-result .searchform input::placeholder { } .search-result .searchform .searchsubmit { } .search-result .searchform i { } /* @end */ /* @group BREADCRUMBS */ /* Breadcrumbs --------------------------------------------------------------------------------- */ .breadcrumbs { position: relative; margin-top: calc( var(--main-padding-top) * -1); margin-bottom: var(--main-padding-top); padding-inline: var(--page-padding); overflow: hidden; max-width: 100vw; } .breadcrumbs > .container { max-width: var(--wide-width); padding: 0; font-size: 12px; overflow-x: auto; } .breadcrumbs .container::before { /*fader*/ content: "\e917"; position: absolute; top: 0; left: 0; width: 40px; height: 100%; z-index: 1; display: flex; align-items: center; font-family: 'icons'; font-size: 12px; line-height: 1.6; background: linear-gradient(to right, rgba(255,255,255,1) 30%,rgba(255,255,255,0) 100%); display: none; /*js toggle*/ } .breadcrumbs-list { position: relative; display: inline-flex; flex-wrap: nowrap; gap: 4px; width: 100%; padding-block: 16px; overflow: hidden; overflow-x: auto; } .breadcrumbs.has-overflow { } /*has-overflow*/ .breadcrumbs.has-overflow .container { } .breadcrumbs.has-overflow .container::before { display: flex; } .breadcrumbs.has-overflow .breadcrumbs-list { } /*if scrolled left*/ .breadcrumbs.is-scrolled-left .container::before { display: none; } .breadcrumbs-list li { display: flex; gap: 4px; } .breadcrumbs-list a { display: block; text-decoration: none; line-height: 1.5; white-space: nowrap; /*truncate text*/ max-width: 60ch; overflow: hidden; text-overflow: ellipsis; background: #FFF; } .breadcrumbs-list a:hover { color: var(--text-color); text-decoration: underline; } .breadcrumbs-list i { /*divider*/ display: flex; align-items: center; font-size: 12px; line-height: 1.6; } /* @end */ /* @group TAGS PAGE */ /* Tags Page --------------------------------------------------------------------------------- */ .result-item { } .result-item a { position: relative; display: block; text-decoration: none; padding: 20px 4px; border-bottom: 1px solid var(--gray-2); } .result-item a:hover { --link-color-hover: var(--text-color); background: var(--gray-1); } .result-item a::after { content: "\e914"; position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-family: 'icons'; font-size: 12px; } /* @end */ /* @group EM Booking */ /* EM Booking --------------------------------------------------------------------------------- */ .em-booking-form { margin-top: 20px; border: 0px solid TAN; } .em-booking-section { padding: 0; margin: 0; } .em-booking-form section + section { margin-top: 40px; } .em-booking-section-title { margin: 0; } .em-booking-section-title { /*h4*/ font-size: 16px; } .em-booking-form p { margin-top: 0; } .em-event-booking-form label { display: block; } .em-event-booking-form label a { } .em-event-booking-form :where(input, select) { margin-top: 8px; } .em-event-booking-form :is(textarea) { width: 100%; } .em-event-booking-form :is(.em-button, .button-primary, .em-login-cancel) { --padding: 9px 40px; /*9/40*/ --padding-small: 6px 20px; /*6/20*/ position: relative; padding: var(--padding); font-size: var(--base-font-size); font-weight: var(--bold-weight); display: inline-flex; justify-content: center; align-items: center; text-align: center; color: #FFF; text-decoration: none; background: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 10rem; outline-offset: 2px; width: auto; } .em-event-booking-form :is(.em-login-cancel) { color: var(--text-color); background: transparent; } .em-event-booking-form :is(.em-button, .button-primary):hover { } .em-booking-message { margin-top: var(--block-gap); padding: 32px; border-radius: var(--radius); background: var(--gray-1); } .em-booking-message > *:first-child { margin-top: 0; } .em-booking-message-error { color: red; } .em-booking-message-success { background: var(--input-blue-light); } .em-event-booking-form .em-booking-form .input-checkbox label { display: flex; grid-template-columns: 24px auto; padding-left: 24px; } .em-event-booking-form .em-booking-form .input-checkbox label a { display: inline-block; padding-right: .75ch; } .em-booking-form input[type="checkbox"] { flex: 0 0 auto; position: relative; box-sizing: border-box; width: 24px; height: 24px; margin: 0; margin-left: -24px; margin-right: 12px; padding: 0; border: 1px solid var(--gray-3); appearance: none; background-color: var(--gray-1); border-radius: 4px; outline: none; transition: outline 0.1s; } .em-booking-form input[type="checkbox"]::before { content: ""; position: absolute; left: 7px; top: 3px; width: 8px; height: 13px; border: solid #FFF; border-width: 0 3px 3px 0; transform: rotate(45deg); border-color: var(--text-color); opacity: 0; } .em-booking-form input[type="checkbox"]:checked::before { opacity: 1; } /* == EM Login/Registration */ .em-login { } .em-login-trigger { } .em-login-content { padding: 32px; border-radius: var(--radius); background: var(--gray-1); display: none; /*js triggered*/ } .em-login-content p { margin: 0; } .em-login-content > p { font-weight: var(--bold-weight); } .em-login-form { display: grid; gap: 20px; margin-top: 20px; } .em-login-form p { display: grid; margin: 0; } .em-login-form p label { display: block; font-weight: var(--base-font-weight); } .em-login-buttons { display: flex; gap: 10px; } .em-login-meta { margin-top: 20px; display: flex; } .em-login-rememberme { display: none; } /* == Section: Tickets*/ .em-booking-form-section-tickets { } .em-booking-form-tickets-title { AUS_display: none; } .em-tickets div.em-ticket { margin-top: 8px; display: grid; grid-template-columns: 1fr auto; gap: 40px; } .em-tickets .em-tickets-spaces label { } .em-tickets p.ticket-price strong { display: block; margin-top: 8px; } .em-tickets .em-ticket-select { width: 10ch; } /*when multiple tickets (table):*/ .em-booking-section table.em-tickets { } .em-booking-section table.em-tickets thead { text-align: left; display: none; } .em-booking-section td.em-bookings-ticket-table-price { padding-inline: 12px; } .em-booking-section td.em-bookings-ticket-table-spaces select { margin-top: -9px; } .em-booking-section tr { display: block; } .em-booking-section tr.em-ticket:nth-child(even) { border-top: 1px solid var(--gray-3); padding-top: 20px; margin-top: 20px; display: block; } /* == Section: Registrierungsinformationen*/ .em-booking-form-section-details { } .em-booking-form-details { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; } @media screen and (max-width: 1024px) { .em-booking-form-details { grid-template-columns: 1fr; } } .em-booking-form-details .em-login-trigger { display: none; } .em-booking-form .input-checkbox { grid-column: 1/-1; margin-top: 12px; } .em-booking-form .input-checkbox + .input-checkbox { margin-top: 0px; } .em-consent-checkbox { grid-column: 1/-1; } /* == Section: Buchungsübersicht*/ .em-booking-form-section-summary { } .em-booking-summary { margin-top: 8px; display: grid; gap: 4px; } .em-bs-section-items { } .em-bs-row { display: flex; gap: 12px 4px; } .em-bs-cell-qty { } .em-bs-cell-price { margin-left: auto; } .em-bs-row-total { font-weight: var(--bold-weight); } /* == Section: Buchungsübersicht*/ .em-booking-form-section-confirm { } .em-booking-buttons { display: flex; justify-content: flex-end; } .em-booking-buttons button { } .em-payment-gateways { } @media screen and (max-width: 600px) { .em-booking-buttons { justify-content: center; } } /* == EM Datepicker fix */ .em-flatpickr select.flatpickr-monthDropdown-months { font-weight: normal; font-size: 16px; } .flatpickr-current-month { /*fix: show year */ display: flex; gap: 10px; } /* @end */ /* @group EM Calendar */ /* EM Calendar --------------------------------------------------------------------------------- */ .em > div, .em section, .em .ring { --nav-color: var(--text-color); --nav-border: 1px solid var(--gray-1); --event-border-color: transparent; --event-background-color: var(--gray-1); --event-color: #FFF; --header-border: 1px solid var(--gray-3); --header-background: transparent; --header-color: var(--text-color); --date-box-border: 1px solid var(--gray-3); --date-color: var(--text-color); --date-background: #FFF; --date-border-color: var(--gray-3); --date-border: 1px solid var(--gray-3); --date-today-color: #FFF; --date-today-border: 1px solid BLUE; --date-more-color: var(--nav-color); --calendar-background: #fff; --counter-background: var(--wet-orange); } .em.em-view-container { } /* em-cal-nav */ .em.em-calendar.with-advanced .em-cal-nav { gap: 12px } .em-search-advanced-trigger { } .em-search-advanced-trigger .total-count { display: flex; align-items: center; justify-content: center; font-weight: var(--bold-weight); --counter-background: var(--orange); width: 16px!important; height: 16px!important; } .em.em-calendar .em-cal-nav input.em-month-picker { padding: 0!important; font-size: 20px; font-family: var(--font-sans); font-weight: var(--bold-weight); } .em.em-calendar .em-cal-nav .button { padding: 9px 12px !important; text-decoration: none; opacity: 1!important; margin: 0 !important; display: block!important; border-radius: 4px; background: transparent; font-size: var(--base-font-size)!important; text-transform: none!important; line-height: 22px!important; height: auto!important; color: var(--text-color)!important; font-weight: var(--base-font-weight)!important; border: 1px solid var(--gray-3); } .em.em-calendar .em-cal-nav .button:hover { background: var(--text-color)!important; color: #FFF!important; border-color: var(--text-color)!important; } .em.em-calendar .em-cal-nav .month-nav { display: flex; align-items: center; gap: 20px; } .em.em-calendar .em-cal-nav .month-nav a.em-calnav { width: 18px; height: 100%; padding-block: 5px; display: block; } .em.em-calendar .em-cal-nav .month-nav a.em-calnav svg { width: 18px; height: 18px; } /* em-flatpickr */ #em-flatpickr { } .flatpickr-calendar { overflow: hidden; border-radius: var(--radius); } .flatpickr-months .flatpickr-month { background: var(--gray-2); } #em-flatpickr .flatpickr-month .numInput { color: red; font-family: var(--font-sans); font-weight: var(--bold-weight); font-size: var(--base-font-size); text-align: center; color: var(--text-color); } #em-flatpickr .flatpickr-monthSelect-month { font-weight: var(--base-font-weight); font-size: var(--base-font-size); border-radius: 4px; } #em-flatpickr .flatpickr-monthSelect-month.selected { background: var(--text-color); border-color: var(--text-color); } #em-flatpickr .flatpickr-monthSelect-month.today, #em-flatpickr .flatpickr-monthSelect-month.today { border-color: var(--gray-3); } #em-flatpickr .flatpickr-monthSelect-month:focus, #em-flatpickr .flatpickr-monthSelect-month:hover { border-color: var(--gray-2); background: var(--gray-2); color: var(--text-color); } .em.em-calendar .em-cal-day-date.colored { } .em.em-calendar .em-cal-day-date.colored .ring { /*mobile: ring color */ --date-border-color: transparent!important; --date-border-color-top: transparent!important; --date-border-color-bottom: transparent!important; --date-border-color-left: transparent!important; --date-border-color-right: transparent!important; } .em.em-calendar .em-cal-day-date.colored .ring a { display: flex!important; line-height: 1; justify-content: center; text-align: center; align-items: center!important; padding: 0!important; } /* em-cal-event */ .em-cal-event { --event-color: var(--text-color)!important; --event-border-color: transparent!important } /* fef4f8 */ .em-cal-event > div { padding: 6px 8px; font-size: 12px; line-height: 1; height: auto!important; } /* WETEK Category colors #f3fcfd (blue-1) #fef7f1 (orange-1 ) #faf4fc (purple-1) #fef4f8 (red-1) */ /* Match event color with cat color, but darker version. If event has hex value of blue-1, it gets blue-3. */ .em-cal-event[style*="f3fcfd" i] { --event-background-color: var(--blue-3)!important; } .em-cal-event[style*="fef7f1" i] { --event-background-color: var(--orange-3)!important; } .em-cal-event[style*="faf4fc" i] { --event-background-color: var(--purple-3)!important; } .em-cal-event[style*="fef4f8" i] { --event-background-color: var(--red-3)!important; } /* em-modal */ .em-modal { } .em.em-modal .em-modal-popup { overflow: hidden; border-radius: var(--radius)!important; } .em.em-modal .em-modal-popup header { padding: 16px 32px; } @media screen and (max-width: 600px) { .em.em-modal .em-modal-popup header { padding: 16px 24px; } } .em.em-modal .em-modal-popup header a.em-close-modal { top: 16px!important; right: 16px!important; width: 28px; height: 28px; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgcj0iMTQiIGZpbGw9IiNGOEY3RjciLz4KPHBhdGggZD0iTTkgOUwxOSAxOSIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KPHBhdGggZD0iTTkgMTlMMTkgOSIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KPC9zdmc+Cg=='); } .em.em-modal .em-modal-popup header .em-modal-title { font-weight: var(--bold-weight); font-size: 20px!important; } .em.em-modal .em-modal-popup header .em-modal-title a { text-decoration: none; pointer-events: none; } .em.em-modal section.em-search-main input.em-search-text { background-image: none!important; padding-left: 12px!important; } .em.em-modal .em-search-sections { display: flex; flex-direction: column; gap: 16px; } .em.em-modal section.em-search-advanced-section { padding: 0!important; } .em.em-modal .selectize-control.em-selectize .selectize-dropdown, .em.em-modal .selectize-control.em-selectize.multidropdown.dropdown-active { border-color: var(--gray-3)!important; } .em.em-modal section.em-search-section-categories header .total-count { background: var(--orange)!important; border: none!important; display: inline-flex!important; justify-content: center; align-items: center; line-height: 1!important; font-weight: var(--bold-weight); } .em.em-modal span.placeholder-text { color: var(--text-color); } .em.em-modal span.placeholder-count { background: var(--text-color)!important; border-radius: 4px!; } .em.em-modal .selectize-dropdown div.option.selected { color: var(--link-color-hover)!important; } .em.em-modal .em-search-geo, .em.em-modal section.em-search-section-location, .em.em-modal section.em-search-section-tags { display: none; } .em.em-modal section.em-search-advanced-section header { padding: 0 0 8px 0!important; } .em.em-modal .selectize-input { /*hide category search*/ display: none; } .em.em-modal :is(*, .em-modal-popup.footer) button.button { background: TAN; border: none; color: #FFF; background: var(--text-color); font-size: var(--font-size); font-weight: var(--bold-weight); line-height: 22px; padding: 9px 40px!important; margin: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; border-radius: 10rem; border: 1px solid var(--text-color); } .em.em-modal :is(*, .em-modal-popup.footer) button.button-secondary { color: var(--text-color); background: #FFF; } @media screen and (max-width: 600px) { .em.em-modal :is(*, .em-modal-popup.footer) button.button { width: 100%; } } .em.em-modal .em-modal-popup footer.em-submit-section { padding: 16px 32px!important; display: flex; gap: 16px; justify-content: space-between; } .em.em-modal .em-modal-popup footer.em-submit-section div { padding: 0!important; } @media screen and (max-width: 600px) { .em.em-modal .em-modal-popup footer.em-submit-section { padding: 16px 24px; flex-direction: column; } .em.em-modal .em-modal-popup footer.em-submit-section div { width: 100%; } } /* em-modal event */ .em.em-modal .em-modal-content { gap: 20px; padding: 32px!important; } .em.em-modal .em-list-widget.em-modal-content { gap: 40px; } @media screen and (max-width: 600px) { .em.em-modal .em-modal-content { padding: 24px!important; } } .modal-event { display: grid; grid-template-columns: 30% 1fr; gap: 32px; } .modal-event__image { aspect-ratio: 3/2; background: var(--gray-1); overflow: hidden; border-radius: var(--radius); } .modal-event__image img { width: 100%; height: 100%; object-fit: cover; } .modal-event__content { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .modal-event__item-columns { display: contents; } .modal-event__item { width: 100%; } .modal-event__item a { display: block; text-decoration: none; } .modal-event__item a:hover { text-decoration: underline; } .modal-event__label { font-size: var(--text-small); text-transform: uppercase; color: var(--label-color); } .modal-event__buttons { margin-top: 24px; display: flex; justify-content: flex-end; gap: 16px; } .modal-event__buttons a:hover { text-decoration: none; } @media screen and (max-width: 840px) { .modal-event__buttons { justify-content: center; flex-direction: column; } .modal-event__buttons a { width: 100%; } } @media screen and (max-width: 600px) { .modal-event--single { grid-template-columns: 1fr; } .modal-event__item-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; width: 100%; } } /* @end */ /* @group SINGLE NEWS */ /* Single News --------------------------------------------------------------------------------- */ .news-grid { /*identical with project-grid*/ display: grid; grid-template-areas: "g g g g g g g . s s s s" "c c c c c c c . s s s s" ; grid-template-columns: repeat(12, minmax(0,1fr)); grid-auto-rows: auto 1fr auto; gap: 60px 40px; align-items: start; } .news-grid__featured-image { grid-area: g; } .news-grid__content { grid-area: c; } .news-grid__sidebar { grid-area: s; width: 100%; } .news-grid > * { border: 0px solid #333; } @media screen and (max-width: 1024px) { .news-grid { grid-template-areas: "g g g g g g g g g g g g" "c c c c c c c s s s s s" ; } .news-grid__column-wrap { display: contents; } } @media screen and (max-width: 840px) { .news-grid { display: flex; flex-direction: column; grid-template-areas: unset; grid-template-columns: 1fr; } .news-grid > * { grid-area: unset; } } .news-grid__featured-image { max-width: calc(100vw - 2 * var(--page-padding)); align-self: start; } .news-grid__featured-image img { border-radius: var(--radius); } .news-grid__content { max-width: var(--col-6-width); align-self: start; } @media screen and (max-width: 840px) { } .btn-download { position: relative; display: flex; align-items: center; padding-left: 32px; } .btn-download + .btn-download { margin-top: 12px; } .btn-download::before { content: "\e905"; position: absolute; left: 0; font-family: 'icons'; font-size: 24px; text-decoration: none; } /* @end */ /* @group PW protected */ /* PW Protected --------------------------------------------------------------------------------- */ .post-password-form { text-align: center; padding: var(--box-padding); background: var(--primary-bg); } .post-password-form p { /*WP info text*/ display: none; } .post-password-form p + p { display: block; margin: 0; } .post-password-form label { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px } .post-password-form input { flex: 1 0 auto; font-size: 1rem; padding: 10px; max-width: 10rem; border: 1px solid var(--border-color); } .post-password-form input[type="submit"] { display: none; } /* @end */ /* @group FORMS */ /* FORMS --------------------------------------------------------------------------------- */ form :where(input:not([type=checkbox], [type=radio]), textarea, select) { margin: 0; padding: 8px 12px; color: var(--text-color); font-size: var(--base-font-size); line-height: 22px; background: var(--gray-1); border-radius: 4px; border: 1px solid var(--gray-3); width: 100%; display: block; } /* Select */ /* https://codepen.io/chriscoyier/pen/zYYZaGP */ select { display: block; width: 100%; max-width: 100%; box-sizing: border-box; -moz-appearance: none; -webkit-appearance: none; appearance: none; transition: all 200ms ease; background-color: var(--gray-1); background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgNEw2IDhMMTAgNCIgc3Ryb2tlPSIjMzY0MjYxIi8+Cjwvc3ZnPgo="); background-repeat: no-repeat, repeat; /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/ background-position: right 12px top 50%, 0 0; /* icon size, then gradient */ background-size: 12px auto, 100%; } select::-ms-expand { display: none; } .select-css:focus { /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */ box-shadow: 0 0 0 3px -moz-mac-focusring; outline: none; } select option { font-weight: normal; font-size: 1rem; } /* Disabled styles */ select:disabled, select[aria-disabled=true] { opacity: .5; } /*Date*/ input::-webkit-datetime-edit { /*safari fix*/ line-height: 1; padding: 0; margin-bottom: -3px; } /* @end */ /* @group CF7 */ /* FORMS (contact form 7) --------------------------------------------------------------------------------- */ .wpcf7 { --form-field-gap-y: 20px; position: relative; } .wpcf7 .row { --gap-y: 0px; } .wpcf7 .form-wrap .row:first-child { margin-top: calc(var(--form-field-gap-y) * -1); } .wpcf7-form { position: relative; } .wpcf7-form .form-wrap { margin: 0 auto; overflow: hidden; } .wpcf7-form .form-wrap > *:first-child { margin-top: 0; } .wpcf7 [class*=col-] { /*for Editor - override WP backend CSS with columns.css */ padding-right: calc(var(--gap-x) * .5); padding-left: calc(var(--gap-x) * .5); } .wpcf7 .form-title { margin: 0 0 1rem 0; } .wpcf7 .form-subtitle { margin: 1rem 0; font-size: var(--text-small); color: var(--text-color); } .wpcf7 hr { } .wpcf7 br { } .wpcf7 .fieldset { overflow: hidden; } .wpcf7 .form-field { z-index: 1; margin: 0; margin-top: var(--form-field-gap-y); } .wpcf7 .form-field--hide-label + .form-field--hide-label { margin-top: 12px; } .wpcf7 .form-field--hide-label > label { display: none; } .wpcf7 .form-field:focus-within label, .wpcf7 .form-field.select-focus label { } .wpcf7 label { width: auto; font-size: var(--base-font-size); font-weight: var(--base-font-weight); text-align: left; cursor: default; color: var(--text-color); } .wpcf7 .form-field--mandatory { margin-top: 8px; font-size: var(--text-small); line-height: 20px; text-align: right; display: none; } .wpcf7 .row.response { margin-bottom: 0; } .wpcf7 input.wpcf7-text, .wpcf7 input.wpcf7-quiz, .wpcf7-text, .wpcf7 textarea, .wpcf7 select, .wpcf7-date, .wpcf7-number, .wpcf7-captchar, .wpcf7-file, .wpcf7-email { -webkit-appearance: none; margin-top: 8px; } .wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus { } input::-webkit-input-placeholder, input::-moz-placeholder, input::-ms-input-placeholder, input::-moz-placeholder { } .wpcf7 textarea { max-height: 12ch; width: 100%; } .wpcf7 .form-field--submit { } .wpcf7 .submit-btn-wrap { position: relative; display: flex; justify-content: flex-end; align-items: center; } .wpcf7 input.wpcf7-submit { width: auto; } .wpcf7 input.wpcf7-submit:hover { } .wpcf7 input.wpcf7-submit:active { } .wpcf7 .wpcf7-spinner { order: -1; flex: 0 0 24px; background: rgba(0,0,0, .3); AUS_visibility: visible!important; /*ON/OFF*/ } @media screen and (max-width: 600px) { .wpcf7 .submit-btn-wrap { justify-content: center; } .wpcf7 .wpcf7-spinner { margin-left: -50px; } } .wpcf7 .response { position: relative; } .wpcf7 .invalid .wpcf7-response-output { display: block; font-size: 0.9rem; padding: 1rem; margin: 1rem 0 0 0; clear: both; position: relative; text-align: left; background: #FFF; } .wpcf7 .wpcf7-response-output.wpcf7-validation-errors { border-color: transparent; color: RED; text-align: center; } .wpcf7 .wpcf7-form.sent { } .wpcf7 .sent .wpcf7-response-output { margin: 0; padding: 80px 32px 60px 32px; text-align: center; font-weight: var(--bold-weight); border: none; background: var(--input-blue-light); border-radius: var(--radius); } .wpcf7 .sent .wpcf7-response-output:after { /*ok icon*/ content: ""; position: absolute; left: 50%; top: 42px; width: 12px; height: 20px; border: solid var(--primary-color); border-width: 0 2px 2px 0; transform: rotate(45deg) translateX(-50%); } .wpcf7 span.wpcf7-not-valid-tip { background: red; color: #FFF; display: none; } .not-valid label { color: RED; } .wpcf7 input.wpcf7-not-valid, .wpcf7 textarea.wpcf7-not-valid, .wpcf7 select.wpcf7-not-valid { border-color: RED; } .wpcf7 .field-note { font-size: 0.7rem; } /* Checkbox & Radiobuttons */ .wpcf7 .wpcf7-checkbox { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; } .wpcf7 .wpcf7-radio { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; } .wpcf7 input[type="radio"] { -webkit-appearance: radio; -moz-appearance: radio; } .wpcf7 input[type="checkbox"] { -webkit-appearance: checkbox; -moz-appearance: checkbox; } .wpcf7-radio .wpcf7-list-item, .wpcf7-checkbox .wpcf7-list-item, .wpcf7-acceptance .wpcf7-list-item { margin: 0 0 0 0; width: auto; } .wpcf7-radio input, .wpcf7-checkbox input, .wpcf7-acceptance input { display: none; /*custom*/ } .wpcf7-radio label, .wpcf7-checkbox label, .wpcf7-acceptance label { margin: 0; padding: 0; display: block; cursor: pointer; } .wpcf7-radio .wpcf7-list-item-label, .wpcf7-checkbox .wpcf7-list-item-label, .wpcf7-acceptance .wpcf7-list-item-label { position: relative; display: flex; align-items: center; flex: 1 0 auto; padding: 0px 0; padding-right: 40px; color: var(--text-color); transition: all 300ms ease; } .wpcf7-radio .wpcf7-list-item-label:hover, .wpcf7-checkbox .wpcf7-list-item-label:hover, .wpcf7-acceptance .wpcf7-list-item-label:hover { } .wpcf7-radio .wpcf7-list-item-label:before, .wpcf7-checkbox .wpcf7-list-item-label:before, .wpcf7-acceptance .wpcf7-list-item-label:before { content: ""; width: 24px; height: 24px; background: var(--gray-1); opacity: 1; position: relative; margin: 0 15px 0 0; flex: 0 0 auto; border: 1px solid var(--gray-3); border-radius: 4px; } .wpcf7-radio .wpcf7-list-item-label:before { border-radius: 50%; } .wpcf7-radio .wpcf7-list-item-label:after { /*the dot*/ content: ""; position: absolute; top: 7px; left: 7px; width: 10px; height: 10px; background: #FFF; border-radius: 50%; opacity: 0; } .wpcf7-checkbox .wpcf7-list-item-label:after, .wpcf7-acceptance .wpcf7-list-item-label:after { /*the checkmark*/ content: ""; position: absolute; left: 8px; top: 3px; width: 9px; height: 14px; border: solid #FFF; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } .wpcf7-radio input:checked + .wpcf7-list-item-label, .wpcf7-checkbox input:checked + .wpcf7-list-item-label, .wpcf7-acceptance input:checked + .wpcf7-list-item-label { } .wpcf7-radio input:checked + .wpcf7-list-item-label:before, .wpcf7-checkbox input:checked + .wpcf7-list-item-label:before, .wpcf7-acceptance input:checked + .wpcf7-list-item-label:before { border-color: var(--primary-color); background: var(--primary-color); } .wpcf7-radio input:checked + .wpcf7-list-item-label:after, .wpcf7-checkbox input:checked + .wpcf7-list-item-label:after, .wpcf7-acceptance input:checked + .wpcf7-list-item-label:after { opacity: 1; } .wpcf7-radio.wpcf7-not-valid .wpcf7-list-item-label:before, .wpcf7-checkbox.wpcf7-not-valid .wpcf7-list-item-label:before, .wpcf7-acceptance.wpcf7-not-valid .wpcf7-list-item-label:before { border-color: RED; } /* Checkbox Acceptance (Datenschutz) */ .wpcf7-acceptance .wpcf7-list-item-label { align-items: flex-start; } .wpcf7-acceptance .acceptance-text { margin-top: 2px; } .wpcf7 .form-field--datenschutz { } .wpcf7 .form-field--datenschutz > label { display: none; } .wpcf7-acceptance span a { } /*CF7 plugin: Drag & Drop Uploader by Codedropz*/ .codedropz-upload-wrapper { margin-top: 8px; } .codedropz-upload-handler { margin: 0; border: 1px solid var(--gray-3); } .codedropz-upload-container { border-radius: 4px; background: var(--gray-1); padding: 35px 20px 40px 20px; } .codedropz-upload-inner { } .codedropz-upload-inner > *:first-child { position: relative; font-size: var(--base-font-size); font-weight: var(--base-font-weight); } .codedropz-upload-inner > *:first-child::before { /*upload icon*/ content: "\e906"; display: block; margin-top: 5px; margin-bottom: 12px; font-family: 'icons'; font-size: 28px; } a.cd-upload-btn { text-decoration: underline!important; } .dnd-upload-status .dnd-upload-image { width: 40px; height: 40px; border: 1px solid var(--gray-3); } .dnd-upload-status .dnd-upload-details .name span { color: var(--text-color); } .dnd-upload-status .dnd-upload-details .name em { color: var(--text-color); font-weight: var(--base-font-weight); } .dnd-upload-status .dnd-upload-details .dnd-progress-bar span { background: var(--input-blue); } /* @end */ /* @group WPBC (WP Booking Calendar) */ /* WPBC --------------------------------------------------------------------------------- */ .wpbc-wrap { --form-field-gap-y: 20px; --wpbc_form-field-border-radius: 4px; --wpbc_form-field-background-color: var(--gray-1); --wpbc_form-field-border-color: var(--gray-3); --wpbc_form-field-border-color-spare: #666; --wpbc_form-field-text-color: var(--text-color); --wpbc_form-field-disabled-color: rgba(0, 0, 0, 0.2); --wpbc_form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --wpbc_form-field-menu-color: #ffffff; --wpbc_form-label-color: var(--text-color); --wpbc_form-label-sublabel-color: var(--text-color); --wpbc_form-label-error-color: var(--input-red); --wpbc_form-button-border-radius: 50px; --wpbc_form-button-border-style: none; --wpbc_form-button-border-size: 1px; --wpbc_form-button-background-color: #066aab; --wpbc_form-button-background-color-alt: #066aab; --wpbc_form-button-border-color: #066aab; --wpbc_form-button-text-color: #ffffff; --wpbc_form-button-text-color-alt: #fff; --wpbc_form-page-break-color: #066aab; --wpbc_form-background-image: none; --wpbc_form-background-position: center center; --wpbc_form-background-repeat: no-repeat; --wpbc_form-background-size: cover; --wpbc_form-background-width: 100px; --wpbc_form-background-height: 100px; --wpbc_form-background-color: rgba(0, 0, 0, 0); --wpbc_form-background-url: none; --wpbc_form-container-padding: 0px; --wpbc_form-container-border-style: none; --wpbc_form-container-border-width: 1px; --wpbc_form-container-border-color: #000000; --wpbc_form-container-border-radius: 3px; --wpbc_form-field-size-input-height: 43px; --wpbc_form-field-size-input-spacing: 15px; --wpbc_form-field-size-font-size: 16px; --wpbc_form-field-size-line-height: 19px; --wpbc_form-field-size-padding-h: 14px; --wpbc_form-field-size-checkbox-size: 16px; --wpbc_form-field-size-sublabel-spacing: 5px; --wpbc_form-field-size-icon-size: 1; --wpbc_form-label-size-font-size: var(--base-font-size); --wpbc_form-label-size-line-height: var(--base-line-height); --wpbc_form-label-size-sublabel-font-size: var(--text-small); --wpbc_form-label-size-sublabel-line-height: 15px; --wpbc_form-button-size-font-size: var(--base-font-size); --wpbc_form-button-size-height: 41px; --wpbc_form-button-size-padding-h: 15px; --wpbc_form-button-size-margin-top: 12px; --wpbc_form-container-shadow-size-box-shadow: none; --wpbc_form-marging-between-several-checkbox-radio: 30px; --wpbc_form-padding-between-label-checkbox-radio: 12px; --wpbc_form-field-size-checkbox-size: 24px; --wpbc_timepicker-font-size: 15px; --wpbc_timepicker-bg-color-opacity: 100%; --wpbc_timepicker-bg-color: #FFF; --wpbc_timepicker-text-color: var(--text-color); --wpbc_timepicker-border-color: var(--gray-3); --wpbc_timepicker-hover-bg-color: #fff; --wpbc_timepicker-hover-text-color: var(--text-color); --wpbc_timepicker-hover-border-color: var(--input-blue); --wpbc_timepicker-hover-bg-color-opacity: 1; --wpbc_timepicker-selected-bg-color: var(--input-blue); --wpbc_timepicker-selected-text-color: #fff; --wpbc_timepicker-selected-border-color: var(--input-blue); --wpbc_timepicker-selected-bg-color-opacity: 1; --wpbc_timepicker-border-width: 1px; --wpbc_timepicker-border-radius: 4px; --wpbc_timepicker-padding: 8px 24px;; --wpbc_timepicker-margin: 0; } .wpbc-wrap .wpbc_container_booking_form { width: 100%; margin: 0; } .wpbc_form { } .wpbc__form__div { display: grid; grid-template-columns: 1fr; gap: var(--form-field-gap-y); } .wpbc-columns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--form-field-gap-y) 40px; } .wpbc-wrap .wpbc__field { padding: 0!important; margin: 0 0 0 0!important; align-content: flex-start!important; } .wpbc__field br { display: none; } .wpbc__field label { font-size: var(--base-font-size)!important; font-weight: var(--base-font-weight)!important; line-height: var(--base-line-height)!important; } .wpbc-wrap .wpdev-form-control-wrap { margin: 0; margin-top: 8px; } .wpbc_times_selector { display: flex; gap: 20px; margin-top: 8px; } .wpbc_times_selector div { line-height: var(--base-line-height)!important; } .wpbc_r_submit.wpbc__field { display: flex!important; justify-content: flex-end!important; } .wpbc_r_submit.wpbc__field .wpbc_button_light.btn, .wpbc_r_submit.wpbc__field .wpbc_button_light.btn:hover { display: flex; align-items: center!important; margin: 0; padding: 9px 44px; box-shadow: none; background: var(--text-color); font-size: var(--base-font-size)!important; font-weight: var(--bold-weight); line-height: 22px; color: #FFF; height: auto; letter-spacing: 0; border-radius: 50rem; border: none; } @media screen and (max-width: 600px) { .wpbc_r_submit.wpbc__field { justify-content: center!important; } } .wpbc__field input[type="checkbox"]:checked::before { --wpbc_form-field-background-color: var(--text-color); border-color: var(--text-color)!important; } .wpbc__field input[type="checkbox"]::after { --wpbc_form-button-background-color: #FFF; /*checkmark color*/ } .wpbc_fe_message { } .wpbc__field .wpbc_fe_message_warning { background: BLUE; } /* @end */ /* @group SLIDER (swiperjs) */ /* SLIDER --------------------------------------------------------------------------------- */ .swiper { --swiper-theme-color: var(--primary-color); /*navigation arrows*/ --swiper-navigation-size: 50px; --swiper-navigation-color: #FFF; --swiper-navigation-top-offset: calc(50% - var(--swiper-padding-bottom)/2); /*!*/ --swiper-navigation-sides-offset: 10px; /*pagination bullets*/ --swiper-pagination-bullet-horizontal-gap: 12px; --swiper-pagination-bullet-vertical-gap: 5px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-width: inherit; --swiper-pagination-bullet-height: inherit; --swiper-pagination-bullet-border-radius: 100px; --swiper-pagination-color: var(--text-color); --swiper-pagination-bullet-inactive-color: var(--gray-3); --swiper-pagination-bullet-inactive-opacity: 1; width: 100%; height: 100%; } .block-editor-block-list__block .swiper { pointer-events: none; /*disable in editor*/ } .swiper:not(.swiper-initialized) .swiper-slide { margin-right: 30px; /*prevent layout if JS not loaded*/ } .swiper-wrapper { } .swiper-slide { overflow: hidden; border-radius: var(--radius); } .swiper-navigation-wrap { /* design: pagination between buttons < ··· > */ position: relative; display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; } .swiper-navigation-wrap:has(.swiper-pagination-bullets.swiper-pagination-lock) { display: none; /*if no pagination neccessary*/ } .swiper-button { --size: 40px; width: var(--size); height: var(--size); position: relative; top: auto; left: auto; right: auto; bottom: auto; flex: 0 0 auto; margin: 0; transform: translateY(0%); transition: all 250ms ease-in-out; color: var(--primary-color); outline-offset: -1px; opacity: 1; /* ON/OFF*/ } .swiper:focus-within .swiper-button { opacity: 1; } .swiper:hover .swiper-button { opacity: 1; } .swiper-button:hover { } .swiper-button::after { font-family: 'icons'; font-size: 24px; } .swiper-button-prev { } .swiper-button-prev::after { content: "\e917"; } .swiper-button-next { } .swiper-button-next::after { content: "\e918"; padding-left: 3px; } .swiper-button.swiper-button-disabled { opacity: 0!important; } .swiper .swiper-pagination-bullets { position: relative; margin: 0; top: auto; bottom: auto; width: auto; display: flex; gap: var(--swiper-pagination-bullet-horizontal-gap); } .swiper-pagination-bullet { transition: all 250ms ease; margin: 0!important; } /*dynamic bullets*/ .swiper .swiper-pagination-bullets-dynamic { --swiper-pagination-bullet-horizontal-gap: 5px; left: auto!important; transform: translateX(0%)!important; width: 80px!important; max-width: 80px!important; justify-content: center!important; overflow: visible; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: none; left: auto!important; } .swiper-pagination-bullets-dynamic :is( .swiper-pagination-bullet-active-prev, .swiper-pagination-bullet-active-prev-prev, .swiper-pagination-bullet-active, .swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next) { display: block; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { flex: 0 0 auto; } /*---*/ .swiper-pagination-bullet-active, .swiper-pagination-bullet-active-main { --swiper-pagination-bullet-width: 40px; } .swiper-pagination-bullet:only-child { visibility: hidden; } .swiper:has(.swiper-pagination-bullet:only-child) { /*no pagination if only 1 slide*/ --swiper-pagination-height: 0; } @media screen and (max-width: 600px) { } /* @end */ /* @group LIGHTBOX */ /* Lightbox PhotoSwipe Plugin --------------------------------------------------------------------------------- */ .pswp { --pswp-bg: rgba(0,0,0, 1); } .pswp__caption { } .pswp__caption__text { font-size: var(--text-small); line-height: 1.4; } .pswp__button.pswp__button--zoom { display: none; } /* @end */ /* @group FOOTER */ /* FOOTER --------------------------------------------------------------------------------- */ #footer { } .site-footer { } .footer-logos { padding: 20px 0; border-top: 1px solid var(--gray-2); } .footer-logos .container { display: flex; flex-wrap: wrap; gap: 24px; } .footer-logos__grid { display: contents; border: 1px solid TAN; } .footer-logos__title { display: flex; align-items: center; font-size: var(--text-small); } .footer-logo { flex: 0 1 auto; display: flex; align-items: center; } .footer-logo img { width: auto; height: 40px; object-fit: contain; } .footer-logo a { display: block; } .footer-logo-divider { height: 60px; width: 1px; background: var(--gray-2); } .footer-logo-divider:last-child { display: none; } @media screen and (max-width: 600px) { .footer-logo img { height: 36px; } .footer-logo-divider { height: 56px; } } .footer-main { padding: 40px 0; background: var(--primary-color); } :where(.footer-main), :where(.footer-main) a { color: #FFF; text-decoration: none; } :where(.footer-main) a:hover { color: #FFF; text-decoration: underline; } .footer-main .container { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; } .footer-menu { display: flex; } .footer-menu ul { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .footer-menu li { } .footer-menu a { display: block; } .footer-social { display: flex; justify-content: center; align-items: center; gap: 16px 16px; } .footer-social__links { display: flex; gap: 16px; } .footer-social__links a { --size: 32px; position: relative; display: block; width: var(--size); height: var(--size); border-radius: 100%; outline-offset: 2px; transition: 150ms; } .footer-social__links a::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; transition: 150ms; border: 1px solid var(--gray-4); } .footer-social__links a:hover::before { transform: scale(1.1); border-color: #FFF; } .footer-social__links a svg circle { stroke: transparent; } @media screen and (max-width: 1024px) { .footer-main .container { grid-template-columns: 1fr; gap: 30px; } .footer-right { display: none; } .footer-menu ul { flex-wrap: nowrap; flex-direction: column; align-items: flex-start; text-align: left; } .footer-social { flex-direction: column; align-items: flex-start; } } /* @end */ /* @group SCROLL TO TOP BUTTON */ /* Scroll to top button --------------------------------------------------------------------------------- */ .scrolltopbtn { --size: 40px; position: fixed; bottom: 35px; right: 20px; width: var(--size); height: var(--size); display: flex; justify-content: center; align-items: center; font-size: 13px; text-align: center; border-radius: 100%; transition: 300ms; transform: translateY(100%); opacity: 0; z-index: 5; color: #FFF; border: none; padding: 0; background: var(--orange); box-shadow: 0px 8px 20px -4px rgba(0, 0, 0, 0.3); } .scrolltopbtn i { margin-bottom: 1px; } .scrolltopbtn.active:hover i { } .scrolltopbtn.active:hover { transform: scale(1.08); } .scrolltopbtn.active { transform: translateY(0); opacity: 1; } @media screen and (max-width: 840px) { } /* @end */ /* @group BORLABS COOKIE */ /* Borlabs Cookie Banner --------------------------------------------------------------------------------- */ #BorlabsCookieBox, .brlbs-cmpnt-container { --dialog-text-color: var(--text-color); --dialog-border-radius-bottom-left: var(--radius); --dialog-border-radius-bottom-right: var(--radius); --dialog-border-radius-top-left: var(--radius); --dialog-border-radius-top-right: var(--radius); --dialog-button-border-radius-bottom-left: 10rem; --dialog-button-border-radius-bottom-right: 10rem; --dialog-button-border-radius-top-left: 10rem; --dialog-button-border-radius-top-right: 10rem; --dialog-card-border-radius-bottom-left: 4px; --dialog-card-border-radius-bottom-right: 4px; --dialog-card-border-radius-top-left: 4px; --dialog-card-border-radius-top-right: 4px; --dialog-backdrop-background-color: #000; --dialog-backdrop-background-opacity: .7; --content-blocker-text-color: var(--text-color); --content-blocker-border-radius-top-left: var(--radius); --content-blocker-border-radius-top-right: var(--radius); --content-blocker-border-radius-bottom-left: var(--radius); --content-blocker-border-radius-bottom-right: var(--radius); } .brlbs-cmpnt-container :where(*) { font-weight: var(--base-font-weight); } .brlbs-cmpnt-container .brlbs-cmpnt-btn:hover { } .brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-main { margin-inline: auto!important; max-width: 30rem; } #BorlabsCookieBox .brlbs-cmpnt-container :is(.brlbs-text-2xl) { } .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-buttons .brlbs-cmpnt-cb-btn { border-radius: 10rem; } /* @end */ /* @group ACCESSIBILITY */ /* ACCESSIBILITY */ .sr-only { position: absolute; width: .0625rem; height: .0625rem; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .sr-only-focusable { transition: all 0s ease; } .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } .skip-link:focus { position: absolute; top: 0; left: 0; width: auto; height: auto; padding: 5px; margin: 0; overflow: visible; clip: auto; z-index: 100; color: #FFF; background: var(--primary-color); line-height: 1; } /* @end */ /* @group ANIMATIONS */ /* ANIMATIONS ---------------------------------------------------------------------------------*/ /* https://github.com/daneden/animate.css */ .animated { animation-duration: 1s; animation-fill-mode: both; animation-timing-function: ease-in-out; } .animated.infinite { animation-iteration-count: infinite; } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .fadeIn { animation-name: fadeIn; } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } 100% { opacity: 1; transform: none; } } .fadeInDown { animation-name: fadeInDown; } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 100% { opacity: 1; transform: none; } } .fadeInUp { animation-name: fadeInUp; } /* @end */ /* @group UTILITES */ /* UTILITES ---------------------------------------------------------------------------------*/ .mt-0 { margin-top: 0!important; } .mt-5 { margin-top: 5px!important; } .mt-10 { margin-top: 10px!important; } .mt-20 { margin-top: 20px!important; } .mt-30 { margin-top: 30px!important; } .mt-40 { margin-top: 40px!important; } .mt-50 { margin-top: 50px!important; } .mt-60 { margin-top: 60px!important; } .mt-70 { margin-top: 70px!important; } .mt-80 { margin-top: 80px!important; } .mt-90 { margin-top: 90px!important; } .mt-100 { margin-top: 100px!important; } .mt-110 { margin-top: 110px!important; } .mt-120 { margin-top: 120px!important; } .mt-130 { margin-top: 130px!important; } .mt-140 { margin-top: 140px!important; } .mt-150 { margin-top: 150px!important; } .mb-0 { margin-bottom: 0!important; } .mb-5 { margin-bottom: 5px!important; } .mb-10 { margin-bottom: 10px!important; } .mb-20 { margin-bottom: 20px!important; } .mb-30 { margin-bottom: 30px!important; } .mb-40 { margin-bottom: 40px!important; } .mb-50 { margin-bottom: 50px!important; } .mb-60 { margin-bottom: 60px!important; } .mb-70 { margin-bottom: 70px!important; } .mb-80 { margin-bottom: 80px!important; } .mb-90 { margin-bottom: 90px!important; } .mb-100 { margin-bottom: 100px!important; } .mb-110 { margin-bottom: 110px!important; } .mb-120 { margin-bottom: 120px!important; } .mb-130 { margin-bottom: 130px!important; } .mb-140 { margin-bottom: 140px!important; } .mb-150 { margin-bottom: 150px!important; } .ratio-1 { aspect-ratio: 1;} .ratio-1-1 { aspect-ratio: 1;} .ratio-3-2 { aspect-ratio: 3/2;} .ratio-2-3 { aspect-ratio: 2/3;} .ratio-3-4 { aspect-ratio: 3/4;} .ratio-4-3 { aspect-ratio: 4/3;} .ratio-16-9 { aspect-ratio: 16/9;} .min-w-100 { min-width: 100px; } .min-w-200 { min-width: 200px; } .min-w-300 { min-width: 300px; } .min-w-400 { min-width: 300px; } .min-w-500 { min-width: 500px; } .min-w-600 { min-width: 600px; } .min-w-700 { min-width: 700px; } .min-w-800 { min-width: 800px; } .min-w-900 { min-width: 900px; } .rounded-none { border-radius: 0; } .whitespace-nowrap { white-space: nowrap; } .hidden { display: none; } /* @end */ /* ------------------------------------------------------------------------------ MEDIA QUERIES ---------------------------------------------------------------------------------*/ @media screen and (max-width: 1136px) { body:after { content: "<1136"; position: fixed; top: 0; line-height: 1; padding: 5px; font-size: 11px; background: lawngreen; z-index: 1000; opacity: .8; display: none; /* AN/AUS*/ } } @media screen and (max-width: 1024px) { body:after { content: "<1024"; background: TAN; } } @media screen and (max-width: 840px) { body:after { content: "<840"; background: PINK; } } @media screen and (max-width: 600px) { body:after { content: "<600"; background: YELLOW; } } @media screen and (max-width: 360px) { body:after { content: "<360"; background: MAGENTA; } } /* END ---------------------------------------------------------------------------------*/