/* Theme base styles */ /* Tools Any animations, or functions used throughout the project. Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here */ :root { /* Theme Variable Styles */ --body: #000; --primary: #003C71; --secondary: #00AB8E; --tertiary: #ED8B00; --quaternary: #942483; --quinary: #346BB7; --senary: #414141; --septenary: #DCDCE2; --octanary: #F2F2F2; --white: #fff; --black: #000; --bold: 700; --regular: 400; --header-bg-color:#ffffff; --header-link-color:#003C71; --header-link-hover-color:#00ab8e; --footer-bg-color:#012b5f; --footer-text-color:#ffffff; --error-text-color: #FF0201; --body-text-color: var(--primary); --h1-color: var(--primary); --h2-color: var(--primary); --h3-color: var(--primary); --h4-color: var(--primary); --h5-color: var(--primary); --h6-color: var(--primary); --h1-weight: 600; --h2-weight: 700; --h3-weight: 600; --h4-weight: 700; --h5-weight: 700; --h6-weight: 400; --body-size: 1.0rem; --h1-size: 4.0rem; --h1-mobile-size: 2.2222222222222223rem; --h2-size: 2.5555555555555554rem; --h2-mobile-size: 1.7777777777777777rem; --h3-size: 1.5rem; --h3-mobile-size: 1.3333333333333333rem; --h4-size: 1.0rem; --h4-mobile-size: 0.8888888888888888rem; --h5-size: 0.7777777777777778rem; --h5-mobile-size: 0.7222222222222222rem; --h6-size: 1.0rem; --h6-mobile-size: 0.8888888888888888rem; --form-type: pill; --label-color: var(--primary); --help-color: #414141; --form-background-color: ; --form-border-color: var(--primary); --container: 1240px; --container-small: 600px; --btn-background-color:var(--tertiary); --button-txt-color:var(--white); --btn-background-color-hover:; --button-txt-color-hover:; --default-form-background-color: #ffffff; } .hs-form .legal-consent-container, .hs-form .legal-consent-container p, .hs-form .legal-consent-container small, .hs-form .legal-consent-container span, .hs-form .legal-consent-container .hs-richtext { font-size: var(--body-size); /* gleiche Größe wie Body-Text */ color: var(--label-color); /* gleiche Farbe wie Formular-Labels (Blau) */ line-height: 1.6; } /* Label direkt neben der Checkbox (z. B. "I want to receive the BioSpring Newsletter") */ .hs-form .legal-consent-container .hs-form-booleancheckbox label, .hs-form .hs-form-booleancheckbox label { font-size: var(--body-size); color: var(--label-color); } /* Optional: etwas Luft oberhalb/unten des Blocks angleichen */ .hs-form .legal-consent-container { margin-top: 8px; } html{font-size:18px;color:var(--body-text-color);-webkit-text-size-adjust:100%;font-variant-ligatures:none;-webkit-font-variant-ligatures:none;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;-webkit-font-smoothing:antialiased} body{background:#fff;line-height:1.3;word-break:break-word;font-weight:400;font-style:normal;font-size:var(--body-size);color:var(--body-text-color);margin:0;padding:0;font-family:Graphie,sans-serif} html[lang^=ja] body,html[lang^=ko] body,html[lang^=zh] body{line-break:strict;word-break:break-all} p{font-size:var(--body-size);color:var(--body-text-color)} p:last-child{margin:0} p:first-child{margin:0 0 15px} a{color:var(--secondary);cursor:pointer;text-decoration:none;transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;-webkit-transition:all .3s ease-out;display:inline-block} header.header ul li a{color:var(--header-link-color)!important} footer a{color:var(--footer-text-color)} a:focus,a:hover{text-decoration:underline} header.header ul li a:hover{color:var(--header-link-hover-color)!important} p{margin:0} *+h1,*+h2{margin-top:15px} *+h3,*+h4{margin-top:15px} *+h5,*+h6{margin-top:15px} *+p{margin-top:15px} ol,ul{color:var(--body);margin:0 0 1.5rem} ol ol,ol ul,ul ol,ul ul{margin:0} ul.no-list{list-style:none} pre{overflow:auto} code{vertical-align:bottom} blockquote{border-left:2px solid;margin:0 0 1.4rem;padding-left:15px} hr{background-color:#ccc;border:none;color:#ccc;height:1px} img{word-break:normal;max-width:100%;height:auto;border:none;vertical-align:middle} svg{display:inline-block;vertical-align:middle} /* Generic This is where reset, normalize & box-sizing styles go. */ *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html{line-height:1.15;-webkit-text-size-adjust:100%} body{margin:0} h1{font-size:2em;margin:.67em 0} hr{box-sizing:content-box;height:0} pre{font-family:monospace,monospace;font-size:1em} abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted} b,strong{font-weight:bolder} code,kbd,samp{font-family:monospace,monospace;font-size:1em} small{font-size:80%} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-.25em} sup{top:-.5em} button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0} button,select{text-transform:none} [type=button],[type=reset],[type=submit],button{-webkit-appearance:button} [type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0} [type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText} fieldset{padding:.35em .75em .625em} legend{padding:0} progress{vertical-align:baseline} [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} [type=search]{-webkit-appearance:textfield;outline-offset:-2px} [type=search]::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} details{display:block} summary{display:list-item} /* Objects Non-cosmetic design patterns including grid and layout classes) */ /* CSS variables */ :root { --column-gap: 2.13%; --column-width-multiplier: 8.333; } .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 1px; width: 100%; } @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));} .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));} .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));} .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));} .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));} .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));} .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));} .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));} .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));} .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));} .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));} } /* Wrap on 991px when column count is 4 */ @media (max-width:991px){ .row-fluid{flex-wrap:wrap} .row-fluid .span3{width:calc(50% - var(--column-gap))} .row-fluid .span2{width:calc(33.33% - var(--column-gap))} } @media (max-width:767px){ .row-fluid .span3{width:100%} .row-fluid .span2{width:calc(100% - var(--column-gap))} } .content-wrapper{margin:0 auto;padding:0 1rem} @media screen and (min-width:1380px){ .content-wrapper{padding:0} } .dnd-section>.row-fluid{margin:0 auto} .dnd-section .dnd-column{padding:0} @media (max-width:767px){ .dnd-section .dnd-column{padding:0} } /* Elements Base HMTL elements are styled in this section (,

, ,

,