/* based on A Modern CSS Reset https://dev.to/hankchizljaw/a-modern-css-reset-6p3 */ /* Box sizing rules */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove default padding */ ul[class], ol[class] { padding: 0; } /* Remove default margin */ body, h1, h2, h3, h4, h5, h6, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; } /* Set core body defaults */ html { scroll-behavior: smooth; } body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; min-height: 100%; } /* Remove list styles on ul, ol elements with a class attribute */ ul[class], ol[class] { list-style: none; } /* A elements that don't have a class get default styles */ a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } /* Make images easier to work with */ img { max-width: 100%; display: block; height: auto; /* to image can be useful with svg images. I had some issues with brand logo and illustrations in content. */ } /* Natural flow and rhythm in articles by default */ article > * + * { margin-top: 1em; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Remove all animations and transitions for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { * { -webkit-animation-duration: 0.01ms !important; animation-duration: 0.01ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; -webkit-transition-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; /* animation: unset | revert | initial !important; transition: unset | revert | initial !important; scroll-behavior: unset | revert | initial !important; */ } } /* legacy reset styles */ a, a:hover, a:link, a:visited { color: inherit; } ul { list-style: none; } /* TODO maybe move to image module */ img { border: none; height: auto; line-height: 100%; outline: transparent solid 1px; vertical-align: top; box-user-select: none; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -ms-interpolation-mode: bicubic; } blockquote, q { quotes: "ÔÇ£" "ÔÇØ"; } q:lang(de) { quotes: "ÔÇ×" "ÔÇ£"; } blockquote::after, blockquote::before, q::after, q::before { content: ""; content: none; } /* TODO check if this legacy resets below are needed anymore */ abbr, address, article, aside, audio, b, blockquote, body, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video { /* margin : 0; */ /* padding : 0; */ /* border : none;*/ /* outline : 0;*/ background: 0 0; /* font-size : 100%; font-weight : 400; */ white-space: normal; /* line-height : 1.25em; */ vertical-align: top; } button, input, optgroup, option, select, textarea { margin: 0; padding: 0; /* font-family: inherit; font-size : inherit; font-style : inherit; font-weight: inherit; box-shadow : none */ } table { border-collapse: separate; border-spacing: 0; } caption, td, th { text-align: left; font-weight: 400; } /* custom media queries TODO rename to xs,sm,md,lg,xl */ /*noinspection CssInvalidAtRule*/ :root { /* Responsive sizes*/ --content-max-width-sm: 540px; --content-max-width-md: 720px; --content-max-width-lg: 980px; --content-max-width-xl: 1280px; --content-max-width-xxl: 1536px; --content-padding-xs: 10px; --content-padding-sm: 16px; --content-padding-md: 32px; --content-padding-lg: 42px; --content-padding-xl: 62px; --content-padding-xxl: 82px; --bg-opacity: 1; --grid-gap: 0px; --grid-auto-rows: minmax(100px, auto); /* Color palette!*/ /* Colors: !*/ --white: #ffffff; --black: #515151; --yellow: #fed443; --yellow-light: rgba(254, 212, 67, 0.45); --green: #98a232; --green-light: rgba(152, 162, 50, 0.35); --red: #e75137; --red-light: rgba(231, 81, 55, 0.25); --blue: #00b1e6; --blue-light: rgba(0, 177, 230, 0.25); --grey-light: #fafafa; --grey-lighter: #e1e1e1; --gray: #515154; --gray-medium: #868686; --gray-light: #f2f2f2; /* --unnamed-color-a5a81e: #A5A81E; */ /* brand colors */ --brand-color-primary: #fff; --brand-color-secondary: #fff; --brand-color-tertiary: #fff; --brand-color-dark: var(--gray); --white-color: var(--white, white); --dark-color: var(--black, black); --bright-color: var(--white); --neutral-color: var(--gray); --warn-color: var(--red); --success-color: var(--green); --brand-color-accent: var(--brand-color-primary, green); /* mixins*/ --input-border-color: var(--brand-color-primary, #a9a9a9); --input-border-color-focus: +var(--brand-color-primary, #a9a9a9); /* transitions */ --transition-all: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-color: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); --shadow-fx: 10px 10px 49px -10px rgba(0, 0, 0, 0.8); --perm-modal-shadow: 10px 10px 49px -10px rgba(0, 0, 0, 0.8); --shadow-fx-soft: 30px 30px 50px 0px rgba(0, 0, 0, 0.28); --balloon-color: var(--brand-color-primary, black); /* paddings */ --base-padding: 10px; --base-padding-lg-x: 110px; --base-padding-lg-y: 60px; /* colors */ --body-bg-color: #ffedd3; --base-text-color: var(--brand-color-dark, gray); /* navigation */ --font-size-nav-links-desktop: 14px; --font-size-nav-links-mobile: 14px; --letter-spacing-nav-links: 2.41px; --mobile-nav-padding: min(20px, 5vmin); /* Header Nav */ --nav-links-color: var(--white-color, gray); --nav-links-focus-color: var(--brand-color-primary, gray); --nav-links-font-size: 14px; --nav-links-font-weight: 400; --nav-links-line-height: 22px; --nav-links-text-transform: initial; --nav-links-gap: 4px; --nav-bg-color: #0f0b0f; --nav-header-border-color: transparent; --nav-panel-bg-color: var(--brand-color-primary, black); --nav-header-height-min: 80px; --nav-header-width: 130px; --nav-header-height: auto; --header-sm-height: 70px; /* logo + Navigation Header*/ --logo-size-desktop: 130px; /* Forms*/ --form-element-height: 38px; --form-field-text-color: var(--gray); --form-field-bg-color: var(--white-color); --form-field-bg-color-focus: var(--white-color); --form-field-border-color: #b2b2b2; --form-field-border-focus: var(--brand-color-primary, blue); --form-field-border-radius: 0.5rem; /* border radius */ --border-radius-lg: 26px; --border-radius-md: 16px; /* gaps */ --columns-gap: 1rem; /* horizontal line spacer */ --hr-style: solid; --hr-thickness: 1px; --hr-opacity: 0.4; --perm-hr-color: var(--neutral-color, gray); --perm-hr-style: var(--hr-style, solid); --perm-hr-thickness: var(--hr-thickness, 1px); --perm-hr-opacity: var(--hr-opacity, 0.4); /* --focus-outline : 3px dashed rgba(152, 162, 50, 0.55);*/ --focus-outline: 3px dashed rgba(0, 177, 230, 0.81); --focus-outline-offset: 0.3rem; /* Footer */ --footer-bg-color: white; /* Accordion */ --perm-accordion-background-color: transparent; --perm-accordion-hovercolor: white; --perm-accordion-text-color: var(--gray, #515151); --perm-accordion-padding: 30px; --perm-accordion-border-color: #999; --perm-accordion-header-font-size: 18px; /*Typography*/ --font-headlines: "Frank Ruhl Libre", sans-serif; --font-base: "Roboto", sans-serif; --base-font-size: 16px; --base-font-weight: 400; --base-line-height: 28px; --headlines-letter-spacing: 2.41px; --links-color: currentColor; --links-hover-color: var(--brand-color-primary, blue); --content-spacing-y-sm: 18px; --content-spacing-y-md: 18px; --content-spacing-y-lg: 18px; --p1-font-weight: var(--base-font-weight, 400); --p1-color: var(--gray-medium); --p1-font-family: var(--font-base); --p1-font-size-sm: var(--base-font-size); --p1-line-height-sm: var(--base-line-height); --p1-spacing-sm: 1px; --p1-font-size-md: var(--base-font-size); --p1-line-height-md: var(--base-line-height); --p1-spacing-md: 1px; --p1-font-size-lg: var(--base-font-size); --p1-line-height-lg: var(--base-line-height); --p1-spacing-lg: 1px; --p2-font-weight: 400; --p2-color: var(--gray-medium); --p2-font-family: var(--font-base); --p2-font-size-sm: 14px; --p2-line-height-sm: 20px; --p2-font-size-md: 14px; --p2-line-height-md: 20px; --p2-font-size-lg: 14px; --p2-line-height-lg: 20px; --p3-font-weight: 400; --p3-color: var(--gray-medium); --p3-font-family: var(--font-base); --p3-font-size-sm: 24px; --p3-line-height-sm: 28px; --p3-font-size-md: 28px; --p3-line-height-md: 20px; --p3-font-size-lg: 24px; --p3-line-height-lg: 28px; --p4-font-weight: 400; --p4-color: var(--gray-medium); --p4-font-family: var(--font-base); --p4-font-size-sm: 24px; --p4-line-height-sm: 28px; --p4-font-size-md: 28px; --p4-line-height-md: 20px; --p4-font-size-lg: 24px; --p4-line-height-lg: 28px; --p5-font-weight: 400; --p5-color: var(--gray-medium); --p5-font-family: var(--font-base); --p5-font-size-sm: 24px; --p5-line-height-sm: 28px; --p5-font-size-md: 28px; --p5-line-height-md: 20px; --p5-font-size-lg: 24px; --p5-line-height-lg: 28px; --p6-font-weight: 400; --p6-color: var(--gray-medium); --p6-font-family: var(--font-base); --p6-font-size-sm: 24px; --p6-line-height-sm: 28px; --p6-font-size-md: 28px; --p6-line-height-md: 20px; --p6-font-size-lg: 24px; --p6-line-height-lg: 28px; /* Headlines */ --h-base--font-family: var(--font-headlines); --h-base--font-weight: 700; --h-base--color: var(--dark-color); --h-base--font-size: 40px; --h-base--line-height: 44px; --h1-font-family: var(--font-headlines); --h1-font-weight: 400; --h1-color: var(--dark-color); --h1-text-transform: initial; --h1-font-size-sm: 40px; --h1-line-height-sm: 44px; --h1-line-spacing-sm: -0.32px; --h1-font-size-md: 40px; --h1-line-height-md: 38px; --h1-line-spacing-md: -0.32px; --h1-font-size-lg: 40px; --h1-line-height-lg: 44px; --h1-line-spacing-lg: -0.32px; --h2-font-family: var(--font-headlines); --h2-font-weight: 400; --h2-color: var(--dark-color); --h2-text-transform: initial; --h2-font-size-sm: 20px; --h2-line-height-sm: 34px; --h2-line-spacing-sm: 0.24px; --h2-font-size-md: 20px; --h2-line-height-md: 34px; --h2-line-spacing-md: 0.24px; --h2-font-size-lg: 25px; --h2-line-height-lg: 34px; --h2-line-spacing-lg: 0.242px; --h3-font-family: var(--font-headlines); --h3-font-weight: 400; --h3-color: var(--dark-color); --h3-text-transform: initial; --h3-font-size-sm: 20px; --h3-line-height-sm: 28px; --h3-line-spacing-sm: 0.24px; --h3-font-size-md: 20px; --h3-line-height-md: 28px; --h3-line-spacing-md: 0.24px; --h3-font-size-lg: 24px; --h3-line-height-lg: 32px; --h3-line-spacing-lg: 0.24px; --h4-font-family: var(--font-headlines); --h4-font-weight: 400; --h4-color: var(--dark-color); --h4-text-transform: uppercase; --h4-font-size-sm: 14px; --h4-line-height-sm: 22px; --h4-line-spacing-sm: 2.41px; --h4-font-size-md: 14px; --h4-line-height-md: 28px; --h4-line-spacing-md: 2.41px; --h4-font-size-lg: 14px; --h4-line-height-lg: 22px; --h4-line-spacing-lg: 2.41px; --h5-font-family: var(--font-headlines); --h5-font-weight: 400; --h5-color: var(--dark-color); --h5-text-transform: uppercase; --h5-font-size-sm: 14px; --h5-line-height-sm: 22px; --h5-line-spacing-sm: 2.41px; --h5-font-size-md: 14px; --h5-line-height-md: 28px; --h5-line-spacing-md: 2.41px; --h5-font-size-lg: 14px; --h5-line-height-lg: 22px; --h5-line-spacing-lg: 2.41px; --h6-font-family: var(--font-headlines); --h6-font-weight: 400; --h6-color: var(--dark-color); --h6-text-transform: uppercase; --h6-font-size-sm: 14px; --h6-line-height-sm: 22px; --h6-line-spacing-sm: 2.41px; --h6-font-size-md: 14px; --h6-line-height-md: 28px; --h6-line-spacing-md: 2.41px; --h6-font-size-lg: 14px; --h6-line-height-lg: 22px; --h6-line-spacing-lg: 2.41px; /* Buttons */ --perm-button-height: 48px; --perm-button-font-size: 20px; --perm-button-font-weight: 400; --perm-button-line-height: 1.2; --perm-button-padding: 0.8ch 2ch; --perm-button-rounded: 28px; --perm-button-shadow: none; --perm-button-text-transform: uppercase; --perm-button-color: var(--white, white); --perm-button-color-hover: var(--brand-color-primary); --perm-button-bg-color: var(--brand-color-primary, white); --perm-button-bg-color-hover: var(--brand-color-primary, white); --perm-button-border-width: 2px; --perm-button-border-radius: 2px; --perm-button-border-color: var(--brand-color-primary, white); --perm-button-border-color-hover: var(--brand-color-primary, white); --perm-button-a-color: var(--white, #98a232); --perm-button-a-color-hover: var(--brand-color-primary); --perm-button-a-bg-color: var(--brand-color-primary, white); --perm-button-a-bg-color-hover: var(--white, white); --perm-button-a-border-color: var(--brand-color-primary, white); --perm-button-a-border-color-hover: var(--brand-color-primary, white); --perm-button-b-color: var(--white, #98a232); --perm-button-b-color-hover: var(--white); --perm-button-b-bg-color: var(--brand-color-primary, white); --perm-button-b-bg-color-hover: var(--brand-color-primary, white); --perm-button-b-border-color: var(--brand-color-primary, white); --perm-button-b-border-color-hover: var(--brand-color-primary, white); --perm-button-c-color: var(--brand-color-primary, #98a232); --perm-button-c-color-hover: var(--brand-color-primary); --perm-button-c-bg-color: var(--brand-color-primary, white); --perm-button-c-bg-color-hover: var(--brand-color-primary, white); --perm-button-c-border-color: var(--brand-color-primary, white); --perm-button-c-border-color-hover: var(--brand-color-primary, white); --perm-button-d-color: var(--brand-color-primary, #98a232); --perm-button-d-color-hover: var(--brand-color-primary); --perm-button-d-bg-color: var(--brand-color-primary, white); --perm-button-d-bg-color-hover: var(--brand-color-primary, white); --perm-button-d-border-color: var(--brand-color-primary, white); --perm-button-d-border-color-hover: var(--brand-color-primary, white); /* New Sep 2023: */ --content-vertical-offset: 0px; /* Modal */ --modal-overlay-background-color: #333333; --modal-overlay-background-opacity: 0.3; --modal-close-button-stroke: #333; --modal-close-button-fill: #ececf0; --perm--modal-closebtn-size: 40px; --perm--modal-opacity: 0.6; --perm--modal-shadow: 10px 10px 49px -10px rgba(1, 1, 1, 0.8); --perm-modal-corner-radius: 20px; } @media (prefers-contrast: more) { :root { --focus-outline: 3px dashed rgb(3, 101, 128); } } @media (min-width: 768px) { :root { --base-padding: 30px; } } @media (min-width: 992px) { :root { --base-padding: 30px; } } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .is-centered { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .rounded-lg { border-radius: var(--border-radius-lg); } .rounded-md { border-radius: var(--border-radius-md); } .rounded-sm { border-radius: var(--border-radius-sm); } .grid > .neos-contentcollection { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--grid-gap, 30px); } .center-content { display: grid !important; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; place-content: center; } .border-red { border-color: var(--red) !important; } .border-blue { border-color: var(--blue) !important; } .border-green { border-color: var(--green) !important; } .border-yellow { border-color: var(--yellow) !important; } .limiter-gray { opacity: 0.4; } .blur-fx { -webkit-filter: blur(4px); filter: blur(4px); } .is-uppercase { text-transform: uppercase; } /* copy paste */ @media (max-width: 767px) { } @media (min-width: 768px) { } @media (min-width: 1200px) { } @media (max-width: 47.8em) { body:not(.neos-backend) .hidden-on-mobile { display: none !important; } } @media (min-width: 768px) { body:not(.neos-backend) .hidden-on-tablets { display: none !important; } } @media (min-width: 1200px) { body:not(.neos-backend) .hidden-on-tablets { display: initial !important; } body:not(.neos-backend) .hidden-on-desktop { display: none !important; } } @font-face { font-family: "Frank Ruhl Libre"; src: url("/_Resources/Static/Packages/permanent.basic/assets/fonts/dm-sans-v11-latin-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/_Resources/Static/Packages/permanent.basic/assets/fonts/dm-sans-v11-latin-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/_Resources/Static/Packages/permanent.basic/assets/fonts/dm-sans-v11-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } html, body { color: var(--base-text-color); font-family: var(--font-base); font-size: var(--base-font-size); line-height: var(--base-line-height); letter-spacing: 0px; word-spacing: 0px; -webkit-font-feature-settings: normal; font-feature-settings: normal; font-variant: normal; font-style: normal; font-weight: normal; text-transform: none; text-indent: 0px; vertical-align: baseline; text-align: left; } strong, b, p strong, p b { font-weight: bold; } /* TODO clean up selectors below! */ span, select, option, form, fieldset, table, tr, td, textarea, input, button, label, li, p, .p1, .p1 p, .p1 p, .p1 p, .dc7__type__p1, .button-component .button, .is-type-a .button, .is-type-b .button, .is-type-c .button, .is-type-d .button, #content .cron-formbuilder-plugin > button, #content .cron-formbuilder-plugin > button, .om3__segment__nform button, .om3__segment__nform button, .p2, .text-component.p2 p, .p2 p, .p2 p, .dc7__type__p2, .p3, .text-component.p3 p, .p3 p, .p3 p, .dc7__type__p3, .p4, .text-component.p4 p, .p4 p, .p4 p, .dc7__type__p4, .p5, .text-component.p5 p, .p5 p, .p5 p, .dc7__type__p5, .p6, .text-component.p6 p, .p6 p, .p6 p, .dc7__type__p6, h1, .h1, .dc7__type__h1, h2, .h2, .dc7__type__h2, h3, .h3, .dc7__type__h3, h4, .om3__segment__nform label, .om3__segment__nform label, .om3__segment__nform h3, .om3__segment__nform h3, .h4, .dc7__type__h4, h5, .h5, .dc7__type__h5, h6, .h6, .dc7__type__h6, .content-footer, .content_menu .navbar li { font-size: var(--p1-font-size-sm); line-height: var(--p1-line-height-sm); letter-spacing: var(--p1-spacing-sm); } span a, select a, option a, form a, fieldset a, table a, tr a, td a, textarea a, input a, button a, label a, li a, p a, .p1 a, .p1 p a, .p1 p a, .p1 p a, .dc7__type__p1 a, .button-component .button a, .is-type-a .button a, .is-type-b .button a, .is-type-c .button a, .is-type-d .button a, #content .cron-formbuilder-plugin > button a, #content .cron-formbuilder-plugin > button a, .om3__segment__nform button a, .om3__segment__nform button a, .p2 a, .text-component.p2 p a, .p2 p a, .p2 p a, .dc7__type__p2 a, .p3 a, .text-component.p3 p a, .p3 p a, .p3 p a, .dc7__type__p3 a, .p4 a, .text-component.p4 p a, .p4 p a, .p4 p a, .dc7__type__p4 a, .p5 a, .text-component.p5 p a, .p5 p a, .p5 p a, .dc7__type__p5 a, .p6 a, .text-component.p6 p a, .p6 p a, .p6 p a, .dc7__type__p6 a, h1 a, .h1 a, .dc7__type__h1 a, h2 a, .h2 a, .dc7__type__h2 a, h3 a, .h3 a, .dc7__type__h3 a, h4 a, .om3__segment__nform label a, .om3__segment__nform label a, .om3__segment__nform h3 a, .om3__segment__nform h3 a, .h4 a, .dc7__type__h4 a, h5 a, .h5 a, .dc7__type__h5 a, h6 a, .h6 a, .dc7__type__h6 a, .content-footer a, .content_menu .navbar li a { text-decoration: none; color: var(--links-color, currentColor); } span a:hover, select a:hover, option a:hover, form a:hover, fieldset a:hover, table a:hover, tr a:hover, td a:hover, textarea a:hover, input a:hover, button a:hover, label a:hover, li a:hover, p a:hover, .p1 a:hover, .p1 p a:hover, .p1 p a:hover, .p1 p a:hover, .dc7__type__p1 a:hover, .button-component .button a:hover, .is-type-a .button a:hover, .is-type-b .button a:hover, .is-type-c .button a:hover, .is-type-d .button a:hover, #content .cron-formbuilder-plugin > button a:hover, #content .cron-formbuilder-plugin > button a:hover, .om3__segment__nform button a:hover, .om3__segment__nform button a:hover, .p2 a:hover, .text-component.p2 p a:hover, .p2 p a:hover, .p2 p a:hover, .dc7__type__p2 a:hover, .p3 a:hover, .text-component.p3 p a:hover, .p3 p a:hover, .p3 p a:hover, .dc7__type__p3 a:hover, .p4 a:hover, .text-component.p4 p a:hover, .p4 p a:hover, .p4 p a:hover, .dc7__type__p4 a:hover, .p5 a:hover, .text-component.p5 p a:hover, .p5 p a:hover, .p5 p a:hover, .dc7__type__p5 a:hover, .p6 a:hover, .text-component.p6 p a:hover, .p6 p a:hover, .p6 p a:hover, .dc7__type__p6 a:hover, h1 a:hover, .h1 a:hover, .dc7__type__h1 a:hover, h2 a:hover, .h2 a:hover, .dc7__type__h2 a:hover, h3 a:hover, .h3 a:hover, .dc7__type__h3 a:hover, h4 a:hover, .om3__segment__nform label a:hover, .om3__segment__nform label a:hover, .om3__segment__nform h3 a:hover, .om3__segment__nform h3 a:hover, .h4 a:hover, .dc7__type__h4 a:hover, h5 a:hover, .h5 a:hover, .dc7__type__h5 a:hover, h6 a:hover, .h6 a:hover, .dc7__type__h6 a:hover, .content-footer a:hover, .content_menu .navbar li a:hover { text-decoration: underline; -webkit-text-decoration-color: var(--brand-color-primary, blue); text-decoration-color: var(--brand-color-primary, blue); text-decoration-thickness: 2px; text-underline-offset: 0.1em; } @media (min-width: 768px) { span, select, option, form, fieldset, table, tr, td, textarea, input, button, label, li, p, .p1, .p1 p, .p1 p, .p1 p, .dc7__type__p1, .button-component .button, .is-type-a .button, .is-type-b .button, .is-type-c .button, .is-type-d .button, #content .cron-formbuilder-plugin > button, #content .cron-formbuilder-plugin > button, .om3__segment__nform button, .om3__segment__nform button, .p2, .text-component.p2 p, .p2 p, .p2 p, .dc7__type__p2, .p3, .text-component.p3 p, .p3 p, .p3 p, .dc7__type__p3, .p4, .text-component.p4 p, .p4 p, .p4 p, .dc7__type__p4, .p5, .text-component.p5 p, .p5 p, .p5 p, .dc7__type__p5, .p6, .text-component.p6 p, .p6 p, .p6 p, .dc7__type__p6, h1, .h1, .dc7__type__h1, h2, .h2, .dc7__type__h2, h3, .h3, .dc7__type__h3, h4, .om3__segment__nform label, .om3__segment__nform label, .om3__segment__nform h3, .om3__segment__nform h3, .h4, .dc7__type__h4, h5, .h5, .dc7__type__h5, h6, .h6, .dc7__type__h6, .content-footer, .content_menu .navbar li { font-size: var(--p1-font-size-md); line-height: var(--p1-line-height-md); } } @media (min-width: 992px) { span, select, option, form, fieldset, table, tr, td, textarea, input, button, label, li, p, .p1, .p1 p, .p1 p, .p1 p, .dc7__type__p1, .button-component .button, .is-type-a .button, .is-type-b .button, .is-type-c .button, .is-type-d .button, #content .cron-formbuilder-plugin > button, #content .cron-formbuilder-plugin > button, .om3__segment__nform button, .om3__segment__nform button, .p2, .text-component.p2 p, .p2 p, .p2 p, .dc7__type__p2, .p3, .text-component.p3 p, .p3 p, .p3 p, .dc7__type__p3, .p4, .text-component.p4 p, .p4 p, .p4 p, .dc7__type__p4, .p5, .text-component.p5 p, .p5 p, .p5 p, .dc7__type__p5, .p6, .text-component.p6 p, .p6 p, .p6 p, .dc7__type__p6, h1, .h1, .dc7__type__h1, h2, .h2, .dc7__type__h2, h3, .h3, .dc7__type__h3, h4, .om3__segment__nform label, .om3__segment__nform label, .om3__segment__nform h3, .om3__segment__nform h3, .h4, .dc7__type__h4, h5, .h5, .dc7__type__h5, h6, .h6, .dc7__type__h6, .content-footer, .content_menu .navbar li { font-size: var(--p1-font-size-lg); line-height: var(--p1-line-height-lg); } } /* PARAGRAPHS */ p + * { margin-top: var(--content-spacing-y-sm); } @media (min-width: 768px) { p + * { margin-top: var(--content-spacing-y-md); } } @media (min-width: 992px) { p + * { margin-top: var(--content-spacing-y-lg); } } .p1, .text-component.p1 p, .p1 p, .p1 li, .p1 .content p, .dc7__type__p1 { color: var(--p1-color); font-weight: var(--p1-font-weight); font-size: var(--p1-font-size-sm); line-height: var(--p1-line-height-sm); font-family: var(--p1-font-family); } @media (min-width: 768px) { .p1, .text-component.p1 p, .p1 p, .p1 li, .p1 .content p, .dc7__type__p1 { font-size: var(--p1-font-size-md); line-height: var(--p1-line-height-md); } } @media (min-width: 992px) { .p1, .text-component.p1 p, .p1 p, .p1 li, .p1 .content p, .dc7__type__p1 { font-size: var(--p1-font-size-lg); line-height: var(--p1-line-height-lg); } } .p2, .text-component.p2 p, .p2 p, .p2 li, .p2 .content p, .dc7__type__p2 { color: var(--p2-color); font-weight: var(--p2-font-weight); font-size: var(--p2-font-size-sm); line-height: var(--p2-line-height-sm); font-family: var(--p2-font-family); } @media (min-width: 768px) { .p2, .text-component.p2 p, .p2 p, .p2 li, .p2 .content p, .dc7__type__p2 { font-size: var(--p2-font-size-md); line-height: var(--p2-line-height-md); } } @media (min-width: 992px) { .p2, .text-component.p2 p, .p2 p, .p2 li, .p2 .content p, .dc7__type__p2 { font-size: var(--p2-font-size-lg); line-height: var(--p2-line-height-lg); } } .p3, .text-component.p3 p, .p3 p, .p3 li, .p3 .content p, .dc7__type__p3 { color: var(--p3-color); font-weight: var(--p3-font-weight); font-size: var(--p3-font-size-sm); line-height: var(--p3-line-height-sm); font-family: var(--p3-font-family); } @media (min-width: 768px) { .p3, .text-component.p3 p, .p3 p, .p3 li, .p3 .content p, .dc7__type__p3 { font-size: var(--p3-font-size-md); line-height: var(--p3-line-height-md); } } @media (min-width: 992px) { .p3, .text-component.p3 p, .p3 p, .p3 li, .p3 .content p, .dc7__type__p3 { font-size: var(--p3-font-size-lg); line-height: var(--p3-line-height-lg); } } .p4, .text-component.p4 p, .p4 p, .p4 .content p, .dc7__type__p4 { color: var(--p4-color); font-weight: var(--p4-font-weight); font-size: var(--p4-font-size-sm); line-height: var(--p4-line-height-sm); font-family: var(--p4-font-family); } @media (min-width: 768px) { .p4, .text-component.p4 p, .p4 p, .p4 .content p, .dc7__type__p4 { font-size: var(--p4-font-size-md); line-height: var(--p4-line-height-md); } } @media (min-width: 992px) { .p4, .text-component.p4 p, .p4 p, .p4 .content p, .dc7__type__p4 { font-size: var(--p4-font-size-lg); line-height: var(--p4-line-height-lg); } } .p5, .text-component.p5 p, .p5 p, .p5 .content p, .dc7__type__p5 { color: var(--p5-color); font-weight: var(--p5-font-weight); font-size: var(--p5-font-size-sm); line-height: var(--p5-line-height-sm); font-family: var(--p5-font-family); } @media (min-width: 768px) { .p5, .text-component.p5 p, .p5 p, .p5 .content p, .dc7__type__p5 { font-size: var(--p5-font-size-md); line-height: var(--p5-line-height-md); } } @media (min-width: 992px) { .p5, .text-component.p5 p, .p5 p, .p5 .content p, .dc7__type__p5 { font-size: var(--p5-font-size-lg); line-height: var(--p5-line-height-lg); } } .p6, .text-component.p6 p, .p6 p, .p6 .content p, .dc7__type__p6 { color: var(--p6-color); font-weight: var(--p6-font-weight); font-size: var(--p6-font-size-sm); line-height: var(--p6-line-height-sm); font-family: var(--p6-font-family); } @media (min-width: 768px) { .p6, .text-component.p6 p, .p6 p, .p6 .content p, .dc7__type__p6 { font-size: var(--p6-font-size-md); line-height: var(--p6-line-height-md); } } @media (min-width: 992px) { .p6, .text-component.p6 p, .p6 p, .p6 .content p, .dc7__type__p6 { font-size: var(--p6-font-size-lg); line-height: var(--p6-line-height-lg); } } /* HEADLINES */ h1, .h1, .dc7__type__h1, h2, .h2, .dc7__type__h2, h3, .h3, .dc7__type__h3, h4, .h4, .dc7__type__h4, h5, .h5, .dc7__type__h5, h6, .h6, .dc7__type__h6 { font-family: var(--font-headlines); font-size: var(--h-base--font-size); line-height: var(--h-base--line-heigh); font-weight: var(--h-base--font-weight); color: var(--h-base--color); word-wrap: break-word; } h1 a, .h1 a, .dc7__type__h1 a, h2 a, .h2 a, .dc7__type__h2 a, h3 a, .h3 a, .dc7__type__h3 a, h4 a, .h4 a, .dc7__type__h4 a, h5 a, .h5 a, .dc7__type__h5 a, h6 a, .h6 a, .dc7__type__h6 a { } h1, .h1, .dc7__type__h1 { font-family: var(--h1-font-family); color: var(--h1-color); line-height: var(--h1-line-height-sm); font-size: var(--h1-font-size-sm); font-weight: var(--h1-font-weight); letter-spacing: var(--h1-line-spacing-sm); text-transform: var(--h1-text-transform); } @media (min-width: 768px) { h1, .h1, .dc7__type__h1 { font-size: var(--h1-font-size-md); line-height: var(--h1-line-height-md); letter-spacing: var(--h1-line-spacing-md); } } @media (min-width: 992px) { h1, .h1, .dc7__type__h1 { font-size: var(--h1-font-size-lg); line-height: var(--h1-line-height-lg); letter-spacing: var(--h1-line-spacing-lg); } } h2, .h2, .dc7__type__h2 { font-family: var(--h2-font-family); color: var(--h2-color); line-height: var(--h2-line-height-sm); font-size: var(--h2-font-size-sm); font-weight: var(--h2-font-weight); letter-spacing: var(--h2-line-spacing-sm); text-transform: var(--h2-text-transform); } @media (min-width: 768px) { h2, .h2, .dc7__type__h2 { font-size: var(--h2-font-size-md); line-height: var(--h2-line-height-md); letter-spacing: var(--h2-line-spacing-md); } } @media (min-width: 992px) { h2, .h2, .dc7__type__h2 { font-size: var(--h2-font-size-lg); line-height: var(--h2-line-height-lg); letter-spacing: var(--h2-line-spacing-lg); } } h3, .h3, .dc7__type__h3 { font-family: var(--h3-font-family); color: var(--h3-color); line-height: var(--h3-line-height-sm); font-size: var(--h3-font-size-sm); font-weight: var(--h3-font-weight); letter-spacing: var(--h3-line-spacing-sm); text-transform: var(--h3-text-transform); } @media (min-width: 768px) { h3, .h3, .dc7__type__h3 { font-size: var(--h3-font-size-md); line-height: var(--h3-line-height-md); letter-spacing: var(--h3-line-spacing-md); } } @media (min-width: 992px) { h3, .h3, .dc7__type__h3 { font-size: var(--h3-font-size-lg); line-height: var(--h3-line-height-lg); letter-spacing: var(--h3-line-spacing-lg); } } h4, .h4, .dc7__type__h4, .om3__segment__nform label, .om3__segment__nform h4 { font-family: var(--h4-font-family); color: var(--h4-color); line-height: var(--h4-line-height-sm); font-size: var(--h4-font-size-sm); font-weight: var(--h4-font-weight); letter-spacing: var(--h4-line-spacing-sm); text-transform: var(--h4-text-transform); } @media (min-width: 768px) { h4, .h4, .dc7__type__h4, .om3__segment__nform label, .om3__segment__nform h4 { font-size: var(--h4-font-size-md); line-height: var(--h4-line-height-md); letter-spacing: var(--h4-line-spacing-md); } } @media (min-width: 992px) { h4, .h4, .dc7__type__h4, .om3__segment__nform label, .om3__segment__nform h4 { font-size: var(--h4-font-size-lg); line-height: var(--h4-line-height-lg); letter-spacing: var(--h4-line-spacing-lg); } } h5, .h5, .dc7__type__h5 { font-family: var(--h5-font-family); color: var(--h5-color); line-height: var(--h5-line-height-sm); font-size: var(--h5-font-size-sm); font-weight: var(--h5-font-weight); letter-spacing: var(--h5-line-spacing-sm); text-transform: var(--h5-text-transform); } @media (min-width: 768px) { h5, .h5, .dc7__type__h5 { font-size: var(--h5-font-size-md); line-height: var(--h5-line-height-md); letter-spacing: var(--h5-line-spacing-md); } } @media (min-width: 992px) { h5, .h5, .dc7__type__h5 { font-size: var(--h5-font-size-lg); line-height: var(--h5-line-height-lg); letter-spacing: var(--h5-line-spacing-lg); } } h6, .h6, .dc7__type__h6 { font-family: var(--h6-font-family); color: var(--h6-color); line-height: var(--h6-line-height-sm); font-size: var(--h6-font-size-sm); font-weight: var(--h6-font-weight); letter-spacing: var(--h6-line-spacing-sm); text-transform: var(--h6-text-transform); } @media (min-width: 768px) { h6, .h6, .dc7__type__h6 { font-size: var(--h6-font-size-md); line-height: var(--h6-line-height-md); letter-spacing: var(--h6-line-spacing-md); } } @media (min-width: 992px) { h6, .h6, .dc7__type__h6 { font-size: var(--h6-font-size-lg); line-height: var(--h6-line-height-lg); letter-spacing: var(--h6-line-spacing-lg); } } a:active { outline: none; } /*Remove the outline from links on :active only*/ html, body { background-color: var(--body-bg-color, grey); max-width: 100vw; } body.has-modal { overflow-y: hidden; margin-right: 15px; } .page-content { min-height: 100vh; padding: 0; padding-top: var(--content-vertical-offset, 0); } .dc7__modal__bs_in_modal__true .page-content { padding: 0; } .dc7__modal__bs_in_modal__true .page-content > .neos-contentcollection > .clip-container { /*TODO SHAME!*/ padding-top: 0 !important; top: 0 !important; } /*margin: 0 auto;*/ .page-content > .neos-contentcollection > * + * { margin-top: 1.5rem; } @media (max-width: 767px) { } @media (min-width: 768px) { } @media (min-width: 992px) { } /* activate hypoenation */ .content { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .dc7__modal__bs_in_modal__true .content { top: 0 !important; padding-top: 0 !important; /* top: 0px !important;*/ } /* Z index layering */ .dc7__layout__zindex__1-5 { z-index: 10; } .dc7__layout__zindex__2-5 { z-index: 20; } .dc7__layout__zindex__3-5 { z-index: 30; } .dc7__layout__zindex__4-5 { z-index: 40; } .dc7__layout__zindex__5-5 { z-index: 50; } .is-position-relative { position: relative !important; } .is-position-absolute { position: absolute !important; left: auto; right: auto; top: auto; bottom: auto; } .is-position-fixed { position: fixed; left: auto; right: auto; top: auto; bottom: auto; } /* .content { min-height: 100vh; } */ .component:not(.clip-container) { position: relative; display: block; background-clip: padding-box; padding: var(--base-padding, 30px); } @media (max-width: 767px) { .component:not(.clip-container) { padding: var(--base-padding, 30px); } } @media (min-width: 768px) { .component:not(.clip-container) { padding: var(--base-padding, 30px); } } @media (min-width: 1200px) { .component:not(.clip-container) { padding: var(--base-padding, 30px); } } .component > .neos-contentcollection, .component > a > .neos-contentcollection { width: 100%; } .is-container { /* TODO use css variables*/ max-width: var(--container-max-width-large, 100vw); } @media (min-width: 768px) { .is-container { max-width: var(--container-max-width-tab, 100vw); } } .arrow-pagescroll-up { z-index: 1010; position: fixed !important; display: inline-block; overflow: hidden; width: 40px; height: 40px; bottom: 0; right: 0; color: var(--brand-color-primary, white); /*opacity:0;*/ } .arrow-pagescroll-up svg { width: 100%; height: 100%; /* TODO DRY put shadow css variable */ -webkit-filter: drop-shadow(2px 2px 8px rgba(10, 101, 0, 0.6)); filter: drop-shadow(2px 2px 8px rgba(10, 101, 0, 0.6)); } .arrow-pagescroll-up svg path { stroke: var(--brand-color-primary, blue); } .arrow-pagescroll-up { -webkit-transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1) translate3d(0, -100%, 0); transform: scale(1) translate3d(0, -100%, 0); } /*mix-blend-mode:exclusion;*/ .arrow-pagescroll-up.is-visible { opacity: 1; -webkit-transform: scale(1) translate3d(0, 0%, 0); transform: scale(1) translate3d(0, 0%, 0); } perm-html { padding: 0 !important; } /* FOOTER! ! */ .content-footer { position: relative; background-color: var(--footer-bg-color, cornflowerblue); width: 100%; overflow: hidden; padding: var(--footer-padding-top, var(--base-padding, 0)) 0; } .dc7__modal__bs_in_modal__true .content-footer { display: none !important; } .content-footer a.perm-image:hover img { -webkit-transform: none !important; transform: none !important; } .grid-container > .neos-contentcollection { display: grid; grid-template-columns: var(--grid-template-columns, repeat(12, 1fr)); grid-auto-rows: var(--grid-auto-rows, auto); /* grid-template-rows: none; grid-auto-rows: var(--grid-template-rows,auto);*/ /*HERE YOU CAN SET YOUR CUSTOM COLUMN GAP*/ grid-gap: var(--grid-gap, 1vmax); gap: var(--grid-gap, 1vmax); /*HERE YOU CAN SET YOUR CUSTOM ROW GAP*/ /*grid-row-gap: var(--grid-gap,1vmax);*/ /*grid-auto-flow DETERMINES HOW THE GRID WILL FILL UP. IF YOU ENABLE THE grid-auto-flow PROPERTY, grid-column-gap WILL HAVE NO EFFECT ON THE AUTO-GENERATED ROWS, SO YOU WILL NEED TO SET A MARGIN TOP &/OR BOTTOM TO THE ELEMENTS INSIDE THE GRID CONTAINER IF YOU WANT A ROW GAP. dense tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later, row TELLS THE AUTO-PLACEMENT ALGORITHM TO FILL IN EACH ROW IN TURN, ADDING NEW ROWS AS NECESSARY column TELLS THE AUTO-PLACEMENT ALGORITHM TO FILL IN EACH COLUMN IN TURN, ADDING NEW COLUMNS AS NECESSARY */ grid-auto-flow: dense; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xs-justify-items-start { -ms-justify-items: start; justify-items: start; } .col-xs-justify-items-end { -ms-justify-items: end; justify-items: end; } .col-xs-justify-items-center { -ms-justify-items: center; justify-items: center; } .col-xs-justify-items-stretch { -ms-justify-items: stretch; justify-items: stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xs-align-items-start { -ms-align-items: start; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .col-xs-align-items-end { -ms-align-items: end; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } .col-xs-align-items-center { -ms-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .col-xs-align-items-stretch { -ms-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xs-justify-content-start { -ms-justify-content: start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } .col-xs-justify-content-end { -ms-justify-content: end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .col-xs-justify-content-center { -ms-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .col-xs-justify-content-stretch { -ms-justify-content: stretch; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; } .col-xs-justify-content-space-around { -ms-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } .col-xs-justify-content-space-between { -ms-justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .col-xs-justify-content-space-evenly { -ms-justify-content: space-evenly; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xs-align-content-start { -ms-align-content: start; -ms-flex-line-pack: start; align-content: start; } .col-xs-align-content-end { -ms-align-content: end; -ms-flex-line-pack: end; align-content: end; } .col-xs-align-content-center { -ms-align-content: center; -ms-flex-line-pack: center; align-content: center; } .col-xs-align-content-stretch { -ms-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .col-xs-align-content-space-around { -ms-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; } .col-xs-align-content-space-between { -ms-align-content: start; -ms-flex-line-pack: justify; align-content: space-between; } .col-xs-align-content-space-evenly { -ms-align-content: end; -ms-flex-line-pack: space-evenly; align-content: space-evenly; } .col-xs-grid-auto-flow-row { -ms-align-content: center; grid-auto-flow: row; } .col-xs-grid-auto-flow-column { -ms-align-content: stretch; grid-auto-flow: column; } .col-xs-grid-auto-flow-dense { -ms-align-content: space-around; grid-auto-flow: dense; } .col-xs-1 { -ms-grid-column-end: span 1; grid-column-end: span 1; } .col-xs-2 { -ms-grid-column-end: span 2; grid-column-end: span 2; } .col-xs-3 { -ms-grid-column-end: span 3; grid-column-end: span 3; } .col-xs-4 { -ms-grid-column-end: span 4; grid-column-end: span 4; } .col-xs-5 { -ms-grid-column-end: span 5; grid-column-end: span 5; } .col-xs-6 { -ms-grid-column-end: span 6; grid-column-end: span 6; } .col-xs-7 { -ms-grid-column-end: span 7; grid-column-end: span 7; } .col-xs-8 { -ms-grid-column-end: span 8; grid-column-end: span 8; } .col-xs-9 { -ms-grid-column-end: span 9; grid-column-end: span 9; } .col-xs-10 { -ms-grid-column-end: span 10; grid-column-end: span 10; } .col-xs-11 { -ms-grid-column-end: span 11; grid-column-end: span 11; } .col-xs-12 { -ms-grid-column-end: span 12; grid-column-end: span 12; } .col-xs-offset-2 { -ms-grid-column-start: 2; grid-column-start: 2; } .col-xs-offset-3 { -ms-grid-column-start: 3; grid-column-start: 3; } .col-xs-offset-4 { -ms-grid-column-start: 4; grid-column-start: 4; } .col-xs-offset-5 { -ms-grid-column-start: 5; grid-column-start: 5; } .col-xs-offset-6 { -ms-grid-column-start: 6; grid-column-start: 6; } .col-xs-offset-7 { -ms-grid-column-start: 7; grid-column-start: 7; } .col-xs-offset-8 { -ms-grid-column-start: 8; grid-column-start: 8; } .col-xs-offset-9 { -ms-grid-column-start: 9; grid-column-start: 9; } .col-xs-offset-10 { -ms-grid-column-start: 10; grid-column-start: 10; } .col-xs-offset-11 { -ms-grid-column-start: 11; grid-column-start: 11; } .col-xs-offset-12 { -ms-grid-column-start: 12; grid-column-start: 12; } .col-xs-justify-self-start { -ms-justify-self: start; justify-self: start; } .col-xs-justify-self-end { -ms-justify-self: end; justify-self: end; } .col-xs-justify-self-center { -ms-justify-self: center; justify-self: center; } .col-xs-justify-self-stretch { -ms-justify-self: stretch; justify-self: stretch; } .col-xs-align-self-start { -ms-justify-self: start; -ms-flex-item-align: start; align-self: start; } .col-xs-align-self-end { -ms-align-self: end; -ms-flex-item-align: end; align-self: end; } .col-xs-align-self-center { -ms-align-self: center; -ms-flex-item-align: center; align-self: center; } .col-xs-align-self-stretch { -ms-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } @media (max-width: 767px) { /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-sm-justify-items-start { -ms-justify-items: start; justify-items: start; } .col-sm-justify-items-end { -ms-justify-items: end; justify-items: end; } .col-sm-justify-items-center { -ms-justify-items: center; justify-items: center; } .col-sm-justify-items-stretch { -ms-justify-items: stretch; justify-items: stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-sm-align-items-start { -ms-align-items: start; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .col-sm-align-items-end { -ms-align-items: end; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } .col-sm-align-items-center { -ms-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .col-sm-align-items-stretch { -ms-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-sm-justify-content-start { -ms-justify-content: start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } .col-sm-justify-content-end { -ms-justify-content: end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .col-sm-justify-content-center { -ms-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .col-sm-justify-content-stretch { -ms-justify-content: stretch; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; } .col-sm-justify-content-space-around { -ms-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } .col-sm-justify-content-space-between { -ms-justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .col-sm-justify-content-space-evenly { -ms-justify-content: space-evenly; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-sm-align-content-start { -ms-align-content: start; -ms-flex-line-pack: start; align-content: start; } .col-sm-align-content-end { -ms-align-content: end; -ms-flex-line-pack: end; align-content: end; } .col-sm-align-content-center { -ms-align-content: center; -ms-flex-line-pack: center; align-content: center; } .col-sm-align-content-stretch { -ms-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .col-sm-align-content-space-around { -ms-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; } .col-sm-align-content-space-between { -ms-align-content: start; -ms-flex-line-pack: justify; align-content: space-between; } .col-sm-align-content-space-evenly { -ms-align-content: end; -ms-flex-line-pack: space-evenly; align-content: space-evenly; } .col-sm-grid-auto-flow-row { -ms-align-content: center; grid-auto-flow: row; } .col-sm-grid-auto-flow-column { -ms-align-content: stretch; grid-auto-flow: column; } .col-sm-grid-auto-flow-dense { -ms-align-content: space-around; grid-auto-flow: dense; } .col-sm-1 { -ms-grid-column-end: span 1; grid-column-end: span 1; } .col-sm-2 { -ms-grid-column-end: span 2; grid-column-end: span 2; } .col-sm-3 { -ms-grid-column-end: span 3; grid-column-end: span 3; } .col-sm-4 { -ms-grid-column-end: span 4; grid-column-end: span 4; } .col-sm-5 { -ms-grid-column-end: span 5; grid-column-end: span 5; } .col-sm-6 { -ms-grid-column-end: span 6; grid-column-end: span 6; } .col-sm-7 { -ms-grid-column-end: span 7; grid-column-end: span 7; } .col-sm-8 { -ms-grid-column-end: span 8; grid-column-end: span 8; } .col-sm-9 { -ms-grid-column-end: span 9; grid-column-end: span 9; } .col-sm-10 { -ms-grid-column-end: span 10; grid-column-end: span 10; } .col-sm-11 { -ms-grid-column-end: span 11; grid-column-end: span 11; } .col-sm-12 { grid-column-end: span 12; } .col-sm-offset-2 { -ms-grid-column-start: 2; grid-column-start: 2; } .col-sm-offset-3 { -ms-grid-column-start: 3; grid-column-start: 3; } .col-sm-offset-4 { -ms-grid-column-start: 4; grid-column-start: 4; } .col-sm-offset-5 { -ms-grid-column-start: 5; grid-column-start: 5; } .col-sm-offset-6 { -ms-grid-column-start: 6; grid-column-start: 6; } .col-sm-offset-7 { -ms-grid-column-start: 7; grid-column-start: 7; } .col-sm-offset-8 { -ms-grid-column-start: 8; grid-column-start: 8; } .col-sm-offset-9 { -ms-grid-column-start: 9; grid-column-start: 9; } .col-sm-offset-10 { -ms-grid-column-start: 10; grid-column-start: 10; } .col-sm-offset-11 { -ms-grid-column-start: 11; grid-column-start: 11; } .col-sm-offset-12 { -ms-grid-column-start: 12; grid-column-start: 12; } .col-sm-justify-self-start { -ms-justify-self: start; justify-self: start; } .col-sm-justify-self-end { -ms-justify-self: end; justify-self: end; } .col-sm-justify-self-center { -ms-justify-self: center; justify-self: center; } .col-sm-justify-self-stretch { -ms-justify-self: stretch; justify-self: stretch; } .col-sm-align-self-start { -ms-justify-self: start; -ms-flex-item-align: start; align-self: start; } .col-sm-align-self-end { -ms-align-self: end; -ms-flex-item-align: end; align-self: end; } .col-sm-align-self-center { -ms-align-self: center; -ms-flex-item-align: center; align-self: center; } .col-sm-align-self-stretch { -ms-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } } @media (min-width: 768px) { /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-md-justify-items-start { -ms-justify-items: start; justify-items: start; } .col-md-justify-items-end { -ms-justify-items: end; justify-items: end; } .col-md-justify-items-center { -ms-justify-items: center; justify-items: center; } .col-md-justify-items-stretch { -ms-justify-items: stretch; justify-items: stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-md-align-items-start { -ms-align-items: start; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .col-md-align-items-end { -ms-align-items: end; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } .col-md-align-items-center { -ms-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .col-md-align-items-stretch { -ms-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-md-justify-content-start { -ms-justify-content: start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } .col-md-justify-content-end { -ms-justify-content: end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .col-md-justify-content-center { -ms-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .col-md-justify-content-stretch { -ms-justify-content: stretch; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; } .col-md-justify-content-space-around { -ms-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } .col-md-justify-content-space-between { -ms-justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .col-md-justify-content-space-evenly { -ms-justify-content: space-evenly; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-md-align-content-start { -ms-align-content: start; -ms-flex-line-pack: start; align-content: start; } .col-md-align-content-end { -ms-align-content: end; -ms-flex-line-pack: end; align-content: end; } .col-md-align-content-center { -ms-align-content: center; -ms-flex-line-pack: center; align-content: center; } .col-md-align-content-stretch { -ms-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .col-md-align-content-space-around { -ms-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; } .col-md-align-content-space-between { -ms-align-content: start; -ms-flex-line-pack: justify; align-content: space-between; } .col-md-align-content-space-evenly { -ms-align-content: end; -ms-flex-line-pack: space-evenly; align-content: space-evenly; } .col-md-grid-auto-flow-row { -ms-align-content: center; grid-auto-flow: row; } .col-md-grid-auto-flow-column { -ms-align-content: stretch; grid-auto-flow: column; } .col-md-grid-auto-flow-dense { -ms-align-content: space-around; grid-auto-flow: dense; } .col-md-1 { -ms-grid-column-end: span 1; grid-column-end: span 1; } .col-md-2 { -ms-grid-column-end: span 2; grid-column-end: span 2; } .col-md-3 { -ms-grid-column-end: span 3; grid-column-end: span 3; } .col-md-4 { -ms-grid-column-end: span 4; grid-column-end: span 4; } .col-md-5 { -ms-grid-column-end: span 5; grid-column-end: span 5; } .col-md-6 { -ms-grid-column-end: span 6; grid-column-end: span 6; } .col-md-7 { -ms-grid-column-end: span 7; grid-column-end: span 7; } .col-md-8 { -ms-grid-column-end: span 8; grid-column-end: span 8; } .col-md-9 { -ms-grid-column-end: span 9; grid-column-end: span 9; } .col-md-10 { -ms-grid-column-end: span 10; grid-column-end: span 10; } .col-md-11 { -ms-grid-column-end: span 11; grid-column-end: span 11; } .col-md-12 { grid-column-end: span 12; } .col-md-offset-2 { -ms-grid-column-start: 2; grid-column-start: 2; } .col-md-offset-3 { -ms-grid-column-start: 3; grid-column-start: 3; } .col-md-offset-4 { -ms-grid-column-start: 4; grid-column-start: 4; } .col-md-offset-5 { -ms-grid-column-start: 5; grid-column-start: 5; } .col-md-offset-6 { -ms-grid-column-start: 6; grid-column-start: 6; } .col-md-offset-7 { -ms-grid-column-start: 7; grid-column-start: 7; } .col-md-offset-8 { -ms-grid-column-start: 8; grid-column-start: 8; } .col-md-offset-9 { -ms-grid-column-start: 9; grid-column-start: 9; } .col-md-offset-10 { -ms-grid-column-start: 10; grid-column-start: 10; } .col-md-offset-11 { -ms-grid-column-start: 11; grid-column-start: 11; } .col-md-offset-12 { -ms-grid-column-start: 12; grid-column-start: 12; } .col-md-justify-self-start { -ms-justify-self: start; justify-self: start; } .col-md-justify-self-end { -ms-justify-self: end; justify-self: end; } .col-md-justify-self-center { -ms-justify-self: center; justify-self: center; } .col-md-justify-self-stretch { -ms-justify-self: stretch; justify-self: stretch; } .col-md-align-self-start { -ms-justify-self: start; -ms-flex-item-align: start; align-self: start; } .col-md-align-self-end { -ms-align-self: end; -ms-flex-item-align: end; align-self: end; } .col-md-align-self-center { -ms-align-self: center; -ms-flex-item-align: center; align-self: center; } .col-md-align-self-stretch { -ms-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } } @media (min-width: 1200px) { /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xl-justify-items-start { -ms-justify-items: start; justify-items: start; } .col-xl-justify-items-end { -ms-justify-items: end; justify-items: end; } .col-xl-justify-items-center { -ms-justify-items: center; justify-items: center; } .col-xl-justify-items-stretch { -ms-justify-items: stretch; justify-items: stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xl-align-items-start { -ms-align-items: start; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .col-xl-align-items-end { -ms-align-items: end; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } .col-xl-align-items-center { -ms-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .col-xl-align-items-stretch { -ms-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xl-justify-content-start { -ms-justify-content: start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } .col-xl-justify-content-end { -ms-justify-content: end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .col-xl-justify-content-center { -ms-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .col-xl-justify-content-stretch { -ms-justify-content: stretch; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; } .col-xl-justify-content-space-around { -ms-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } .col-xl-justify-content-space-between { -ms-justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .col-xl-justify-content-space-evenly { -ms-justify-content: space-evenly; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xl-align-content-start { -ms-align-content: start; -ms-flex-line-pack: start; align-content: start; } .col-xl-align-content-end { -ms-align-content: end; -ms-flex-line-pack: end; align-content: end; } .col-xl-align-content-center { -ms-align-content: center; -ms-flex-line-pack: center; align-content: center; } .col-xl-align-content-stretch { -ms-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .col-xl-align-content-space-around { -ms-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; } .col-xl-align-content-space-between { -ms-align-content: start; -ms-flex-line-pack: justify; align-content: space-between; } .col-xl-align-content-space-evenly { -ms-align-content: end; -ms-flex-line-pack: space-evenly; align-content: space-evenly; } .col-xl-grid-auto-flow-row { -ms-align-content: center; grid-auto-flow: row; } .col-xl-grid-auto-flow-column { -ms-align-content: stretch; grid-auto-flow: column; } .col-xl-grid-auto-flow-dense { -ms-align-content: space-around; grid-auto-flow: dense; } .col-xl-1 { -ms-grid-column-end: span 1; grid-column-end: span 1; } .col-xl-2 { -ms-grid-column-end: span 2; grid-column-end: span 2; } .col-xl-3 { -ms-grid-column-end: span 3; grid-column-end: span 3; } .col-xl-4 { -ms-grid-column-end: span 4; grid-column-end: span 4; } .col-xl-5 { -ms-grid-column-end: span 5; grid-column-end: span 5; } .col-xl-6 { -ms-grid-column-end: span 6; grid-column-end: span 6; } .col-xl-7 { -ms-grid-column-end: span 7; grid-column-end: span 7; } .col-xl-8 { -ms-grid-column-end: span 8; grid-column-end: span 8; } .col-xl-9 { -ms-grid-column-end: span 9; grid-column-end: span 9; } .col-xl-10 { -ms-grid-column-end: span 10; grid-column-end: span 10; } .col-xl-11 { -ms-grid-column-end: span 11; grid-column-end: span 11; } .col-xl-12 { grid-column-end: span 12; } .col-xl-offset-2 { -ms-grid-column-start: 2; grid-column-start: 2; } .col-xl-offset-3 { -ms-grid-column-start: 3; grid-column-start: 3; } .col-xl-offset-4 { -ms-grid-column-start: 4; grid-column-start: 4; } .col-xl-offset-5 { -ms-grid-column-start: 5; grid-column-start: 5; } .col-xl-offset-6 { -ms-grid-column-start: 6; grid-column-start: 6; } .col-xl-offset-7 { -ms-grid-column-start: 7; grid-column-start: 7; } .col-xl-offset-8 { -ms-grid-column-start: 8; grid-column-start: 8; } .col-xl-offset-9 { -ms-grid-column-start: 9; grid-column-start: 9; } .col-xl-offset-10 { -ms-grid-column-start: 10; grid-column-start: 10; } .col-xl-offset-11 { -ms-grid-column-start: 11; grid-column-start: 11; } .col-xl-offset-12 { -ms-grid-column-start: 12; grid-column-start: 12; } .col-xl-justify-self-start { -ms-justify-self: start; justify-self: start; } .col-xl-justify-self-end { -ms-justify-self: end; justify-self: end; } .col-xl-justify-self-center { -ms-justify-self: center; justify-self: center; } .col-xl-justify-self-stretch { -ms-justify-self: stretch; justify-self: stretch; } .col-xl-align-self-start { -ms-justify-self: start; -ms-flex-item-align: start; align-self: start; } .col-xl-align-self-end { -ms-align-self: end; -ms-flex-item-align: end; align-self: end; } .col-xl-align-self-center { -ms-align-self: center; -ms-flex-item-align: center; align-self: center; } .col-xl-align-self-stretch { -ms-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } } .grid-container > .neos-contentcollection > * { width: auto !important; } .grid-container .row-1 { grid-row: span 1; height: auto !important; } .grid-container .row-2 { grid-row: span 2; height: auto !important; } .grid-container .row-3 { grid-row: span 3; height: auto !important; } .neos-backend a, .neos-backend button { /* pointer-events: none; &.PSbCNW_toolBar__btnGroup__btn{ pointer-events: auto; }*/ } .neos-backend .content_menu { /*display: none;*/ } .neos-backend .om3__admin__info { position: fixed; bottom: 240px; left: 100%; z-index: 100000; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; cursor: default; } .neos-backend .om3__admin__info_content, .neos-backend .om3__admin__type__debug { color: var(--white-color, white); position: relative; white-space: nowrap; /* legacy */ font-family: "Noto Sans", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.1px; } .neos-backend .om3__admin__info_content span, .neos-backend .om3__admin__type__debug span { background-color: rgba(0, 181, 255, 0.9); margin: 0 2px 0 0; white-space: nowrap; padding: 2px 8px 3px; } .neos-backend .hide-hidden-nodes .TnLEVq_markHiddenNodeAsHidden { display: none !important; } .neos-backend [data-sal|="fade"] { opacity: 1 !important; } .om3__admin__smalldescription { font-size: 8px; background: #00b5ff; color: #fff; padding: 1px 5px; position: relative; top: -2px; } /* obsolete ?? */ /* .neos-tooltip { display : none !important; visibility : hidden !important; user-select : none; pointer-events: none } .neos ul.neos-dynatree-container ul ul ul .neos-dynatree-node { white-space: nowrap } */ .host__productdetail { /* border: 1px dotted red !important;*/ --balloon-color: var(--brand-color-primary, black); } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > * { /*border: 2px dotted cyan !important;*/ background-color: var(--white-color, white); width: 100%; min-width: 320px; min-height: 200px; margin-top: 40px; } /*border: 2px dotted blue !important;*/ .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection .perm-text { width: 100%; padding: 5px 0px; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection .perm-text p { text-align: left !important; padding-left: 10px; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection .perm-clip.__s_contentverticalalign__top > .neos-contentcollection { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection .perm-clip.__s_contentverticalalign__top > .neos-contentcollection > * { border: 1px solid black; margin: 0 0 10px 10px !important; height: 200px; width: 100px; } /* outline: 2px dotted red !important;*/ .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:last-of-type > .neos-contentcollection { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:last-of-type > .neos-contentcollection .perm-text { width: 100%; padding: 5px; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:last-of-type > .neos-contentcollection .perm-text p { /* color:white !important;*/ } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:last-of-type > .neos-contentcollection .perm-clip { /*outline: 2px dotted red !important;*/ border: 1px solid black; width: 80px; height: 40px; margin: 5px !important; white-space: nowrap; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:last-of-type > .neos-contentcollection .perm-clip > .neos-contentcollection { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:last-of-type > .neos-contentcollection .perm-clip > .neos-contentcollection > .perm-clip { } @media (min-width: 1200px) { .host__productdetail { /* border: 1px dotted purple !important;*/ /* transform: translate3d(0,0,0);*/ position: fixed !important; z-index: 12; left: 0; top: 100px; /*user-select: none; pointer-events: none;*/ } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > * { width: 20%; min-height: 80vh; padding: 20px 20px; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection .perm-text p { text-align: right !important; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection > .perm-clip.__s_contentverticalalign__top > .neos-contentcollection { /* outline: 2px dotted lightseagreen !important;*/ -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } } ._item__share { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-delay: 0s; transition-delay: 0s; position: fixed; right: 30px; top: 65px; background: transparent; margin: 0px 0px 40px 0px; z-index: 510; text-align: right; } ._item__share { right: 15px; top: 55px; } @media (min-width: 1200px) { ._item__share { padding: 5px 30px 5px 10px; } } ._item__share._active__true { z-index: 1510; } ._menucompact__1 ._item__share { -webkit-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: skewX(0deg) skewY(0deg) scale(1, 1) rotate(0deg) translate(0px, 10px); transform: skewX(0deg) skewY(0deg) scale(1, 1) rotate(0deg) translate(0px, 10px); } ._menucompact__2 ._item__share { -webkit-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: skewX(0deg) skewY(0deg) scale(1, 1) rotate(0deg) translate(0px, 80px); transform: skewX(0deg) skewY(0deg) scale(1, 1) rotate(0deg) translate(0px, 80px); } ._item__share__content { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-delay: 0s; transition-delay: 0s; position: absolute !important; top: -13px; right: 26px; background-color: var(--white-color, white); border-width: 8px !important; border-right: 20px solid white; border-left: 20px solid white; width: 315px; max-width: calc(100vw - 23px); z-index: 1025; text-align: left; opacity: 0; overflow: hidden; height: 67px; } ._item__share__content { position: relative; display: inline-block; border: 20px solid transparent; } ._item__share._active__true ._item__share__content { opacity: 1; } ._item__share__content > p { color: var(--brand-color-primary, blue); font-size: 14px !important; } ._item__share__content__text { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ._item__share__content__copy { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: all; cursor: pointer; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-delay: 0s; transition-delay: 0s; background-color: var(--brand-color-primary, blue); color: var(--white-color, white) !important; display: inline-block; border-radius: 2px; padding: 1px 6px 3px 8px; position: relative; margin-left: 6px; opacity: 0.01 !important; top: 0px; vertical-align: text-bottom !important; } ._item__share__content__copy:hover { background-color: #121e2d !important; } ._item__share__content__uri { -webkit-user-select: all; -moz-user-select: all; user-select: all; pointer-events: all; margin: 3px 0px 0px 0px; background-color: var(--body-bg-color, white); padding: 4px 10px 4px 4px; display: inline-block; cursor: text; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } ._item__share__button { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: all; cursor: pointer; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-delay: 0s; transition-delay: 0s; z-index: 1026; position: relative; border-radius: 50%; top: 0px; left: 3px; background-color: rgba(255, 255, 255, 0); border: 1px solid rgba(255, 255, 255, 0); } ._item__share__button:hover { -webkit-animation-name: dc7__animation__kf_pop; animation-name: dc7__animation__kf_pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); -webkit-animation-delay: 0s; animation-delay: 0s; } ._item__share._active__true ._item__share__button { top: -13px; border: 21px solid white; background-color: white; } ._item__share__button__img { width: 25px; height: 25px; } .perm-branding-label { display: none; position: fixed; bottom: -2px; left: 10%; z-index: 600; border: 1px solid var(--white-color, white); } .dc7__modal__bs_in_modal__true .perm-branding-label { display: none !important; } @media (min-width: 768px) { .perm-branding-label { display: block; } } @media (min-width: 1200px) { .perm-branding-label { display: block; } } .color-dark h1, .color-dark h2, .color-dark h3, .color-dark h4, .color-dark h5, .color-dark h6, .color-dark label, .color-dark a, .color-dark p { color: var(--dark-color, grey); } .color-blue h1, .color-blue h2, .color-blue h3, .color-blue h4, .color-blue h5, .color-blue h6, .color-blue label, .color-blue a, .color-blue p { color: var(--brand-color-primary, blue); } .color-bright h1, .color-bright h2, .color-bright h3, .color-bright h4, .color-bright h5, .color-bright h6, .color-bright label, .color-bright a, .color-bright p { color: var(--white-color, white); } .color-neutral h1, .color-neutral h2, .color-neutral h3, .color-neutral h4, .color-neutral h5, .color-neutral h6, .color-neutral label, .color-neutral a { color: var(--aogv-gray-light, gray); } .color-copy-dark p, .color-copy-dark li, .color-copy-dark a, .color-copy-dark h1, .color-copy-dark h2, .color-copy-dark h3, .color-copy-dark h4, .color-copy-dark h5, .color-copy-dark h6 { color: var(--dark-color, grey); } .color-copy-blue p, .color-copy-blue li, .color-copy-blue a, .color-copy-blue h1, .color-copy-blue h2, .color-copy-blue h3, .color-copy-blue h4, .color-copy-blue h5, .color-copy-blue h6 { color: var(--brand-color-primary, blue) !important; } .color-copy-bright p, .color-copy-bright li, .color-copy-bright a, .color-copy-bright h1, .color-copy-bright h2, .color-copy-bright h3, .color-copy-bright h4, .color-copy-bright h5, .color-copy-bright h6 { /* color: var(--white-color,white) !important;*/ color: var(--white-color, white); } .color-copy-accent p, .color-copy-accent li, .color-copy-accent a, .color-copy-accent h1, .color-copy-accent h2, .color-copy-accent h3, .color-copy-accent h4, .color-copy-accent h5, .color-copy-accent h6, .color-copy-accent label, .color-copy-accent a { color: var(--brand-color-primary, blue); } /*TODO maybe refactor using @nest */ .perm-nav-header { min-height: var(--nav-header-height-min, 70px); /*hide header and navigation inside modals */ border-bottom: 1px solid var(--nav-header-border-color, #e6e6e6); } .dc7__modal__bs_in_modal__true .perm-nav-header { display: none !important; } .nav-menu-trigger { /*outline: 2px dashed red;*/ position: absolute; left: var(--mobile-nav-padding); display: block; z-index: 2; height: 16px; width: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .nav-menu-trigger:not(.is-open) .nav-open-btn { display: inline-block; } .nav-menu-trigger:not(.is-open) .nav-close-btn { display: none; } .nav-menu-trigger.is-open .nav-open-btn { display: none; } .nav-menu-trigger.is-open .nav-close-btn { display: inline-block; } .nav-panel-icon { color: var(--nav-links-color, #ffffff); } .nav-panel-icon svg { width: 100%; height: auto; color: var(--nav-links-color, #ffffff); -webkit-transform: scale(1.4); transform: scale(1.4); } .segment-menu { width: 100%; max-width: 100vw; position: fixed; z-index: 1000; left: 0; top: 0; /* SHAME*/ } .segment-menu.is-fixed { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .segment-menu.can-animate { -webkit-transition: visibility 0s 0.3s linear, -webkit-transform 0.3s ease; transition: visibility 0s 0.3s linear, -webkit-transform 0.3s ease; transition: transform 0.3s ease, visibility 0s 0.3s linear; transition: transform 0.3s ease, visibility 0s 0.3s linear, -webkit-transform 0.3s ease; } .segment-menu.scroll-up { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* padding:0 !important;*/ .segment-menu .nav-menu { /* outline: 2px dashed red;*/ margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; /*padding: 0 calc(var(--base-padding, 30px) / 3);*/ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 100%; -webkit-transform: none; transform: none; -webkit-transform: initial; transform: initial; background-color: var(--nav-bg-color, white); -webkit-transition: var(--transition-all); transition: var(--transition-all); } .segment-menu .nav-menu .nav-menu-links { display: none; } .segment-menu .nav-menu .nav-menu-links > div { display: inline-block; margin-left: 20px; } .segment-menu .nav-menu .nav-menu-links > div a { color: var(--nav-links-color, white); letter-spacing: var(--nav-links-letter-spacing, 2.41px); font-size: var(--nav-links-font-size, 24px); text-transform: var(--nav-links-text-transform, none); text-transform: var(--nav-links-text-transform, initial); white-space: nowrap; text-decoration: none; } .segment-menu .nav-menu .nav-menu-links > div a:hover { color: var(--nav-links-focus-color, currentColor); } @media (min-width: 1200px) { .nav-menu_burger { display: none; } .segment-menu .nav-menu .nav-menu-links { display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--nav-links-gap, 4px); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .nav-menu-links > div { -webkit-box-sizing: border-box; box-sizing: border-box; } .nav-menu-links > div a { font-weight: 400; } .nav-menu-links > div a:hover, .nav-menu-links > div a:focus { outline: none; } .nav-menu-links > div a:hover:before, .nav-menu-links > div a:focus:before { width: 30%; } .nav-menu-links > div a.focus-visible { outline: var(--focus-outline); outline-offset: 0.8rem; } .nav-menu-links > div a:focus-visible { outline: var(--focus-outline); outline-offset: 0.8rem; } .nav-menu-meta { /* z-index: 3;*/ margin: 0 auto; } @media (min-width: 1200px) { .nav-menu-meta { margin: 0; } } /* Logo Hover */ .header-logo { display: inline-block; margin: 0 auto; width: var(--nav-header-width, 70px); height: var(--nav-header-height, 70px); } .header-logo img { transition: transform 0.4s ease; } /* outline: 2px dashed red;*/ .header-logo img { width: 100%; height: 100%; } .header-logo:hover img, .header-logo:focus img { transform: scale(0.9); } .header-logo.focus-visible { outline: var(--focus-outline); outline-offset: 0.8rem; } .header-logo:focus-visible { outline: var(--focus-outline); outline-offset: 0.8rem; } @media (min-width: 1200px) { .header-logo { /* width: var(--logo-size-desktop,480px);*/ } } .menu-scroll-trigger { position: absolute; z-index: 2; top: 0; width: 100%; height: 3rem; background-color: red; pointer-events: none; visibility: hidden; padding: 80px 0px 0px 0px; } @media (max-width: 767px) { .menu-scroll-trigger { display: none; } } @media (min-width: 768px) { .menu-scroll-trigger { display: none; } } @media (min-width: 1200px) { .menu-scroll-trigger { display: block; } } /* hide menu in backend */ /* .neos-backend .segment-menu { display: none !important; } */ .neos-backend .segment-menu { pointer-events: none !important; } /* Mobile Nav Panel*/ .menu-panel { position: fixed; z-index: 100; /* top: var(--nav-header-height-min ,70px);*/ top: -100vh; left: 0; width: 100vw; height: calc(100vh - var(--nav-header-height-min, 70px)); opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); background-color: var(--nav-panel-bg-color, rgba(39, 89, 136, 0.9)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease; transition: opacity 0.4s ease, -webkit-transform 0.4s ease; transition: opacity 0.4s ease, transform 0.4s ease; transition: opacity 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease; } .menu-panel .mobile-navigation-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; pointer-events: initial; padding: 0 var(--mobile-nav-padding); opacity: 1; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; -webkit-transition-delay: 0.36s; transition-delay: 0.36s; } .menu-panel .mobile-navigation-links > div { /* margin-bottom:30px;*/ width: 100%; } .menu-panel .mobile-navigation-links > div a { display: block; padding: 1rem 0; font-size: var(--nav-links-font-size, 14px); text-transform: var(--nav-links-text-transform); letter-spacing: 1px; font-weight: 400; margin: 0; /* color: var(--black-color);*/ } .menu-panel .mobile-navigation-links > div:not(:last-of-type) { border-bottom: 1px solid #ccc; } .menu-panel.is-open { opacity: 1; -webkit-transform: translate3d( 0, calc(100vh + var(--nav-header-height-min, 70px)), 0 ); transform: translate3d( 0, calc(100vh + var(--nav-header-height-min, 70px)), 0 ); pointer-events: none; } .menu-panel.is-open .mobile-navigation-links { opacity: 1; } .current > a { text-decoration: underline; } .mobile-navigation-links.mobile-navigation-links a { text-decoration: none; position: relative; color: var(--nav-links-color, red); font-family: var(--base-font-family); font-size: var(--font-size-nav-links-mobile, 24px); font-weight: 600; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-bottom: 30px; } .has-scrolling-disabled { overflow: hidden !important; } .nav-container { /* outline:2px dashed red; DEBUG*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; margin: 0 auto; width: 100%; padding: 0 var(--content-padding-xs); } @media (max-width: 767px) { .nav-container { max-width: var(--content-max-width-sm, 590px); padding: 0 var(--content-padding-sm); } } @media (min-width: 768px) { .nav-container { max-width: var(--content-max-width-md, 590px); padding: 0 var(--content-padding-md); } } @media (min-width: 992px) { .nav-container { max-width: var(--content-max-width-lg, 788px); padding: 0 var(--content-padding-lg); } } @media (min-width: 1200px) { .nav-container { max-width: var(--content-max-width-xl, 1480px); padding: 0 var(--content-padding-xl); } } @media (min-width: 1400px) { .nav-container { max-width: var(--content-max-width-xxl, 1480px); padding: 0 var(--content-padding-xxl); } } .current a { position: relative; } .current a:before { width: 30px !important; } :root { } .perm-hr { border: none; border-top: var(--perm-hr-thickness, 1px) var(--perm-hr-style) var(--perm-hr-color); border-color: var(--perm-hr-color); opacity: var(--perm-hr-opacity, 1); } /* shows teaser boxes (cards) in a flex grid to have same height grid items without JS. Last item in grid is centered */ @media (min-width: 1200px) { .teaser-grid-rf { display: block; } .teaser-grid-rf > .neos-contentcollection { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .teaser-grid-rf > .neos-contentcollection > div:last-of-type { margin: 0 auto; } .teaser-grid-rf > .neos-contentcollection > div > .neos-contentcollection { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-item-align: stretch; align-self: stretch; } .teaser-grid-rf > .neos-contentcollection > div > .neos-contentcollection > div:last-child { margin-top: auto; } } .teaser-card-rf > .neos-contentcollection { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-item-align: stretch; align-self: stretch; } .teaser-card-rf > .neos-contentcollection > div:last-child { margin-top: auto; } :root { --col-1-12: calc(100% / 12); --col-2-12: calc(100% / 12 * 2); --col-3-12: calc(100% / 12 * 3); --col-4-12: calc(100% / 12 * 4); --col-5-12: calc(100% / 12 * 5); --col-6-12: calc(100% / 12 * 6); --col-7-12: calc(100% / 12 * 7); --col-8-12: calc(100% / 12 * 8); --col-9-12: calc(100% / 12 * 9); --col-10-12: calc(100% / 12 * 10); --col-11-12: calc(100% / 12 * 11); --col-12-12: 100%; } .flex-container > .neos-contentcollection { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; gap: var(--grid-gap, 1vmax); } @media (max-width: 767px) { .flex-container.flex-direction-horizontal > .neos-contentcollection { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .has-flex-wrap.flex-direction-horizontal > .neos-contentcollection { -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .col-sm-12 { width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .col-sm-6 { width: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .col-sm-4 { width: var(--col-4-12); -ms-flex-preferred-size: var(--col-4-12); flex-basis: var(--col-4-12); } .col-sm-3 { width: var(--col-3-12); -ms-flex-preferred-size: var(--col-3-12); flex-basis: var(--col-3-12); } .col-sm-1 { width: var(--col-1-12); } .col-sm-2 { width: var(--col-2-12); -ms-flex-preferred-size: var(--col-2-12); flex-basis: var(--col-2-12); } .col-sm-5 { width: var(--col-5-12); -ms-flex-preferred-size: var(--col-5-12); flex-basis: var(--col-5-12); } .col-sm-7 { width: var(--col-7-12); -ms-flex-preferred-size: var(--col-7-12); flex-basis: var(--col-7-12); } .col-sm-8 { width: var(--col-8-12); -ms-flex-preferred-size: var(--col-8-12); flex-basis: var(--col-8-12); } .col-sm-9 { width: var(--col-9-12); -ms-flex-preferred-size: var(--col-9-12); flex-basis: var(--col-9-12); } .col-sm-10 { width: var(--col-10-12); -ms-flex-preferred-size: var(--col-10-12); flex-basis: var(--col-10-12); } .col-sm-11 { width: var(--col-11-12); -ms-flex-preferred-size: var(--col-11-12); flex-basis: var(--col-11-12); } } @media (min-width: 768px) { /* tablet */ .col-md-12 { width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .col-md-6 { width: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .col-md-4 { width: var(--col-4-12); -ms-flex-preferred-size: var(--col-4-12); flex-basis: var(--col-4-12); } .col-md-3 { width: var(--col-3-12); -ms-flex-preferred-size: var(--col-3-12); flex-basis: var(--col-3-12); } .col-md-1 { width: var(--col-1-12); -ms-flex-preferred-size: var(--col-1-12); flex-basis: var(--col-1-12); } .col-md-2 { width: var(--col-2-12); -ms-flex-preferred-size: var(--col-2-12); flex-basis: var(--col-2-12); } .col-md-5 { width: var(--col-5-12); -ms-flex-preferred-size: var(--col-5-12); flex-basis: var(--col-5-12); } .col-md-7 { width: var(--col-7-12); -ms-flex-preferred-size: var(--col-7-12); flex-basis: var(--col-7-12); } .col-md-8 { width: var(--col-8-12); -ms-flex-preferred-size: var(--col-8-12); flex-basis: var(--col-8-12); } .col-md-9 { width: var(--col-9-12); -ms-flex-preferred-size: var(--col-9-12); flex-basis: var(--col-9-12); } .col-md-10 { width: var(--col-10-12); -ms-flex-preferred-size: var(--col-10-12); flex-basis: var(--col-10-12); } .col-md-11 { width: var(--col-11-12); -ms-flex-preferred-size: var(--col-11-12); flex-basis: var(--col-11-12); } } @media (min-width: 1200px) { .col-xl-12 { width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .col-xl-6 { width: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .col-xl-4 { width: var(--col-4-12); -ms-flex-preferred-size: var(--col-4-12); flex-basis: var(--col-4-12); } .col-xl-3 { width: var(--col-3-12); -ms-flex-preferred-size: var(--col-3-12); flex-basis: var(--col-3-12); } .col-xl-1 { width: var(--col-1-12); } .col-xl-2 { width: var(--col-2-12); -ms-flex-preferred-size: var(--col-2-12); flex-basis: var(--col-2-12); } .col-xl-5 { width: var(--col-5-12); -ms-flex-preferred-size: var(--col-5-12); flex-basis: var(--col-5-12); } .col-xl-7 { width: var(--col-7-12); -ms-flex-preferred-size: var(--col-7-12); flex-basis: var(--col-7-12); } .col-xl-8 { width: var(--col-8-12); -ms-flex-preferred-size: var(--col-8-12); flex-basis: var(--col-8-12); } .col-xl-9 { width: var(--col-9-12); -ms-flex-preferred-size: var(--col-9-12); flex-basis: var(--col-9-12); } .col-xl-10 { width: var(--col-10-12); -ms-flex-preferred-size: var(--col-10-12); flex-basis: var(--col-10-12); } .col-xl-11 { width: var(--col-11-12); -ms-flex-preferred-size: var(--col-11-12); flex-basis: var(--col-11-12); } } /* LEGACY */ div[class*="col-"] { background-clip: padding-box; } /*border: 2px dashed yellow !important;*/ .border-color-dark { border-color: var(--dark-color, white); } .border-color-bright { border-color: var(--bright-color, white); } .border-color-neutral { border-color: var(--bright-neutral, gray); } .border-color-ci-1 { border-color: var(--brand-color-primary, red); } .border-color-ci-2 { border-color: var(--brand-color-secondary, blue); } .border-color-ci-3 { border-color: var(--brand-color-tertiary, green); } .border-color-ci-4 { border-color: var(--brand-color-accent, green); } .border-width-sm { border-width: var(--border-width-sm, 1px); } .border-width-md { border-width: var(--border-width-md, 2px); } .border-width-lg { border-width: var(--border-width-lg, 4px); } .border-style-solid { border-style: solid; } .border-style-dashed { border-style: dashed; } .border-style-dotted { border-style: dotted; } .background-color-dark { background-color: var(--dark-color, white); } .background-color-bright { background-color: var(--bright-color, white); } .background-color-neutral { background-color: var(--bright-neutral, gray); } .background-color-ci-1 { background-color: var(--brand-color-primary, red); } .background-color-ci-2 { background-color: var(--brand-color-secondary, blue); } .background-color-ci-3 { background-color: var(--brand-color-tertiary, green); } .background-color-ci-4 { background-color: var(--brand-color-accent, green); } /*TODO put here in a central place all conflicts and overrides of existing legacy CSS hacky solutions you plan to refactor and clean up later . */ .typekit-badge { visibility: hidden !important; border: none; display: none !important; } .om3__segment__html { font-size: 16px; } .button { text-align: center !important; } .mobile-navigation-links { width: 100%; /* TODO should be 100% by default display block */ } .segment-menu_navigation_burger_icon { opacity: 1 !important; } .segment-menu { position: fixed !important; } .segment-menu .nav-menu { max-width: 100% !important; } .segment-menu .nav-menu._topalign__false { border: 1px solid deepskyblue !important; } /*TODO refactor rest from host export min in own modules */ .om3__segment__googlemap { padding-left: 0 !important; padding-right: 0 !important; } .om3__segment__googlemap iframe { width: 100%; height: 400px; } .segment-menu { padding: 0 !important; } /* CSS only Tooltip */ /* https://github.com/kazzkiq/balloon.css */ :root { --balloon-border-radius: 2px; --balloon-color: rgba(16, 16, 16, 0.95); --balloon-text-color: #fff; --balloon-font-size: 12px; --balloon-move: 4px; } button[aria-label][data-balloon-pos] { overflow: visible; } [aria-label][data-balloon-pos] { position: relative; cursor: pointer; } [aria-label][data-balloon-pos]:after { opacity: 0; pointer-events: none; -webkit-transition: all 0.18s ease-out 0.18s; transition: all 0.18s ease-out 0.18s; text-indent: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight: normal; font-style: normal; text-shadow: none; font-size: var(--balloon-font-size); background: var(--balloon-color); border-radius: 2px; color: var(--balloon-text-color); border-radius: var(--balloon-border-radius); content: attr(aria-label); padding: 0.5em 1em; position: absolute; white-space: nowrap; z-index: 10; } [aria-label][data-balloon-pos]:before { width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--balloon-color); opacity: 0; pointer-events: none; -webkit-transition: all 0.18s ease-out 0.18s; transition: all 0.18s ease-out 0.18s; content: ""; position: absolute; z-index: 10; } [aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after { opacity: 1; pointer-events: none; } [aria-label][data-balloon-pos].font-awesome:after { font-family: FontAwesome, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } [aria-label][data-balloon-pos][data-balloon-break]:after { white-space: pre; } [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after { white-space: pre-line; word-break: break-word; } [aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after { -webkit-transition: none; transition: none; } [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after { left: 0; } [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before { left: 5px; } [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after { right: 0; } [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before { right: 5px; } [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after { -webkit-transform: translate(0, 0); transform: translate(0, 0); } [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before { -webkit-transform: translate(0, 0); transform: translate(0, 0); } [aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after { bottom: 100%; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: translate(0, var(--balloon-move)); transform: translate(0, var(--balloon-move)); } [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after { margin-bottom: 10px; } [aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after { left: 50%; -webkit-transform: translate(-50%, var(--balloon-move)); transform: translate(-50%, var(--balloon-move)); } [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after { top: 100%; -webkit-transform: translate(0, calc(var(--balloon-move) * -1)); transform: translate(0, calc(var(--balloon-move) * -1)); } [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after { margin-top: 10px; } [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before { width: 0; height: 0; border: 5px solid transparent; border-bottom-color: var(--balloon-color); } [aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before { left: 50%; -webkit-transform: translate(-50%, calc(var(--balloon-move) * -1)); transform: translate(-50%, calc(var(--balloon-move) * -1)); } [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } [aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before { right: 100%; top: 50%; -webkit-transform: translate(var(--balloon-move), -50%); transform: translate(var(--balloon-move), -50%); } [aria-label][data-balloon-pos][data-balloon-pos="left"]:after { margin-right: 10px; } [aria-label][data-balloon-pos][data-balloon-pos="left"]:before { width: 0; height: 0; border: 5px solid transparent; border-left-color: var(--balloon-color); } [aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before { left: 100%; top: 50%; -webkit-transform: translate(calc(var(--balloon-move) * -1), -50%); transform: translate(calc(var(--balloon-move) * -1), -50%); } [aria-label][data-balloon-pos][data-balloon-pos="right"]:after { margin-left: 10px; } [aria-label][data-balloon-pos][data-balloon-pos="right"]:before { width: 0; height: 0; border: 5px solid transparent; border-right-color: var(--balloon-color); } [aria-label][data-balloon-pos][data-balloon-length]:after { white-space: normal; } [aria-label][data-balloon-pos][data-balloon-length="small"]:after { width: 80px; } [aria-label][data-balloon-pos][data-balloon-length="medium"]:after { width: 150px; } [aria-label][data-balloon-pos][data-balloon-length="large"]:after { width: 260px; } [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after { width: 380px; } @media screen and (max-width: 768px) { [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after { width: 90vw; } } [aria-label][data-balloon-pos][data-balloon-length="fit"]:after { width: 100%; } .perm-clip { /*outline:1px dashed red;*/ } .clip-container { /* font-size: 0 */ /* to the body element, to disable the gap when you use display: inline-block */ /* outline: 1px dotted purple;*/ background-clip: padding-box; background-size: cover; background-repeat: no-repeat; background-position: center; display: block; height: 100%; overflow: hidden; } /*padding: 40px 0;*/ @media (min-width: 768px) { .page-content > .neos-contentcollection > .clip-container { /*padding: 50px 0;*/ } } @media (min-width: 1200px) { .page-content > .neos-contentcollection > .clip-container { /*padding: 90px 0;*/ } } .clip-container.has-columns { display: block !important; } .clip-container.has-columns > .neos-contentcollection { display: block !important; -webkit-columns: 3 auto; -moz-columns: 3 auto; columns: 3 auto; -webkit-column-gap: var(--grid-gap, 1rem); -moz-column-gap: var(--grid-gap, 1rem); column-gap: var(--grid-gap, 1rem); } .clip-container.has-columns > .neos-contentcollection > * { margin-bottom: var(--grid-gap, 1rem); } @media (min-width: 75em) { .clip-container.has-columns > .neos-contentcollection { -webkit-columns: 3 auto; -moz-columns: 3 auto; columns: 3 auto; -webkit-column-gap: var(--grid-gap, 1rem); -moz-column-gap: var(--grid-gap, 1rem); column-gap: var(--grid-gap, 1rem); } } .clip-container.has-shadow > .neos-contentcollection { -webkit-box-shadow: var( --shadow-fx-soft, 30px 30px 50px 0px rgba(0, 0, 0, 0.28) ); box-shadow: var(--shadow-fx-soft, 30px 30px 50px 0px rgba(0, 0, 0, 0.28)); } .clip-container.childred-y-align-start:not(.childred-same-height) { -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .clip-container.childred-y-align-start:not(.childred-same-height) > .neos-contentcollection { -webkit-box-align: start; -ms-flex-align: start; align-items: start; -ms-flex-line-pack: start; align-content: start; } .clip-container.childred-y-align-center > .neos-contentcollection { -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .clip-container.childred-y-align-center > .neos-contentcollection { -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .clip-container.childred-y-align-end > .neos-contentcollection { -ms-flex-line-pack: end; align-content: end; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } .clip-container.childred-y-align-end > .neos-contentcollection { -ms-flex-line-pack: end; align-content: end; } .clip-container.childred-same-height > .neos-contentcollection { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; height: 100%; } .clip-container.childred-same-height > .neos-contentcollection .clip-container { height: auto; } .clip-container.childred-same-height > .neos-contentcollection > div > .neos-contentcollection { height: 100%; } .clip-container.childred-x-align-start > .neos-contentcollection { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } .clip-container.childred-x-align-center > .neos-contentcollection { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .clip-container.childred-x-align-end > .neos-contentcollection { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @supports (justify-content: end) { .clip-container.childred-x-align-end > .neos-contentcollection { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } } .clip-container.has-content-limit > .neos-contentcollection { /* outline:2px dashed mediumpurple; DEBUG*/ position: relative; margin: 0 auto; width: 100%; padding: 0 var(--content-padding-xs); } @media (max-width: 767px) { .clip-container.has-content-limit > .neos-contentcollection { max-width: var(--content-max-width-sm, 590px); padding: 0 var(--content-padding-sm); } } @media (min-width: 768px) { .clip-container.has-content-limit > .neos-contentcollection { max-width: var(--content-max-width-md, 590px); padding: 0 var(--content-padding-md); } } @media (min-width: 992px) { .clip-container.has-content-limit > .neos-contentcollection { max-width: var(--content-max-width-lg, 788px); padding: 0 var(--content-padding-lg); } } @media (min-width: 1200px) { .clip-container.has-content-limit > .neos-contentcollection { max-width: var(--content-max-width-xl, 1480px); padding: 0 var(--content-padding-xl); } } @media (min-width: 1400px) { .clip-container.has-content-limit > .neos-contentcollection { max-width: var(--content-max-width-xxl, 1480px); padding: 0 var(--content-padding-xxl); } } .clip-container > .clip-container_backgroundvideo, .clip-container > .clip-container_backgroundoverlay { /* position: absolute; z-index : 1; top : 0; right : 0; bottom : 0; left : 0; overflow: hidden;*/ } .clip-container > .clip-container_backgroundoverlay { z-index: 2; } .clip-container.justify-initial > .neos-contentcollection { -webkit-box-pack: initial; -ms-flex-pack: initial; justify-content: initial; } .clip-container.justify-end > .neos-contentcollection { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .clip-container.justify-space-between > .neos-contentcollection { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .clip-container.justify-space-evenly > .neos-contentcollection { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } .clip-container.flex-direction-horizontal > .neos-contentcollection { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .clip-container.flex-direction-vertical > .neos-contentcollection { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .background-video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .clip-anchor { position: absolute; top: calc(0px - var(--nav-header-height) - 30px); } .link-overlay { top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } /*Mouse over Zoom FX*/ .link-overlay.focus-visible { outline: var(--focus-outline); outline-offset: -0.3rem; } .link-overlay:focus-visible { outline: var(--focus-outline); outline-offset: -0.3rem; } .clip-container .link-overlay { position: absolute; } /* .anker { position: absolute; opacity: 0; top: -270px !important; }*/ .display-type-inline-block { display: inline-block; } .display-type-block { display: block; } .display-type-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .display-type-grid { display: grid; } .clip-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color: var(--color-overlay); pointer-events: none; } .gradient-overlay-for-text-readability { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: linear-gradient( 180deg, hsla(0, 0%, 35.29%, 0) 0%, hsla(0, 0%, 34.53%, 0.034375) 16.36%, hsla(0, 0%, 32.42%, 0.125) 33.34%, hsla(0, 0%, 29.18%, 0.253125) 50.1%, hsla(0, 0%, 24.96%, 0.4) 65.75%, hsla(0, 0%, 19.85%, 0.546875) 79.43%, hsla(0, 0%, 13.95%, 0.675) 90.28%, hsla(0, 0%, 7.32%, 0.765625) 97.43%, hsla(0, 0%, 0%, 0.8) 100% ); } .perm-clip:has(.gradient-overlay-for-text-readability) { position: relative !important; z-index: 1 !important; overflow: hidden; } .perm-image { /* height:300px; min-height:300px; */ overflow: hidden; position: relative; } .perm-image img { width: 100%; } .perm-image img.is-cover { height: 100%; -o-object-fit: cover; object-fit: cover; } .perm-image picture.is-cover { height: 100%; } .perm-image picture.is-cover img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .perm-image.has-shadow { -webkit-box-shadow: 20px 20px 0px var(--shadow-color, white); box-shadow: 20px 20px 0px var(--shadow-color, white); } .perm-image .image-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } /*Mouse over Zoom FX*/ .perm-image .image-link.focus-visible { outline: var(--focus-outline); outline-offset: -0.3rem; } .perm-image .image-link:focus-visible { outline: var(--focus-outline); outline-offset: -0.3rem; } .perm-image .has-link-fx img { -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; } .perm-image:hover .has-link-fx img { -webkit-transform: scale(1.1); transform: scale(1.1); } /*figure{ &.perm-image { overflow: hidden; } }*/ /* LEGACY */ .component img { max-width: 100%; } .image-component { text-align: center; } .image-component figure, .image-component img { max-width: 100%; } .image-component:not(.is-original-size) figure, .image-component:not(.is-original-size) img { width: 100%; } .perm-text { display: block; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } .perm-text > * + * { margin-top: clamp(10px, 2vmax, 20px); } .perm-text ul { list-style-type: disc; padding: 1.3rem; } .perm-text ol { /* margin-left:20px; */ } .perm-text.has-hyphenation { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .perm-text a, .text-component a, .om3__segment__html a { -webkit-transition: var(--transition-color); transition: var(--transition-color); text-decoration: underline; } .content-footer a { text-decoration: underline !important; } .perm-text a.focus-visible, .text-component a.focus-visible, .om3__segment__html a.focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } .perm-text a:focus-visible, .text-component a:focus-visible, .om3__segment__html a:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } a, a:hover, a:link, a:visited { position: relative; outline: none; color: var(--brand-color-primary, blue); } a:not(.om3__segment__menu_navigation_meta_logo):not(.perm-button):not( .perm-image ):hover, a:hover:not(.om3__segment__menu_navigation_meta_logo):not(.perm-button):not( .perm-image ):hover, a:link:not(.om3__segment__menu_navigation_meta_logo):not(.perm-button):not( .perm-image ):hover, a:visited:not(.om3__segment__menu_navigation_meta_logo):not(.perm-button):not( .perm-image ):hover { } .text-color-dark p, .text-color-dark li { color: var(--dark-color, white); } .text-color-bright p, .text-color-bright li { color: var(--bright-color, white); } .text-color-neutral p, .text-color-neutral li { color: var(--bright-neutral, gray); } .text-color-ci-1 p, .text-color-ci-1 li { color: var(--brand-color-primary, red); } .text-color-ci-2 p, .text-color-ci-2 li { color: var(--brand-color-secondary, blue); } .text-color-ci-3 p, .text-color-ci-3 li { color: var(--brand-color-tertiary, green); } .text-color-ci-4 p, .text-color-ci-4 li { color: var(--brand-color-tertiary, green); } .text-color-custom p, .text-color-custom li { color: var(--text-color-custom, purple); } .headline-color-dark h1, .headline-color-dark h2, .headline-color-dark h3, .headline-color-dark h4, .headline-color-dark h5, .headline-color-dark h6 { color: var(--dark-color, white); } .headline-color-dark h1 a, .headline-color-dark h2 a, .headline-color-dark h3 a, .headline-color-dark h4 a, .headline-color-dark h5 a, .headline-color-dark h6 a { color: var(--dark-color, white); } .headline-color-bright h1, .headline-color-bright h2, .headline-color-bright h3, .headline-color-bright h4, .headline-color-bright h5, .headline-color-bright h6 { color: var(--bright-color, white); } .headline-color-bright h1 a, .headline-color-bright h2 a, .headline-color-bright h3 a, .headline-color-bright h4 a, .headline-color-bright h5 a, .headline-color-bright h6 a { color: var(--bright-color, white); } .headline-color-neutral h1, .headline-color-neutral h2, .headline-color-neutral h3, .headline-color-neutral h4, .headline-color-neutral h5, .headline-color-neutral h6 { color: var(--bright-neutral, gray); } .headline-color-neutral h1 a, .headline-color-neutral h2 a, .headline-color-neutral h3 a, .headline-color-neutral h4 a, .headline-color-neutral h5 a, .headline-color-neutral h6 a { color: var(--neutral-color, white); } .headline-color-ci-1 h1, .headline-color-ci-1 h2, .headline-color-ci-1 h3, .headline-color-ci-1 h4, .headline-color-ci-1 h5, .headline-color-ci-1 h6 { color: var(--brand-color-primary, red); } .headline-color-ci-1 h1 a, .headline-color-ci-1 h2 a, .headline-color-ci-1 h3 a, .headline-color-ci-1 h4 a, .headline-color-ci-1 h5 a, .headline-color-ci-1 h6 a { color: var(--brand-color-primary, white); } .headline-color-ci-2 h1, .headline-color-ci-2 h2, .headline-color-ci-2 h3, .headline-color-ci-2 h4, .headline-color-ci-2 h5, .headline-color-ci-2 h6 { color: var(--brand-color-secondary, blue); } .headline-color-ci-2 h1 a, .headline-color-ci-2 h2 a, .headline-color-ci-2 h3 a, .headline-color-ci-2 h4 a, .headline-color-ci-2 h5 a, .headline-color-ci-2 h6 a { color: var(--brand-color-secondary, white); } .headline-color-ci-3 h1, .headline-color-ci-3 h2, .headline-color-ci-3 h3, .headline-color-ci-3 h4, .headline-color-ci-3 h5, .headline-color-ci-3 h6 { color: var(--brand-color-tertiary, green); } .headline-color-ci-3 h1 a, .headline-color-ci-3 h2 a, .headline-color-ci-3 h3 a, .headline-color-ci-3 h4 a, .headline-color-ci-3 h5 a, .headline-color-ci-3 h6 a { color: var(--brand-color-tertiary, white); } .headline-color-ci-4 h1, .headline-color-ci-4 h2, .headline-color-ci-4 h3, .headline-color-ci-4 h4, .headline-color-ci-4 h5, .headline-color-ci-4 h6 { color: var(--brand-color-accent, green); } .headline-color-ci-4 h1 a, .headline-color-ci-4 h2 a, .headline-color-ci-4 h3 a, .headline-color-ci-4 h4 a, .headline-color-ci-4 h5 a, .headline-color-ci-4 h6 a { color: var(--brand-color-accent, white); } .headline-color-custom h1, .headline-color-custom h2, .headline-color-custom h3, .headline-color-custom h4, .headline-color-custom h5, .headline-color-custom h6 { color: var(--headline-color-custom, purple); } .headline-color-custom h1 a, .headline-color-custom h2 a, .headline-color-custom h3 a, .headline-color-custom h4 a, .headline-color-custom h5 a, .headline-color-custom h6 a { color: var(--headline-color-custom, white); } ::-moz-selection { /* Code for Firefox */ color: white; background: var(--brand-color-tertiary, blue); } ::selection { color: white; background: var(--brand-color-tertiary, blue); } .is-uppercase { text-transform: uppercase; } .has-no-hypenation { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } .has-color-primary { color: var(--brand-color-primary, red); } .perm-button { /* border: 1px dashed red !important; */ } .button-component { /* border:1px dashed red !important; */ text-decoration: none !important; display: inline-block; } .button-component ion-icon { -webkit-transform: translateY(20%); transform: translateY(20%); margin: 0; } .button-component ion-icon:not([name]):not([src]) { display: none; } .button-component .button { text-decoration: none !important; text-transform: var(--perm-button-text-transform); letter-spacing: var(--perm-button-letter-spacing, 0.5px); cursor: pointer; display: inline-block; min-height: var(--perm-button-height, 48px); background-color: var(--perm-button-bg-color, white); color: var(--perm-button-color, white); border-color: var(--brand-color-primary, white); border: var(--perm-button-border-width) solid var(--perm-button-border-color, white); border-radius: var(--perm-button-rounded, 4px); padding: var(--perm-button-padding); font-size: var(--perm-button-font-size); line-height: var(--perm-button-line-height); font-weight: var(--perm-button-font-weight); -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-transition: var(--transition-all); transition: var(--transition-all); } .button-component .button.has-icon-right ion-icon { margin-left: 1ch; } .button-component .button.has-icon-left ion-icon { margin-right: 1ch; } .button-component .button:hover { background-color: var(--perm-button-bg-color-hover, red); color: var(--perm-button-color-hover, white); border-color: var(--perm-button-border-color-hover, #98a232); } .button-component .button.focus-visible { outline: var(--focus-outline); outline-offset: 0.3rem; } .button-component .button:focus-visible { outline: var(--focus-outline); outline-offset: 0.3rem; } .button-component.is-auto-width .button { display: block; width: auto !important; margin: 0 auto; } .button-component.is-block-button .button { width: 100%; } .is-type-a .button { background-color: var(--perm-button-a-bg-color, #98a232); color: var(--perm-button-a-color, white); border-color: var(--perm-button-a-border-color, #98a232); } .is-type-a .button:hover { background-color: var(--perm-button-a-bg-color-hover, #98a232); color: var(--perm-button-a-color-hover, white); border-color: var(--perm-button-a-border-color-hover, #98a232); } .is-type-b .button { background-color: var(--perm-button-b-bg-color, #98a232); color: var(--perm-button-b-color, white); border-color: var(--perm-button-b-border-color, #98a232); } .is-type-b .button:hover { background-color: var(--perm-button-b-bg-color-hover, #98a232); color: var(--perm-button-b-color-hover, white); border-color: var(--perm-button-b-border-color-hover, #98a232); } .is-type-c .button { background-color: var(--perm-button-c-bg-color, #98a232); color: var(--perm-button-c-color, white); border-color: var(--perm-button-c-border-color, #98a232); } .is-type-c .button:hover { background-color: var(--perm-button-c-bg-color-hover, #98a232); color: var(--perm-button-c-color-hover, white); border-color: var(--perm-button-c-border-color-hover, #98a232); } .is-type-d .button { background-color: var(--perm-button-d-bg-color, #98a232); color: var(--perm-button-d-color, white); border-color: var(--perm-button-d-border-color, #98a232); } .is-type-d .button:hover { background-color: var(--perm-button-d-bg-color-hover, #98a232); color: var(--perm-button-d-color-hover, white); border-color: var(--perm-button-d-border-color-hover, #98a232); } .cron-formbuilder-plugin > button { background-color: var(--brand-color-primary, blue); color: var(--white-color, white) !important; } /* make buttons autowidth align with parent clip */ .childred-x-align-start > .neos-contentcollection .button-component.is-auto-width { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .childred-x-align-start > .neos-contentcollection .button-component.is-auto-width button { margin: 0 !important; margin: initial !important; } .childred-x-align-end > .neos-contentcollection .button-component.is-auto-width { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .childred-x-align-end > .neos-contentcollection .button-component.is-auto-width button { margin: 0 !important; margin: initial !important; } .childred-x-align-center > .neos-contentcollection .button-component.is-auto-width { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .childred-x-align-center > .neos-contentcollection .button-component.is-auto-width button { margin: 0 !important; margin: initial !important; } .perm-accordion { /*overflow: hidden;*/ -webkit-transform-origin: top; transform-origin: top; -webkit-transition: max-height 1700ms ease; transition: max-height 1700ms ease; color: var(--perm-accordion-text-color, black); border-bottom: 1px solid var(--perm-accordion-border-color, grey); } .perm-accordion__header { font-family: var(--font-base); list-style: none; font-weight: 700; padding: 1rem 2rem 1rem 0; /* padding:1rem 1rem; */ /* min-height:1rem; */ position: relative; text-align: left !important; font-size: var(--perm-accordion-header-font-size, 26px); } @media (min-width: 1200px) { .perm-accordion__header { padding: 16px 50px 16px 0; } } .perm-accordion__header::-webkit-details-marker { color: transparent; width: 0; height: 0; display: none; } .perm-accordion__header::-moz-details-marker { color: transparent; width: 0; height: 0; display: none; } .perm-accordion__header::marker { color: transparent; width: 0; height: 0; display: none; } .perm-accordion__header:before { content: ""; background-image: url("data:image/svg+xml;utf8,Chevron Down Circle"); background-repeat: no-repeat; background-position: center; width: 36px; height: 36px; position: absolute; right: 0; top: 16%; -webkit-transition: -webkit-transform 600ms; transition: -webkit-transform 600ms; transition: transform 600ms; transition: transform 600ms, -webkit-transform 600ms; } .perm-accordion__header > * { /* position: relative; top:0; left: 30px; */ } .perm-accordion__header:hover { /*color:var(--aogv-blue-light,white);*/ } .perm-accordion__header.focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } .perm-accordion__header:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } .perm-accordion__body { padding: 0 0 var(--base-padding) 0; -webkit-transition: all 600ms ease; transition: all 600ms ease; } @media (min-width: 768px) { .perm-accordion__body { /* padding:0rem 1rem 1rem calc(var(--perm-accordion-padding,40px) + 2rem); */ } } @media (min-width: 1200px) { .perm-accordion__body { /* padding:0rem 0rem 1rem calc(var(--perm-accordion-padding,40px) + 0rem); */ } } .perm-accordion:not([open]) { /* min-height:2.68rem; */ max-height: 150px; -webkit-transition: all 1700ms ease; transition: all 1700ms ease; } .perm-accordion:not([open]) > .perm-accordion__body { opacity: 0; } .perm-accordion[open] { height: auto; outline: none; max-height: 300rem; } .perm-accordion[open] > .perm-accordion__body { opacity: 1; } .perm-accordion[open] > .perm-accordion__header:before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .perm-slider { /* outline:1px dashed red !important; */ width: 100%; overflow-x: hidden; /*margin-top: 100px;*/ display: block; position: relative; padding-bottom: 40px; max-height: -webkit-fit-content; max-height: -moz-fit-content; max-height: fit-content; overflow-y: hidden; /* min-height: 100px;*/ } .slider-dots-nav { width: auto; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; /* outline:1px dashed red !important;*/ position: absolute; z-index: 200; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .slider-dots-nav .swiper-pagination-bullet { border-radius: 0; width: 40px; height: 6px; background: var(--gray, gray); margin-right: 10px; } .slider-dots-nav .swiper-pagination-bullet-active { background: var(--brand-color-accent, red); } .slider-dots-nav .swiper-pagination-bullet:focus { outline: none; } .arrow { width: 30px; height: 30px; position: absolute; z-index: 100; top: 50%; -webkit-transform: translateY(calc(-50% - 10px)); transform: translateY(calc(-50% - 10px)); cursor: pointer; -webkit-transform-origin: center; transform-origin: center; } .arrow-left { left: 0; } .arrow-right { -webkit-transform: scaleX(-1) translateY(calc(-50% - 10px)); transform: scaleX(-1) translateY(calc(-50% - 10px)); right: 20px; } .arrow:focus { outline: none; } .perm-slide keen-slider__slide { display: inline-block; width: 100%; margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .arrow-icon { fill: var(--brand-color-accent, red); } /*outline: 1px dashed red !important;*/ .perm-googlemaps { overflow: hidden; } .perm-googlemaps iframe { width: 100%; height: 100%; min-height: 400px; } .test { -webkit-animation: none 0s ease 0s 1 normal none running; animation: none 0s ease 0s 1 normal none running; -webkit-backface-visibility: visible; backface-visibility: visible; background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; border: medium none currentColor; border-collapse: separate; -o-border-image: none; border-image: none; border-radius: 0; border-spacing: 0; bottom: auto; -webkit-box-shadow: none; box-shadow: none; -webkit-box-sizing: content-box; box-sizing: content-box; caption-side: top; clear: none; clip: auto; color: #000; -webkit-columns: auto; -moz-columns: auto; columns: auto; -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; -webkit-column-fill: balance; -moz-column-fill: balance; column-fill: balance; -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; -webkit-column-rule: medium none currentColor; -moz-column-rule: medium none currentColor; column-rule: medium none currentColor; -webkit-column-span: 1; -moz-column-span: 1; column-span: 1; -webkit-column-width: auto; -moz-column-width: auto; column-width: auto; content: normal; counter-increment: none; counter-reset: none; cursor: auto; direction: ltr; display: inline; empty-cells: show; float: none; font-family: serif; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal; height: auto; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; left: auto; letter-spacing: normal; list-style: disc outside none; margin: 0; max-height: none; max-width: none; min-height: 0; min-width: 0; opacity: 1; orphans: 2; outline: medium none invert; overflow: visible; overflow-x: visible; overflow-y: visible; padding: 0; page-break-after: auto; page-break-before: auto; page-break-inside: auto; -webkit-perspective: none; perspective: none; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; position: static; right: auto; -moz-tab-size: 8; -o-tab-size: 8; tab-size: 8; table-layout: auto; text-align: left; -moz-text-align-last: auto; text-align-last: auto; text-decoration: none; text-indent: 0; text-shadow: none; text-transform: none; top: auto; -webkit-transform: none; transform: none; -webkit-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; -webkit-transform-style: flat; transform-style: flat; -webkit-transition: none 0s ease 0s; transition: none 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: auto; word-spacing: normal; z-index: auto; all: initial; } .gmap { aspect-ratio: 1/1; margin-top: 100px; margin-bottom: 20px; } @media (min-width: 1024px) { .gmap { aspect-ratio: 16/6; } } .flex-x { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .flex { display: block; } @media (min-width: 1024px) { .flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .pharmacy-info-address h4 { font-size: 13px; font-weight: 700 !important; text-transform: none !important; text-transform: initial !important; } .pharmacy-info-address p { font-size: 13px; line-height: 1.4; margin-top: 0 !important; } .pharmacy-info-address div { margin-top: 0; } .emergencyServiceTable { width: 100%; border-collapse: collapse; } /*visibility: hidden;*/ .emergencyServiceTable th { font-size: 18px; font-weight: 700; padding: 18px; } .emergencyServiceTable tr:nth-child(even) { background-color: #eee; } .emergencyServiceTable tr:nth-child(odd) { background-color: #ccc; } .emergencyServiceTable td { padding: 1rem; } .emergencyServiceTable .date { margin: 0 10px; } @media (max-width: 768px) { /* visibility: visible;*/ .emergencyServiceTable thead, .emergencyServiceTable .theadline { display: none; } .emergencyServiceTable tr { float: left; width: 100%; margin-bottom: 20px; } .emergencyServiceTable td { float: left; width: 100%; padding: 4px 18px; } .emergencyServiceTable .is-small-on-mobile { font-size: 14px !important; line-height: 1.4; } } @media (min-width: 1024px) { .emergencyServiceTable { /* visibility: visible;*/ } } .update-zip-submit { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: transparent; display: inline-block; padding: 10px; } .update-zip-submit img { display: inline-block; width: 40px; } .emergency-header { margin-bottom: 20px; } .emergency-header label { margin: 0 10px 0; } .icon { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: transparent; cursor: pointer; } .icon svg { width: 30px; height: 30px; } .zip-form-field { /*margin-left: 40px;*/ } .error { color: red; background-color: #eac9c9; padding: 1rem; border: 1px solid red; } .perm-magazine .grid-container { /* outline: 1px dashed red !important;*/ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-gap: var(--base-padding, 30px); gap: var(--base-padding, 30px); grid-auto-rows: minmax(100px, auto); } .perm-magazine .grid-container.max-items-1 { grid-template-columns: 1fr; } .perm-magazine .grid-container.max-items-2 { grid-template-columns: repeat( auto-fit, minmax(calc(var(--content-max-width-xxl) / 3), 1fr) ); } .perm-magazine .grid-container.max-items-3 { grid-template-columns: repeat( auto-fit, minmax(calc(var(--content-max-width-xxl) / 4), 1fr) ); } .perm-magazine .grid-container.max-items-4 { grid-template-columns: repeat( auto-fit, minmax(calc(var(--content-max-width-xxl) / 5), 1fr) ); } .perm-magazine .grid-container.max-items-5 { grid-template-columns: repeat( auto-fit, minmax(calc(var(--content-max-width-xxl) / 6), 1fr) ); } .perm-magazine .grid-container.max-items-6 { grid-template-columns: repeat( auto-fit, minmax(calc(var(--content-max-width-xxl) / 7), 1fr) ); } .perm-magazine .grid-container > .magazine-article { /* outline: 3px dashed #144ee4 !important;*/ position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .perm-magazine .grid-container > .magazine-article img { width: 100%; height: auto; aspect-ratio: 4/3; -o-object-fit: contain; object-fit: contain; } .perm-magazine .grid-container > .magazine-article h4 { height: 60px; width: 100%; } .perm-magazine .magazine-detail-link { margin-top: auto; position: static; } .perm-magazine .magazine-detail-link:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1000; /* Sit on top */ padding-top: 60px; /* Location of the box */ top: 0; right: 0; bottom: 0; left: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 95%; height: calc(100vh - 100px); border-radius: 8px; overflow: auto; } /* Enable scroll if needed */ @media (min-width: 768px) { .modal-content { width: 95%; } } @media (min-width: 992px) { .modal-content { width: 75%; } } .modal-content .modal-inner-content { max-width: 90%; margin: 0 auto; } .modal-content .modal-inner-content img { margin: 20px auto 0; } @media (min-width: 768px) { .modal-content .modal-inner-content img { max-width: 560px !important; } } @media (min-width: 992px) { .modal-content .modal-inner-content img { max-width: 560px !important; } } .modal-content .modal-inner-content figcaption { font-size: 14px; line-height: 15px; max-width: 560px !important; margin: 0 auto; margin-bottom: 20px; background: var(--dark-color); color: var(--white); padding: 10px; } .modal-content .modal-inner-content figcaption figcaption { display: none; } .modal-content .modal-inner-content .author { max-width: 460px; margin: 20px auto; } /* The Close Button */ .close { color: #111; position: absolute; width: 40px; height: 40px; right: 2rem; top: 2rem; font-size: 28px; font-weight: bold; border-radius: 100%; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } .video-component { display: inline-block; overflow: hidden; aspect-ratio: 16/9; } .video-component video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .perm-overlaybox { /*outline:1px dashed red !important;*/ } :root { --overlay-box-bg-color: white; --overlay-box-text-color: white; --overlay-box-size-w: fit-content; --overlay-box-size-h: 300px; --color-close-btn: 300px; --overlay-box-pos-top: 110px; --overlay-box-pos-bottom: auto; --overlay-box-pos-left: auto; --overlay-box-pos-right: 0; --overlay-box-pos-transform-x: 0; --overlay-box-pos-transform-y: 0; } .perm-overlaybox { --overlay-box-close-btn-size: 80px; -webkit-transform-origin: center; transform-origin: center; position: fixed !important; z-index: 1000; top: var(--overlay-box-pos-top, 3rem); right: var(--overlay-box-pos-right, 0rem); bottom: var(--overlay-box-pos-bottom, auto); left: var(--overlay-box-pos-left, auto); overflow: hidden; /*min-width:fit-content;*/ max-width: 90dvh; max-height: 90dvh; /*width: var(--overlay-box-size-w, 360px);*/ min-height: var(--overlay-box-size-h, 360px); color: var(--overlay-box-text-color, black); background-color: var(--overlay-box-bg-color, gray); -webkit-box-shadow: 10px 10px 12px rgba(11, 11, 11, 0.7); box-shadow: 10px 10px 12px rgba(11, 11, 11, 0.7); -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease; animation-timing-function: ease; } .perm-overlaybox.position-center { top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .perm-overlaybox.position-top-right { top: var(--overlay-box-pos-top, 3rem); bottom: auto; right: 0; left: auto; } .perm-overlaybox.position-top-center { top: var(--overlay-box-pos-top, 3rem); bottom: auto; right: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: auto; } .perm-overlaybox.position-top-left { top: var(--overlay-box-pos-top, 3rem); bottom: auto; right: auto; left: 0; } .perm-overlaybox.position-bottom-right { top: auto; bottom: var(--overlay-box-pos-bottom, 3rem); right: 0; left: auto; } .perm-overlaybox.position-bottom-center { top: auto; bottom: var(--overlay-box-pos-bottom, 3rem); right: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: auto; } .perm-overlaybox.position-bottom-left { top: auto; bottom: var(--overlay-box-pos-bottom, 3rem); right: auto; left: 0; } .perm-overlaybox > .overlaybox-close-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; position: absolute; z-index: 100; top: 0; right: 0; background-color: transparent; width: var(--overlay-box-close-btn-size, 40px); height: var(--overlay-box-close-btn-size, 40px); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .perm-overlaybox > .overlaybox-close-button:hover, .perm-overlaybox > .overlaybox-close-button:focus { -webkit-transform: scale(0.8); transform: scale(0.8); } .overlaybox-close-button svg { width: 100%; height: 100%; color: var(--color-close-btn, white) !important; fill: transparent !important; } .perm-overlaybox > button > svg { color: var(--color-close-btn, white) !important; } .perm-overlaybox .om3__segment { /*padding: 0 !important;*/ } @media (max-width: 600px) { .perm-overlaybox { width: 100%; } } @-webkit-keyframes animateBoxIn { 0% { opacity: 0; /*transform: scale(0.2) translate3d(var(--overlay-box-pos-transform-x, 0), var(--overlay-box-pos-transform-y, 0), 0);*/ } 100% { opacity: 1; /*transform: scale(1) translate3d(var(--overlay-box-pos-transform-x, 0), var(--overlay-box-pos-transform-y, 0), 0);*/ } } @keyframes animateBoxIn { 0% { opacity: 0; /*transform: scale(0.2) translate3d(var(--overlay-box-pos-transform-x, 0), var(--overlay-box-pos-transform-y, 0), 0);*/ } 100% { opacity: 1; /*transform: scale(1) translate3d(var(--overlay-box-pos-transform-x, 0), var(--overlay-box-pos-transform-y, 0), 0);*/ } } @-webkit-keyframes animateBoxOut { 0% { opacity: 1; /*transform: scale(1);*/ } 100% { opacity: 0; /*transform: scale(0.2) translate3d(var(--overlay-box-pos-transform-x, 0), var(--overlay-box-pos-transform-y, 0), 0);*/ } } @keyframes animateBoxOut { 0% { opacity: 1; /*transform: scale(1);*/ } 100% { opacity: 0; /*transform: scale(0.2) translate3d(var(--overlay-box-pos-transform-x, 0), var(--overlay-box-pos-transform-y, 0), 0);*/ } } .impressum-component p + * { margin-top: calc(var(--content-spacing-y-sm) * 1); } .impressum-component ul { list-style-type: none !important; padding: 0 !important; margin-bottom: 18px !important; } @media (min-width: 768px) { .impressum-component p + * { margin-top: calc(var(--content-spacing-y-md) * 1); } } @media (min-width: 992px) { .impressum-component p + * { margin-top: calc(var(--content-spacing-y-lg) * 1); } } .impressum-container > .neos-contentcollection > * { -webkit-columns: 380px 2; -moz-columns: 380px 2; columns: 380px 2; -webkit-column-gap: var(--base-padding, 30px); -moz-column-gap: var(--base-padding, 30px); column-gap: var(--base-padding, 30px); -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid-column; } .impressum-container > .neos-contentcollection > * p { -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid-column; } /*.impressum-container > .neos-contentcollection ul { list-style-type: none !important; padding: 0 !important; margin-bottom: 18px !important; }*/ .impressum-container p { margin-top: 0; } .columns { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: var(--base-padding); -moz-column-gap: var(--base-padding); column-gap: var(--base-padding); -webkit-column-rule: 0; -moz-column-rule: 0; column-rule: 0; -webkit-column-fill: balance; -moz-column-fill: balance; column-fill: balance; } .columns-1 { -webkit-columns: 380px 1 !important; -moz-columns: 380px 1 !important; columns: 380px 1 !important; } .columns-2 { -webkit-columns: 380px 2 !important; -moz-columns: 380px 2 !important; columns: 380px 2 !important; } .columns-3 { -webkit-columns: 380px 3 !important; -moz-columns: 380px 3 !important; columns: 380px 3 !important; } .columns-4 { -webkit-columns: 280px 4 !important; -moz-columns: 280px 4 !important; columns: 280px 4 !important; } .download-pdf { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .download-pdf button { width: auto !important; display: inline-block; } .download-button-container { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } .childred-x-align-end .download-button-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .childred-x-align-center .download-button-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* test*/ .compact-layout-refactored > .neos-contentcollection { /* outline: 3px dashed orange !important;*/ display: grid !important; min-height: 2000px; grid-gap: 30px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-auto-rows: 0; } /* grid-auto-flow: dense;*/ .compact-layout-refactored > .neos-contentcollection > * { width: 100%; -webkit-animation: none 0s ease 0s 1 normal none running; animation: none 0s ease 0s 1 normal none running; -webkit-backface-visibility: visible; backface-visibility: visible; background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; border: medium none currentColor; border-collapse: separate; -o-border-image: none; border-image: none; border-radius: 0; border-spacing: 0; bottom: auto; -webkit-box-shadow: none; box-shadow: none; -webkit-box-sizing: content-box; box-sizing: content-box; caption-side: top; clear: none; clip: auto; color: #000; -webkit-columns: auto; -moz-columns: auto; columns: auto; -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; -webkit-column-fill: balance; -moz-column-fill: balance; column-fill: balance; -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; -webkit-column-rule: medium none currentColor; -moz-column-rule: medium none currentColor; column-rule: medium none currentColor; -webkit-column-span: 1; -moz-column-span: 1; column-span: 1; -webkit-column-width: auto; -moz-column-width: auto; column-width: auto; content: normal; counter-increment: none; counter-reset: none; cursor: auto; direction: ltr; display: inline; empty-cells: show; float: none; font-family: serif; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal; height: auto; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; left: auto; letter-spacing: normal; list-style: disc outside none; margin: 0; max-height: none; max-width: none; min-height: 0; min-width: 0; opacity: 1; orphans: 2; outline: medium none invert; overflow: visible; overflow-x: visible; overflow-y: visible; padding: 0; page-break-after: auto; page-break-before: auto; page-break-inside: auto; -webkit-perspective: none; perspective: none; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; position: static; right: auto; -moz-tab-size: 8; -o-tab-size: 8; tab-size: 8; table-layout: auto; text-align: left; -moz-text-align-last: auto; text-align-last: auto; text-decoration: none; text-indent: 0; text-shadow: none; text-transform: none; top: auto; -webkit-transform: none; transform: none; -webkit-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; -webkit-transform-style: flat; transform-style: flat; -webkit-transition: none 0s ease 0s; transition: none 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: auto; word-spacing: normal; z-index: auto; animation: none 0s ease 0s 1 normal none running; backface-visibility: visible; background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; border: medium none currentColor; border-collapse: separate; border-image: none; border-radius: 0; border-spacing: 0; bottom: auto; box-shadow: none; box-sizing: content-box; caption-side: top; clear: none; clip: auto; color: #000; columns: auto; column-count: auto; column-fill: balance; column-gap: normal; column-rule: medium none currentColor; column-span: 1; column-width: auto; content: normal; counter-increment: none; counter-reset: none; cursor: auto; direction: ltr; display: inline; empty-cells: show; float: none; font-family: serif; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal; height: auto; hyphens: none; left: auto; letter-spacing: normal; list-style: disc outside none; margin: 0; max-height: none; max-width: none; min-height: 0; min-width: 0; opacity: 1; orphans: 2; outline: medium none invert; overflow: visible; overflow-x: visible; overflow-y: visible; padding: 0; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspective: none; perspective-origin: 50% 50%; position: static; right: auto; tab-size: 8; table-layout: auto; text-align: left; text-align-last: auto; text-decoration: none; text-indent: 0; text-shadow: none; text-transform: none; top: auto; transform: none; transform-origin: 50% 50% 0; transform-style: flat; transition: none 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: auto; word-spacing: normal; z-index: auto; all: initial; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .compact-layout-refactored > .neos-contentcollection > * > .neos-contentcollection { -webkit-animation: none 0s ease 0s 1 normal none running; animation: none 0s ease 0s 1 normal none running; -webkit-backface-visibility: visible; backface-visibility: visible; background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; border: medium none currentColor; border-collapse: separate; -o-border-image: none; border-image: none; border-radius: 0; border-spacing: 0; bottom: auto; -webkit-box-shadow: none; box-shadow: none; -webkit-box-sizing: content-box; box-sizing: content-box; caption-side: top; clear: none; clip: auto; color: #000; -webkit-columns: auto; -moz-columns: auto; columns: auto; -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; -webkit-column-fill: balance; -moz-column-fill: balance; column-fill: balance; -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; -webkit-column-rule: medium none currentColor; -moz-column-rule: medium none currentColor; column-rule: medium none currentColor; -webkit-column-span: 1; -moz-column-span: 1; column-span: 1; -webkit-column-width: auto; -moz-column-width: auto; column-width: auto; content: normal; counter-increment: none; counter-reset: none; cursor: auto; direction: ltr; display: inline; empty-cells: show; float: none; font-family: serif; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal; height: auto; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; left: auto; letter-spacing: normal; list-style: disc outside none; margin: 0; max-height: none; max-width: none; min-height: 0; min-width: 0; opacity: 1; orphans: 2; outline: medium none invert; overflow: visible; overflow-x: visible; overflow-y: visible; padding: 0; page-break-after: auto; page-break-before: auto; page-break-inside: auto; -webkit-perspective: none; perspective: none; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; position: static; right: auto; -moz-tab-size: 8; -o-tab-size: 8; tab-size: 8; table-layout: auto; text-align: left; -moz-text-align-last: auto; text-align-last: auto; text-decoration: none; text-indent: 0; text-shadow: none; text-transform: none; top: auto; -webkit-transform: none; transform: none; -webkit-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; -webkit-transform-style: flat; transform-style: flat; -webkit-transition: none 0s ease 0s; transition: none 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: auto; word-spacing: normal; z-index: auto; animation: none 0s ease 0s 1 normal none running; backface-visibility: visible; background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; border: medium none currentColor; border-collapse: separate; border-image: none; border-radius: 0; border-spacing: 0; bottom: auto; box-shadow: none; box-sizing: content-box; caption-side: top; clear: none; clip: auto; color: #000; columns: auto; column-count: auto; column-fill: balance; column-gap: normal; column-rule: medium none currentColor; column-span: 1; column-width: auto; content: normal; counter-increment: none; counter-reset: none; cursor: auto; direction: ltr; display: inline; empty-cells: show; float: none; font-family: serif; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal; height: auto; hyphens: none; left: auto; letter-spacing: normal; list-style: disc outside none; margin: 0; max-height: none; max-width: none; min-height: 0; min-width: 0; opacity: 1; orphans: 2; outline: medium none invert; overflow: visible; overflow-x: visible; overflow-y: visible; padding: 0; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspective: none; perspective-origin: 50% 50%; position: static; right: auto; tab-size: 8; table-layout: auto; text-align: left; text-align-last: auto; text-decoration: none; text-indent: 0; text-shadow: none; text-transform: none; top: auto; transform: none; transform-origin: 50% 50% 0; transform-style: flat; transition: none 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: auto; word-spacing: normal; z-index: auto; all: initial; -webkit-box-sizing: border-box; box-sizing: border-box; } .compact-layout-refactored > .neos-contentcollection > * > .neos-contentcollection > * { display: block !important; } .error-messages { position: fixed; z-index: 2001; width: 100%; left: 0; bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-animation-name: slideInFromBottom; animation-name: slideInFromBottom; -webkit-animation-duration: 0.64s; animation-duration: 0.64s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .error-messages-inner { max-width: var(--container-max-width-large, 1150px); margin: 0 auto; padding: 1rem 2rem; font-weight: 700; border-width: 1px; border-style: solid; } .error-messages-inner.is-error { background: #ffa3a3; color: red; border-color: red; } .error-messages-inner.is-success { background: #b4f9b4; color: forestgreen; border-color: forestgreen; } @-webkit-keyframes slideInFromBottom { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes slideInFromBottom { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes slideOutFromBottom { 0% { -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes slideOutFromBottom { 0% { -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } :root { --form-padding: 20px; --checkbox-scale: 1.2; } .__s_row_id__kontaktform, .om3__segment__contact { margin: 0 0 30px; max-width: 900px; /* display : inline-block;*/ } form { margin: 20px 0; padding: 0 var(--base-padding, 30px); overflow: hidden; } @media (min-width: 768px) { form { margin-top: 0; padding: 5px var(--base-padding, 30px); } } @media (min-width: 1200px) { form { padding: 0 var(--base-padding, 30px); } } label { display: inline-block; vertical-align: top; font-size: 18px; color: var(--gray); font-weight: 400; line-height: 28px; padding: 0; margin: 0 0 10px; } label:empty { max-height: 0.25em !important; overflow: hidden; padding: 0 0 0 0 !important; } label a { -webkit-text-decoration-color: var(--aogv-blue-light, blue) !important; text-decoration-color: var(--aogv-blue-light, blue) !important; } label sup { color: var(--red-color, red); } @media (min-width: 1200px) { } input { accent-color: var(--brand-color-primary, red); } .input:not(.is-upload), .inputs-list:not(.is-upload) { margin-bottom: 10px; } @media (min-width: 1200px) { .input:not(.is-upload), .inputs-list:not(.is-upload) { margin-bottom: 30px; } } input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, select { display: inline-block; width: 100%; padding: 6px 10px; overflow: hidden; background-color: var(--form-field-bg-color, gray); border: 1px solid var(--form-field-border-color, black); border-radius: var(--form-field-border-radius, 3px); -webkit-transition: border 0.5s ease; transition: border 0.5s ease; line-height: 22px; font-size: 18px; font-weight: 400; color: var(--form-field-text-color, blue); } input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus, textarea:focus, select:focus { border: 2px solid var(--form-field-border-focus, black); outline: none; background-color: var(--form-field-bg-color-focus, darkgray); } input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):hover, textarea:hover, select:hover { border: 2px solid var(--form-field-border-focus, black); background-color: var(--form-field-bg-color-focus, darkgray); } input:not([type="checkbox"]):not([type="radio"]):not( [type="submit"] ).focus-visible, textarea.focus-visible, select.focus-visible { border: 2px solid var(--form-field-border-focus, black); outline: none; background-color: var(--form-field-bg-color-focus, darkgray); } input:not([type="checkbox"]):not([type="radio"]):not( [type="submit"] ):focus-visible, textarea:focus-visible, select:focus-visible { border: 2px solid var(--form-field-border-focus, black); outline: none; background-color: var(--form-field-bg-color-focus, darkgray); } input:not([type="checkbox"]):not([type="radio"]):not( [type="submit"] )::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder { color: inherit; opacity: 0.6 !important; } input:not([type="checkbox"]):not([type="radio"]):not( [type="submit"] )::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder { color: inherit; opacity: 0.6 !important; } input:not([type="checkbox"]):not([type="radio"]):not( [type="submit"] ):-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder { color: inherit; opacity: 0.6 !important; } input:not([type="checkbox"]):not([type="radio"]):not( [type="submit"] )::-ms-input-placeholder, textarea::-ms-input-placeholder, select::-ms-input-placeholder { color: inherit; opacity: 0.6 !important; } input:not([type="checkbox"]):not([type="radio"]):not( [type="submit"] )::placeholder, textarea::placeholder, select::placeholder { color: inherit; opacity: 0.6 !important; } input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]).error, textarea.error, select.error { border-color: var(--warn-color, red); } @media (min-width: 1200px) { } textarea { resize: vertical; height: 160px; } @media (min-width: 768px) { textarea { height: auto; } } input[type="checkbox"], input[type="radio"] { color: red; outline-color: var(--aogv-blue-light, purple); outline-offset: -1px; margin: 0 12px 0 2px; -webkit-transform: scale(1.25); transform: scale(1.25); border: none !important; border-radius: 100% !important; min-width: 16px; min-height: 16px; } input[type="checkbox"]:hover:focus, input[type="radio"]:hover:focus { outline: 2px solid var(--aogv-blue-light, purple); } label.form-checkbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; max-width: 740px; } label.form-checkbox input[type="checkbox"] { -webkit-transform: scale(1.25) translateY(52%); transform: scale(1.25) translateY(52%); } label.wrapped-label, label.form-checkbox { color: var(--aogv-gray-dark, black); font-weight: 400; font-size: 20px; } .inputs-list label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } select { background-color: var(--white-color, white); height: var(--form-element-height, 50px); max-height: var(--form-element-height); /*appearance: none;*/ position: relative; overflow: hidden; /*background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyNSAxNSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNTsiPjxwYXRoIGlkPSJjaGV2cm9uLWRvd24iIGQ9Ik0yLjQzMSwyLjU5MWw5Ljg4NywxMC4yMjVsMTAuMjI1LC0xMC4yMjUiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMyMWI4ZDU7c3Ryb2tlLXdpZHRoOjRweDsiLz48L3N2Zz4=") no-repeat calc(100% - 10px) transparent;*/ background-size: 30px; } select option { padding: 0.75em 0.25em; min-height: calc(2em) !important; } select:after { content: ">"; background-image: url('data:image/svg+xml;utf8,'); position: absolute; right: 10px; top: 50%; width: 30px; height: 30px; } fieldset { border: none; padding: 5px 0; } fieldset > div:last-child { border-bottom: none !important; } .content .om3__segment__html > form > .component { padding: 0 !important; width: 100%; } .cron-formbuilder-plugin > button, .button { padding: 10px 20px; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: all; cursor: pointer; } .om3__segment__contact center { text-align: inherit !important; margin: 1em 0; } .om3__segment__contact button { margin: 0.25em 0 1em; } /* Refactor form button , TODO better way maybe */ form { text-align: left; /* button{ background-color: var(--brand-color-primary,blue); color: var(--white-color,white) !important; border:2px solid var(--white-color,white); */ /* TODO still needed the reset ? */ /* appearance: none; transition: var(--transition-all); padding: 8px 20px 11px 20px; border-collapse: collapse; */ /* TODO obsolete rule???*/ /* &:hover{ background-color: var(--white-color,white); color: var(--brand-color-primary) !important; border-color: var(--brand-color-primary); } }*/ } form ul { padding: 10px; margin: 0; } /*TODO see if this is obsoletet or is used */ .success-box { font-size: 36px; padding: 1rem; border: 2px solid var(--success-color, green); max-width: 1150px; width: 100%; margin: 1rem auto; color: var(--success-color, green); background-color: var(--white-color, #ffffff); } legend { position: relative; padding-left: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; color: var(--white-color); background-color: var(--aogv-blue-dark); height: 50px; white-space: nowrap; border-radius: 0 0 0 20px; font-size: 16px; line-height: 50px; font-weight: 500; padding-right: 10px; } legend:focus { background-color: var(--aogv-blue-light); outline: 4px solid var(--aogv-blue-light, purple) !important; outline-offset: 0px; } legend:hover { background-color: var(--aogv-blue-light); } @media (min-width: 1200px) { legend { font-size: 28px; line-height: 68px; height: 68px; padding-right: 30px; padding-left: 80px; } } .toggle-button button { font-weight: 400; display: inline-block; color: var(--black-color, black) !important; background-color: var(--white-color, white); border: 1px solid var(--black-color, black); padding: 10px 100px; margin-right: 20px; } .toggle-button button:hover { outline: 4px solid var(--aogv-blue-light, purple) !important; outline-offset: 0px; } .toggle-button button:focus { outline: 4px solid var(--aogv-blue-light, purple) !important; outline-offset: 0px; } .toggle-button button.focus-visible { outline: 4px solid var(--aogv-blue-light, purple) !important; outline-offset: 0px; } .toggle-button button:focus-visible { outline: 4px solid var(--aogv-blue-light, purple) !important; outline-offset: 0px; } button[type="submit"] { font-weight: 400; display: inline-block; margin-right: 20px; } button[type="submit"]:before { /* content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHRpdGxlPlNlbmQ8L3RpdGxlPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNNDc2LjU5IDIyNy4wNWwtLjE2LS4wN0w0OS4zNSA0OS44NEEyMy41NiAyMy41NiAwIDAwMjcuMTQgNTIgMjQuNjUgMjQuNjUgMCAwMDE2IDcyLjU5djExMy4yOWEyNCAyNCAwIDAwMTkuNTIgMjMuNTdsMjMyLjkzIDQzLjA3YTQgNCAwIDAxMCA3Ljg2TDM1LjUzIDMwMy40NUEyNCAyNCAwIDAwMTYgMzI3djExMy4zMUEyMy41NyAyMy41NyAwIDAwMjYuNTkgNDYwYTIzLjk0IDIzLjk0IDAgMDAxMy4yMiA0IDI0LjU1IDI0LjU1IDAgMDA5LjUyLTEuOTNMNDc2LjQgMjg1Ljk0bC4xOS0uMDlhMzIgMzIgMCAwMDAtNTguOHoiLz48L3N2Zz4="); display:inline-block; width:20px; margin-right:10px; transform: translateY(3px); transition: box-shadow 0.4s ease;*/ } button[type="submit"]:hover { -webkit-box-shadow: var(--perm-button-shadow); box-shadow: var(--perm-button-shadow); text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration: underline; } button[type="submit"]:focus { -webkit-box-shadow: var(--perm-button-shadow); box-shadow: var(--perm-button-shadow); text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration: underline; } .form-upload { position: relative; border: 1px solid var(--black-color, black); min-height: 100px; } .form-upload-icon { display: inline-block; width: 64px; position: absolute; top: 0px; right: var(--form-padding, 20px); pointer-events: none; } .form-upload .button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-color: transparent; } .form-upload .validation-error-msg { color: var(--warn-color, red); padding: 4px; } .form-upload:focus { outline: 4px solid var(--aogv-blue-light, purple) !important; outline-offset: 0px; } .form-upload .dz-button { /* opacity: 0.5; */ } .form-upload .dz-message { opacity: 0.6 !important; margin: 1em 0; max-width: 260px; } .form-upload .dz-message span { display: inline-block; } .form-upload .dz-message button { display: inline-block; text-decoration: underline; } @media (min-width: 1200px) { .form-upload .dz-message { margin: 1em auto; } } .form-upload .dropzone { --upload-preview-size: 80px; min-height: 100px; border-radius: 0; border: none; } .form-upload .dropzone:focus { outline: 4px solid var(--aogv-blue-light, purple) !important; outline-offset: 0px; } .form-upload .dropzone:hover { outline: 4px solid var(--aogv-blue-light, purple) !important; outline-offset: 0px; } .form-upload .dropzone .dz-preview { margin: 0 20px 0 0; } .form-upload .dropzone .dz-preview .dz-image { width: var(--upload-preview-size, 80px); height: var(--upload-preview-size, 80px); } .form-upload .dropzone .dz-preview .dz-details .dz-size { margin-bottom: 0px; } .form-upload .dropzone .dz-preview .dz-details .dz-size span { font-size: 10px; } .form-upload .dropzone .dz-preview .dz-details .dz-filename { font-size: 14px; } .form-upload .dropzone .dz-preview .dz-details .dz-filename span { white-space: nowrap; } .required, .help-inline { color: var(--warn-color, red); } .row { margin-top: 30px; display: grid; grid-gap: 10px; grid-auto-flow: row; grid-template-columns: 1fr; } @media (min-width: 1200px) { .row { margin-top: 60px; grid-gap: var(--base-padding); grid-template-columns: 1fr 1fr; } } .row.is-full-width { /* display:block; */ } .row .col.is-full { grid-column: 1 / -1; } .error input:not([type="checkbox"]):not([type="radio"]), .error textarea, .error select { border-color: var(--warn-color, red); } .error input[type="checkbox"] { outline: 2px solid var(--warn-color, red) !important; outline-offset: -1px; } .help-inline { display: block; font-size: 18px; color: var(--warn-color, red); margin-top: 10px; } .is-hidden { display: none; } /* position:relative; */ .is-invalid:after { position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-left: auto; font-size: 18px; font-weight: 400 !important; content: "\00a0"; background-repeat: no-repeat; background-position: left center; padding-left: 46px; background-size: 36px; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzNyAzNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNTsiPjxnIGlkPSJpY29uLWZhbHNjaCI+PGNpcmNsZSBjeD0iMTguMjEyIiBjeT0iMTguNDI1IiByPSIxOCIgc3R5bGU9ImZpbGw6I0NFMEIwQjsiLz48Zz48cGF0aCBkPSJNMTguMjEyLDI3LjI2OWwwLDMuMzEyIiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS13aWR0aDo0cHg7Ii8+PHBhdGggZD0iTTE4LjIxMiw2LjI2OWwwLDE3LjQyNCIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2Utd2lkdGg6NHB4OyIvPjwvZz48L2c+PC9zdmc+"); } @media (min-width: 1200px) { .is-invalid:after { content: "Fehlende Eingaben"; padding-left: 46px; } } .is-valid { position: relative; } .is-valid:after { margin-left: auto; font-size: 18px; height: 50px; font-weight: 400 !important; content: "\00a0"; background-repeat: no-repeat; background-position: left center; padding-left: 46px; background-size: 36px; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzNyAzNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNTsiPjxnIGlkPSJpY29uLXJpY2h0aWciPjxjaXJjbGUgY3g9IjE4LjI2NyIgY3k9IjE4LjQyNSIgcj0iMTgiIHN0eWxlPSJmaWxsOiMwM2FkMjM7Ii8+PHBhdGggZD0iTTcuMDY0LDE4LjY2NWw2Ljg3MSw3LjUyOGwxNS41MzYsLTE1LjUzNiIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2Utd2lkdGg6NHB4OyIvPjwvZz48L3N2Zz4="); } @media (min-width: 1200px) { } .delete-upload { color: var(--aogv-blue-light, purple); font-weight: 700; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); font-size: 16px; } .delete-upload:after { content: ""; } .dz-remove { z-index: 100; } .error-message { color: var(--warn-color, red); } button[disabled] { opacity: 0.6; } /* Add required decorator to labels of conditionally hidden fields*/ .required-conditional label:after { content: "*"; color: var(--warn-color, emerald); } /* fix to large spacings */ .col .row.is-full-width { margin-top: 0; } .required, .help-inline { color: var(--warn-color, red); } .form-checkbox-label { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .form-checkbox-label input[type="checkbox"] { margin-top: 10px; } .form-checkbox-label > span { max-width: 90%; } .form-checkbox-label .error-message { width: 100% !important; } /* use animation css https://animista.net/ or sal.css css classes if needed */ /* pop,rotate,fadeOut,FadeIn */ @-webkit-keyframes colors { 0% { stroke: #4285f4; } 50% { stroke: #333333; } 99% { stroke: #4285f4; } } @keyframes colors { 0% { stroke: #4285f4; } 50% { stroke: #333333; } 99% { stroke: #4285f4; } } @-webkit-keyframes dash { 0% { stroke-dashoffset: 187; } 50% { stroke-dashoffset: 46.75; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 100% { stroke-dashoffset: 187; -webkit-transform: rotate(450deg); transform: rotate(450deg); } } @keyframes dash { 0% { stroke-dashoffset: 187; } 50% { stroke-dashoffset: 46.75; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 100% { stroke-dashoffset: 187; -webkit-transform: rotate(450deg); transform: rotate(450deg); } } /* .path { stroke-dasharray: 187; stroke-dashoffset: 0; transform-origin: center; animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite; }*/ /*ZOOM hoover effect*/ .has-zoom-anim { -webkit-transition: -webkit-box-shadow 0.4s ease, -webkit-transform 0.4s ease; transition: -webkit-box-shadow 0.4s ease, -webkit-transform 0.4s ease; transition: box-shadow 0.4s ease, transform 0.4s ease; transition: box-shadow 0.4s ease, transform 0.4s ease, -webkit-box-shadow 0.4s ease, -webkit-transform 0.4s ease; } .has-zoom-anim:hover { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-box-shadow: var(--shadow-fx, 10px 10px 49px -10px black); box-shadow: var(--shadow-fx, 10px 10px 49px -10px black); } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .animate__tada { -webkit-animation-name: tada; animation-name: tada; -webkit-animation-duration: 1s; animation-duration: 1s; } [data-sal] { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-delay: var(--sal-delay, 0s); transition-delay: var(--sal-delay, 0s); -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-duration: var(--sal-duration, 0.2s); transition-duration: var(--sal-duration, 0.2s); -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-timing-function: var(--sal-easing, ease); transition-timing-function: var(--sal-easing, ease); } [data-sal][data-sal-duration="200"] { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } [data-sal][data-sal-duration="250"] { -webkit-transition-duration: 0.25s; transition-duration: 0.25s; } [data-sal][data-sal-duration="300"] { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } [data-sal][data-sal-duration="350"] { -webkit-transition-duration: 0.35s; transition-duration: 0.35s; } [data-sal][data-sal-duration="400"] { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } [data-sal][data-sal-duration="450"] { -webkit-transition-duration: 0.45s; transition-duration: 0.45s; } [data-sal][data-sal-duration="500"] { -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } [data-sal][data-sal-duration="550"] { -webkit-transition-duration: 0.55s; transition-duration: 0.55s; } [data-sal][data-sal-duration="600"] { -webkit-transition-duration: 0.6s; transition-duration: 0.6s; } [data-sal][data-sal-duration="650"] { -webkit-transition-duration: 0.65s; transition-duration: 0.65s; } [data-sal][data-sal-duration="700"] { -webkit-transition-duration: 0.7s; transition-duration: 0.7s; } [data-sal][data-sal-duration="750"] { -webkit-transition-duration: 0.75s; transition-duration: 0.75s; } [data-sal][data-sal-duration="800"] { -webkit-transition-duration: 0.8s; transition-duration: 0.8s; } [data-sal][data-sal-duration="850"] { -webkit-transition-duration: 0.85s; transition-duration: 0.85s; } [data-sal][data-sal-duration="900"] { -webkit-transition-duration: 0.9s; transition-duration: 0.9s; } [data-sal][data-sal-duration="950"] { -webkit-transition-duration: 0.95s; transition-duration: 0.95s; } [data-sal][data-sal-duration="1000"] { -webkit-transition-duration: 1s; transition-duration: 1s; } [data-sal][data-sal-duration="1050"] { -webkit-transition-duration: 1.05s; transition-duration: 1.05s; } [data-sal][data-sal-duration="1100"] { -webkit-transition-duration: 1.1s; transition-duration: 1.1s; } [data-sal][data-sal-duration="1150"] { -webkit-transition-duration: 1.15s; transition-duration: 1.15s; } [data-sal][data-sal-duration="1200"] { -webkit-transition-duration: 1.2s; transition-duration: 1.2s; } [data-sal][data-sal-duration="1250"] { -webkit-transition-duration: 1.25s; transition-duration: 1.25s; } [data-sal][data-sal-duration="1300"] { -webkit-transition-duration: 1.3s; transition-duration: 1.3s; } [data-sal][data-sal-duration="1350"] { -webkit-transition-duration: 1.35s; transition-duration: 1.35s; } [data-sal][data-sal-duration="1400"] { -webkit-transition-duration: 1.4s; transition-duration: 1.4s; } [data-sal][data-sal-duration="1450"] { -webkit-transition-duration: 1.45s; transition-duration: 1.45s; } [data-sal][data-sal-duration="1500"] { -webkit-transition-duration: 1.5s; transition-duration: 1.5s; } [data-sal][data-sal-duration="1550"] { -webkit-transition-duration: 1.55s; transition-duration: 1.55s; } [data-sal][data-sal-duration="1600"] { -webkit-transition-duration: 1.6s; transition-duration: 1.6s; } [data-sal][data-sal-duration="1650"] { -webkit-transition-duration: 1.65s; transition-duration: 1.65s; } [data-sal][data-sal-duration="1700"] { -webkit-transition-duration: 1.7s; transition-duration: 1.7s; } [data-sal][data-sal-duration="1750"] { -webkit-transition-duration: 1.75s; transition-duration: 1.75s; } [data-sal][data-sal-duration="1800"] { -webkit-transition-duration: 1.8s; transition-duration: 1.8s; } [data-sal][data-sal-duration="1850"] { -webkit-transition-duration: 1.85s; transition-duration: 1.85s; } [data-sal][data-sal-duration="1900"] { -webkit-transition-duration: 1.9s; transition-duration: 1.9s; } [data-sal][data-sal-duration="1950"] { -webkit-transition-duration: 1.95s; transition-duration: 1.95s; } [data-sal][data-sal-duration="2000"] { -webkit-transition-duration: 2s; transition-duration: 2s; } [data-sal][data-sal-delay="50"] { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } [data-sal][data-sal-delay="100"] { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } [data-sal][data-sal-delay="150"] { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } [data-sal][data-sal-delay="200"] { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } [data-sal][data-sal-delay="250"] { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } [data-sal][data-sal-delay="300"] { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } [data-sal][data-sal-delay="350"] { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } [data-sal][data-sal-delay="400"] { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } [data-sal][data-sal-delay="450"] { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; } [data-sal][data-sal-delay="500"] { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } [data-sal][data-sal-delay="550"] { -webkit-transition-delay: 0.55s; transition-delay: 0.55s; } [data-sal][data-sal-delay="600"] { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } [data-sal][data-sal-delay="650"] { -webkit-transition-delay: 0.65s; transition-delay: 0.65s; } [data-sal][data-sal-delay="700"] { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } [data-sal][data-sal-delay="750"] { -webkit-transition-delay: 0.75s; transition-delay: 0.75s; } [data-sal][data-sal-delay="800"] { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } [data-sal][data-sal-delay="850"] { -webkit-transition-delay: 0.85s; transition-delay: 0.85s; } [data-sal][data-sal-delay="900"] { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } [data-sal][data-sal-delay="950"] { -webkit-transition-delay: 0.95s; transition-delay: 0.95s; } [data-sal][data-sal-delay="1000"] { -webkit-transition-delay: 1s; transition-delay: 1s; } [data-sal][data-sal-easing="linear"] { -webkit-transition-timing-function: linear; transition-timing-function: linear; } [data-sal][data-sal-easing="ease"] { -webkit-transition-timing-function: ease; transition-timing-function: ease; } [data-sal][data-sal-easing="ease-in"] { -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } [data-sal][data-sal-easing="ease-out"] { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } [data-sal][data-sal-easing="ease-in-out"] { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } [data-sal][data-sal-easing="ease-in-cubic"] { -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } [data-sal][data-sal-easing="ease-out-cubic"] { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } [data-sal][data-sal-easing="ease-in-out-cubic"] { -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } [data-sal][data-sal-easing="ease-in-circ"] { -webkit-transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); } [data-sal][data-sal-easing="ease-out-circ"] { -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); } [data-sal][data-sal-easing="ease-in-out-circ"] { -webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); } [data-sal][data-sal-easing="ease-in-expo"] { -webkit-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); } [data-sal][data-sal-easing="ease-out-expo"] { -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } [data-sal][data-sal-easing="ease-in-out-expo"] { -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1); transition-timing-function: cubic-bezier(1, 0, 0, 1); } [data-sal][data-sal-easing="ease-in-quad"] { -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } [data-sal][data-sal-easing="ease-out-quad"] { -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-sal][data-sal-easing="ease-in-out-quad"] { -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } [data-sal][data-sal-easing="ease-in-quart"] { -webkit-transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); } [data-sal][data-sal-easing="ease-out-quart"] { -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } [data-sal][data-sal-easing="ease-in-out-quart"] { -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); } [data-sal][data-sal-easing="ease-in-quint"] { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); } [data-sal][data-sal-easing="ease-out-quint"] { -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } [data-sal][data-sal-easing="ease-in-out-quint"] { -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); } [data-sal][data-sal-easing="ease-in-sine"] { -webkit-transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } [data-sal][data-sal-easing="ease-out-sine"] { -webkit-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } [data-sal][data-sal-easing="ease-in-out-sine"] { -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); } [data-sal][data-sal-easing="ease-in-back"] { -webkit-transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); } [data-sal][data-sal-easing="ease-out-back"] { -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } [data-sal][data-sal-easing="ease-in-out-back"] { -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } [data-sal|="fade"] { opacity: 0; -webkit-transition-property: opacity; transition-property: opacity; } [data-sal|="fade"].sal-animate, body.sal-disabled [data-sal|="fade"] { opacity: 1; } [data-sal|="slide"] { opacity: 0; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; } [data-sal="slide-up"] { -webkit-transform: translateY(20%); transform: translateY(20%); } [data-sal="slide-down"] { -webkit-transform: translateY(-20%); transform: translateY(-20%); } [data-sal="slide-left"] { -webkit-transform: translateX(20%); transform: translateX(20%); } [data-sal="slide-right"] { -webkit-transform: translateX(-20%); transform: translateX(-20%); } [data-sal|="slide"].sal-animate, body.sal-disabled [data-sal|="slide"] { opacity: 1; -webkit-transform: none; transform: none; } [data-sal|="zoom"] { opacity: 0; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; } [data-sal="zoom-in"] { -webkit-transform: scale(0.5); transform: scale(0.5); } [data-sal="zoom-out"] { -webkit-transform: scale(1.1); transform: scale(1.1); } [data-sal|="zoom"].sal-animate, body.sal-disabled [data-sal|="zoom"] { opacity: 1; -webkit-transform: none; transform: none; } [data-sal|="flip"] { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } [data-sal="flip-left"] { -webkit-transform: perspective(2000px) rotateY(-91deg); transform: perspective(2000px) rotateY(-91deg); } [data-sal="flip-right"] { -webkit-transform: perspective(2000px) rotateY(91deg); transform: perspective(2000px) rotateY(91deg); } [data-sal="flip-up"] { -webkit-transform: perspective(2000px) rotateX(-91deg); transform: perspective(2000px) rotateX(-91deg); } [data-sal="flip-down"] { -webkit-transform: perspective(2000px) rotateX(91deg); transform: perspective(2000px) rotateX(91deg); } [data-sal|="flip"].sal-animate, body.sal-disabled [data-sal|="flip"] { -webkit-transform: none; transform: none; } /*! By André Rinas, www.andrerinas.de Documentation, www.simplelightbox.com Available for use under the MIT License Version 2.14.2 */ body.hidden-scroll { overflow: hidden; } .sl-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: #fff; display: none; z-index: 1035; } .sl-wrapper { z-index: 1040; width: 100%; height: 100%; left: 0; top: 0; position: fixed; } .sl-wrapper * { -webkit-box-sizing: border-box; box-sizing: border-box; } .sl-wrapper button { border: 0 none; background: rgba(0, 0, 0, 0); font-size: 28px; padding: 0; cursor: pointer; } .sl-wrapper button:hover { opacity: 0.7; } .sl-wrapper .sl-close { display: none; position: fixed; right: 30px; top: 30px; z-index: 10060; margin-top: -14px; margin-right: -14px; height: 44px; width: 44px; line-height: 44px; font-family: Arial, Baskerville, monospace; color: #000; font-size: 3rem; } .sl-wrapper .sl-counter { display: none; position: fixed; top: 30px; left: 30px; z-index: 10060; color: #000; font-size: 1rem; } .sl-wrapper .sl-download { display: none; position: fixed; bottom: 5px; width: 100%; text-align: center; z-index: 10060; color: #fff; font-size: 1rem; } .sl-wrapper .sl-download a { color: #fff; } .sl-wrapper .sl-navigation { width: 100%; display: none; } .sl-wrapper .sl-navigation button { position: fixed; top: 50%; margin-top: -22px; height: 44px; width: 22px; line-height: 44px; text-align: center; display: block; z-index: 10060; font-family: Arial, Baskerville, monospace; color: #000; } .sl-wrapper .sl-navigation button.sl-next { right: 5px; font-size: 2rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 5px; font-size: 2rem; } @media (min-width: 35.5em) { .sl-wrapper .sl-navigation button { width: 44px; } .sl-wrapper .sl-navigation button.sl-next { right: 10px; font-size: 3rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 10px; font-size: 3rem; } } @media (min-width: 50em) { .sl-wrapper .sl-navigation button { width: 44px; } .sl-wrapper .sl-navigation button.sl-next { right: 20px; font-size: 3rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 20px; font-size: 3rem; } } .sl-wrapper.sl-dir-rtl .sl-navigation { direction: ltr; } .sl-wrapper .sl-image { position: fixed; -ms-touch-action: none; touch-action: none; z-index: 10000; } .sl-wrapper .sl-image img { margin: 0; padding: 0; display: block; border: 0 none; width: 100%; height: auto; } @media (min-width: 35.5em) { .sl-wrapper .sl-image img { border: 0 none; } } @media (min-width: 50em) { .sl-wrapper .sl-image img { border: 0 none; } } .sl-wrapper .sl-image iframe { background: #000; border: 0 none; } @media (min-width: 35.5em) { .sl-wrapper .sl-image iframe { border: 0 none; } } @media (min-width: 50em) { .sl-wrapper .sl-image iframe { border: 0 none; } } .sl-wrapper .sl-image .sl-caption { display: none; padding: 10px; color: #fff; background: rgba(0, 0, 0, 0.8); font-size: 1rem; position: absolute; bottom: 0; left: 0; right: 0; } .sl-wrapper .sl-image .sl-caption.pos-top { bottom: auto; top: 0; } .sl-wrapper .sl-image .sl-caption.pos-outside { bottom: auto; } .sl-spinner { display: none; border: 5px solid #333; border-radius: 40px; height: 40px; left: 50%; margin: -20px 0 0 -20px; opacity: 0; position: fixed; top: 50%; width: 40px; z-index: 1007; -webkit-animation: pulsate 1s ease-out infinite; animation: pulsate 1s ease-out infinite; } .sl-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } .sl-transition { transition: -webkit-transform ease 200ms; -webkit-transition: -webkit-transform ease 200ms; transition: transform ease 200ms; transition: transform ease 200ms, -webkit-transform ease 200ms; } @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; } } @keyframes pulsate { 0% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; } } :root { /* mixins*/ /* --centered: { display: flex; align-items: center; justify-content: center; }; --debug-good{ outline: 1px dotted green !important; } --debug-bad{ outline: 1px dotted red !important; } --refactored-good{ outline: 1px dashed green !important; } --refactored-bad{ outline: 1px dashed red !important; } */ } .debug-good { outline: 1px dotted green !important; } .debug-bad { outline: 1px dotted red !important; } .debug { outline: 1px dashed lightpink !important; } /* [class^="perm-"] { border: 1px dotted green !important; } */ [class^="todo"] { outline: 1px dotted red !important; } .hidden { /*display: none !important; */ } .perm-legacy { display: none !important; } .perm-legacy::after { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; outline: 2px dashed red !important; background: repeating-linear-gradient( 45deg, rgba(255, 0, 0, 0.76), rgba(255, 0, 0, 0.76) 20px, rgba(255, 0, 0, 0.3) 20px, rgba(255, 0, 0, 0.3) 50px ) !important; } .perm-refactored::after { /* content:'';*/ position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.5; outline: 2px dashed green !important; background: repeating-linear-gradient( -45deg, rgba(71, 226, 61, 0.76), rgba(71, 226, 61, 0.76) 20px, rgba(71, 226, 61, 0.2) 20px, rgba(71, 226, 61, 0.2) 50px ) !important; } .content :not(.perm-refactored) { /* outline: 2px dashed red !important;*/ /*display: none !important;*/ } /* :not([class*="refactored"]){ !* display: none !important;*! outline: 2px dashed red !important; } *([class*="refactored"]){ !* display: none !important;*! outline: 2px dashed green !important; } *([class*="legacy"]){ display: none !important; } .clip-container:not([class*="refactored"]){ !* display: none !important;*! }*/ /* Quicklink component styles */ .quicklink-component { position: relative; padding: 0; /* outline: 4px dashed blue !important;*/ aspect-ratio: 448/520; min-width: 250px; max-width: 500px; min-height: 300px; max-height: 500px; height: 520px; overflow: hidden; } .quicklink-component:hover .quicklink-hover-overlay { opacity: 0.15; } .quicklink-text { /* outline: 1px dashed orangered !important; */ position: absolute; /* position: relative;*/ z-index: 200; bottom: 20px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .quicklink-text > * { white-space: nowrap; color: white !important; text-align: center; font-weight: 400; } .quicklink-headline { color: white !important; text-align: center; } .quicklink-subheadline { color: white !important; text-align: center; } .quicklink-image { /* outline: 1px dashed green !important;*/ /* position: absolute; inset: 0; position: relative; z-index: -1;*/ width: 100%; height: calc(100% + 30px); -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } .quicklink-image figure { margin: 0 !important; padding: 0 !important; width: 100%; height: 100%; } .quicklink-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .quicklink-link { position: absolute !important; display: block; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; width: 100%; height: 100%; } .quicklink-link .neos-backend { display: none; } .quicklink-headline { /* TODO - remove fixed font-sizes etc. and user responsive from parapraph class: .p*/ font-size: 24px !important; line-height: 36px !important; letter-spacing: 0.77px !important; font-weight: 400; margin-bottom: 10px; } .quicklink-subheadline { /* TODO - remove fixed font-sizes etc. and user responsive from parapraph class: .p-enlarged*/ font-size: 20px !important; line-height: 30px !important; letter-spacing: 0.48px !important; font-weight: 400; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .quicklink-hover-overlay { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; z-index: 5; pointer-events: none !important; background-color: #000; height: 100%; opacity: 0; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; /* @nest & .neos-backend { display: none; }*/ } .quicklink-gradient-under-text { background: -webkit-gradient( linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), color-stop(70%, rgba(0, 0, 0, 0)) ); background: linear-gradient( 0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70% ); position: absolute; bottom: 0; left: 30px; right: 30px; height: 100px; z-index: 1; } .neos-backend .quicklink-component > .quicklink-link { display: none !important; outline: 1px dashed limegreen !important; } .neos-backend .quicklink-component > .quicklink-link { display: none !important; outline: 1px dashed limegreen !important; } .neos-backend .quicklink-component > .quicklink-link { display: none !important; outline: 1px dashed limegreen !important; } .neos-backend .quicklink-component > .quicklink-hover-overlay { z-index: 100 !important; outline: 1px dashed orangered !important; } .neos-backend .quicklink-component > .quicklink-text { /* z-index: 110 !important;*/ pointer-events: all !important; } /* @import "../../../permanent.storefinder/Resources/Private/Fusion/Components/Presentation/_index.css"; */ /* import project specific styles*/ /*@import "modules/_custom-styles-bochumer-wohn.css"; @import "modules/_search-results.css";*/ .perm-modal { --modal-animation-duration: 0.4s; --modal-animation-delay: 0.2s; opacity: 0; -webkit-animation: fadeIn var(--modal-animation-duration, 0.4s) ease; animation: fadeIn var(--modal-animation-duration, 0.4s) ease; -webkit-animation-delay: var(--modal-animation-delay, 0.2s); animation-delay: var(--modal-animation-delay, 0.2s); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-box-sizing: border-box; box-sizing: border-box; position: fixed; z-index: 1000; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .perm-modal__container { position: relative; display: block; width: 100%; height: 100%; max-width: 92vw; max-height: 92vh; -webkit-box-shadow: var(--perm--modal-shadow); box-shadow: var(--perm--modal-shadow); -webkit-transition: opacity var(--modal-animation-duration, 0.4s) ease; transition: opacity var(--modal-animation-duration, 0.4s) ease; opacity: 0; border-radius: var(--perm-modal-corner-radius, 10px); } .perm-modal__container iframe { width: 100%; height: 100%; border-radius: var(--perm-modal-corner-radius, 10px); } .perm-modal__container.has-loaded { opacity: 1; } .per-modal__loader { position: absolute; } .perm-modal__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--modal-overlay-background-color, #333333); opacity: var(--modal-overlay-background-opacity, 0.3); } .perm-modal__close-btn { position: absolute; z-index: 2; top: 28px; right: 36px; -webkit-transform: translate3d(50%, -50%, 0); transform: translate3d(50%, -50%, 0); border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: white; color: var(--modal-closebtn-color, black); -webkit-box-shadow: var(--perm--modal-shadow); box-shadow: var(--perm--modal-shadow); } .perm-modal__close-btn svg { width: var(--perm--modal-closebtn-size, 40px); height: var(--perm--modal-closebtn-size, 40px); } body.has-modal { overflow-y: hidden; margin-right: 15px; } .blur-fx { -webkit-filter: blur(4px); filter: blur(4px); } .is-hidden { display: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Copyright ( In Impressum but separrate package) */ .no-columns { -webkit-columns: auto !important; -moz-columns: auto !important; columns: auto !important; -webkit-columns: initial !important; -moz-columns: initial !important; columns: initial !important; } .test-andy-x-5 { color: purple; } /* Skip Links */ .visible-only-for-keyboard-navigation { } /* Adding the right arrow with pseudo-element */ .skip-link::after { content: " →"; display: inline-block; margin-left: 5px; } a.skip-link.visible-only-for-keyboard-navigation { display: block; color: var(--nav-links-color, white); letter-spacing: var(--nav-links-letter-spacing, 2.41px); font-size: var(--nav-links-font-size, 24px); text-transform: var(--nav-links-text-transform, initial); white-space: nowrap; text-decoration: none; position: fixed; z-index: 9000; /* hidden when no focus-visible state */ top: -10000px; left: -10000px; transform: translateY(-50%); height: 50px; width: 150px; clip: auto; } .visible-only-for-keyboard-navigation.a { } /*.visible-only-for-keyboard-navigation:focus-visible { outline: 2px dashed blueviolet; outline-offset: 2px; top: calc((var(--nav-header-height-min, 70px) / 2 ) + var(--infobar-height,0) ); left: 50px; height: 50px; width: 150px; clip: auto; }*/ .skip-link.visible-only-for-keyboard-navigation:focus-visible { background-color: var(--nav-bg-color, black); outline: var(--keyboard-focus-outline, 2px dashed blueviolet); outline-offset: 2px; top: calc( (var(--nav-header-height-min, 70px) / 1) + var(--infobar-height, 37px) + 10px ); transform: translateX(-50%) translateY(-50%); left: 50%; height: fit-content; width: fit-content; clip: auto; } @media (min-width: 1024px) { .skip-link.visible-only-for-keyboard-navigation:focus-visible { outline: var(--keyboard-focus-outline, 2px dashed blueviolet); outline-offset: 2px; top: calc( var(--nav-header-height-min, 70px) * 1.32 + var(--infobar-height, 0px) ); padding: 3px; transform: translateY(-50%); left: var(--skiplink-pos-left, 50px); height: fit-content; width: fit-content; clip: auto; } } /* Example for navigation links */ .content a:focus-visible { outline: var(--keyboard-focus-outline, 2px dashed blueviolet); outline-offset: 2px; /* Optional: you can add additional visual indicators */ background-color: rgba(74, 144, 226, 0.1); } button:focus-visible { outline: var(--keyboard-focus-outline, 2px dashed blueviolet); outline-offset: -1px; } /* Navigation A11y */ ul.nav-menu-links { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; pointer-events: initial; padding: 0 var(--mobile-nav-padding); opacity: 1; transition: opacity 0.3s ease; transition-delay: 0.36s; } ul.nav-menu-links li { width: 100%; } .segment-menu .nav-menu .nav-menu-links > li a { color: var(--nav-links-color, white); letter-spacing: var(--nav-links-letter-spacing, 2.41px); font-size: var(--nav-links-font-size, 24px); text-transform: var(--nav-links-text-transform, initial); white-space: nowrap; text-decoration: none; } #menu-panel.is-open .mobile-navigation-links { padding-top: var(--infobar-height, 37px); } #menu-panel.is-open .mobile-navigation-links { opacity: 1; } button.nav-menu-trigger { top: 36px; appearance: none; border: none; background: transparent; } /*#menu-panel.is-open,#menu-panel.is-open .nav-menu,#menu-panel.is-open .nav-container{*/ #menu-panel.is-open, #menu-panel.is-open .nav-menu, #menu-panel.is-open .nav-container { overflow-y: visible; position: relative; } #menu-panel.is-open .nav-menu-meta { /* position: fixed; top: 44px; left: 35px;*/ } #menu-panel.is-open .nav-menu-links { position: fixed; z-index: 1001; top: calc(var(--nav-header-sm-height, 70px) + var(--infobar-height, 37px)); left: 0; width: 100vw; height: 100dvh; display: block; background-color: var(--nav-bg-color, white); padding-top: 1rem; /* outline: 3px dashed red;*/ } @media (min-width: 1200px) { #menu-panel.is-open .nav-menu-links { top: calc( var(--nav-header-height-min, 70px) + var(--infobar-height, 37px) ); } } #menu-panel.is-open .nav-menu-links > li a { display: block; padding: 0.5rem 0; font-size: var(--nav-links-font-size, 14px); text-transform: var(--nav-links-text-transform); letter-spacing: 1px; font-weight: 400; margin: 0; /* color: var(--black-color); */ } #menu-panel.is-open .mobile-navigation-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; pointer-events: initial; padding: 0 var(--mobile-nav-padding); opacity: 1; transition: opacity 0.3s ease; transition-delay: 0.36s; } @media (min-width: 1024px) { ul.nav-menu-links { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; list-style: none; padding: 0; margin: 0; } ul.nav-menu-links li { width: auto; margin: 0 0 0 20px; padding: 0; } } .sr-only { font-size: 0; height: 0; position: absolute; } /* A11y Link Styles */ /* A11Y Link Styles with SVG Icons * Features: * - Distinct styles for hover, active, visited, and keyboard focus states * - SVG icons for different link types (internal, external, download, PDF, image) * - CSS variables for easy customization * - Focus-visible implementation for keyboard navigation */ :root { /* Colors */ --link-color: #0066cc; --link-hover-color: #004499; --link-active-color: #003377; --link-visited-color: #551a8b; --link-focus-color: #ff6600; /* Underline properties */ --link-underline-style: solid; --link-underline-thickness: 1px; --link-underline-offset: 0.1em; --link-hover-underline-thickness: 2px; --link-hover-underline-style: solid; /* Focus outline properties */ --link-focus-outline-width: 2px; --link-focus-outline-style: solid; --link-focus-outline-offset: 3px; /* Icon properties */ --link-icon-size: 1em; --link-icon-gap: 0.3em; --link-icon-position: after; /* 'before' or 'after' */ --link-icon-opacity: 0.8; } /* Base link styles */ a { color: var(--link-color); text-decoration: underline; text-decoration-thickness: var(--link-underline-thickness); text-decoration-style: var(--link-underline-style); text-underline-offset: var(--link-underline-offset); transition: color 0.2s, text-decoration 0.2s; position: relative; } /* Hover state */ a:hover { color: var(--link-hover-color); text-decoration-thickness: var(--link-hover-underline-thickness); text-decoration-style: var(--link-hover-underline-style); } /* Active state */ a:active { color: var(--link-active-color); text-decoration-style: wavy; } /* Visited state */ a:visited { color: var(--link-visited-color); } /* Focus-visible state (keyboard navigation) */ a:focus-visible { outline: var(--link-focus-outline-width) var(--link-focus-outline-style) var(--link-focus-color); outline-offset: var(--link-focus-outline-offset); color: var(--link-focus-color); text-decoration-color: var(--link-focus-color); } /* For browsers that don't support :focus-visible */ @supports not selector(:focus-visible) { a:focus { outline: var(--link-focus-outline-width) var(--link-focus-outline-style) var(--link-focus-color); outline-offset: var(--link-focus-outline-offset); color: var(--link-focus-color); text-decoration-color: var(--link-focus-color); } } .page-content .perm-text a[target="_blank"]::after, .page-content .perm-text a[target="_new"]::after, .page-content .perm-text a[target=""]::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 5px; background-image: url("data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2021%2021%22%20version%3D%221.1%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20xmlns:xlink%3D%22http://www.w3.org/1999/xlink%22%20xml:space%3D%22preserve%22%20xmlns:serif%3D%22http://www.serif.com/%22%20style%3D%22fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;%22%3E%3Cg%20transform%3D%22matrix(0.870849,0,0,0.870849,0,0)%22%3E%3Cpath%20d%3D%22M19,13.5L19,18.5C19,21.533,16.533,24,13.5,24H5.5C2.467,24,0,21.533,0,18.5V10.5C0,7.467,2.467,5,5.5,5H10.5C11.329,5,12,5.671,12,6.5C12,7.329,11.329,8,10.5,8H5.5C4.122,8,3,9.122,3,10.5V18.5C3,19.878,4.122,21,5.5,21H13.5C14.878,21,16,19.878,16,18.5V13.5C16,12.671,16.671,12,17.5,12C18.329,12,19,12.671,19,13.5ZM20.5,0H15.5C14.671,0,14,0.671,14,1.5C14,2.329,14.671,3,15.5,3H18.879L8.439,13.439C7.853,14.024,7.853,14.975,8.439,15.56C8.732,15.853,9.116,15.999,9.5,15.999C9.884,15.999,10.268,15.853,10.561,15.56L21,5.121V8.5C21,9.329,21.671,10,22.5,10C23.329,10,24,9.329,24,8.5V3.5C24,1.57,22.43,0,20.5,0Z%22%20style%3D%22fill-rule:nonzero;%22%20fill%3D%22currentColor%22/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; vertical-align: middle; color: inherit; } .page-content .content-footer .perm-text a[target="_blank"]::after, .page-content .content-footer .perm-text a[target="_new"]::after, .page-content .content-footer .perm-text a[target=""]::after { content: ""; /* or use a different icon */ margin-left: unset; } .page-content .perm-text a[href$=".zip"]::after, .page-content .perm-text a[href$=".doc"]::after, .page-content .perm-text a[href$=".docx"]::after, .page-content .perm-text a[href$=".xls"]::after, .page-content .perm-text a[href$=".xlsx"]::after, .page-content .perm-text a[href$=".ppt"]::after, .page-content .perm-text a[href$=".pptx"]::after, .page-content .perm-text a[href$=".pdf"]::after, .page-content .perm-text a[download]::after { content: ""; display: inline-block; width: 16px; height: 16px; /* TODO @Andy Try to make the iconms align to changes in text font size and colors ! */ margin-left: 5px; background-image: url("data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2021%22%20version%3D%221.1%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20xmlns:xlink%3D%22http://www.w3.org/1999/xlink%22%20xml:space%3D%22preserve%22%20xmlns:serif%3D%22http://www.serif.com/%22%20style%3D%22fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;%22%3E%3Cg%20transform%3D%22matrix(1,0,0,1,-421.953,-295.859)%22%3E%3Cg%20transform%3D%22matrix(0.0371967,0,0,0.0405567,421.953,295.859)%22%3E%3Cpath%20d%3D%22M188.821,377.6C226.311,415.091,287.095,415.091,324.586,377.601L393.11,309.077C405.822,296.799,406.174,276.541,393.896,263.829C381.618,251.117,361.36,250.765,348.648,263.043C348.381,263.3,348.119,263.563,347.862,263.829L288.491,323.178L288,32C288,14.327,273.673,0,256,0C238.327,0,224,14.327,224,32L224.448,322.709L165.547,263.808C152.835,251.53,132.577,251.882,120.299,264.594C108.322,276.995,108.322,296.655,120.299,309.056L188.821,377.6Z%22%20style%3D%22fill-rule:nonzero;%22%20fill%3D%22currentColor%22/%3E%3C/g%3E%3Cg%20transform%3D%22matrix(0.0371967,0,0,0.0405567,421.953,295.859)%22%3E%3Cpath%20d%3D%22M480,309.333C462.327,309.333,448,323.66,448,341.333L448,439.274C447.988,444.088,444.089,447.988,439.275,447.999L72.725,447.999C67.911,447.987,64.011,444.088,64,439.274L64,341.333C64,323.66,49.673,309.333,32,309.333C14.327,309.333,0,323.66,0,341.333L0,439.274C0.047,479.42,32.58,511.953,72.725,512L439.274,512C479.42,511.953,511.952,479.42,511.999,439.275L511.999,341.334C512,323.66,497.673,309.333,480,309.333Z%22%20style%3D%22fill-rule:nonzero;%22%20fill%3D%22currentColor%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; vertical-align: middle; color: inherit; } .page-content .perm-text a { text-decoration: underline; } /* Icon: External Link */ .external-link-icon::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 5px; background-image: url("data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2021%2021%22%20version%3D%221.1%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20xmlns:xlink%3D%22http://www.w3.org/1999/xlink%22%20xml:space%3D%22preserve%22%20xmlns:serif%3D%22http://www.serif.com/%22%20style%3D%22fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;%22%3E%3Cg%20transform%3D%22matrix(0.870849,0,0,0.870849,0,0)%22%3E%3Cpath%20d%3D%22M19,13.5L19,18.5C19,21.533,16.533,24,13.5,24H5.5C2.467,24,0,21.533,0,18.5V10.5C0,7.467,2.467,5,5.5,5H10.5C11.329,5,12,5.671,12,6.5C12,7.329,11.329,8,10.5,8H5.5C4.122,8,3,9.122,3,10.5V18.5C3,19.878,4.122,21,5.5,21H13.5C14.878,21,16,19.878,16,18.5V13.5C16,12.671,16.671,12,17.5,12C18.329,12,19,12.671,19,13.5ZM20.5,0H15.5C14.671,0,14,0.671,14,1.5C14,2.329,14.671,3,15.5,3H18.879L8.439,13.439C7.853,14.024,7.853,14.975,8.439,15.56C8.732,15.853,9.116,15.999,9.5,15.999C9.884,15.999,10.268,15.853,10.561,15.56L21,5.121V8.5C21,9.329,21.671,10,22.5,10C23.329,10,24,9.329,24,8.5V3.5C24,1.57,22.43,0,20.5,0Z%22%20style%3D%22fill-rule:nonzero;%22%20fill%3D%22currentColor%22/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; vertical-align: middle; color: red !important; } /* Icon: Download Link */ .download-file-link-icon::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 5px; background-image: url("data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2021%22%20version%3D%221.1%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20xmlns:xlink%3D%22http://www.w3.org/1999/xlink%22%20xml:space%3D%22preserve%22%20xmlns:serif%3D%22http://www.serif.com/%22%20style%3D%22fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;%22%3E%3Cg%20transform%3D%22matrix(1,0,0,1,-421.953,-295.859)%22%3E%3Cg%20transform%3D%22matrix(0.0371967,0,0,0.0405567,421.953,295.859)%22%3E%3Cpath%20d%3D%22M188.821,377.6C226.311,415.091,287.095,415.091,324.586,377.601L393.11,309.077C405.822,296.799,406.174,276.541,393.896,263.829C381.618,251.117,361.36,250.765,348.648,263.043C348.381,263.3,348.119,263.563,347.862,263.829L288.491,323.178L288,32C288,14.327,273.673,0,256,0C238.327,0,224,14.327,224,32L224.448,322.709L165.547,263.808C152.835,251.53,132.577,251.882,120.299,264.594C108.322,276.995,108.322,296.655,120.299,309.056L188.821,377.6Z%22%20style%3D%22fill-rule:nonzero;%22%20fill%3D%22currentColor%22/%3E%3C/g%3E%3Cg%20transform%3D%22matrix(0.0371967,0,0,0.0405567,421.953,295.859)%22%3E%3Cpath%20d%3D%22M480,309.333C462.327,309.333,448,323.66,448,341.333L448,439.274C447.988,444.088,444.089,447.988,439.275,447.999L72.725,447.999C67.911,447.987,64.011,444.088,64,439.274L64,341.333C64,323.66,49.673,309.333,32,309.333C14.327,309.333,0,323.66,0,341.333L0,439.274C0.047,479.42,32.58,511.953,72.725,512L439.274,512C479.42,511.953,511.952,479.42,511.999,439.275L511.999,341.334C512,323.66,497.673,309.333,480,309.333Z%22%20style%3D%22fill-rule:nonzero;%22%20fill%3D%22currentColor%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; vertical-align: middle; color: inherit; } /*! By André Rinas, www.andrerinas.de Documentation, www.simplelightbox.com Available for use under the MIT License Version 2.14.2 */ body.hidden-scroll { overflow: hidden; } .sl-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: #fff; display: none; z-index: 1035; } .sl-wrapper { z-index: 1040; width: 100%; height: 100%; left: 0; top: 0; position: fixed; } .sl-wrapper * { -webkit-box-sizing: border-box; box-sizing: border-box; } .sl-wrapper button { border: 0 none; background: rgba(0, 0, 0, 0); font-size: 28px; padding: 0; cursor: pointer; } .sl-wrapper button:hover { opacity: 0.7; } .sl-wrapper .sl-close { display: none; position: fixed; right: 30px; top: 30px; z-index: 10060; margin-top: -14px; margin-right: -14px; height: 44px; width: 44px; line-height: 44px; font-family: Arial, Baskerville, monospace; color: #000; font-size: 3rem; } .sl-wrapper .sl-counter { display: none; position: fixed; top: 30px; left: 30px; z-index: 10060; color: #000; font-size: 1rem; } .sl-wrapper .sl-download { display: none; position: fixed; bottom: 5px; width: 100%; text-align: center; z-index: 10060; color: #fff; font-size: 1rem; } .sl-wrapper .sl-download a { color: #fff; } .sl-wrapper .sl-navigation { width: 100%; display: none; } .sl-wrapper .sl-navigation button { position: fixed; top: 50%; margin-top: -22px; height: 44px; width: 22px; line-height: 44px; text-align: center; display: block; z-index: 10060; font-family: Arial, Baskerville, monospace; color: #000; } .sl-wrapper .sl-navigation button.sl-next { right: 5px; font-size: 2rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 5px; font-size: 2rem; } @media (min-width: 35.5em) { .sl-wrapper .sl-navigation button { width: 44px; } .sl-wrapper .sl-navigation button.sl-next { right: 10px; font-size: 3rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 10px; font-size: 3rem; } } @media (min-width: 50em) { .sl-wrapper .sl-navigation button { width: 44px; } .sl-wrapper .sl-navigation button.sl-next { right: 20px; font-size: 3rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 20px; font-size: 3rem; } } .sl-wrapper.sl-dir-rtl .sl-navigation { direction: ltr; } .sl-wrapper .sl-image { position: fixed; -ms-touch-action: none; touch-action: none; z-index: 10000; } .sl-wrapper .sl-image img { margin: 0; padding: 0; display: block; border: 0 none; width: 100%; height: auto; } @media (min-width: 35.5em) { .sl-wrapper .sl-image img { border: 0 none; } } @media (min-width: 50em) { .sl-wrapper .sl-image img { border: 0 none; } } .sl-wrapper .sl-image iframe { background: #000; border: 0 none; } @media (min-width: 35.5em) { .sl-wrapper .sl-image iframe { border: 0 none; } } @media (min-width: 50em) { .sl-wrapper .sl-image iframe { border: 0 none; } } .sl-wrapper .sl-image .sl-caption { display: none; padding: 10px; color: #fff; background: rgba(0, 0, 0, 0.8); font-size: 1rem; position: absolute; bottom: 0; left: 0; right: 0; } .sl-wrapper .sl-image .sl-caption.pos-top { bottom: auto; top: 0; } .sl-wrapper .sl-image .sl-caption.pos-outside { bottom: auto; } .sl-spinner { display: none; border: 5px solid #333; border-radius: 40px; height: 40px; left: 50%; margin: -20px 0 0 -20px; opacity: 0; position: fixed; top: 50%; width: 40px; z-index: 1007; -webkit-animation: pulsate 1s ease-out infinite; animation: pulsate 1s ease-out infinite; } .sl-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } .sl-transition { transition: -webkit-transform ease 200ms; -webkit-transition: -webkit-transform ease 200ms; transition: transform ease 200ms; transition: transform ease 200ms, -webkit-transform ease 200ms; } @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; } } @keyframes pulsate { 0% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; } } /* Social Media Buttons */ /* Social Media Navigation Component Styles */ .perm-social-media-navigation { /* outline: 2px dashed red;*/ /* Container is positioned fixed */ bottom: 0; position: fixed !important; z-index: 1000; padding: 0 !important; } .social-media-nav-container { display: flex; gap: 1rem; padding: 0 !important; } .social-media-nav-container > a.social-media-button:visited { color: unset; } /* Desktop: Position on the right side of the viewport */ @media (min-width: 768px) { .perm-social-media-navigation { top: 50%; right: 0; transform: translateY(-50%); } .social-media-nav-container { flex-direction: column; } } /* Mobile: Position on the bottom center of the viewport */ @media (max-width: 767px) { .perm-social-media-navigation { bottom: 0; left: 50%; transform: translateX(-50%); } .social-media-nav-container { flex-direction: row; } } .social-media-button { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background-color: var(--social-button-bg-color, --brand-color-primary); color: var(--social-button-icon-color, #ffffff) !important; border-radius: 20% 0 0 20%; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .social-media-button:hover { transform: scale(1.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); } .social-icon { width: 1.5rem; height: 1.5rem; object-fit: contain; } /* Reduce button size on mobile */ @media (max-width: 767px) { .social-media-button { width: 3.5rem; height: 3.5rem; border-radius: 20% 20% 0 0; } .social-icon { width: 1.25rem; height: 1.25rem; } } /* Navigation Sub Menus */ :root { --bg: transparent; --surface: var(--nav-bg-color, white); --surface-2: var(--nav-bg-color, white); --border: rgba(255, 255, 255, 0.07); --text: #e8e9ed; --text-muted: #7a7d8a; --accent-nav-subnav: #1b7fff; --accent-nav-subnav-dim: var(--nav-bg-color, white); --radius-nav-subnav-panel: 10px; --font-head: sans-serif; --font-body: sans-serif; --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); } /* ─── Nav Shell */ nav.main-nav { background: var(--surface); /* border: 1px solid var(--border); border-radius: var(--radius-nav-subnav-panel);*/ /*padding: .5rem;*/ } /* ─── UL / LI / A – shared ──────────────────────────── */ nav.main-nav ul { list-style: none; } nav.main-nav a { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--text); border-radius: calc(var(--radius-nav-subnav-panel) - 2px); transition: color var(--transition), background var(--transition); white-space: nowrap; position: relative; } nav.main-nav a:hover { color: var(--accent-nav-subnav); /* background: var(--accent-nav-subnav-dim);*/ } /* ─── Chevron on links that have a submenu */ nav.main-nav li.has-sub > a::after { content: ""; display: inline-block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); /* transform: rotate(45deg) translateY(-10px) translateX(4px)*/ margin-left: 0.4rem; transition: transform var(--transition), color var(--transition); flex-shrink: 0; } /* ─── Submenu UL – shared base */ nav.main-nav li.has-sub > ul { overflow: hidden; } nav.main-nav li.has-sub > ul a { padding: 0.55rem 1rem 0.55rem 1.8rem; } nav.main-nav li.has-sub > ul a:hover { color: var(--accent-nav-subnav); background: var(--accent-nav-subnav-dim); } nav.main-nav li.has-sub > ul li { border-left: 2px solid var(--border); margin-left: 1rem; } /* ─── Cloned parent link — bold, no chevron ─────────── */ nav.main-nav a.no-chevron::after { display: none !important; } nav.main-nav li.submenu-parent-link > a { font-weight: 700; } /* ─── Focus-visible ring ─────────────────────────────── */ nav.main-nav a:focus { outline: none; } nav.main-nav a:focus-visible { outline: 2px solid var(--accent-nav-subnav); outline-offset: 2px; } /* MOBILE (<1200px) — vertical list, height collapse */ @media (max-width: 1199px) { nav.main-nav > ul { display: flex; flex-direction: column; gap: 2px; } /* Collapsed submenu: height 0, invisible */ nav.main-nav li.has-sub > ul { height: 0; opacity: 0; pointer-events: none; transition: height var(--transition), opacity var(--transition); } /* Open submenu: visible */ nav.main-nav li.has-sub.is-open > ul { opacity: 1; pointer-events: auto; } /* Rotate chevron when open */ nav.main-nav li.has-sub.is-open > a::after { transform: rotate(225deg) translateY(-2px); color: var(--accent-nav-subnav); } nav.main-nav li.has-sub.is-open > a { color: var(--accent-nav-subnav); background: var(--accent-nav-subnav-dim); } } /* DESKTOP (>=1200px) horizontal bar, hover dropdowns */ @media (min-width: 1200px) { /* nav.main-nav { padding: .35rem .5rem; }*/ /* Top-level UL: horizontal */ nav.main-nav > ul { display: flex; flex-direction: row; align-items: center; gap: 2px; } nav.main-nav > ul > li { position: relative; } /* Chevron points down on desktop (already 45deg = down-right, fine as-is) */ nav.main-nav > ul > li.has-sub > a::after { margin-left: 0.1rem; } /* Submenu: absolute, initially hidden via opacity + translate */ nav.main-nav > ul > li.has-sub > ul { position: absolute; top: calc(100% + 0px); left: -20px; min-width: 200px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-nav-subnav-panel); display: flex; flex-direction: column; gap: 2px; /* Override any mobile inline height */ height: auto !important; /* Collapsed: invisible, shifted up slightly */ opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity var(--transition), transform var(--transition); transition-delay: 200ms; /* close delay – gives time to reach the panel */ transition-delay: 200ms; /* close delay – gives time to reach the panel */ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border); z-index: 100; } /* Invisible bridge covering the gap between trigger and dropdown */ nav.main-nav > ul > li.has-sub > ul::before { content: ""; position: absolute; top: -8px; /* matches top: calc(100% + 8px) gap */ left: -14px; width: 100%; height: 8px; background: transparent; } /* Invisible bridge covering the gap between trigger and dropdown */ nav.main-nav > ul > li.has-sub > ul::before { content: ""; position: absolute; top: -8px; /* matches top: calc(100% + 8px) gap */ left: 0; width: 100%; height: 8px; background: transparent; } nav.main-nav > ul > li.has-sub > ul li { border-left: none; margin-left: 0; } nav.main-nav > ul > li.has-sub > ul a { padding: 0.25rem 1.2rem; border-radius: calc(var(--radius-nav-subnav-panel) - 4px); &:first-child { margin-top: 0.3rem; } } /* Show on hover (mouse only) or keyboard focus-within */ @media (hover: hover) and (pointer: fine) { nav.main-nav > ul > li.has-sub:hover > a::after, nav.main-nav > ul > li.has-sub:focus-within > a::after { transform: rotate(225deg) translateY(-2px); color: var(--accent-nav-subnav); } nav.main-nav > ul > li.has-sub:hover > a, nav.main-nav > ul > li.has-sub:focus-within > a { color: var(--accent-nav-subnav); background: var(--accent-nav-subnav-dim); } nav.main-nav > ul > li.has-sub:hover > ul, nav.main-nav > ul > li.has-sub:focus-within > ul { opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; /* open instantly */ } } }