/* Theme Name: Runbot Theme URI: https://awo-bv-hannover.de Description: Runbot Child theme for GeneratePress. Developed by runbot.co Author: runbot.co Author URI: https://runbot.co Template: generatepress Version: 1.0 */ /* ------------------------------------------------------------------------------- Variables ---------------------------------------------------------------------------------- */ :root{ /* Base Unit */ --base-unit: clamp(0.5rem, calc(0.653vw + 0.347rem), 1rem); /* Font Sizes */ --fontsize-xs: clamp(0.625rem, calc(0.163vw + 0.587rem), 0.75rem); --fontsize-s: clamp(0.75rem, calc(0.163vw + 0.712rem), 0.875rem); --fontsize-m: clamp(0.875rem, calc(0.163vw + 0.837rem), 1rem); --fontsize-l: clamp(1rem, calc(0.163vw + 0.962rem), 1.125rem); /* p */ --fontsize-xl: clamp(1.125rem, calc(0.163vw + 1.087rem), 1.25rem); /* h6 */ --fontsize-2xl: clamp(1.25rem, calc(0.327vw + 1.173rem), 1.5rem); /* h5 */ --fontsize-3xl: clamp(1.5rem, calc(0.490vw + 1.385rem), 1.875rem); /* h4 */ --fontsize-4xl: clamp(1.75rem, calc(0.653vw + 1.597rem), 2.25rem); /* h3 */ --fontsize-5xl: clamp(2rem, calc(1.306vw + 1.694rem), 3rem); /* h2 */ --fontsize-6xl: clamp(2.25rem, calc(1.959vw + 1.791rem), 3.75rem); /* h1 */ --fontsize-7xl: clamp(2.5rem, calc(2.612vw + 1.888rem), 4.5rem); --fontsize-8xl: clamp(2.75rem, calc(4.245vw + 1.755rem), 6rem); --fontsize-9xl: clamp(3rem, calc(6.531vw + 1.469rem), 8rem); --fontsize-10xl: clamp(3.375rem, calc(8.653vw + 1.347rem), 10rem); /* Spacings */ --space-3xs: calc(var(--base-unit) * 0.25); --space-2xs: calc(var(--base-unit) * 0.5); --space-xs: calc(var(--base-unit) * 0.75); --space-s: calc(var(--base-unit) * 1); --space-m: calc(var(--base-unit) * 1.5); --space-l: calc(var(--base-unit) * 2); --space-xl: calc(var(--base-unit) * 2.5); --space-2xl: calc(var(--base-unit) * 4); --space-3xl: calc(var(--base-unit) * 6); --space-4xl: calc(var(--base-unit) * 9); --space-5xl: calc(var(--base-unit) * 12); --space-6xl: calc(var(--base-unit) * 15); --space-7xl: calc(var(--base-unit) * 18); --space-8xl: calc(var(--base-unit) * 21); --space-9xl: calc(var(--base-unit) * 24); /* Radius + Shadow */ --border-radius-xs: calc(var(--base-unit) * .125); --border-radius-s: calc(var(--base-unit) * .25); --border-radius-m: calc(var(--base-unit) * .375); --border-radius-l: calc(var(--base-unit) * .5); --border-radius-xl: calc(var(--base-unit) * .75); --border-radius-2xl: calc(var(--base-unit) * 1); --border-radius-full: 100%; --border-radius-none: 0; --radius: var(--border-radius-2xl); --button-radius: 999rem; --input-radius: var(--border-radius-l); --shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04); /* Just a basic general shadow */ /* Site Width */ --site-width: var(--gb-container-width); --site-wrapper: 100%; /* default: 2560px */ /* Gutter */ --gutter: var(--space-l); /* Color Mixin */ --color-mixin-1: color-mix(in srgb, currentColor 1%, transparent); --color-mixin-5: color-mix(in srgb, currentColor 5%, transparent); --color-mixin-10: color-mix(in srgb, currentColor 10%, transparent); --color-mixin-20: color-mix(in srgb, currentColor 20%, transparent); --color-mixin-30: color-mix(in srgb, currentColor 30%, transparent); --color-mixin-40: color-mix(in srgb, currentColor 40%, transparent); --color-mixin-50: color-mix(in srgb, currentColor 50%, transparent); --color-mixin-60: color-mix(in srgb, currentColor 60%, transparent); --color-mixin-70: color-mix(in srgb, currentColor 70%, transparent); --color-mixin-80: color-mix(in srgb, currentColor 80%, transparent); --color-mixin-90: color-mix(in srgb, currentColor 90%, transparent); } @media(min-width: 1600px) { :root { /* Base Unit */ --base-unit: clamp(1rem, calc(0.208vw + 0.792rem), 1.125rem); /* Font Sizes */ --fontsize-xs: clamp(0.75rem, calc(0.156vw + 0.594rem), 0.84375rem); --fontsize-s: clamp(0.875rem, calc(0.182vw + 0.693rem), 0.984375rem); --fontsize-m: clamp(1rem, calc(0.208vw + 0.792rem), 1.125rem); --fontsize-l: clamp(1.125rem, calc(0.234vw + 0.891rem), 1.265625rem); --fontsize-xl: clamp(1.25rem, calc(0.260vw + 0.990rem), 1.40625rem); --fontsize-2xl: clamp(1.5rem, calc(0.313vw + 1.188rem), 1.6875rem); --fontsize-3xl: clamp(1.875rem, calc(0.391vw + 1.484rem), 2.109375rem); --fontsize-4xl: clamp(2.25rem, calc(0.469vw + 1.781rem), 2.53125rem); --fontsize-5xl: clamp(3rem, calc(0.625vw + 2.375rem), 3.375rem); --fontsize-6xl: clamp(3.75rem, calc(0.781vw + 2.969rem), 4.21875rem); --fontsize-7xl: clamp(4.5rem, calc(0.938vw + 3.563rem), 5.0625rem); --fontsize-8xl: clamp(6rem, calc(1.250vw + 4.750rem), 6.75rem); --fontsize-9xl: clamp(8rem, calc(1.667vw + 6.333rem), 9rem); --fontsize-10xl: clamp(10rem, calc(2.083vw + 7.917rem), 11.25rem); --gutter: var(--space-2xl); } } /* CSS Easings */ :root { --ease-elastic: linear( 0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1 ); --ease-back: linear( 0 0%, 0.1935 4.37%, 0.3671 8.83%, 0.521 13.38%, 0.6557 18.04%, 0.7716 22.82%, 0.869 27.73%, 0.9488 32.81%, 1.0111 38.08%, 1.0512 42.81%, 1.0792 47.75%, 1.0953 52.97%, 1.1 58.55%, 1.0956 63.36%, 1.0838 68.73%, 1.0119 90.98%, 1.0029 95.69%, 1 100% ); --ease-out-quad: cubic-bezier(0.165, 0.840, 0.440, 1.000); --ease-smooth: cubic-bezier(0.625, 0.05, 0, 1); --ease-soft: cubic-bezier(.32, .72, 0, 1); --ease-bounce: cubic-bezier(0.35, 1.75, 0.6, 1); --ease-expo: cubic-bezier(0.87, 0, 0.13, 1); --ease-spring: linear(0 0%, .005927 1%, .022466 2%, .047872 3%, .080554 4%, .119068 5%, .162116 6%, .208536 7.000000000000001%, .2573 8%, .3075 9%, .358346 10%, .409157 11%, .45935 12%, .508438 13%, .556014 14.000000000000002%, .601751 15%, .645389 16%, .686733 17%, .72564 18%, .762019 19%, .795818 20%, .827026 21%, .855662 22%, .881772 23%, .905423 24%, .926704 25%, .945714 26%, .962568 27%, .977386 28%, .990295 28.999999999999996%, 1.001426 30%, 1.010911 31%, 1.018881 32%, 1.025465 33%, 1.030792 34%, 1.034982 35%, 1.038155 36%, 1.040423 37%, 1.041892 38%, 1.042662 39%, 1.042827 40%, 1.042473 41%, 1.04168 42%, 1.040522 43%, 1.039065 44%, 1.037371 45%, 1.035493 46%, 1.03348 47%, 1.031376 48%, 1.029217 49%, 1.027037 50%, 1.024864 51%, 1.022722 52%, 1.020631 53%, 1.018608 54%, 1.016667 55.00000000000001%, 1.014817 56.00000000000001%, 1.013067 56.99999999999999%, 1.011422 57.99999999999999%, 1.009887 59%, 1.008462 60%, 1.007148 61%, 1.005944 62%, 1.004847 63%, 1.003855 64%, 1.002964 65%, 1.002169 66%, 1.001466 67%, 1.000848 68%, 1.000311 69%, .999849 70%, .999457 71%, .999128 72%, .998858 73%, .99864 74%, .99847 75%, .998342 76%, .998253 77%, .998196 78%, .998169 79%, .998167 80%, .998186 81%, .998224 82%, .998276 83%, .998341 84%, .998415 85%, .998497 86%, .998584 87%, .998675 88%, .998768 89%, .998861 90%, .998954 91%, .999045 92%, .999134 93%, .99922 94%, .999303 95%, .999381 96%, .999455 97%, .999525 98%, .999589 99%, .99965 100%); --ease-spring-light: linear(0 0%, .003894 1%, .014828 2%, .031757 3%, .053732 4%, .079896 5%, .109479 6%, .141786 7.000000000000001%, .176202 8%, .212175 9%, .249219 10%, .286907 11%, .324863 12%, .362763 13%, .400326 14.000000000000002%, .437313 15%, .473521 16%, .508781 17%, .542956 18%, .575932 19%, .607625 20%, .637968 21%, .666915 22%, .694437 23%, .720519 24%, .74516 25%, .76837 26%, .790168 27%, .810581 28.000000000000004%, .829644 28.999999999999996%, .847395 30%, .86388 31%, .879146 32%, .893244 33%, .906226 34%, .918147 35%, .92906 36%, .93902 37%, .948082 38%, .956301 39%, .963727 40%, .970415 41%, .976413 42%, .98177 43%, .986534 44%, .990748 45%, .994457 46%, .997701 47%, 1.000519 48%, 1.002948 49%, 1.005022 50%, 1.006775 51%, 1.008237 52%, 1.009436 53%, 1.010399 54%, 1.011152 55.00000000000001%, 1.011717 56.00000000000001%, 1.012115 56.99999999999999%, 1.012368 57.99999999999999%, 1.012491 59%, 1.012503 60%, 1.012418 61%, 1.01225 62%, 1.012012 63%, 1.011716 64%, 1.011371 65%, 1.010986 66%, 1.010571 67%, 1.010132 68%, 1.009676 69%, 1.009209 70%, 1.008735 71%, 1.00826 72%, 1.007787 73%, 1.00732 74%, 1.006861 75%, 1.006412 76%, 1.005976 77%, 1.005554 78%, 1.005148 79%, 1.004758 80%, 1.004385 81%, 1.00403 82%, 1.003693 83%, 1.003373 84%, 1.003072 85%, 1.002789 86%, 1.002523 87%, 1.002274 88%, 1.002042 89%, 1.001826 90%, 1.001626 91%, 1.001441 92%, 1.00127 93%, 1.001113 94%, 1.000969 95%, 1.000837 96%, 1.000717 97%, 1.000608 98%, 1.000509 99%, 1.00042 100%); --ease-spring-bouncy: linear(0 0%, .004379 1%, .017027 2%, .037197 3%, .064139 4%, .097098 5%, .135326 6%, .178089 7.000000000000001%, .224667 8%, .274366 9%, .326515 10%, .380476 11%, .435642 12%, .491445 13%, .547353 14.000000000000002%, .602874 15%, .65756 16%, .711 17%, .76283 18%, .812725 19%, .860402 20%, .90562 21%, .948177 22%, .98791 23%, 1.024693 24%, 1.058435 25%, 1.089077 26%, 1.116593 27%, 1.140987 28.000000000000004%, 1.162286 28.999999999999996%, 1.180545 30%, 1.19584 31%, 1.208266 32%, 1.217937 33%, 1.22498 34%, 1.229538 35%, 1.231761 36%, 1.231811 37%, 1.229853 38%, 1.226059 39%, 1.220603 40%, 1.213659 41%, 1.205403 42%, 1.196006 43%, 1.185638 44%, 1.174463 45%, 1.162638 46%, 1.150318 47%, 1.137645 48%, 1.124757 49%, 1.111781 50%, 1.098837 51%, 1.086034 52%, 1.073472 53%, 1.061241 54%, 1.04942 55.00000000000001%, 1.038082 56.00000000000001%, 1.027286 56.99999999999999%, 1.017084 57.99999999999999%, 1.007519 59%, .998624 60%, .990425 61%, .982939 62%, .976176 63%, .970139 64%, .964824 65%, .960222 66%, .956318 67%, .953091 68%, .950518 69%, .94857 70%, .947216 71%, .946423 72%, .946154 73%, .946371 74%, .947035 75%, .948105 76%, .949542 77%, .951304 78%, .953352 79%, .955646 80%, .958146 81%, .960816 82%, .963619 83%, .966522 84%, .96949 85%, .972494 86%, .975505 87%, .978496 88%, .981443 89%, .984323 90%, .987118 91%, .989809 92%, .992382 93%, .994822 94%, .99712 95%, .999265 96%, 1.001252 97%, 1.003076 98%, 1.004733 99%, 1.006221 100%); } /* ------------------------------------------------------------------------------- Setup ---------------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } .screen-reader-text:focus { background-color: var(--color-background); border-radius: 15em; box-shadow: none; clip: auto!important; clip-path: none; color: var(--color-primary); display: block; border: none; font-size: 64%; font-weight: 700; letter-spacing: -.02em; height: auto; left: 1em; line-height: normal; padding: .5em 1em; text-decoration: none; top: 1em; width: auto; z-index: 100000 } body :focus-visible, body .wsf-button:focus-visible { outline-width: 2px; outline-style: solid; outline-color: var(--color-primary); outline-offset: 2px } body .wsf-button:focus-visible, body .button-accent:focus-visible { outline-color: var(--color-primary) } body :not(.gb-button,.site-logo a,.wsf-button):focus-visible, body .mobile-nav-items a:focus-visible, body a.button-text:focus-visible { outline: thin dotted currentcolor; outline-color: currentcolor; outline-style: dotted; outline-width: thin } body, button, input, select, textarea { -webkit-font-smoothing: antialiased; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } img, source, video { height: auto; max-width: 100%; width: 100%; vertical-align: top; } select::-ms-expand { display: none; } body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100vh; min-height: 100vh; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; /*font-feature-settings: 'ss02' 0;*/ } /* Headline */ h1, h2, h3, h4, h5, h6, .is-h1, .is-h2, .is-h3, .is-h4, .is-h5, .is-h6 { letter-spacing: -0.02em; margin-bottom: 0.25em; } /*h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .is-h1 a, .is-h2 a, .is-h3 a, .is-h4 a, .is-h5 a, .is-h6 a { font-weight: inherit; color:inherit; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .is-h1 a:hover, .is-h2 a:hover, .is-h3 a:hover, .is-h4 a:hover, .is-h5 a:hover, .is-h6 a:hover { color:inherit; }*/ h1, .is-h1 { font-size: var(--fontsize-6xl); line-height: 1.05; letter-spacing: -0.04em; } h2, .is-h2 { font-size: var(--fontsize-5xl); line-height: 1.22; letter-spacing: -0.04em; } h3, .is-h3 { font-size: var(--fontsize-4xl); line-height: 1.27; letter-spacing: -0.04em; } h4, .is-h4 { font-size: var(--fontsize-3xl); line-height: 1.3; letter-spacing: -0.04em; } h5, .is-h5 { font-size: var(--fontsize-2xl); line-height: 1.47; letter-spacing: -0.03em; } h6, .is-h6 { font-size: var(--fontsize-xl); line-height: 1.55; letter-spacing: -0.03em; } .is-p{ font-family: inherit; /* copy from the body */ font-size: inherit; /* copy from the body */ line-height: inherit; color: var(--color-text-muted); font-weight: 400; /* copy from the body */ letter-spacing: 0; /* copy from the body */ margin: 0; margin-bottom: 1.5em; } b,strong { font-weight: 600; } /* Button Reset button, button:focus, button:hover { -webkit-appearance: none; border-radius: 0; text-align: inherit; background: none; box-shadow: none; padding: 0; cursor: pointer; border: none; color: inherit; font: inherit; } */ button{ all: unset; cursor: pointer; box-sizing: border-box } code, kbd, tt, var { font: unset; } /* ------------------------------------------------------------------------------- Theme Tweaks ---------------------------------------------------------------------------------- */ .site-header { padding-inline: var(--gap); } /* Constrain the width of the page if wanted */ .site-wrapper { width: 100%; max-width: var(--site-wrapper); margin-inline: auto; background: var(--color-background); overflow: hidden; } @media screen and (min-width: 2400px) { .site-wrapper::after { content: ""; display: block; width: calc((100% - var(--site-wrapper)) / 2 + 0px); height: 100%; background: var(--color-outer-background); position: fixed; right: 0; top: 0; z-index: 1; } .site-wrapper::before { content: ""; display: block; width: calc((100% - var(--site-wrapper)) / 2 + 0px); height: 100%; background: var(--color-outer-background); position: fixed; left: 0; top: 0; z-index: 1; } } /* ------------------------------------------------------------------------------- Comments (Leave it in even if you don't use comments) ---------------------------------------------------------------------------------- */ .comments-area{ margin-left: auto; margin-right: auto; max-width: min(calc(100vw - var(--gutter) * 2), var(--site-width)); width: 100%; padding-bottom: var(--space-m); } #comments{ max-width: 1040px; margin-left: auto; margin-right: auto; } .comment-meta .avatar{ max-width: 64px; flex-shrink: 0; margin-right: 1em; } .comment-meta{ display: flex; align-items: center; } .comment-content{ padding: 0; border: none; margin-top: 1.5em; } .comment-form input, .comment-form-comment { margin-bottom: 1.5em; } /* ------------------------------------------------------------------------------- Utilities ---------------------------------------------------------------------------------- */ /* Balance headings and elements with .balance class */ :is(h1, h2, h3, h4, h5, h6), .balance { text-wrap: balance; overflow-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* Use pretty wrapping for body text elements */ p, blockquote, li, .pretty { text-wrap: pretty; } /* Remove bottom margin from final paragraph */ p:last-child:last-of-type { margin-bottom: 0; } /* Line Limit */ .line-limit-3, .line-limit-2{ display: -webkit-box; box-orient: vertical; -webkit-box-orient: vertical; overflow: hidden; } .line-limit-3{ line-clamp: 3; -webkit-line-clamp: 3; } .line-limit-2{ line-clamp: 2; -webkit-line-clamp: 2; } /* Icon without fill */ html .icon-nofill svg, html .gb-icon svg, .nofill, .nofill svg{ fill: none!important; } /* No Underline */ .no-ul, .no-ul a{ text-decoration: none; } /* Noselect */ .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Horizontal Divider */ hr, hr.wp-block-separator { background-color: var(--color-text); border: 0; height: 1px; margin-bottom: 0; margin-top: 0; } /* Vertical Text */ .vertical{ white-space: nowrap; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; transform: rotate(180deg); } /* Rotation */ .rotate{ transform-origin: center; animation: rotate 28s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Remove Transitions (for example for the Infobox) */ .no-transition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; animation: none !important; } /* Visually Hidden (accessible to screen readers) */ .visually-hidden:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* Smooth Transition Utility */ .transition { transition: all 0.25s ease; } /* Stretch Link */ .stretch-link { position: relative; } .stretch-link a::after { content: ''; position: absolute; inset: 0; z-index: 10; } .stretch-link a:is(:focus-visible)::after { outline: 2px solid; } .stretch-link a:is(:hover, :focus) { outline: none; } /* ------------------------------------------------------------------------------- Accordion ---------------------------------------------------------------------------------- */ body:not(.editor-styles-wrapper) .gb-accordion__content { transition: color 0.3s ease, max-height .7s cubic-bezier(.2,1,.22,1)!important; } body:not(.editor-styles-wrapper) .gb-accordion__content>div { will-change: opacity; opacity: 0; transform: translateY(8px); transition: opacity .5s cubic-bezier(.2,1,.22,1) , transform .7s cubic-bezier(.2,1,.22,1) } body:not(.editor-styles-wrapper) .gb-accordion__item-open .gb-accordion__content>div { opacity: 1; transform: translateY(0) } body:not(.editor-styles-wrapper) .gb-accordion__content { visibility: visible!important } /* ------------------------------------------------------------------------------- Forms ------------------------------------------------------------------------------- */ input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea { display: block; border: 0; border-radius: var(--input-radius); padding: 1rem 1rem; height: auto; font-size: var(--fontsize-s); font-weight: 400; font-family: inherit; width: 100%; max-width: 100%; background-color: var(--color-white); color: var(--color-text); border: 1px solid var(--grey-400); transition: color 0.3s ease, border 0.3s ease, background-color 0.3s ease; outline: 0!important; } input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=url]:focus, select:focus, textarea:focus{ background-color: var(--color-white); border-color: var(--grey-700); outline: 0!important; } form button[type="submit"], .comment-form input[type="submit"]{ align-items: center; background-color: var(--color-primary); color: var(--color-white); border:none; border-radius: var(--button-radius); display: inline-flex; font-family: inherit; font-size: var(--fontsize-m); justify-content: center; transition: transform 0.3s ease 0s; will-change: transform; column-gap: 0.5rem; display: inline-flex; font-weight: 400; justify-content: center; padding: 0.5rem 1rem; row-gap: 0.5rem; transition: all 0.3s ease 0s; } form button[type="submit"]:is(:hover,:focus) { background-color: var(--color-primary-alt); color: var(--color-white); } /* Placeholder */ ::placeholder{color:var(--grey-400);} :-ms-input-placeholder{color:var(--grey-400);} ::-ms-input-placeholder{color:var(--grey-400);} /* Checkbox */ input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--grey-300); margin: 0; flex-shrink: 0; font: inherit; color: currentColor; width: 1em; height: 1em; border-radius: var(--input-radius); transform: translateY(.25em); display: grid; place-content: center; transition: border 0.2s ease; cursor: pointer; } input[type="checkbox"]::before { content: ""; width: 0.65em; height: 0.65em; transform: scale(0); transition: transform 0.2s ease; background-color: var(--color-primary); transform-origin: center center; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } input[type="checkbox"]:checked::before { transform: scale(0.8); } input[type="checkbox"]:checked{ border-color: var(--primary); } input[type="checkbox"] + label{ cursor: pointer; } /* Radio button */ input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--grey-300); margin: 0; flex-shrink: 0; font: inherit; color: currentColor; width: 1em; height: 1em; border-radius: 50%; /* Changed to 50% for circular shape */ transform: translateY(.25em); display: grid; place-content: center; transition: border 0.2s ease; cursor: pointer; } input[type="radio"]::before { content: ""; width: 0.65em; height: 0.65em; transform: scale(0); transition: transform 0.2s ease; background-color: var(--color-primary); transform-origin: center center; border-radius: 50%; /* Made the dot circular */ } input[type="radio"]:checked::before { transform: scale(0.8); } input[type="radio"]:checked { border-color: var(--primary); } input[type="radio"] + label{ cursor: pointer; } /* Select */ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999999' d='M10.293,3.293,6,7.586,1.707,3.293A1,1,0,0,0,.293,4.707l5,5a1,1,0,0,0,1.414,0l5-5a1,1,0,1,0-1.414-1.414Z'/%3E%3C/svg%3E"); background-size: .6em; background-position: calc(100% - 0.5em) center; background-repeat: no-repeat; padding-right: 2em; } .select::after { content: ""; width: 0.8em; height: 0.5em; background-color: var(--select-arrow); clip-path: polygon(100% 0%, 0 0%, 50% 100%); } /* Search */ input[type="search"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); background-position: 0.75em calc(50% - 0.01em); background-repeat: no-repeat; background-size: 1.2em; padding-left: 3rem; } /* ------------------------------------------------------------------------------- Custom CSS ------------------------------------------------------------------------------- */ /* Overlay */ .overlay { content: ""; position: fixed; inset: 0; background-color: var(--color-overlay); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 1; will-change: opacity; } body[data-gb-menu-open="full-overlay"] .overlay { opacity: 1; pointer-events: auto; } /* Mobile menu toggle button position */ :where(.gb-navigation[data-gb-mobile-menu-type=full-overlay]) .gb-menu-container--mobile .gb-menu-toggle--clone{ top: var(--space-s); right: var(--space-s); } /* Megamenu mobile width limit */ .menu-item-has-gb-mega-menu .gb-overlay--anchored{ width: 100%; } /* More space below opened submenu items on mobile .gb-navigation.gb-navigation--mobile.gb-navigation--open .gb-sub-menu--open{ margin-bottom: 1.5rem!important; } */ .gb-menu-container--mobile .mega-menu { grid-template-columns: 1fr; width: 100%; } /* Remove strange offset */ :where(.gb-navigation[data-gb-mobile-menu-type=full-overlay]) .gb-menu-container--mobile .gb-menu-toggle--clone+.gb-menu { margin-top: 0 !important; } /* Navigation Text Decoration */ .gb-navigation .gb-menu-container .menu-item a{ text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-skip-ink: auto; text-decoration-color: transparent; transition: text-decoration-color .1s ease-in-out; } .gb-navigation .gb-menu-container .menu-item a:hover{ text-decoration-color: currentColor; } /* Text Decoration */ a, .underline { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-skip-ink: auto; text-decoration-color: color-mix(in srgb, currentColor 10%, transparent);; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, text-decoration 0.25s ease; } a:hover, .underline:hover{ text-decoration-color: currentcolor; } /* Overwrite standard GP site containers to match the .section-m class */ .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header { padding: var(--space-4xl) 0px var(--space-4xl) 0px; } body:not(.full-width-content) .site{ max-width: min(calc(100vw - var(--gutter) * 2), var(--site-width)); } /* -------------------------------------------------------------------------------- * Stick footer to bottom * -------------------------------------------------------------------------------- */ .site-wrapper{ min-height: 100vh; display: flex; flex-direction: column; align-items: stretch; } .container.grid-container { flex-grow: 1; align-self: stretch; width: 100%; } /* -------------------------------------------------------------------------------- * Style for Password Required Pages * -------------------------------------------------------------------------------- */ .post-password-required{ height: 100dvh; display: flex; align-items: center; justify-content: center; } .post-password-form input[type="submit"]{ margin-top: 1em; align-items: center; background-color: var(--color-primary); color: var(--color-background); column-gap: 0.25em; display: inline-flex; font-family: var(--gp-font--gt-pressura); font-size: var(--fontsize-xl); font-weight: 700; justify-content: center; letter-spacing: -0.01em; text-decoration: none; transition: background-color 0.3s ease 0s,color 0.3s ease 0s,border-color 0.3s ease 0s,box-shadow 0.3s ease 0s; border: 2px solid var(--color-primary); border-radius: var(--button-radius); padding: 0.75em 1.5em; background-color: var(--color-primary); color: var(--color-background); font-weight: 600; padding-bottom: 0.1em; padding-top: 0.1em; text-transform: uppercase; border-top: 1rem solid rgba(255, 255, 255, 0.5); border-right: 1rem solid rgba(0, 0, 0, 0.2); border-bottom: 1rem solid rgba(0, 0, 0, 0.5); border-left: 1rem solid rgba(255, 255, 255, 0.2); border-radius: 0px; } /* -------------------------------------------------------------------------------- * Hard Remove Comments * -------------------------------------------------------------------------------- */ .comments-area{ display: none; } /* -------------------------------------------------------------------------------- * WSForm Improvements * -------------------------------------------------------------------------------- */ .wsf-form input[type=checkbox].wsf-field + label.wsf-label{ padding-top: 0.3em; } .wsf-form.wsf-validated input[type=text].wsf-field:invalid:focus, .wsf-form.wsf-validated input.wsf-field:invalid:focus, .wsf-form.wsf-validated .wsf-field:invalid:focus{ box-shadow: 0 0 0 1px var(--color-text)!important; } .wsf-form input[type=checkbox].wsf-field:focus { border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text); } .wsf-form.wsf-validated input[type=text].wsf-field:invalid:focus, .wsf-form.wsf-validated input.wsf-field:invalid:focus, .wsf-form.wsf-validated .wsf-field:invalid:focus { box-shadow: 0 0 0 2px var(--wsf-field-border-color-invalid) !important; } .wsf-form .wsf-required-wrapper{ display: inline-block; margin-left: 0.2em; } .wsf-form .wsf-text-danger{ font-weight: 400; color: currentColor; } .wsf-form button.wsf-button{ align-items: center; background-color: var(--color-primary); color: var(--color-background); column-gap: 0.25em; display: inline-flex; font-family: var(--gp-font--gt-pressura); font-size: var(--fontsize-xl); font-weight: 700; justify-content: center; letter-spacing: -0.01em; text-decoration: none; transition: background-color 0.3s ease 0s, color 0.3s ease 0s, border-color 0.3s ease 0s, box-shadow 0.3s ease 0s; border: 2px solid var(--color-primary)!important; border-radius: var(--button-radius); padding: 0.75em 1.5em; background-color: var(--color-primary)!important; color: var(--color-primary-text)!important; font-weight: 600; padding-bottom: 0.1em; padding-top: 0.1em; box-shadow: none!important; text-transform: uppercase; border-top: 1rem solid rgba(255, 255, 255, 0.5)!important; border-right: 1rem solid rgba(0, 0, 0, 0.2)!important; border-bottom: 1rem solid rgba(0, 0, 0, 0.5)!important; border-left: 1rem solid rgba(255, 255, 255, 0.2)!important; border-radius: 0px; } /* -------------------------------------------------------------------------------- * Accordion Arrow Animation (only open arrow) * -------------------------------------------------------------------------------- */ .gb-accordion__item > .gb-accordion__toggle .gb-accordion__toggle-icon-open{ --power3-out: linear( 0 0%, 0.1538 4.09%, 0.2926 8.29%, 0.4173 12.63%, 0.5282 17.12%, 0.6255 21.77%, 0.7099 26.61%, 0.782 31.67%, 0.8425 37%, 0.8887 42.23%, 0.9257 47.79%, 0.9543 53.78%, 0.9752 60.32%, 0.9883 67.11%, 0.9961 75%, 1 100% ); transition: transform 0.2s var(--power3-out); display: flex!important; align-items: center!important; justify-content: center!important; } .gb-accordion__item.gb-accordion__item-open>.gb-accordion__toggle .gb-accordion__toggle-icon-open{ display: block; transform: rotate(90deg); } .gb-accordion__item.gb-accordion__item-open>.gb-accordion__toggle .gb-accordion__toggle-icon-close{ display: none!important; } /* -------------------------------------------------------------------------------- * Addon: Transparent Header * -------------------------------------------------------------------------------- */ /* Disable this if you have the Header Transition Addon enabled in Perfmatters > Code Snippets body.has-transparent-header .gb-site-header{ background: transparent; position: absolute; width: var(--site-wrapper); max-width: 100%; } body.has-transparent-header .entry-content > section:first-child, body.has-transparent-header .gb-site-header + section{ padding-top: calc(var(--space-l) + 7rem)!important; } body.has-transparent-header .gb-navigation:not(.gb-navigation--mobile) .gb-menu--base > .menu-item > a { color: #ffffff; } body.has-transparent-header .gb-navigation:not(.gb-navigation--mobile) .gb-menu--base > .menu-item > a .gb-submenu-toggle-icon{ color: #ffffff; } body.has-transparent-header .gb-navigation:not(.gb-navigation--open) .gb-menu-toggle{ color: #ffffff; } body.has-transparent-header #logo { filter: brightness(0) invert(1); } */ /* -------------------------------------------------------------------------------- * Addon: Infobox - Standardzustand = die box ist ZU * -------------------------------------------------------------------------------- */ .infobox { transform: translateX(calc(100% + 2em)); transition: all 0.3s var(--ease-smooth); } @media screen and (max-width: 1024px) { .infobox { transform: translateX(100%); transition: all 0.3s var(--ease-smooth); } } .infobox.is-visible { transform: translateX(0); opacity: 1; visibility: visible; } .infobox.is-visible .infobox-label{ transform: rotate(-90deg) translate3d(-100%, 0, 0px); opacity: 0; visibility: hidden; } /* -------------------------------------------------------------------------------- * Addon: Marquee * -------------------------------------------------------------------------------- */ .marquee { --gap: 0.5em; display: flex; gap: var(--gap); overflow: hidden; position: relative; } .marquee-content { animation: scroll 60s linear infinite; display: flex; align-items: center; flex-shrink: 0; gap: var(--gap); justify-content: space-around; min-width: 100%; white-space: nowrap; will-change: transform; } .marquee-content-item { white-space: nowrap; } .marquee.logo-marquee { --gap: 2.5em; } .marquee.logo-marquee img { height: 80px; } @-webkit-keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } .marquee-reverse .marquee-content { animation-direction: reverse; } /* -------------------------------------------------------------------------------- * Addon: Overlay Menu * -------------------------------------------------------------------------------- */ .overlay-menu-container { width: 127px; /* oder dein Standardwert */ height: 56px; border-radius: var(--radius); overflow: hidden; overflow-y: auto; transition: width 0.3s var(--ease-spring-light), height 0.3s var(--ease-spring-light); } .overlay-menu-container:has(button[aria-expanded="true"]) { width: 560px; height: 672px; } .overlay-menu-container button[aria-expanded="false"] .gb-shape .close{ display: none; } .overlay-menu-container button[aria-expanded="true"] .gb-shape .open{ display: none; } /* Overlay Menu Container - Grundzustand: Zu */ .overlay-menu-container__inner { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0s linear; } /* Overlay Menu Container - Zustand: Offen */ .overlay-menu-container:has(button[aria-expanded="true"]) .overlay-menu-container__inner { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.2s linear 0.1s, transform 0.2s linear 0.1s, visibility 0s linear 0.1s; } /* -------------------------------------------------------------------------------- * Addon: Animation System * -------------------------------------------------------------------------------- */