*, *::before, *::after { box-sizing: border-box; background-repeat: no-repeat; } html { -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; background-color: var(--background-color); color: var(--color); font-weight: normal; font-size: var(--font-size); line-height: var(--font-lineheight-1); font-family: var(--font-body); min-height: 100%; --h1-width: calc(var(--line-width) * .4); --h2-width: calc(var(--line-width) * .6); --h3-width: calc(var(--line-width) * .8); --hx-width: calc(var(--line-width) * .82); --transition: 350ms ease-in-out; --spacing: min(var(--size-2), 2rem); --spacing-neg: calc(-1 * var(--spacing)); --space-inside: var(--spacing); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); --block-spacing-block: var(--spacing); --block-spacing-inline: var(--spacing); --max-content-width: min(100rem, 100vw - var(--spacing)); --square: 1/1; --square-frac: 1; --landscape: 4/3; --landscape-frac: 1.3333333333; --portrait: 3/4; --portrait-frac: 0.75; --widescreen: 16/9; --widescreen-frac: 1.7777777778; --ultrawide: 1.85/1; --ultrawide-frac: 1.85; --golden: 1.6180339887/1; --golden-frac: 1.6180339887; --double: 2/1; --double-frac: 2; --line-width: unset; } @media (min-width: 64em) { html { --line-width: 80ch; } } @media (min-width: 36em) { html { --spacing: min(var(--size-3), 4vw); } } @media (min-width: 40em) { html { --spacing: var(--size-3); } } @media (min-width: 50em) { html { --spacing: var(--size-4); } } @media (min-width: 64em) { html { --spacing: var(--size-6); } } @media (min-width: 80em) { html { --spacing: var(--size-6); } } @media (min-width: 90em) { html { --spacing: var(--size-6); } } /* Set core body defaults */ body { padding-top: 1px; min-height: 100vh; height: 100%; width: 100%; margin: 0; text-rendering: optimizeSpeed; scrollbar-gutter: stable both-edges; } body, main, section, article, footer, header, aside, div, figure, [role=figure] { position: relative; } body main { max-width: var(--max-content-width); margin-left: auto; margin-right: auto; left: 0; right: 0; @media (max-width: 50em) { --max-content-width: 100vw; } } body main > :-webkit-any(aside, header, footer, article, section, dialog):not(.hero) { padding: var(--block-spacing-block) var(--block-spacing-inline); } body main > :is(aside, header, footer, article, section):not(.hero) { padding: var(--block-spacing-block) var(--block-spacing-inline); } body main > :first-child:not(.hero, header, aside, button) { padding-top: var(--block-spacing-block); } body main > :not(#bump, :first-child, dialog, button, .hero-image) { padding-top: 0; } body:not(:is(.grid, .grid-xxs, .grid-xs, .grid-sm, .grid-smd, .grid-md, .grid-lg, .grid-xxs-below, .grid-xs-below, .grid-sm-below, .grid-smd-below, .grid-md-below, .grid-lg-below)) > header > :not(div, form, iframe, canvas, nav), body:not(:is(.grid, .grid-xxs, .grid-xs, .grid-sm, .grid-smd, .grid-md, .grid-lg, .grid-xxs-below, .grid-xs-below, .grid-sm-below, .grid-smd-below, .grid-md-below, .grid-lg-below)) > footer > :not(form, iframe, canvas) { max-width: var(--max-content-width); margin-left: auto; margin-right: auto; left: 0; right: 0; } .page-head, .page-foot { --menu-padding-block: var(--size-1); --menu-padding-inline: var(--size-3); --menu-label-padding-block: var(--size-3); --menu-label-padding-inline: var(--size-4); --search-form-width: 20ch; width: 100%; } /* src/styles/layout.site-bar */ /* layout.page-head */ :where(header[data-has=usp], header[data-has=usertools], header[data-has=logo]), :where(header[data-has~=usp], header[data-has~=usertools], header[data-has~=logo]) { --_site-bar: calc(60px + var(--spacer-start, 0px) + var(--spacer-end, 0px)); --_usertools: calc(60px + var(--spacer-start, 0px) + var(--spacer-end, 0px)); } :where(header[data-has~=menumain]) { --_menumain: calc(2 * var(--font-size, 1em) + 2 * var(--spacer, 0px)); } :where(header[data-has~=features]) { --_features: calc(var(--font-size, 1em) + 2 * var(--spacer, 0px)); } :where(header[data-has~=crumbs]) { --_crumbs: calc(var(--font-size, 1em)); } .page-head { --spacer: 0.625rem; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); --top: var(--spacer-start); --bottom: var(--spacer-end); isolation: isolate; z-index: 42; padding-bottom: 1px; } .page-head[data-has] { min-height: calc(var(--_site-bar, 0px) + var(--_menumain, 0px) + var(--_features, 0px) + var(--_crumbs, 0px)); } @media (min-width: 36em) { :root { --sticky-offset-top: calc(-1 * (60px + var(--spacer-start, 0px) + var(--spacer-end, 0px))); } .page-head > nav[id], .page-head > .site-bar-wrapper { padding-left: var(--spacing); padding-right: var(--spacing); } } .site-logo { width: 250px; max-width: 250px; height: 60px; } @media (max-width: 63.999em) { .site-logo { width: 200px; } } @media (max-width: 29.999em) { .site-logo { width: 62px; object-fit: cover; object-position: left; } } .site-bar-wrapper { max-width: unset; min-height: var(--_site-bar, 0px); } .site-bar:not(:empty) { display: flex; justify-content: space-between; align-items: center; gap: var(--gutter, var(--gap, 1rem)); } .site-bar[data-usp][data-usertools] { justify-content: space-between; } @media (max-width: 35.999em) { .site-bar { --hamburger-width: calc(2ch + (2 * calc(1.4 * var(--form-element-spacing-inline, var(--size-3)))) + 1rem); width: calc(100% - var(--hamburger-width)); } } .site-bar-wrapper { background-color: var(--surface-8); } .menu-main, .menu-feature { border-bottom: var(--border-width) solid var(--surface-8); } :where(:root[data-font=segoe] .page-head) ul li { font-weight: var(--font-weight-extralight); } .mobile-link { display: none; } @media (max-width: 49.999em) { .site-link { line-height: 0; height: 60px; } } @media (max-width: 35.999em) { .site-link { margin-left: 1rem; } } /* layout.usp */ .site-usp { --symbol-size: 3em; --gap: 1em; --sm-break: 25em; contain: layout; display: none; margin-left: auto; } @media (min-width: 25em) { .site-usp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-right: var(--gap); } } @media (max-width: 63.999em) { .site-usp { --symbol-size: 2.5em; } } @media (max-width: 35.999em) { .site-usp { display: inline; text-align: right; } } @media (min-width: 36em) { .site-usp { display: flex; gap: var(--gap); } } @media (max-width: 35.999em) { .img-text.usp { --widget-cells: 1fr; --widget-areas: "text"; --gap: 0; } .img-text.usp > img, .img-text.usp > svg { display: none; } } .img-text.usp > :not(img, svg) { line-height: inherit; } /* components.usertools */ /* mixins.color */ /* vars.ci */ /* utilities.hacks */ /* layout.page-head */ /* mixins.icons */ .c_user-tools { --symbol-size: 2rem; --gap: 1ch; margin-left: auto; position: relative; } .c_user-tools > .menu { --menu-item-hilight-color: #eb6a0a; --menu-item-shadow-color: #ff8f3b; --menu-item-bg-hover: transparent; --menu-item-current-color: #eb6a0a; gap: var(--menu-padding-inline); } .c_user-tools > .menu .menu-link:any-link { -webkit-text-decoration: none; text-decoration: none; } @media (max-width: 79.999em) and (min-width: 64em) { .c_user-tools > .menu > .menu-item > .img-text { --widget-areas: "img" "text"; grid-template-columns: 1fr; gap: unset; } } .c_user-tools .menu-item { --menu-item-shadow-color: transparent; } .c_user-tools .menu-item:focus-within { outline: 1px solid var(--menu-item-shadow-color); } .c_user-tools .menu-item:focus-within *, .c_user-tools .menu-item:focus-within *::after { color: currentColor; } .c_user-tools .menu-item a:focus { color: var(--menu-item-hilight-color); } @media (max-width: 49.999em) { .c_user-tools { margin-right: calc(var(--menu-padding-inline) * 2 + var(--w-mobile-menu)); } } button.search-tool { border: none; padding: 0; } form[name=site-search] { position: absolute; top: 0; right: 0; z-index: 10; transition: opacity var(--transition); opacity: 0; } @media (max-width: 35.999em) { form[name=site-search] { right: calc((var(--menu-padding-inline) + 3.5em) * 2 * -1); } } form[name=site-search] .side-button { cursor: pointer; } form[name=site-search] [type=search] { width: min(25em, 60vw); } form[name=site-search] [type=search]:invalid { background-image: none; } form[name=site-search] [type=search] + button.btn { color: var(--color-10); } form[name=site-search] [aria-hidden=false], form[name=site-search]:active, form[name=site-search]:focus, form[name=site-search]:focus-within { opacity: 1; transition: opacity var(--transition); z-index: 20; } .site-search-results:modal { position: absolute; margin-top: var(--_site-bar, 0px); margin-right: var(--spacing); background-color: var(--surface-10); box-shadow: var(--shadow-4); width: max-content; max-width: 100dvw; max-height: calc(100dvh - var(--_site-bar, 0px)); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); z-index: 10; } .site-search-results:modal::backdrop { backdrop-filter: unset; background-color: transparent; } @media (max-width: 35.999em) { .site-search-results:modal { margin-top: 80px; margin-left: unset; margin-right: unset; max-height: calc(100dvh - 80px); } } /* [data-open] */ .site-search-results[aria-hidden=false] { opacity: 1; visibility: visible; transition: opacity var(--transition), visibility var(--transition); } table.search-results { width: 100%; } table.search-results caption { caption-side: top; margin: 0 auto; padding: var(--size-1); max-width: unset; } table.search-results .close { float: right; } table.search-results th:first-child { width: min(20em, 35%); } table.search-results th:last-child { width: 65%; } @media (max-width: 49.999em) { .site-bar [name=usertool_search], .site-bar [name=usertool_login], .site-bar [name=usertool_favorites] { --widget-gap: 0; } } @media (max-width: 63.999em) { .site-bar .menu-item > svg { --symbol-size: 1.8em; } } @media (max-width: 35.999em) { .site-bar [name=usertool_login], .site-bar [name=usertool_favorites] { z-index: 10; } } @media (max-width: 39.999em) { .site-bar svg { --symbol-size: 2.5em; --icon-stroke-width: 2px; } } @media (max-width: 35.999em) { .c_user-tools { --symbol-size: revert; --space-inside: var(--size-3); right: var(--space-inside); margin-right: unset; } .c_user-tools > .menu-bar { justify-content: space-around; } .c_user-tools .menu-item [aria-hidden=true] { display: initial; } .c_user-tools .img-text { display: flex; justify-content: center; align-items: center; gap: var(--gutter, var(--gap, 1rem)); flex-direction: column; } .c_user-tools li[name=usertool_favorites] .menu-link { display: grid; } } .c_user-tools.side-button { background-color: var(--surface-8); } /* Skip/Show visibility by @media */ /* layout.skip */ /* mixins.device */ @media screen and (max-width: 23.249em) { [data-skip=xxs] { --skip-xxs: 23.25em; display: none !important; } } @media screen and (max-width: 29.999em) { [data-skip=xs] { --skip-xs: 30em; display: none !important; } } @media screen and (max-width: 35.999em) { [data-skip=sm] { --skip-sm: 36em; display: none !important; } } @media screen and (max-width: 39.999em) { [data-skip=smd] { --skip-smd: 40em; display: none !important; } } @media screen and (max-width: 49.999em) { [data-skip=md] { --skip-md: 50em; display: none !important; } } @media screen and (max-width: 63.999em) { [data-skip=lg] { --skip-lg: 64em; display: none !important; } } @media screen and (max-width: 79.999em) { [data-skip=xl] { --skip-xl: 80em; display: none !important; } } @media screen and (max-width: 89.999em) { [data-skip=xxl] { --skip-xxl: 90em; display: none !important; } } /* WIP: Container Skippies */ @media screen and (min-width: 23.25em) { [data-show=xxs] { --show-xxs: 23.25em; display: none !important; } } @media screen and (min-width: 30em) { [data-show=xs] { --show-xs: 30em; display: none !important; } } @media screen and (min-width: 36em) { [data-show=sm] { --show-sm: 36em; display: none !important; } } @media screen and (min-width: 40em) { [data-show=smd] { --show-smd: 40em; display: none !important; } } @media screen and (min-width: 50em) { [data-show=md] { --show-md: 50em; display: none !important; } } @media screen and (min-width: 64em) { [data-show=lg] { --show-lg: 64em; display: none !important; } } @media screen and (min-width: 80em) { [data-show=xl] { --show-xl: 80em; display: none !important; } } @media screen and (min-width: 90em) { [data-show=xxl] { --show-xxl: 90em; display: none !important; } } /* WIP: Container Skippies */ /* components.navigation.menu */ /* mixins.selectors */ /* mixins.fallbacks */ nav ol, nav ul { margin: 0; padding: 0; list-style: none; } nav > .menu-bar { line-height: 1.5 !important; } nav[id] { --menu-padding-block: var(--size-1); --menu-padding-inline: var(--size-3); --menu-label-padding-block: var(--size-3); --menu-label-padding-inline: var(--size-4); } nav[id] .menu-bar { width: 100%; } nav:has(.menu-bar):not(.c_user-tools) { width: 100%; } nav[aria-labelledby] + :is(h1, h2, h3, h4, h5, h6)[id] { position: absolute; left: -100vw; max-width: 1px; max-height: 1px; padding: 0; overflow: hidden; border: 0; } .menu-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--gutter, var(--gap, 1rem)); } .menu-item { position: relative; display: block; } .menu-label { display: inline-block; position: relative; width: 100%; vertical-align: middle; -webkit-user-select: none; user-select: none; } @media (min-width: 50em),(max-width: 35.999em) { .menu-label wbr { display: block; } } @media (min-width: 36em) { button[name=menu-main-close] { display: none; } } /* layout.grid */ .grid { display: grid; } /* props.layouts */ .grid { --grid-full-area: 1 / 1 / -1 / -1; --grid-full-row: auto / 1 / auto / -1; --grid-full-col: 1 / auto / -1 / auto; --grid-ram-item: calc(var(--col-item, 0px) - var(--grid-spacing-inline, 0px)); --grid-ram: repeat(auto-fit, minmax(min(var(--grid-ram-item), 100%), 1fr)); --grid-ram-flex: repeat(auto-fit, minmax(min(var(--col-item, 0px), 100%), 1fr)); /* grid-template komplexe Pattern NICHT mit --column-layout/--row-layout verwenden */ --grid-holy-grail: "h h h" auto "f b b" 1fr "f b b" auto / var(--column-layout, [L] auto [C] 1fr auto [R]); /* Adaptives Grid das zwischen * --grid_adapt_mixin-break_1 (1024px) bis --grid_adapt_mixin-break_2 (480px) * --above-break_1-columns (5) bis --above-break_2-columns (2) Spalten hat */ --grid_adapt_mixin-viewport_context: 100vw; --grid_adapt_mixin-container_context: 100%; --grid_adapt_mixin-context: var(--grid_adapt_mixin-viewport_context); --grid_adapt_mixin-break_1: 64em; --above-break_1-columns: 5; --grid_adapt_mixin-break_2: 30em; --above-break_2-columns: 2; /* Falsche Css Minimizer Warnung wg. Parser-Bug: Cannot read properties of null */ --grid_adapt_mixin: repeat(auto-fill, minmax( clamp( clamp( calc(100% / calc(var(--above-break_1-columns) + 1) + 0.1%), calc(calc(var(--grid_adapt_mixin-break_1) - var(--grid_adapt_mixin-context)) * 1e5), calc(100% / calc(var(--above-break_2-columns) + 1) + 0.1%) ), calc(calc(var(--grid_adapt_mixin-break_2) - var(--grid_adapt_mixin-context)) * 1e5), 100% ), 1fr) ); } @media (max-width: 23.249em) { .grid-xxs-below { display: grid; } } @media (min-width: 23.25em) { .grid-xxs { display: grid; } } @media (max-width: 29.999em) { .grid-xs-below { display: grid; } } @media (min-width: 30em) { .grid-xs { display: grid; } } @media (max-width: 35.999em) { .grid-sm-below { display: grid; } } @media (min-width: 36em) { .grid-sm { display: grid; } } @media (max-width: 39.999em) { .grid-smd-below { display: grid; } } @media (min-width: 40em) { .grid-smd { display: grid; } } @media (max-width: 49.999em) { .grid-md-below { display: grid; } } @media (min-width: 50em) { .grid-md { display: grid; } } @media (max-width: 63.999em) { .grid-lg-below { display: grid; } } @media (min-width: 64em) { .grid-lg { display: grid; } } @media (max-width: 79.999em) { .grid-xl-below { display: grid; } } @media (min-width: 80em) { .grid-xl { display: grid; } } @media (max-width: 89.999em) { .grid-xxl-below { display: grid; } } @media (min-width: 90em) { .grid-xxl { display: grid; } } @media (max-width: 95.999em) { .grid-xxxl-below { display: grid; } } @media (min-width: 96em) { .grid-xxxl { display: grid; } } @media (max-width: 23.249em) { .flex-xxs-below { display: flex; } } @media (min-width: 23.25em) { .flex-xxs { display: flex; } } @media (max-width: 29.999em) { .flex-xs-below { display: flex; } } @media (min-width: 30em) { .flex-xs { display: flex; } } @media (max-width: 35.999em) { .flex-sm-below { display: flex; } } @media (min-width: 36em) { .flex-sm { display: flex; } } @media (max-width: 39.999em) { .flex-smd-below { display: flex; } } @media (min-width: 40em) { .flex-smd { display: flex; } } @media (max-width: 49.999em) { .flex-md-below { display: flex; } } @media (min-width: 50em) { .flex-md { display: flex; } } @media (max-width: 63.999em) { .flex-lg-below { display: flex; } } @media (min-width: 64em) { .flex-lg { display: flex; } } @media (max-width: 79.999em) { .flex-xl-below { display: flex; } } @media (min-width: 80em) { .flex-xl { display: flex; } } @media (max-width: 89.999em) { .flex-xxl-below { display: flex; } } @media (min-width: 90em) { .flex-xxl { display: flex; } } @media (max-width: 95.999em) { .flex-xxxl-below { display: flex; } } @media (min-width: 96em) { .flex-xxxl { display: flex; } } :-webkit-any(.grid, .grid-xxs, .grid-xs, .grid-sm, .grid-smd, .grid-md, .grid-lg, .grid-xxs-below, .grid-xs-below, .grid-sm-below, .grid-smd-below, .grid-md-below, .grid-lg-below) { gap: var(--gap, var(--gutter, var(--grid-spacing-block)) var(--gutter, var(--grid-spacing-inline))); grid-template-columns: var(--column-layout, auto); grid-template-rows: var(--row-layout, auto); } :is(.grid, .grid-xxs, .grid-xs, .grid-sm, .grid-smd, .grid-md, .grid-lg, .grid-xxs-below, .grid-xs-below, .grid-sm-below, .grid-smd-below, .grid-md-below, .grid-lg-below) { gap: var(--gap, var(--gutter, var(--grid-spacing-block)) var(--gutter, var(--grid-spacing-inline))); grid-template-columns: var(--column-layout, auto); grid-template-rows: var(--row-layout, auto); } [class|=grid] > * { min-width: 0; } [class|=grid].-dense { grid-auto-flow: dense; } [class|=grid].-dense-rows { grid-auto-flow: dense row; } [class|=grid].-dense-cols { grid-auto-flow: dense column; } .g-xs { --gap: 0.25rem; } .g-sm { --gap: 0.625rem; } .g-md { --gap: 1rem; } .g-lg { --gap: 1.5rem; } .g-xl { --gap: 2rem; } .g-xxl { --gap: 3.25rem; } .g-xs\+ { --gap: var(--size-fluid-1); } .g-sm\+ { --gap: var(--size-fluid-2); } .g-md\+ { --gap: var(--size-fluid-3); } .g-lg\+ { --gap: var(--size-fluid-4); } .g-xl\+ { --gap: var(--size-fluid-5); } .g-xxl\+ { --gap: var(--size-fluid-6); } /* Modulares Grid System */ .c1 { grid-column-start: 1; } .c2 { grid-column-start: 2; } .c3 { grid-column-start: 3; } .c4 { grid-column-start: 4; } .c5 { grid-column-start: 5; } .cx-2 { grid-column-end: span 2; } .cx-3 { grid-column-end: span 3; } .cx-4 { grid-column-end: span 4; } .cx-5 { grid-column-end: span 5; } .cx-6 { grid-column-end: span 6; } .cx-n { grid-column-end: -1; } .cx-full { grid-column: 1/-1; } .r1 { grid-row-start: 1; } .r2 { grid-row-start: 2; } .r3 { grid-row-start: 3; } .r4 { grid-row-start: 4; } .r5 { grid-row-start: 5; } .ry-1 { grid-row-end: 1; } .ry-2 { grid-row-end: 2; } .ry-3 { grid-row-end: 3; } .ry-4 { grid-row-end: 4; } .ry-5 { grid-row-end: 5; } .ry-n { grid-row-end: -1; } .ry-full { grid-row: 1/-1; } .full-area { grid-area: var(--grid-full-area); } .any-area { grid-column: var(--cols, auto); grid-row: var(--rows, auto); } /* CSS Vars */ /* open-props */ /* props.fonts */ :root { /*--font-sans: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;*/ /*--font-serif: ui-serif,serif;*/ /*--font-mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;*/ --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-strong: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --font-lineheight-00: .95; --font-lineheight-0: 1; --font-lineheight-1: 1.25; --font-lineheight-2: 1.375; /* match sonstige --size-* */ --font-lineheight-3: 1.625; --font-lineheight-4: 1.75; --font-lineheight-5: 2; --font-letterspacing-0: -.05em; --font-letterspacing-1: .025em; --font-letterspacing-2: .050em; --font-letterspacing-3: .075em; --font-letterspacing-4: .150em; --font-letterspacing-5: .500em; --font-letterspacing-6: .750em; --font-letterspacing-7: 1em; /* default scale 'linear' in rem */ --font-size-00: .75rem; /* 12 */ --font-size-0: 0.875rem; /* 14 */ --font-size-1: 1.0rem; /* 16px - root-size */ --font-size-2: 1.125rem; /* 18 */ --font-size-3: 1.25rem; /* 20 */ --font-size-4: 1.5rem; /* 24 */ --font-size-5: 2.0rem; /* 32 */ --font-size-6: 2.5rem; /* 40 */ --font-size-7: 3.0rem; /* 48 */ --font-size-8: 3.25rem; /* 52 2 x --size-6 */ --font-size-mono: 0.875rem; --font-size-fluid-0: clamp(var(--font-size-1), 0.1vw + 1rem, var(--font-size-3)); /* 16 - 20 */ --font-size-fluid-1: clamp(var(--font-size-3), 1.625vw + 1rem, var(--font-size-4)); /* 20 - 32 */ --font-size-fluid-2: clamp(var(--font-size-4), 2.5vw + 1rem, var(--font-size-5)); /* 24 - 40 */ --font-size-fluid-3: clamp(var(--font-size-5), 3vw + 1rem, var(--font-size-6)); /* 32 - 52 */ } /* props.sizes */ :root { --size-000: -.5rem; --size-00: -.25rem; --size-1: .25rem; --size-2: .625rem; --size-3: 1rem; /* 16px - $font-root-size */ --size-4: 1.25rem; /* 20 */ --size-5: 1.5rem; /* 24 */ --size-6: 1.625rem; /* 26 */ --size-7: 2rem; /* 32 */ --size-8: 3.25rem; /* 52 */ --size-9: 4rem; --size-10: 5rem; --size-11: 7.5rem; --size-12: 10rem; --size-13: 15rem; --size-14: 20rem; --size-15: 30rem; --sizem-1: .25em; --sizem-2: .625em; --sizem-3: 1em; --sizem-4: 1.25em; --sizem-5: 1.5em; --sizem-6: 1.625em; --sizem-7: 2em; --sizem-8: 3.25em; --sizem-9: 4em; --sizem-10: 5em; --sizex-1: .25ex; --sizex-2: .625ex; --sizex-3: 1ex; --sizex-4: 1.5ex; --sizex-5: 2ex; --size-fluid-1: clamp(var(--size-1), 1vw + var(--size-1), var(--size-2)); --size-fluid-2: clamp(var(--size-2), 2vw + var(--size-2), var(--size-3)); --size-fluid-3: clamp(var(--size-3), 2vw + 1rem, var(--size-4)); --size-fluid-4: clamp(var(--size-4), 3vw + 1rem, var(--size-6)); --size-fluid-5: clamp(var(--size-6), 3vw + 1rem, var(--size-7)); --size-fluid-6: clamp(var(--size-7), 3.5vw + 1rem, var(--size-8)); --size-fluid-7: clamp(var(--size-8), 4.25vw + 1rem, var(--size-9)); --size-fluid-8: clamp(var(--size-9), 5vw + 1rem, var(--size-10)); --size-fluid-9: clamp(var(--size-10), 6vw + 1rem, var(--size-11)); --size-content-1: 20ch; --size-content-2: 45ch; --size-content-3: 60ch; --size-header-1: 20ch; --size-header-2: 25ch; --size-header-3: 35ch; } /* props.shadows */ /* ALLE WERTE in HSLA ! */ :root { --shadow-color: 45,4%,18%; /* = --surface-3 */ --shadow-shade: 45,4%,18%; --shadow-strength: 10%; --shadow-spread: 4px; --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color), calc(var(--shadow-strength) + 9%)); --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--shadow-color), calc(var(--shadow-strength) + 5%)); --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color), calc(var(--shadow-strength) + 2%)), 0 1px 2px -5px hsl(var(--shadow-color), calc(var(--shadow-strength) + 2%)), 0 2px 5px -5px hsl(var(--shadow-color), calc(var(--shadow-strength) + 4%)), 0 4px 12px -5px hsl(var(--shadow-color), calc(var(--shadow-strength) + 5%)), 0 12px 15px -5px hsl(var(--shadow-color), calc(var(--shadow-strength) + 7%)); --shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color), calc(var(--shadow-strength) + 2%)), 0 1px 1px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 3%)), 0 2px 2px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 4%)), 0 9px 9px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 5%)), 0 16px 16px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 6%)); --shadow-5: 0 -2px 5px 0 hsl(var(--shadow-color), calc(var(--shadow-strength) + 2%)), 0 2px 1px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 3%)), 0 10px 10px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 4%)), 0 20px 20px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 5%)), 0 40px 40px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 7%)); --shadow-6: 0 -2px 5px 0 hsl(var(--shadow-color), calc(var(--shadow-strength) + 2%)), 0 3px 2px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 3%)), 0 7px 5px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 3%)), 0 12px 10px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 4%)), 0 22px 18px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 5%)), 0 41px 33px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 6%)), 0 100px 80px -2px hsl(var(--shadow-color), calc(var(--shadow-strength) + 7%)); --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color), calc(var(--shadow-strength) + 9%)); --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color), calc(var(--shadow-strength) + 9%)); --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color), calc(var(--shadow-strength) + 9%)); --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color), calc(var(--shadow-strength) + 9%)); --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color), calc(var(--shadow-strength) + 9%)); } /*noinspection CssInvalidMediaFeature*/ /* props.aspects - ratios */ :root { --ratio-square: 1; --ratio-landscape: 4/3; --ratio-portrait: 3/4; --ratio-widescreen: 16/9; --ratio-ultrawide: 18/5; --ratio-golden: 1.618/1; } /* props.project ext props.media */ /* vars.fonts */ :root { --font-body: system-ui, "Segoe UI", Arial, "Helvetica Neue", Ubuntu, Roboto, Oxygen, "Droid Sans", "Liberation Sans", "Open Sans", sans-serif, var(--font-emoji); --font-title: system-ui, "Segoe UI", Arial, "Helvetica Neue", Ubuntu, Roboto, Oxygen, "Droid Sans", "Liberation Sans", "Open Sans", sans-serif, var(--font-emoji); --font-emoji: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji"; --font-display: var(--font-title); --font-mono: ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Ubuntu Monospace", "Noto Mono", "Roboto Mono", "Oxygen Mono", "Droid Sans Mono", "Source Code Pro", "Liberation Mono", monospace, var(--font-emoji); } :root { --font-root: 16px; --font-size: var(--font-size-1); --font-weight: var(--font-weight-normal); --device-xxs: 23.25em; --device-xs: 30em; --device-sm: 36em; --device-smd: 40em; --device-md: 50em; --device-lg: 64em; --device-xl: 80em; --device-xxl: 90em; --glow-color: 0, 0%, 100%; --glow-4: 0 0 60px 15px hsla(var(--glow-color), .35); --ease-3: cubic-bezier(.25, 0, .3, 1); --ease-in-3: cubic-bezier(.70, 0, 1, 1); --ease-out-3: cubic-bezier(0, 0, .3, 1); --ease-in-out-3: cubic-bezier(.5, 0, .5, 1); --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25); } :root[data-font=arial] { --font-weight-extrabold: 700; --font-weight-black: 700; } :root[data-font=segoe] { --font-weight-normal: 400; --font-weight-strong: 500; --font-weight-semibold: 600; --font-weight-bold: 600; --font-weight-extrabold: 800; } /* props.project ext props.media */ /* CSS Custom Properties */ :root { --opac: 1; --shadow-spread: .4em; --shadow-shade: #8e8e8e50; --shadow-dark: 0 calc(var(--shadow-spread) / 2) var(--shadow-spread) var(--shadow-shade); --shadow-md: 0 .5ex 1ex var(--shadow-shade); --shadow-lg: 0 1ex 3ex var(--shadow-shade); --shadow-xl: 0 1rem 3.5rem var(--shadow-shade); --border-radius: 1em; --border-width: 1px; --outline-width: calc(var(--border-width) * 2); --viewport-xxs: 23.25em; --viewport-xs: 30em; --viewport-sm: 36em; --viewport-smd: 40em; --viewport-md: 50em; --viewport-lg: 64em; --viewport-xl: 80em; --viewport-xxl: 90em; --viewport-xxxl: 96em; --viewport-hd: 116em; } :root { --color-0: #000; --color-1: #23211d; --color-2: #272524; --color-3: #2f2e2b; --color-4: #363532; --color-5: #5a5752; --color-6: #8e8e8e; --color-7: #c7c7c7; --color-8: #ebebeb; --color-9: #f9f9f9; --color-10: #fff; --surface-0: #000; --surface-1: #23211d; --surface-2: #272524; --surface-3: #2f2e2b; --surface-4: #363532; --surface-5: #5a5752; --surface-6: #8e8e8e; --surface-7: #c7c7c7; --surface-8: #ebebeb; --surface-9: #f9f9f9; --surface-10: #fff; } :root { --brand-primary-100: #5e1b01; --brand-primary-200: #832c03; --brand-primary-300: #a33f05; --brand-primary-400: #bf5106; --brand-primary-500: #eb6a0a; --brand-primary-600: #ee8b35; --brand-primary-700: #f3b66a; --brand-primary-800: #f7d79b; --brand-primary-900: #fcf2dd; --brand-primary-100-contrast: #fff; --brand-primary-200-contrast: #fff; --brand-primary-300-contrast: #fff; --brand-primary-400-contrast: #fff; --brand-primary-500-contrast: #260b01; --brand-primary-600-contrast: #260b01; --brand-primary-700-contrast: #260b01; --brand-primary-800-contrast: #260b01; --brand-primary-900-contrast: #260b01; --brand-secondary-100: #1c270a; --brand-secondary-200: #2c4212; --brand-secondary-300: #3c601a; --brand-secondary-400: #4d8524; --brand-secondary-500: #62b332; --brand-secondary-600: #81c35f; --brand-secondary-700: #98d185; --brand-secondary-800: #b4e0ac; --brand-secondary-900: #e4f4e3; --brand-secondary-100-contrast: #fff; --brand-secondary-200-contrast: #fff; --brand-secondary-300-contrast: #fff; --brand-secondary-400-contrast: #fff; --brand-secondary-500-contrast: #0e1204; --brand-secondary-600-contrast: #0e1204; --brand-secondary-700-contrast: #0e1204; --brand-secondary-800-contrast: #0e1204; --brand-secondary-900-contrast: #0e1204; --brand-accent-100: #0e3637; --brand-accent-200: #154b50; --brand-accent-300: #1c616c; --brand-accent-400: #237789; --brand-accent-500: #2c90a8; --brand-accent-600: #5ea7bc; --brand-accent-700: #85b6cd; --brand-accent-800: #aac7dc; --brand-accent-900: #dae6f0; --brand-accent-100-contrast: #fff; --brand-accent-200-contrast: #fff; --brand-accent-300-contrast: #fff; --brand-accent-400-contrast: #fff; --brand-accent-500-contrast: #08171a; --brand-accent-600-contrast: #08171a; --brand-accent-700-contrast: #08171a; --brand-accent-800-contrast: #08171a; --brand-accent-900-contrast: #08171a; --brand-compl-100: #23211d; --brand-compl-200: currentColor; --brand-compl-300: currentColor; --brand-compl-400: #655e53; --brand-compl-500: #655e53; --brand-compl-600: #ccc7c0; --brand-compl-700: #d9d6d0; --brand-compl-800: #edecea; --brand-compl-900: currentColor; --brand-compl-100-contrast: #ebebeb; --brand-compl-200-contrast: #ebebeb; --brand-compl-300-contrast: #ebebeb; --brand-compl-400-contrast: #ebebeb; --brand-compl-500-contrast: #141312; --brand-compl-600-contrast: #141312; --brand-compl-700-contrast: #141312; --brand-compl-800-contrast: #141312; --brand-compl-900-contrast: #141312; } /* "Wohnen im Alter" Logo Schriftzug für {{wia}} Makro `Wohnen im Alter` */ b[wia] { color: #eb6a0a; font-weight: var(--font-weight-strong); } b[wia] > b { color: #62b332; } :root [data-env=dev] { display: none; } /* * theme-wia | Wohnen im Alter Farbschema und Typografie */ /* special effects */ /* Default: Light theme */ html { color-scheme: light dark; } :root { --background-color: var(--surface-9); --border-color: var(--color-7); --panel-background-color: var(--surface-10); --color: var(--color-2); --h1-color: #4d8524; --h2-color: #237789; --h3-color: #272524; --h4-color: #237789; --h5-color: #272524; --h6-color: #272524; --shadow-dark: 0 calc(var(--shadow-spread) / 2) var(--shadow-spread) var(--shadow-shade); --muted-color: var(--color-5); --muted-border-color:var(--color-7); --mark-background-hue: 52; --mark-color: currentColor; --marker-background: linear-gradient(90deg, hsla(var(--mark-background-hue), 90%, 50%, 0) 0, hsla(var(--mark-background-hue), 90%, 50%, 0.75) 5%, hsla(var(--mark-background-hue), 90%, 50%, 0.25) 92%, hsla(var(--mark-background-hue), 90%, 50%, 0) 98% ); --blockquote-border-color: var(--muted-border-color); --blockquote-footer-color: var(--muted-color); --progress-background-color: var(--surface-1); --progress-color: #eb6a0a; --tooltip-background-color: var(--surface-8); --tooltip-color: var(--color-2); } :root table { --table-border-width: 1px; --table-border-color: var(--surface-10); --table-head-background-color: rgba(199, 199, 199, 0.85); --table-row-background-color: rgba(235, 235, 235, 0.5); --table-row-striped-background-color: rgba(235, 235, 235, 0.25); --table-hover-color: rgba(94, 167, 188, 0.8); } :root .c_card-deck { --card-background: var(--panel-background-color); --card-border: 1px solid #ebebeb; --card-shadow: var(--shadow-dark), var(--shadow-dark); --card-footer: var(--surface-9); } @supports not selector(:modal) { :root dialog { --panel-background-color: var(--surface-10); --modal-overlay-background-color: var(--surface-9); } } @supports selector(:modal) { :root :modal { --panel-background-color: var(--surface-10); --modal-overlay-background-color: var(--surface-9); } } form { color-scheme: light; --form-element-background-color: var(--surface-10); --form-element-border-color: var(--color-7); --form-element-color: var(--color); --form-element-placeholder-color: var(--color-6); --form-element-active-background-color: var(--surface-10, inherit); --form-element-active-border-color: #eb6a0a; --form-element-focus-color: #2c90a8; --form-element-accent-color: #2c90a8; --form-element-invalid-border-color: #C62828; --form-element-invalid-active-border-color: #E53935; --form-element-invalid-focus-color: #C62828; --form-element-valid-border-color: #388E3C; --form-element-valid-active-border-color: #4CAF50; --form-element-valid-focus-color: #388E3C; --switch-color: currentColor; --switch-background-color: var(--surface-10); --switch-checked-background-color: #62b332; } html, .footer-copyright { background-color: var(--surface-8); } body { background-color: var(--surface-9); } header > nav { background-color: var(--surface-10); } main > article, .footer-main { background-color: var(--surface-10); } h1 { color: var(--h1-color); } h2 { color: var(--h2-color); } h3 { color: var(--h3-color); } h4 { color: var(--h4-color); } h5 { color: var(--h5-color); } h6 { color: var(--h6-color); } a:any-link { color: #eb6a0a; } a:any-link[class] { color: inherit; } a:any-link::selection { background-color: #46270f; } a:any-link:focus:not([class]) { text-decoration-color: transparent; outline: 1px solid currentColor; outline-offset: 1px; } @supports (overflow: overlay) and (not (text-decoration: green wavy underline)) { @media (-webkit-min-device-pixel-ratio: 1) { a:any-link { outline: none !important; } } } u, ins, abbr { color: inherit; } .shadow-dark { box-shadow: 0 0 calc(2 * var(--shadow-spread)) var(--shadow-shade), 0 0 var(--shadow-spread) var(--shadow-shade); } .glow-light > div:only-of-type[class], .glow-light > .panel { filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5333333333)) drop-shadow(0 0 32px rgba(255, 255, 255, 0.6666666667)); } /* utils @see buttons */ ::selection { color: var(--color-9); background-color: #1c270a; text-shadow: none !important; } /* Content-Elemente (Flow) */ /* * theme-wia | Wohnen im Alter Farbschema und Typografie */ /** * Document */ /* LAUFTEXT UND BROTSCHRIFT */ p, ul, ol, dl, address, blockquote { font-family: var(--font-body); font-weight: var(--font-weight-normal); margin-top: 0; margin-bottom: var(--sizem-2); line-height: var(--font-lineheight-3); } p:last-child { margin-bottom: unset; } li > ul, li > ol { margin-bottom: 0; } header > :where(ol, ul) { padding-left: var(--block-spacing-inline); padding-right: var(--block-spacing-inline); } ul { padding-left: 2ch; } ol { padding-left: 3ch; } .props dd { margin-left: var(--spacing); margin-right: var(--spacing); display: flex; } .props dd > b, .props dd > span { width: var(--prop-label, 7ch); } :is(p, ul, ol, dl, address, blockquote) + :is(p, ul, ol, dl) { margin-top: var(--font-lineheight-3); } article:where(:not([class*=grid])) :is(p, li, dd) { -webkit-hyphens: auto; hyphens: auto; } @media (max-width: 39.999em) and (orientation: portrait) { .static-content :-webkit-any(p, ul, li):after { line-height: normal; -webkit-hyphens: auto; hyphens: auto; } .static-content :is(p, ul, li):after { line-height: normal; -webkit-hyphens: auto; hyphens: auto; } } dt { font-weight: var(--font-weight-bold); } blockquote { -webkit-hyphens: auto; hyphens: auto; margin-left: auto; margin-right: auto; max-width: var(--hx-width); } blockquote > :not(br, hr), blockquote > * + :not(br, hr) { margin-bottom: var(--sizem-3); } a:any-link { text-decoration: underline; text-decoration: underline solid currentColor; text-decoration-thickness: 1px; text-decoration: 1px solid underline; text-decoration-thickness: from-font; text-underline-offset: 0.2ex; text-decoration-skip-ink: auto; } a:any-link:hover { text-decoration: underline; text-decoration: underline solid currentColor; text-decoration-thickness: 1px; text-decoration: 1px solid underline; } a:any-link > u, a:any-link > i { font: inherit; display: inline-block; -webkit-text-decoration: none !important; text-decoration: none !important; } u, ins, abbr { text-underline-offset: 0.2ex; } :is(pre, xmp, code, kbd, tt, samp):not([class^=sf-dump-]) { font-family: var(--font-mono); font-size: var(--sizex-4); font-kerning: auto; } :is(pre, xmp) { padding: 0.5ch; } :is(code, kbd, tt, samp) { font-variant-ligatures: no-contextual; letter-spacing: -0.1ex; } address { font-style: normal; page-break-inside: avoid; break-inside: avoid; } /** * weil in Vue-Komponenten verhindert wird, etwas anderes umdefinieren. * Kombinieren mit `Text 1Text 2` * Alternativ zum Erhalt der Leerzeichen `VueApp.config.compilerOptions.whitespace = 'preserve';` */ bdo, .nobr { white-space: nowrap; } small { --not-small: 1.142857em; font-size: var(--font-size-0); font-kerning: auto; } .text-xs { font-size: var(--font-size-00); font-kerning: auto; } .text-sm { font-size: var(--font-size-0); font-kerning: auto; } .text-md { font-size: var(--font-size-1); font-kerning: auto; } .text-lg { font-size: var(--font-size-2); font-kerning: auto; } .text-xl { font-size: var(--font-size-3); font-kerning: auto; } .text-xxl { font-size: var(--font-size-4); font-kerning: auto; } .text-smaller { font-size: smaller; } .text-larger { font-size: larger; } p > small:only-child, p.text-sm { line-height: var(--font-lineheight-1); } .text-dim { color: var(--color-6); } .text-uppercase { text-transform: uppercase; letter-spacing: var(--font-letterspacing-2); } .text-accent { color: #237789; } .text-primary { color: #eb6a0a; } .text-secondary { color: #4d8524; } .text-compl { color: #655e53; } .text-bold { font-weight: var(--font-weight-bold); } .text-normal { font-weight: var(--font-weight-normal); } .text-mono { font-family: var(--font-mono); font-size: var(--font-size-mono); } .note { color: red; } .text-center { text-align: center; } .text-start, .text-left { text-align: left; } .text-end, .text-right { text-align: right; } .text-justify { text-align: justify; } .text-truncate { max-width: var(--text-len); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-hyphens { -webkit-hyphens: auto; hyphens: auto; } .align-middle { vertical-align: middle; align-self: center; } .align-top { vertical-align: top; align-self: start; } .align-bottom { vertical-align: bottom; align-self: end; } .align-text-top { vertical-align: text-top; align-self: self-start; } .align-text-bottom { vertical-align: text-bottom; align-self: self-end; } .align-baseline { vertical-align: baseline; align-self: baseline; } .line-clamp { max-width: calc(100% - 2ch); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .block-clamp { overflow: var(--scroll, hidden); display: -webkit-box !important; -webkit-line-clamp: var(--lines, 2); -webkit-box-orient: vertical; -moz-box-orient: vertical; } .box { padding: var(--gutter, var(--space-inside, 1rem)); background-color: var(--panel-background-color); box-shadow: 0 0 calc(2 * var(--shadow-spread)) var(--shadow-shade), 0 0 var(--shadow-spread) var(--shadow-shade); } .box:first-child { margin-bottom: var(--gutter); } /* layout.headings */ :is(h1,.h1, h2,.h2, h3,.h3) { font-weight: var(--font-weight-semibold); font-variant-ligatures: common-ligatures contextual; text-wrap: balance; --spacer: 0; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); margin-top: var(--spacer-start); margin-bottom: var(--spacer-end); } :is(h4,.h4, h5,.h5, h6,.h6) { font-weight: var(--font-weight-semibold); -webkit-hyphens: auto; hyphens: auto; --spacer: calc(var(--spacer-start, 0) + var(--spacer-end, 0)); --spacer-pull: calc(-1 * var(--spacer-start, 0) + var(--spacer-end, 0)); --spacer-start: var(--spacer); --spacer-end: 1rem; margin-top: var(--spacer-start); margin-bottom: var(--spacer-end); } header :is(h1,.h1, h2,.h2, h3,.h3) { --spacer: 0; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); margin-top: var(--spacer-start); margin-bottom: var(--spacer-end); } header :is(h4,.h4, h5,.h5, h6,.h6) { --spacer: 0; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); margin-top: var(--spacer-start); margin-bottom: var(--spacer-end); } main > header :where(:is(h1,.h1, h2,.h2, h3,.h3)) { padding-top: 0; padding-bottom: 0; line-height: 1; } h1, .h1 { font-family: var(--font-display); font-size: var(--font-size-fluid-3); } h2, .h2 { font-family: var(--font-title); font-size: var(--font-size-fluid-2); } h3, .h3 { font-size: var(--font-size-fluid-1); } h4, .h4 { font-size: var(--font-size-fluid-0); } h5, .h5, h6, .h6 { font-family: var(--font-body); font-size: var(--font-size-1); } article :where(h1, .h1) { max-width: var(--h1-width); } article :where(h2, .h2) { max-width: var(--h2-width); } article :where(h3, .h3) { max-width: var(--h3-width); } article :where(h4, .h4) { max-width: var(--h4-width); } article :where(h5, .h5, h6, .h6) { max-width: var(--hx-width); } caption, [class*=-title] { max-width: revert; padding-bottom: 1ex; } caption > :is(i, b, u, strong, em), [class*=-title] > :is(i, b, u, strong, em) { font-style: inherit; font-weight: inherit; -webkit-hyphens: auto; hyphens: auto; -webkit-box-decoration-break: clone; box-decoration-break: clone; } :is(h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5, h6,.h6) :is(i, b, u, strong, em),:is(h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5, h6,.h6) .important { font-style: inherit; font-weight: inherit; -webkit-hyphens: none; hyphens: none; } .page-title { color: var(--h2-color); } .main-title { color: var(--h2-color); } .section-title, .dialog-title { color: var(--h4-color); } .section-title:first-letter, .dialog-title:first-letter { text-transform: capitalize; } :-webkit-any(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6)[class*=-title] { font-weight: var(--font-weight-bold); line-height: 1.25; -webkit-hyphens: auto; hyphens: auto; max-width: revert; } :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6)[class*=-title] { font-weight: var(--font-weight-bold); line-height: 1.25; -webkit-hyphens: auto; hyphens: auto; max-width: revert; } /* content.embedded */ audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } iframe, embed, object { max-width: var(--max-content-width, 100%) !important; border-style: none; } figure, [role=figure], picture { margin: 0; padding: 0; } img, picture { border-style: none; width: 100%; height: auto; max-width: 100%; } img, svg, figure, [role=img], [role=figure] { page-break-inside: avoid; break-inside: avoid; } img:before { content: "Fehler beim Laden des Bildes"; } svg:not([fill]) { fill: var(--icon-fill, currentColor); } svg:not([stroke]) { stroke: var(--icon-stroke, currentColor); } svg:not(:root) { overflow: hidden; } svg[tabindex]:active, svg[tabindex]:focus, svg[tabindex]:focus-within { outline: none; } img, svg, video, canvas { object-position: var(--align-inline, center) var(--align-block, center); } img.-top, svg.-top, video.-top, canvas.-top { --align-block: top; } img.-middle, svg.-middle, video.-middle, canvas.-middle { --align-block: center; } img.-bottom, svg.-bottom, video.-bottom, canvas.-bottom { --align-block: bottom; } img.-left, svg.-left, video.-left, canvas.-left { --align-inline: left; } img.-right, svg.-right, video.-right, canvas.-right { --align-inline: right; } img.-center, .-ultrawide img.-top, .-ultrawide img.-bottom, svg.-center, .-ultrawide svg.-top, .-ultrawide svg.-bottom, video.-center, .-ultrawide video.-top, .-ultrawide video.-bottom, canvas.-center, .-ultrawide canvas.-top, .-ultrawide canvas.-bottom { --align-block: center; --align-inline: center; } [class|=grid] :is(img, svg, video, canvas).-top { align-self: start; } [class|=grid] :is(img, svg, video, canvas).-middle { align-self: center; } [class|=grid] :is(img, svg, video, canvas).-bottom { align-self: last baseline; } [class|=grid] :is(img, svg, video, canvas).-right { justify-self: end; } [class|=grid] :is(img, svg, video, canvas).-center { justify-self: center; } [class|=grid] :is(img, svg, video, canvas).-left { justify-self: start; } @media (prefers-contrast: more) { svg { --icon-stroke-width: 3px; } } .cover, .contain { overflow: hidden; overflow: clip; } .cover > img, .cover > svg { min-height: 100%; width: auto; object-fit: cover; } .contain > img, .contain > svg { min-width: 100%; height: auto; object-fit: contain; } .hero-image { overflow: hidden; background-position: var(--hero-pos, center); background-size: var(--hero-size, cover); background-image: var(--hero-image); padding-top: var(--spacing); } .hero-image[class|=grid] { --card-layout: "nw ne" "sw se"; --card-columns: [L] 1fr [C] 1fr [R]; --card-rows: [T] 1fr [M] 1fr [B]; display: grid; place-items: center; grid-template-areas: var(--card-layout, initial); grid-template-columns: var(--card-columns, auto); grid-template-rows: var(--card-rows, auto); } header.hero-image.-top { --align-block: top; } header.hero-image.-middle { --align-block: center; } header.hero-image.-bottom { --align-block: bottom; } header.hero-image.-left { --align-inline: left; } header.hero-image.-right { --align-inline: right; } header.hero-image.-center, .-ultrawide header.hero-image.-top, .-ultrawide header.hero-image.-bottom { --align-block: center; --align-inline: center; } [class|=grid] :is(header.hero-image).-top { align-self: start; } [class|=grid] :is(header.hero-image).-middle { align-self: center; } [class|=grid] :is(header.hero-image).-bottom { align-self: last baseline; } [class|=grid] :is(header.hero-image).-right { justify-self: end; } [class|=grid] :is(header.hero-image).-center { justify-self: center; } [class|=grid] :is(header.hero-image).-left { justify-self: start; } header.hero-image :is(img, svg, video, canvas) { position: absolute; object-fit: none; } .auto, .smooth { image-rendering: auto; } .crisp-edges { -webkit-optimize-contrast: crisp-edges; image-rendering: crisp-edges; } .auto { image-rendering: high-quality; } .smooth { image-rendering: smooth; } .pixelated { image-rendering: pixelated; } /** * Table */ table { border-color: inherit; border-collapse: collapse; border-spacing: 0; text-indent: 0; } thead, tbody, tfoot { position: relative; } th, td { padding: calc(var(--spacing) / 2) var(--spacing); background-color: var(--table-row-background-color); outline: var(--table-border-width) solid var(--table-border-color); color: var(--color); font-weight: var(--font-weight); font-size: var(--font-size); vertical-align: top; } th > *, td > * { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; } td, tbody th { text-align: left; } th, caption { font-weight: var(--font-weight-bold); } thead th { text-align: center; border-top: 0; background-color: var(--table-head-background-color); outline: var(--table-border-width) solid var(--table-border-color); } tfoot th, tfoot td { border-top: var(--table-border-width) solid var(--table-border-color); border-bottom: 0; } table[role=grid] tbody tr:nth-child(even) { background-color: var(--table-row-striped-background-color); } tbody tr:last-of-type > *, tfoot tr:last-of-type > * { border-bottom: none; } .num, .dec, .date { text-align: right; font-variant-numeric: slashed-zero tabular-nums lining-nums; } .table-data { width: auto; border-radius: var(--border-radius); isolation: isolate; } .table-data caption { z-index: 1; background-color: var(--surface-10); } .table-data thead, .table-data tfoot { z-index: 2; background-color: var(--surface-10); } .table-data tbody { z-index: 0; overflow: hidden; } .table-data th { vertical-align: middle; } @media (max-width: 49.999em) { .table-data th { -webkit-hyphens: auto; hyphens: auto; } } .table-data tbody td, .table-data tbody th { text-align: center; z-index: 0; padding: calc(var(--spacing) / 2); } .table-data > tbody th, .table-data > thead th:first-of-type { position: -webkit-sticky; position: sticky; z-index: 1; left: 0; } .table-data > tbody td { vertical-align: middle; } .table-data > tbody .img-text:hover { cursor: help; } @media (max-width: 49.999em) { .table-data { display: block; overflow-x: auto; } } @media (max-width: 23.249em) { .table-data .img-text { --text-len: min-content; --widget-areas: "img" "text"; grid-template-columns: 1fr; } } /** * Accessibility & User interaction */ /** * Loading ([aria-busy=true]) */ [aria-busy=true] { cursor: progress; } [aria-busy=true]:not(input, select, textarea)::before { content: ""; display: inline-block; width: var(--sizem-6); height: var(--sizem-6); border: var(--sizex-2) solid #2c90a8; filter: opacity(0.85); mix-blend-mode: luminosity; border-radius: var(--sizem-6); border-right-color: transparent; vertical-align: text-bottom; vertical-align: -0.125em; animation: spinner 1.35s linear infinite; } [aria-busy=true]:not(input, select, textarea):empty { text-align: center; } button[aria-busy=true], input[type=submit][aria-busy=true], input[type=button][aria-busy=true], input[type=reset][aria-busy=true], a[aria-busy=true] { pointer-events: none; touch-action: none; } @keyframes spinner { to { transform: rotate(360deg); } } .hidden, [hidden] { display: none !important; } .invisible[class] { transition: visibility 1s ease-in, opacity 1s ease-in; visibility: hidden; opacity: 0; } .sr-only { position: absolute; left: -100vw; max-width: 1px; max-height: 1px; padding: 0; overflow: hidden; border: 0; grid-column: 1/1; grid-row: 1/1; } .sr-only.focusable:active, .sr-only.focusable:focus, .sr-only.focusable:focus-within { position: absolute; left: -100vw; max-width: 1px; max-height: 1px; padding: 0; overflow: hidden; border: 0; } [id=skip-links]:focus-within { background-color: var(--surface-10); border: 2px solid var(--color-2); box-shadow: var(--shadow-4), var(--glow-4); top: 2ch; left: 2ch; padding: 1ex; font-size: var(--font-size-fluid-2); z-index: 27; } [id=skip-links]:focus-within * { display: block; } [id=skip-links]:focus-within *:focus, [id=skip-links]:focus-within *:hover { all: unset; color: #eb6a0a; } [id=skip-links]:focus-within [href="#user-tools"] { display: none; } @media (max-width: 39.999em) { [id=skip-links]:focus-within [href="#user-tools"] { display: block; } } [aria-controls] { cursor: pointer; } :disabled, [aria-disabled=true] { filter: saturate(0.2) grayscale(0.4); cursor: not-allowed; } [aria-hidden=false][hidden] { display: initial; } [aria-hidden=false][hidden]:not(:focus) { clip: rect(0, 0, 0, 0); position: absolute; } a[href], area, button, select, summary, input:where([type=radio], [type=checkbox], [type=range], [type=color], [type=color]), label[for], [data-interactive]:hover { cursor: var(--cursor, pointer); touch-action: manipulation; } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *:not([aria-busy=true]), *:not([aria-busy=true])::before, *:not([aria-busy=true])::after { background-attachment: initial !important; animation-duration: 0.1ms !important; animation-delay: -1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-delay: 0s !important; transition-duration: 0s !important; } } /* Forms */ /* forms.index */ /* forms.form */ form { --border-color: var(--form-element-border-color); --outline-focus: var(--outline-width, calc(var(--border-width) * 2)) solid var(--outline-color, var(--form-element-focus-color, #2c90a8)); --outline-focus-offset: 2px; --outline-shadow: 0 0 0 var(--outline-width) var(--form-element-active-background-color, var(--surface-9)), 0 0 0 calc(var(--outline-focus-offset) + var(--outline-width)) var(--outline-color); --form-element-spacing-block: var(--sizex-3); --form-element-spacing-inline: var(--sizex-2); --form-element-min-width: 20ch; --form-element-max-width: 32ch; --form-label-font-weight: var(--font-weight, 600); --icon-width: 1ch; --icon-size: 3ch; --icon-offset: 1ch; --icon-pos-start: var(--icon-offset) center; --icon-pos-end: center right var(--icon-offset); } button, input, optgroup, select, textarea { margin: 0; font-size: inherit; line-height: var(--line-height, 1.25); font-family: inherit; letter-spacing: inherit; } button::selection, input::selection, optgroup::selection, select::selection, textarea::selection { background-color: #237789; color: #fff; } optgroup { font-style: normal; padding: 0.4ex 0 0 0; margin: 0; } select[multiple] option { padding: var(--form-element-spacing-block) var(--form-element-spacing-inline); } input { overflow: visible; } select { text-transform: none; } legend { max-width: 100%; padding: 0; color: inherit; white-space: normal; margin-top: var(--spacing); margin-bottom: var(--spacing); } textarea { overflow: auto; } ::-moz-focus-inner { padding: 0; border-style: none; } :-moz-focusring { outline: none; } :-moz-ui-invalid { box-shadow: none; } input { background-position: var(--icon-pos-end); background-size: var(--icon-size) var(--icon-size); background-image: var(--input-icon); } input[type=email] { --icon-pos-start: unset; --icon-pos-end: right 1ch center; } fieldset { position: relative; border: 0; } legend { font-size: var(--font-size-3); color: #2c90a8; } label { display: inline-block; position: relative; } label > b { font-weight: var(--font-weight-strong); margin-bottom: calc(var(--spacing) * 0.5); } label > b:first-child { display: block; } label > b:first-child ~ *, label > b:first-child ~ * + * { display: block; } label > input:not([type=checkbox], [type=radio]), label > select { width: 100%; max-width: var(--form-element-max-width); } label > textarea { width: 100%; } input, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: var(--form-element-spacing-block) var(--form-element-spacing-inline); } input:where(:not([type=range], [type=color])), select, textarea { border-width: var(--border-width); border-style: solid; border-color: var(--border-color); border-radius: var(--border-radius); color: currentColor; background-color: var(--form-element-background-color); font-weight: inherit; transform: translateX(calc(var(--border-radius) * -0.2)); } input:where(:not([type=range], [type=color])) + .btn, select + .btn, textarea + .btn { transform: translateX(calc(var(--border-radius) * -0.2)); } @media (prefers-reduced-motion: no-preference) { input:where(:not([type=range], [type=color])), select, textarea { transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } } textarea { resize: vertical; border-bottom-right-radius: 0; padding-left: calc(var(--border-radius) / 2); line-height: normal; min-height: calc(3em + 2 * var(--form-element-spacing-inline) + var(--gutter, 0px)); } select { min-width: var(--form-element-min-width); } input:focus, select:focus, textarea:focus { background-color: var(--form-element-active-background-color); outline: var(--outline-focus); outline-offset: var(--outline-focus-offset); } @supports (overflow: overlay) and (not (text-decoration: green wavy underline)) { @media (-webkit-min-device-pixel-ratio: 1) { input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 var(--outline-width) var(--surface-9), 0 0 0 var(--outline-focus-offset) #2c90a8; } } } input[aria-invalid=false], select[aria-invalid=false], textarea[aria-invalid=false] { --icon-pos-end: center right calc(var(--icon-offset) / 2); --icon-aria: var(--icon-valid); --input-icon: var(--icon-valid) !important; outline-color: var(--form-element-valid-border-color); } input:invalid, input[aria-invalid=true], select:invalid, select[aria-invalid=true], textarea:invalid, textarea[aria-invalid=true] { --icon-pos-end: center right calc(var(--icon-offset) / 2); --icon-aria: var(--icon-invalid); --input-icon: var(--icon-invalid) !important; /* background-position: var(--icon-pos-end); */ outline-color: var(--form-element-invalid-border-color); } input:not([type=checkbox], [type=radio], [type=number]):invalid, input:not([type=checkbox], [type=radio], [type=number])[aria-invalid] { padding-right: calc(var(--form-element-spacing-inline) + var(--icon-size) + var(--icon-offset)); background-image: var(--icon-aria, var(--input-icon, none)); } input[type=number] { padding-left: 1ch; padding-right: var(--border-width); border-top-right-radius: var(--border-width); border-bottom-right-radius: var(--border-width); } input[type=number][aria-invalid] { --icon-pos-end: calc(100% - var(--icon-size)); } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--form-element-placeholder-color); filter: opacity(0.85); } input::placeholder, textarea::placeholder, select:invalid { color: var(--form-element-placeholder-color); filter: opacity(0.85); } select { cursor: pointer; } @media (hover) and (pointer: fine) { select[multiple], select[size] { padding-bottom: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } } select:not([multiple]):not([size]) { --icon-size: .8em; padding-right: calc(1ch + var(--icon-width) + var(--icon-offset)); padding-left: var(--form-element-spacing-inline); background-image: var(--icon-chevron); background-position: var(--icon-pos-end); background-size: var(--icon-size) var(--icon-size); } input + small, select + small, textarea + small { display: inline; width: 100%; margin-top: calc(var(--spacing) * -0.75); margin-bottom: var(--spacing); color: var(--form-element-color); } fieldset.personal { grid-area: personal; } fieldset.contact { grid-area: contact; } fieldset.message { grid-area: message; } fieldset.additional { grid-area: additional; } fieldset.excludes { grid-area: excludes; } fieldset.profession { grid-area: profession; } fieldset.legals { grid-area: legals; } footer { grid-area: foot; } /* forms.buttons */ .btn,:is([type="button"],[type="submit"],[type="reset"]) { --border-radius: .8em; --border-width: 2px; --button-spacing-block: var(--sizex-3); --button-spacing-inline: var(--size-3); min-width: max-content; } .btn:where(.-primary),:is([type="button"],[type="submit"],[type="reset"]):where(.-primary) { --btn-shade: #46270f; --btn-base: #eb6a0a; --btn-border: #eb6a0a; --btn-hover: #ff8f3b; --btn-text: var(--color-10); --btn-text-hover: var(--color-10); } .btn:where(.-secondary),:is([type="button"],[type="submit"],[type="reset"]):where(.-secondary) { --btn-shade: #243818; --btn-base: #62b332; --btn-hover: #c7eab2; --btn-text: var(--color-10); --btn-text-hover: var(--btn-shade); } .btn:where(.-accent),:is([type="button"],[type="submit"],[type="reset"]):where(.-accent) { --btn-shade: #162e34; --btn-base: #2c90a8; --btn-hover: #acdee9; --btn-text: var(--color-10); --btn-text-hover: var(--btn-shade); } .btn:where(.-compl),:is([type="button"],[type="submit"],[type="reset"]):where(.-compl) { --btn-shade: #23211d; --btn-base: #655e53; --btn-hover: var(--brand-compl-600); --btn-text: var(--color-10); --btn-text-hover: var(--btn-shade); } .btn:disabled, .btn[aria-disabled=true], :any-link:disabled, :any-link[aria-disabled=true], button:disabled, button[aria-disabled=true], input:disabled, input[aria-disabled=true], select:disabled, select[aria-disabled=true], textarea:disabled, textarea[aria-disabled=true] { pointer-events: none; touch-action: none; } .btn, a:any-link.btn, :is(form button,:is([type="button"],[type="submit"],[type="reset"])) { display: inline-flex; justify-content: center; align-items: center; gap: var(--gutter, var(--gap, 1rem)); height: auto; padding: var(--button-spacing-block, var(--sizex-3)) var(--button-spacing-inline, var(--size-3)); font-size: 1em; font-weight: var(--font-weight-strong); line-height: normal; -webkit-user-select: none; user-select: none; color: var(--btn-text); background-color: var(--btn-base); border-width: var(--border-width); border-style: solid; border-color: var(--btn-border, var(--btn-base)); border-radius: var(--border-radius); } @media (max-width: 49.999em) { .btn, a:any-link.btn, :is(form button,:is([type="button"],[type="submit"],[type="reset"])) { --button-spacing-block: calc(1.4 * var(--form-element-spacing-block, var(--sizex-3))); --button-spacing-inline: calc(1.4 * var(--form-element-spacing-inline, var(--size-3))); } } .btn:focus, a:any-link.btn:focus, :is(form button,:is([type="button"],[type="submit"],[type="reset"])):focus { outline: 1px solid #2c90a8; outline-offset: 2px; box-shadow: inset 0 0 0.8em 0 var(--btn-border); color: var(--btn-text-hover, inherit); background-color: var(--btn-hover, inherit); } .btn:focus:not(:focus-visible), a:any-link.btn:focus:not(:focus-visible), :is(form button,:is([type="button"],[type="submit"],[type="reset"])):focus:not(:focus-visible) { outline: none; } .btn:hover, a:any-link.btn:hover, :is(form button,:is([type="button"],[type="submit"],[type="reset"])):hover { color: var(--btn-text-hover, inherit); background-color: var(--btn-hover, inherit); } a:any-link.btn[class] { --gutter: .5ex; text-decoration-line: none; } a:any-link.btn[class]::before { content: "➝"; order: 0; margin-left: -0.625ch; } .btn { --_radii: 0 var(--border-radius) var(--border-radius) 0; } .btn[data-dir=rtl] { --_radii: var(--border-radius) 0 0 var(--border-radius); } .btn.-half { --border-width: 1px; border-radius: var(--_radii) !important; /*white-space: pre;*/ min-width: unset; } .btn.-big { padding: 2ex 3em; } .btn:not(.-primary) { --btn-border: var(--btn-base); } .btn.-ghost { --btn-base: var(--surface-10); --btn-border: var(--btn-text); } .btn.-ghost:where(.-primary) { --btn-text: #eb6a0a; } .btn.-ghost:where(.-secondary) { --btn-text: #62b332; } .btn.-ghost:where(.-accent) { --btn-text: #2c90a8; } .btn.-ghost:where(.-compl) { --btn-text: #655e53; } .close, [type=button].close, .vts-alert__dismiss, .maplibregl-popup-close-button { --icon-size: 2em; --border-color: var(--surface-8); --border-radius: 100%; position: absolute; z-index: 2; top: var(--close-btn-y, var(--btn-offset, 0.5ex)); right: var(--close-btn-x, var(--btn-offset, 0.5ex)); width: var(--icon-size); height: var(--icon-size); aspect-ratio: 1; min-width: unset; padding: max(1ex, 0.75rem); background-image: var(--icon-close); background-position: center; background-size: auto calc(var(--icon-size) / 2); background-color: var(--surface-10); color: transparent; border-width: var(--border-width); border-style: solid; border-color: var(--border-color); } .close:hover, .close:focus, [type=button].close:hover, [type=button].close:focus, .vts-alert__dismiss:hover, .vts-alert__dismiss:focus, .maplibregl-popup-close-button:hover, .maplibregl-popup-close-button:focus { background-color: var(--border-color); } .close.-sticky, [type=button].close.-sticky, .vts-alert__dismiss.-sticky, .maplibregl-popup-close-button.-sticky { position: sticky; top: 0; translate: var(--spacing) var(--spacing-neg); transform-origin: top right; } .btn:is([type="button"],[type="submit"],[type="reset"])::selection { color: inherit; font-weight: inherit; background-color: inherit; } /* Cards Hover Tweak */ .m_card:not(.-plain):hover .btn { --btn-shade: #46270f; --btn-base: #eb6a0a; --btn-border: #eb6a0a; --btn-hover: #ff8f3b; --btn-text: var(--color-10); --btn-text-hover: var(--color-10); } /* für nicht .btn */ button:hover { background-color: inherit; } .link-like { --form-element-min-width: max-content; -webkit-appearance: none; appearance: none; display: inline-block; padding: 0; font-size: inherit; white-space: nowrap; color: #eb6a0a; background-color: transparent; border: 0; border-radius: unset; cursor: pointer; } .link-like:focus-visible { -webkit-text-decoration: underline; text-decoration: underline; color: #eb6a0a; outline: 1px solid #2c90a8; } .link-like:active, .link-like:hover { -webkit-text-decoration: underline; text-decoration: underline; background-color: unset; color: #eb6a0a; } .link-like:disabled, .link-like[aria-disabled=true] { pointer-events: none; touch-action: none; } /* forms.checkbox-radio */ [type=checkbox], [type=radio] { --outline-focus-offset: 1px; width: var(--sizem-4); height: var(--sizem-4); margin-top: -0.125em; margin-right: var(--size-2); margin-left: 0; padding: initial; font-size: inherit; vertical-align: middle; cursor: pointer; background-position: center; background-size: 0.75em auto; transform: translateX(0); } [type=checkbox]:checked, [type=radio]:checked { background-image: var(--icon-checkbox); } [type=checkbox]:focus, [type=radio]:focus { outline: var(--outline-focus); outline-offset: var(--outline-focus-offset); } [type=checkbox]:focus:checked, [type=radio]:focus:checked { outline-offset: 1px; } [type=checkbox] ~ label, [type=radio] ~ label { display: inline-block; margin-right: 0.375em; margin-bottom: 0; cursor: pointer; } [type=checkbox] { border-radius: 0.25ex; border: var(--border-width) solid var(--color-7); } [type=checkbox]:indeterminate { background-color: var(--surface-7); background-image: var(--icon-minus); } input[type=checkbox]:checked { background-color: #2c90a8; } [type=radio] { border-radius: 50%; } [type=radio]:focus:not(:focus-visible) { --type: radio; outline: none; } [type=radio]:checked { background-image: var(--icon-checkbox); background-color: #2c90a8; } .form-checkbox { -webkit-hyphens: auto; hyphens: auto; display: inline-grid; grid-template-columns: auto 1fr; grid-template-areas: "box txt"; align-items: start; } .form-checkbox input { grid-area: box; } .form-checkbox span { grid-area: txt; } .form-checkbox .note { grid-column-start: 2; padding-bottom: 1ex; } .tipp-checkbox { font-size: smaller; } .tipp-checkbox > b { font-weight: var(--font-weight-strong); color: #fff; background-color: #62b332; border-radius: 1em; } /* forms.alt-input */ ::-webkit-inner-spin-button, ::-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; } [type=file], [type=range] { padding: 0; border-width: 0; } [type=color] { width: 2em; max-width: 2em !important; height: 2em; max-height: 2em !important; padding: 0.35ex !important; border-radius: 1ex !important; } [type=color]::-webkit-color-swatch-wrapper { padding: 0; } [type=color]::-moz-focus-inner { padding: 0; } [type=color]::-webkit-color-swatch { border: none; border-radius: calc(var(--border-radius) * 0.5); } [type=color]::-moz-color-swatch { border: none; border-radius: calc(var(--border-radius) * 0.5); } form[id] input[type][type=date], form[id] input[type][type=datetime-local], form[id] input[type][type=month], form[id] input[type][type=time], form[id] input[type][type=week], form[class] input[type][type=date], form[class] input[type][type=datetime-local], form[class] input[type][type=month], form[class] input[type][type=time], form[class] input[type][type=week] { --input-icon: var(--icon-calendar); padding-right: calc(1ch + var(--icon-width) + var(--icon-offset)); background-position: var(--icon-pos-end); } form[id] input[type][type=time], form[class] input[type][type=time] { --input-icon: var(--icon-time); } @supports (-moz-appearance: inherit) { :is(form[id], form[class]) input[type][type=date], :is(form[id], form[class]) input[type][type=datetime-local] { --input-icon: none; padding-right: 0.4ch; } :is(form[id], form[class]) input[type][type=date][aria-invalid], :is(form[id], form[class]) input[type][type=datetime-local][aria-invalid] { --icon-pos-end: center right calc(.4ch + var(--icon-size)); } } [type=date]::-webkit-calendar-picker-indicator, [type=datetime-local]::-webkit-calendar-picker-indicator, [type=month]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator, [type=week]::-webkit-calendar-picker-indicator { width: var(--icon-width); margin-right: calc(-1 * var(--icon-width)); margin-left: var(--icon-offset); filter: opacity(0); } [type=file] { --_padding-block: calc(var(--form-element-spacing-block) - var(--border-width)); --border-color: #eb6a0a; border: none; border-radius: 0; background-color: none; cursor: pointer; padding: 4px 0 4px 4px; } [type=file]:focus, [type=file]:hover { border: none; outline: none; box-shadow: none; } [type=file]::-webkit-file-upload-button { margin-left: 0; margin-right: calc(var(--form-element-spacing-inline) / 2); padding: var(--_padding-block) var(--form-element-spacing-inline); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius); background-color: var(--background-color); color: #eb6a0a; font-size: 0.96em; text-align: center; transform: translateX(calc(var(--border-radius) * -0.2)); } [type=file]::-webkit-file-upload-button + .btn { transform: translateX(calc(var(--border-radius) * -0.2)); } [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus { outline: #62b332; outline-offset: 1px; } [type=file]::-webkit-file-upload-button:active:not(:focus-visible), [type=file]::-webkit-file-upload-button:focus:not(:focus-visible) { outline: none; } [type=file]::-webkit-file-upload-button:hover { color: var(--color-9); border-color: var(--border-color); background-color: #ff8f3b; } [type=file]::file-selector-button { margin-left: 0; margin-right: calc(var(--form-element-spacing-inline) / 2); padding: var(--_padding-block) var(--form-element-spacing-inline); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius); background-color: var(--background-color); color: #eb6a0a; font-size: 0.96em; text-align: center; transform: translateX(calc(var(--border-radius) * -0.2)); } [type=file]::file-selector-button + .btn { transform: translateX(calc(var(--border-radius) * -0.2)); } [type=file]::file-selector-button:active, [type=file]::file-selector-button:focus { outline: #62b332; outline-offset: 1px; } [type=file]::file-selector-button:active:not(:focus-visible), [type=file]::file-selector-button:focus:not(:focus-visible) { outline: none; } [type=file]::file-selector-button:hover { color: var(--color-9); border-color: var(--border-color); background-color: #ff8f3b; } [type=range] { max-width: var(--range-max-width, var(--form-element-max-width)); height: 1.25em; background-color: transparent; accent-color: var(--range-thumb-hover-color); } [type=range]::-webkit-slider-runnable-track { width: 100%; height: 1em; border-radius: var(--border-radius); background-color: #acdee9; } @media (prefers-reduced-motion: no-preference) { [type=range]::-webkit-slider-runnable-track { transition: background-color var(--transition); } } [type=range]::-moz-range-track { width: 100%; height: 1em; border-radius: var(--border-radius); background-color: #acdee9; } @media (prefers-reduced-motion: no-preference) { [type=range]::-moz-range-track { transition: background-color var(--transition); } } [type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.25em; height: 1.25em; margin-top: -0.125em; border: 2px solid #2c90a8; border-radius: 50%; background-color: #2c90a8; cursor: pointer; } @media (prefers-reduced-motion: no-preference) { [type=range]::-webkit-slider-thumb { transition: background-color var(--transition), transform var(--transition); } } [type=range]::-moz-range-thumb { -webkit-appearance: none; width: 1.25em; height: 1.25em; margin-top: -0.125em; border: 2px solid #2c90a8; border-radius: 50%; background-color: #2c90a8; cursor: pointer; } @media (prefers-reduced-motion: no-preference) { [type=range]::-moz-range-thumb { transition: background-color var(--transition), transform var(--transition); } } [type=range]:hover, [type=range]:focus { --range-border-color: var(--range-active-border-color); } [type=range]:focus-visible { outline-color: currentColor; border-radius: var(--border-radius); } [type=range]:active { accent-color: var(--range-thumb-active-color); } [type=range]:active::-webkit-slider-thumb { transform: scale(1.25); } [type=range]:active::-moz-range-thumb { transform: scale(1.25); } input:placeholder-shown { padding-left: calc(var(--form-element-spacing-inline) + 1ch); } input[type=search] { border-radius: var(--border-radius); background-position: var(--icon-pos-start); padding-left: calc(var(--form-element-spacing-inline) + 1ch); } [type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } [type=email]:placeholder-shown { --input-icon: url("data:image/svg+xml;utf8, "); --icon-width: 3ch; } [type=email].icon-subscribe { background-size: calc(var(--icon-size) + 1em) var(--icon-size); } /* forms.switches */ [type=checkbox][role=switch] { --switch-height: var(--sizem-6); --switch-ratio: 2; --_pad: calc(var(--switch-height) / 9.4); --_height: calc(var(--switch-height) + var(--_pad)); --_dot: calc(var(--_height) - 2 * var(--_pad) - var(--border-width, 0)); --_tf: 100ms ease-in-out; width: calc(var(--switch-ratio) * var(--_height) + var(--_pad)); height: var(--_height); margin-left: var(--size-2); margin-right: var(--size-2); flex-shrink: 0; padding: var(--_pad); line-height: var(--_height); border-radius: var(--_height); border-color: var(--switch-color); color: var(--switch-color); filter: saturate(0.2) grayscale(0.4); } [type=checkbox][role=switch]:focus:not(:focus-visible) { outline: none; } [type=checkbox][role=switch]::before { content: ""; display: block; width: calc(var(--_dot)); height: 100%; border-radius: 50%; border: 1px solid currentColor; background-color: currentColor; transition: margin-left var(--_tf), background-color var(--_tf), border-color; } [type=checkbox][role=switch]:indeterminate { background-color: var(--surface-9); } [type=checkbox][role=switch]:indeterminate::before { border: 1px solid var(--switch-color); background-color: var(--surface-8); margin-left: calc(50% - var(--_dot) / 2); } [type=checkbox][role=switch]:checked { background-color: var(--surface-9); filter: unset; border-color: var(--switch-checked-color); } [type=checkbox][role=switch]:checked::before { margin-left: calc(100% - var(--_dot)); color: var(--switch-checked-color); } [type=checkbox][role=switch]:disabled::before { filter: inherit; } /* forms.compounds */ .side-button { display: inline-flex; gap: 0; flex-direction: row; padding: 0; border-radius: var(--border-radius); } .side-button > input, .side-button > button { transform: none; } .side-button > wia-autocomplete { width: 100%; } .side-button > input { flex-basis: 100%; order: 0; border-radius: var(--border-radius) 0 0 var(--border-radius); border-left-width: var(--border-width); border-right-width: 0; } .side-button .-half { order: 1; --border-radius: 1em; transform: translateX(0); outline: none; } .side-button[data-dir=rtl] input { order: 1; border-radius: 0 var(--border-radius) var(--border-radius) 0; border-left-width: 0; border-right-width: var(--border-width); } .side-button[data-dir=rtl] .-half { order: 0; border-radius: var(--border-radius) 0 0 var(--border-radius); } .side-button .loader[data-loading] { position: absolute; } .side-button button:has([data-loading]) span { visibility: hidden; } .side-button:focus-within { outline: var(--outline-focus); outline-offset: var(--outline-focus-offset); } .side-button:focus-within > input[type]:focus { outline: none; box-shadow: none; } .side-button:focus-within > button:focus { outline: var(--outline-focus); outline-offset: 0; } .copy-select { -webkit-user-select: all; user-select: all; } .copy-select:focus { animation: copy-select 100ms step-end forwards; } @keyframes copy-select { to { -webkit-user-select: text; user-select: text; } } .c_searchbox { --form-element-spacing-inline: var(--sizex-3); --icon-size: 1.5em; --icon-width: 1em; --icon-pos-start: left; --icon-pos-end: left; } /* Widgets + Composits */ /* * theme-wia | Wohnen im Alter Farbschema und Typografie */ /* content.misc */ @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } .badge { color: var(--badge-text); background-color: var(--badge-surface); padding: var(--sizex-2) var(--sizem-3); font-size: var(--font-size-00); border-radius: var(--border-radius); vertical-align: text-bottom; } .badge:where(.-primary) { background-color: #bf5106; color: #fff; } .badge:where(.-primary).-ghost { background-color: #f3b66a; color: #260b01; } .badge:where(.-primary).-demon { background-color: #5e1b01; } .badge:where(.-primary).-kontur { --border-width: 2px; color: #bf5106; --font-weight: var(--font-weight-strong); background-color: unset; margin-right: var(--border-width); outline: var(--border-width) solid #ee8b35; outline-offset: -1px; } .badge:where(.-secondary) { background-color: #4d8524; color: #fff; } .badge:where(.-secondary).-ghost { background-color: #98d185; color: #0e1204; } .badge:where(.-secondary).-demon { background-color: #1c270a; } .badge:where(.-secondary).-kontur { --border-width: 2px; color: #4d8524; --font-weight: var(--font-weight-strong); background-color: unset; margin-right: var(--border-width); outline: var(--border-width) solid #81c35f; outline-offset: -1px; } .badge:where(.-accent) { background-color: #237789; color: #fff; } .badge:where(.-accent).-ghost { background-color: #85b6cd; color: #08171a; } .badge:where(.-accent).-demon { background-color: #0e3637; } .badge:where(.-accent).-kontur { --border-width: 2px; color: #237789; --font-weight: var(--font-weight-strong); background-color: unset; margin-right: var(--border-width); outline: var(--border-width) solid #5ea7bc; outline-offset: -1px; } .badge:where(.-compl) { background-color: #655e53; color: #ebebeb; } .badge:where(.-compl).-ghost { background-color: #d9d6d0; color: #141312; } .badge:where(.-compl).-demon { background-color: #23211d; } .badge:where(.-compl).-kontur { --border-width: 2px; color: #655e53; --font-weight: var(--font-weight-strong); background-color: unset; margin-right: var(--border-width); outline: var(--border-width) solid #ccc7c0; outline-offset: -1px; } .badge.-compl .text-secondary { color: #3c601a; } /* Back To Top Button */ .back-to-top-wrapper { background-color: transparent; position: fixed !important; font-size: 2rem; bottom: var(--spacing); right: var(--spacing); z-index: 99; transition: visibility 350ms ease-in, opacity 350ms ease-in; } .back-to-top { display: block; padding: 1em; cursor: pointer; touch-action: manipulation; opacity: 0.7; background-color: #acdee9; background-image: var(--icon-chevron); background-position: center; border: 0; border-radius: 1em; transform: rotate(180deg); } .back-to-top:hover { background-color: #2c90a8; } .back-to-top:focus, .back-to-top:active { --outline-focus: var(--outline-width, calc(var(--border-width) * 2)) solid var(--outline-color, var(--form-element-focus-color, #2c90a8)); --outline-focus-offset: 2px; --outline-shadow: 0 0 0 var(--outline-width) var(--form-element-active-background-color, var(--surface-9)), 0 0 0 calc(var(--outline-focus-offset) + var(--outline-width)) var(--outline-color); outline: var(--outline-focus, var(--outline-width, var(--border-width)) solid var(--outline-color, currentColor)); outline-offset: var(--outline-focus-offset); } .back-to-top:focus:focus:not(:focus-visible), .back-to-top:active:focus:not(:focus-visible) { outline: none; } @supports (-apple-pay-button-style: inherit) { @supports (image-orientation: none) and (scale: 2) { .back-to-top:focus, .back-to-top:active { outline: none; box-shadow: var(--outline-shadow); } } } .back-to { --symbol-size: 1.8em; } .clip { overflow: hidden; overflow: clip; } .inverted { --_bg: hsl(var(--title-hue, 37), 15%, 90%, var(--title-opac, 85%)); max-width: fit-content; background-color: var(--title-bg, var(--_bg, transparent)); background-image: none; box-shadow: var(--shadow-2); line-height: var(--sizem-6); } .inverted:only-child { padding-top: var(--sizex-1); padding-bottom: var(--sizex-1); padding-left: var(--sizex-3); padding-right: var(--sizex-3); } @supports (-moz-appearance: inherit) { html.css-backdrop .inverted { -webkit-backdrop-filter: blur(6ex); backdrop-filter: blur(6ex); } } @supports (box-decoration-break: clone) or (-webkit-box-decoration-break: clone) { .inverted:has(.inverted) { background-color: transparent; } :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, p).inverted > :is(a, span, b), :where(a, span, b, p).inverted { -webkit-box-decoration-break: clone; box-decoration-break: clone; letter-spacing: -0.032ch; display: inline !important; max-width: unset; padding: calc(0.25 * var(--spacer)) calc(1.25 * var(--space-inside)); } } mark, :is(h1,.h1, h2,.h2, h3,.h3, h4,.h4)[id]:target:first-line { border-radius: 0.1rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; margin-left: -0.2em; margin-right: -0.2em; padding-left: 0.2em; padding-right: 0.2em; } mark { background-size: 100% 100%; background: transparent var(--marker-background) no-repeat left; } @media (prefers-reduced-motion:no-preference) { :is(h1,.h1, h2,.h2, h3,.h3, h4,.h4)[id]:target { background: transparent var(--marker-background) no-repeat left; background-size: 100%; animation: 0s 2s ease-in 1 forwards fade-target; } } @media (prefers-reduced-motion:reduce) { :is(h1,.h1, h2,.h2, h3,.h3, h4,.h4)[id]:target { margin-left: -.5rem; padding-left: .25rem; border-left: .25rem solid hsl(var(--mark-background-hue), 90%, 50%); animation: 3s 2s ease-in 1 forwards fade-target; background: unset; } } @keyframes fade-target { to { background-size: 0 50%; background-position: -65%; border-color: transparent; } } :is(main, section, article) [data-usefx] { --_tfx: scale 650ms ease-out, opacity 650ms ease-out, filter 650ms ease-out; position: var(--parent-relative, relative); } :is(main, section, article) [data-usefx]::after { transition-property: opacity, scale, transform; transition-timing-function: ease-out; transition-duration: 250ms; } :is(main, section, article) [data-usefx~=scale-in] { scale: 0.995; } :is(main, section, article) [data-usefx~=scale-in]:where(:hover, :focus-within) { scale: 1; transition: var(--_tfx); } :is(main, section, article) [data-usefx~=ken-burns] :where(img, svg) { scale: 1; filter: saturate(75%); transition: scale 660ms ease-in-out; } :is(main, section, article) [data-usefx~=ken-burns]:hover :where(img, svg) { scale: 1.05; filter: saturate(1); transition: scale 2700ms 650ms ease-out; } :is(main, section, article) [data-usefx~=hover-shadow]::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; cursor: pointer; opacity: 0; box-shadow: var(--shadow-3); } :is(main, section, article) [data-usefx~=hover-shadow]:hover::after { opacity: 1; } /* widgets.feature */ .img-text { --btn-base: unset; --border-width: 0; --widget-cells: auto var(--text-len, max-content); --widget-areas: "img text"; display: inline-grid; gap: var(--widget-gap, var(--gap, 1ch)); align-items: center; vertical-align: middle; grid-template-columns: var(--widget-cells, auto); grid-template-areas: var(--widget-areas, none); } .img-text[data-dir=rtl] { --widget-areas: "text img"; } .img-text > :is(img, svg) { width: var(--symbol-size, 1em); height: var(--symbol-size, 1em); grid-area: img; transform-origin: center; place-self: center; } .img-text[class*=icon-] > :not(img, svg):not(span:last-child), .img-text > span:first-child, .img-text > b:first-child { grid-area: text; justify-self: var(--text-align, left); line-height: var(--symbol-size, 3ex); } .img-text[type]:focus, .img-text[type]:focus-visible { outline: none; } .img-text [role=tooltip] { position: absolute; } @media (max-width: 63.999em) { .img-text:not(.-nowrap) { --gap: 0; --widget-cells: auto; --widget-areas: "img" "text"; } .img-text:not(.-nowrap)[data-dir=rtl] { --widget-areas: "text" "img"; } .img-text:not(.-nowrap)[class*=icon-] > :not(img, svg):not(span:last-child) { text-align: center; line-height: normal; } } @media (forced-colors: active) { .img-text:not(.-nowrap) { --gap: 0; --symbol-size: 0; --widget-cells: auto; --widget-areas: "text"; } .img-text:not(.-nowrap)[data-dir] { --widget-areas: "text"; } .img-text:not(.-nowrap) > :is(img, svg) { display: none; } } /* widgets.favorite */ @keyframes pulse-out { 50% { transform: scale(1.1, 1.1); } } @keyframes pulse { 50% { transform: scale(0.9, 0.9); } } .favour { --icon-stroke-width: 3px; display: inline-flex; color: #eb6a0a; fill: var(--surface-10); } .favour svg { transition: color var(--transition), stroke var(--transition); } .favour svg:hover { cursor: pointer; --icon-fill: #ff8f3b; } .favour svg[tabindex]:active, .favour svg[tabindex]:focus, .favour svg[tabindex]:focus-within { outline: none; } .favour svg[data-faved="1"] { --icon-fill: #eb6a0a; stroke-width: 5px; stroke-opacity: 1; stroke-linecap: round; stroke-linejoin: bevel; animation: 500ms cubic-bezier(0, 0, 0.3, 1) 200ms pulse-out 2; } .img-text:has([data-overlay=on]) > svg[data-faved] { --icon-stroke-width: 3px; --icon-fill: transparent; color: #eb6a0a; } .c_user-tools .heart-overlay { grid-area: img; place-self: end; display: inline-grid; place-content: center; font-size: var(--size-2); line-height: 1; width: 2em; height: 2em; background: #eb6a0a; color: #fff !important; border-radius: 100%; } .c_user-tools b.icon-caption { contain: layout paint; transition: opacity var(--transition), scale 60ms var(--transition); } .c_user-tools b.icon-caption[data-overlay=off] { opacity: 0; scale: 0.1; } .c_user-tools b.icon-caption[data-overlay=on] { opacity: 1; scale: 1; animation: 1s ease-in-out 1s alternate pulse; } /* src/styles/components/dialogs.cookieconsent */ #cookie-consent2 { max-width: 100%; margin: auto auto 0; border-radius: unset; padding-left: var(--size-3); padding-right: var(--size-3); padding-top: var(--size-3); padding-bottom: var(--size-3); } #cookie-consent2 .modal:focus-visible { outline: none; } #cookie-consent2 .checkbox p { padding-left: calc(25px + var(--size-2)); } #cookie-consent2 img { display: block; width: auto; margin: 0 auto; } #cookie-consent2 .inner-page1 { display: flex; align-items: center; margin: 0 auto; gap: var(--spacing); } @media (min-width: 90em) { #cookie-consent2 .inner-page1 { max-width: 75vw; } } @media (min-width: 116em) { #cookie-consent2 .inner-page1 { max-width: 50vw; } } @media (max-width: 63.999em) { #cookie-consent2 .inner-page1 { flex-direction: column; } #cookie-consent2 .inner-page1 img { display: none; } } #cookie-consent2 .page1 p { text-align: justify; } #cookie-consent2 p { font-size: 0.875em; color: var(--color); -webkit-hyphens: auto; hyphens: auto; margin-bottom: unset; } #cookie-consent2 .page1 .inner-page1, #cookie-consent2 .page1 .consent { gap: var(--spacing); } @media (max-width: 35.999em) { #cookie-consent2 .page1 .inner-page1, #cookie-consent2 .page1 .consent { gap: calc(var(--spacing) * 3); } } #cookie-consent2 .page1 .consent { display: grid; justify-content: center; } #cookie-consent2 .page1 .consent .btn { display: block; } #cookie-consent2 .page1 .consent .consent-buttons { display: grid; gap: var(--spacing); } @media (max-width: 63.999em) { #cookie-consent2 .page1 .consent .consent-buttons { display: inline-flex; flex-direction: row-reverse; } } #cookie-consent2 .page1 .consent .legals { display: inline-flex; gap: var(--size-1); justify-content: center; } #cookie-consent2 .consent { position: sticky; bottom: 0; background-color: var(--surface-10); } @media (max-width: 63.999em) { #cookie-consent2 .consent { width: 100%; } } @media (max-width: 35.999em) { #cookie-consent2 { margin-left: var(--size-2); margin-right: var(--size-2); } } /* Core Components */ /* utilities.spaces */ .ws-xs { --spacer: 0.25rem !important; } .ws-sm { --spacer: 0.625rem !important; } .ws-md { --spacer: 1rem !important; } .ws-lg { --spacer: 1.5rem !important; } .ws-xl { --spacer: 2rem !important; } .pt-xs { padding-top: 0.25rem; } .pt-sm { padding-top: 0.625rem; } .pt-md { padding-top: 1rem; } .pt-lg { padding-top: 1.5rem; } .pt-xl { padding-top: 2rem; } .pb-xs { padding-bottom: 0.25rem; } .pb-sm { padding-bottom: 0.625rem; } .pb-md { padding-bottom: 1rem; } .pb-lg { padding-bottom: 1.5rem; } .pb-xl { padding-bottom: 2rem; } .pl-xs { padding-left: 0.25rem; } .pl-sm { padding-left: 0.625rem; } .pl-md { padding-left: 1rem; } .pl-lg { padding-left: 1.5rem; } .pl-xl { padding-left: 2rem; } .pr-xs { padding-right: 0.25rem; } .pr-sm { padding-right: 0.625rem; } .pr-md { padding-right: 1rem; } .pr-lg { padding-right: 1.5rem; } .pr-xl { padding-right: 2rem; } .p-xs-i { --space-inside: 0.25rem; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-sm-i { --space-inside: 0.625rem; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-md-i { --space-inside: 1rem; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-lg-i { --space-inside: 1.5rem; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-xl-i { --space-inside: 2rem; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-i { padding-left: var(--spacer); padding-right: var(--spacer); } .p-xs-b { --spacer: 0.25rem; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); } .p-sm-b { --spacer: 0.625rem; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); } .p-md-b { --spacer: 1rem; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); } .p-lg-b { --spacer: 1.5rem; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); } .p-xl-b { --spacer: 2rem; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); } .p-b { padding-top: var(--spacer); padding-bottom: var(--spacer); } .p-xs { --spacer: 0.25rem; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); --space-inside: 0.25rem; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-sm { --spacer: 0.625rem; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); --space-inside: 0.625rem; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-md { --spacer: 1rem; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); --space-inside: 1rem; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-lg { --spacer: 1.5rem; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); --space-inside: 1.5rem; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-xl { --spacer: 2rem; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); --space-inside: 2rem; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-rem { --spacer: 1rem; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); --space-inside: 1rem; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-em { --spacer: 1em; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); --space-inside: 1em; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-ex { --spacer: 1ex; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); --space-inside: 1ex; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-ch { --spacer: 1ch; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); padding-top: var(--spacer-start); padding-bottom: var(--spacer-end); --space-inside: 1ch; --space-inside-pull: calc(-1 * var(--space-inside)); --space-inside-start: var(--space-inside); --space-inside-end: var(--space-inside); padding-left: var(--space-inside-start); padding-right: var(--space-inside-end); } .p-xs\+ { padding: var(--space-inside); --space-inside: var(--size-fluid-1); } .p-sm\+ { padding: var(--space-inside); --space-inside: var(--size-fluid-2); } .p-md\+ { padding: var(--space-inside); --space-inside: var(--size-fluid-3); } .p-lg\+ { padding: var(--space-inside); --space-inside: var(--size-fluid-4); } .p-xs-i\+ { padding-left: var(--space-inside); padding-right: var(--space-inside); --space-inside: var(--size-fluid-1); } .p-sm-i\+ { padding-left: var(--space-inside); padding-right: var(--space-inside); --space-inside: var(--size-fluid-2); } .p-md-i\+ { padding-left: var(--space-inside); padding-right: var(--space-inside); --space-inside: var(--size-fluid-3); } .p-lg-i\+ { padding-left: var(--space-inside); padding-right: var(--space-inside); --space-inside: var(--size-fluid-4); } .p-xs-b\+ { padding-top: var(--space-inside); padding-bottom: var(--space-inside); --space-inside: var(--size-fluid-1); } .p-sm-b\+ { padding-top: var(--space-inside); padding-bottom: var(--space-inside); --space-inside: var(--size-fluid-2); } .p-md-b\+ { padding-top: var(--space-inside); padding-bottom: var(--space-inside); --space-inside: var(--size-fluid-3); } .p-lg-b\+ { padding-top: var(--space-inside); padding-bottom: var(--space-inside); --space-inside: var(--size-fluid-4); } [class].pt-0 { padding-top: 0; } [class].pb-0 { padding-bottom: 0; } [class].pl-0 { padding-left: 0; } [class].pr-0 { padding-right: 0; } [class].p-i-0 { padding-left: 0; padding-right: 0; } [class].p-b-0 { padding-top: 0; padding-bottom: 0; } .mt-xs { margin-top: 0.25rem; } .mt-sm { margin-top: 0.625rem; } .mt-md { margin-top: 1rem; } .mt-lg { margin-top: 1.5rem; } .mt-xl { margin-top: 2rem; } .mb-xs { margin-bottom: 0.25rem; } .mb-sm { margin-bottom: 0.625rem; } .mb-md { margin-bottom: 1rem; } .mb-lg { margin-bottom: 1.5rem; } .mb-xl { margin-bottom: 2rem; } .ml-xs { margin-left: 0.25rem; } .ml-sm { margin-left: 0.625rem; } .ml-md { margin-left: 1rem; } .ml-lg { margin-left: 1.5rem; } .ml-xl { margin-left: 2rem; } .mr-xs { margin-right: 0.25rem; } .mr-sm { margin-right: 0.625rem; } .mr-md { margin-right: 1rem; } .mr-lg { margin-right: 1.5rem; } .mr-xl { margin-right: 2rem; } .m-xs-i { --space-outside: var(--size-1); --space-outside-pull: calc(-1 * var(--size-1)); --space-outside-start: var(--size-1); --space-outside-end: var(--size-1); margin-left: var(--space-outside-start); margin-right: var(--space-outside-end); } .m-sm-i { --space-outside: var(--size-2); --space-outside-pull: calc(-1 * var(--size-2)); --space-outside-start: var(--size-2); --space-outside-end: var(--size-2); margin-left: var(--space-outside-start); margin-right: var(--space-outside-end); } .m-md-i { --space-outside: var(--size-3); --space-outside-pull: calc(-1 * var(--size-3)); --space-outside-start: var(--size-3); --space-outside-end: var(--size-3); margin-left: var(--space-outside-start); margin-right: var(--space-outside-end); } .m-lg-i { --space-outside: var(--size-5); --space-outside-pull: calc(-1 * var(--size-5)); --space-outside-start: var(--size-5); --space-outside-end: var(--size-5); margin-left: var(--space-outside-start); margin-right: var(--space-outside-end); } .m-xl-i { --space-outside: var(--size-7); --space-outside-pull: calc(-1 * var(--size-7)); --space-outside-start: var(--size-7); --space-outside-end: var(--size-7); margin-left: var(--space-outside-start); margin-right: var(--space-outside-end); } .m-i { margin-left: var(--spacer); margin-right: var(--spacer); } .m-auto-i { margin-left: auto; margin-right: auto; } .m-xs-b { --spacer: var(--size-1); --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); margin-top: var(--spacer-start); margin-bottom: var(--spacer-end); } .m-sm-b { --spacer: var(--size-2); --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); margin-top: var(--spacer-start); margin-bottom: var(--spacer-end); } .m-md-b { --spacer: var(--size-3); --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); margin-top: var(--spacer-start); margin-bottom: var(--spacer-end); } .m-lg-b { --spacer: var(--size-5); --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); margin-top: var(--spacer-start); margin-bottom: var(--spacer-end); } .m-xl-b { --spacer: var(--size-7); --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); margin-top: var(--spacer-start); margin-bottom: var(--spacer-end); } .m-b { margin-top: var(--spacer); margin-bottom: var(--spacer); } .m-auto-b { margin-top: auto; margin-bottom: auto; } .m-xs { margin: 0.25rem; --spacer:0.25rem; --space-outside:0.25rem; } .m-sm { margin: 0.625rem; --spacer:0.625rem; --space-outside:0.625rem; } .m-md { margin: 1rem; --spacer:1rem; --space-outside:1rem; } .m-lg { margin: 1.5rem; --spacer:1.5rem; --space-outside:1.5rem; } .m-xl { margin: 2rem; --spacer:2rem; --space-outside:2rem; } .m-rem { --spacer: 1rem; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); margin-top: var(--spacer-start); margin-bottom: var(--spacer-end); --space-outside: 1rem; --space-outside-pull: calc(-1 * 1rem); --space-outside-start: 1rem; --space-outside-end: 1rem; margin-left: var(--space-outside-start); margin-right: var(--space-outside-end); } .m-em { --spacer: 1em; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); margin-top: var(--spacer-start); margin-bottom: var(--spacer-end); --space-outside: 1em; --space-outside-pull: calc(-1 * 1em); --space-outside-start: 1em; --space-outside-end: 1em; margin-left: var(--space-outside-start); margin-right: var(--space-outside-end); } .m-ex { --spacer: 1ex; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); margin-top: var(--spacer-start); margin-bottom: var(--spacer-end); --space-outside: 1ex; --space-outside-pull: calc(-1 * 1ex); --space-outside-start: 1ex; --space-outside-end: 1ex; margin-left: var(--space-outside-start); margin-right: var(--space-outside-end); } .m-ch { --spacer: 1ch; --spacer-pull: calc(-1 * var(--spacer)); --spacer-start: var(--spacer); --spacer-end: var(--spacer); margin-top: var(--spacer-start); margin-bottom: var(--spacer-end); --space-outside: 1ch; --space-outside-pull: calc(-1 * 1ch); --space-outside-start: 1ch; --space-outside-end: 1ch; margin-left: var(--space-outside-start); margin-right: var(--space-outside-end); } [class].mt-0 { margin-top: 0; } [class].mb-0 { margin-bottom: 0; } [class].ml-0 { margin-left: 0; } [class].mr-0 { margin-right: 0; } [class].m-i-0 { margin-left: 0; margin-right: 0; } [class].m-b-0 { margin-top: 0; margin-bottom: 0; } .m-pull-b { margin-top: calc(-1 * var(--space-block)); margin-bottom: calc(-1 * var(--space-block)); } .m-pull-i { margin-left: calc(-1 * var(--space-inside)); margin-right: calc(-1 * var(--space-inside)); } .width-fit { max-width: 100% !important; } .width-full { width: 100% !important; } .height-fit { max-height: 100% !important; } .height-full { height: 100% !important; } .min-width-0 { min-width: 0 !important; } .stack-xs { --gutter: 0.25rem; --spacer-end: 0.25rem; } .stack-sm { --gutter: 0.625rem; --spacer-end: 0.625rem; } .stack-md { --gutter: 1rem; --spacer-end: 1rem; } .stack-lg { --gutter: 1.5rem; --spacer-end: 1.5rem; } .stack-xl { --gutter: 2rem; --spacer-end: 2rem; } .stack-xs.stack-xs > :first-child:not(:only-child), .stack-xs.stack-xs > * + :not(br, hr) { margin-top: unset; margin-bottom: 0.25rem; } .stack-sm.stack-sm > :first-child:not(:only-child), .stack-sm.stack-sm > * + :not(br, hr) { margin-top: unset; margin-bottom: 0.625rem; } .stack-md.stack-md > :first-child:not(:only-child), .stack-md.stack-md > * + :not(br, hr) { margin-top: unset; margin-bottom: 1rem; } .stack-lg.stack-lg > :first-child:not(:only-child), .stack-lg.stack-lg > * + :not(br, hr) { margin-top: unset; margin-bottom: 1.5rem; } .stack-xl.stack-xl > :first-child:not(:only-child), .stack-xl.stack-xl > * + :not(br, hr) { margin-top: unset; margin-bottom: 2rem; } :is(.stack-xs, .stack-sm, .stack-md, .stack-lg, .stack-xl)[class] > :last-child:not(br, hr) { margin-bottom: 0; } .grid:is(.stack-xs, .stack-sm, .stack-md, .stack-lg, .stack-xl) { row-gap: initial; } :where(.stack, [class*=stack-]) > :nth-child(1 of .grid):not(:last-child) { margin-bottom: var(--gap, var(--gutter, var(--grid-spacing-block))); } :where(.stack, [class*=stack-]) > .grid + .grid { margin-top: var(--gap, var(--gutter, var(--grid-spacing-block))); } /* utilities.positions */ [class*=sticky-] { position: -webkit-sticky; position: sticky; } [class*=sticky-t] { top: var(--sticky-offset-top, var(--sticky-offset, auto)); } [class*=sticky-b] { bottom: var(--sticky-offset-bottom, var(--sticky-offset, auto)); } [class*=sticky-l] { left: var(--sticky-offset-left, var(--sticky-offset, auto)); } [class*=sticky-r] { right: var(--sticky-offset-right, var(--sticky-offset, auto)); } .sticky-t-sm, .sticky-b-sm, .sticky-l-sm, .sticky-r-sm { --sticky-offset: 0.625rem ; } .sticky-t-md, .sticky-b-md, .sticky-l-md, .sticky-r-md { --sticky-offset: 1rem ; } .sticky-t-lg, .sticky-b-lg, .sticky-l-lg, .sticky-r-lg { --sticky-offset: 1.5rem ; } .sticky-t-xl, .sticky-b-xl, .sticky-l-xl, .sticky-r-xl { --sticky-offset: 2rem ; } .loader { --block-space: 1rem; display: none; padding: 0; cursor: pointer; } .loader[data-loading], .loader[data-busy] { display: grid; place-content: center; gap: var(--grid-spacing-block, 0) var(--grid-spacing-inline, 0); } .loader[data-loading]:not([data-scope=local]) { position: fixed; top: 0; right: 0; bottom: 1px; left: 0; z-index: 2707; margin: 0 !important; padding: 0 !important; background-color: hsla(192, 15%, 30%, 0.5); box-shadow: inset 0 0 15vmin hsla(26, 20%, 10%, 0.5); } html[data-loading], body[data-loading] { overflow: hidden; scrollbar-gutter: stable both-edges; } main [data-busy], main [data-loading] { transition: filter 350ms ease-out; } main [data-busy=true] { filter: blur(2px) grayscale(0.3) opacity(0.4); pointer-events: none; } main [data-busy=true] * { cursor: default; } .loader[data-scope=local] { --block-space: 0; position: static; } .loader[data-dots=a] { --from: #000; --to: #0002; --dot: 1rem; --dotl: calc(-1.25 * var(--dot)); --dotr: calc(1.25 * var(--dot)); } .loader[data-dots=a][data-scope=local] { --dot: 1em; } .loader[data-dots=a] > .dots { width: calc(0.75 * var(--dot)); height: calc(0.75 * var(--dot)); margin: var(--block-space) auto; background: var(--to); border-radius: 50%; box-shadow: var(--dotl) 0 var(--from), var(--dotr) 0 var(--to); animation: da 1s infinite linear alternate; } @keyframes da { 0% { box-shadow: var(--dotl) 0 var(--to), var(--dotr) 0 var(--from); background: var(--to); } 33% { box-shadow: var(--dotl) 0 var(--to), var(--dotr) 0 var(--from); background: var(--from); } 66% { box-shadow: var(--dotl) 0 var(--from), var(--dotr) 0 var(--to); background: var(--from); } } .loader[data-dots=b] { --dot: 1rem; } .loader[data-dots=b][data-scope=local] { --dot: 1em; } .loader[data-dots=b] > .dots { animation: db 1250ms infinite linear; width: calc(4 * var(--dot)); height: var(--dot); margin: var(--block-space) auto; background: radial-gradient(circle closest-side, currentColor 90%, transparent) 0 50%, radial-gradient(circle closest-side, currentColor 90%, transparent) 50% 50%, radial-gradient(circle closest-side, currentColor 90%, transparent) 100% 50%; background-size: 33.334% 100%; background-repeat: no-repeat; } @keyframes db { 25% { background-size: 33.334% 0, 33.334% 100%, 33.334% 100%; } 50% { background-size: 33.334% 100%, 33.334% 0, 33.334% 100%; } 75% { background-size: 33.334% 100%, 33.334% 100%, 33.334% 0; } } .loader .spinner { width: 50px; aspect-ratio: 1; border-radius: 50%; border: 5px solid #2c90a8; animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear; } @keyframes l20-1 { 0% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); } 12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%); } 25% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%); } 50% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); } 62.5% { clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); } 75% { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%); } 100% { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%); } } @keyframes l20-2 { 0% { transform: scaleY(1) rotate(0deg); } 49.99% { transform: scaleY(1) rotate(135deg); } 50% { transform: scaleY(-1) rotate(0deg); } 100% { transform: scaleY(-1) rotate(-135deg); } } /* utilities.tooltip */ [data-tooltip] { --border-radius-tooltip: .3em; --pos-bottom: 120%; --pos-left: 0; --pos-right: none; --tooltip-transform: none; --caret-transform: translate(-50%, .25rem); position: relative; } @media (max-width: 35.999em) { [data-tooltip] { --pos-left: 0; --tooltip-transform: unset; --caret-transform: unset; } } @media (min-width: 90em) { [data-tooltip] { --pos-left: 0; --tooltip-transform: unset; --caret-transform: unset; } } [data-tooltip]:not(a, button, input) { -webkit-text-decoration: none; text-decoration: none; cursor: help; } [data-tooltip]::before { content: attr(data-tooltip); position: absolute; z-index: 99; left: var(--pos-left); right: var(--pos-right); padding: 0.25rem 0.5rem; overflow: hidden; transform: var(--tooltip-transform); border-radius: var(--border-radius-tooltip); background-color: var(--tooltip-background-color); color: var(--tooltip-color); box-shadow: var(--shadow-2); font-style: normal; line-height: 1.35; font-size: 0.875rem; -webkit-text-decoration: none; text-decoration: none; opacity: 0; pointer-events: none; touch-action: none; } [data-tooltip]::before { --tooltip-width: max-content; width: var(--tooltip-width); bottom: var(--pos-bottom); } [data-tooltip]:hover::before, [data-tooltip]:focus::before { opacity: 1; transition: opacity 850ms; } @container card-body (inline-size > 22.5rem) { .vts-tooltip[data-tooltip]::before { --tooltip-width: 90cqw; } } @container card-body (inline-size > 30rem) { .vts-tooltip[data-tooltip]:nth-of-type(2):not(:only-of-type) { --tooltip-width: 75cqw; --tooltip-transform: translate(-25cqw, 0px); } } .vts-tooltip__content[aria-hidden=false] { position: absolute; z-index: 99; padding: 0.25rem; transform: translate(-50%, -100%) rotate(45deg); top: -5%; --pos-left: 50%; right: unset; background-color: var(--tooltip-background-color); color: var(--tooltip-color); font-style: normal; line-height: 1.35; font-size: 0.875rem; -webkit-text-decoration: none; text-decoration: none; opacity: 1; pointer-events: none; touch-action: none; } [data-tooltip].-tooltip-right::before { --tooltip-transform: translate(.25rem, 0); --caret-transform: translate(-.25rem, 0); border-color: transparent currentColor transparent transparent; } [data-tooltip].-tooltip-right::before { --pos-left: 100%; --pos-bottom: 0; } [data-tooltip].-tooltip-left::before { --tooltip-transform: translate(calc(-100% - .3rem), -.15rem); --pos-left: 0; --pos-bottom: 0; border-color: transparent transparent transparent currentColor; } [data-tooltip].-tooltip-bottom::before { --pos-bottom: -100%; --tooltip-transform: translate(0, .3rem); --caret-transform: translate(-50%, -320%); border-color: transparent transparent currentColor transparent; } /* vars.icons */ /* CSS icons embedded */ :root { --icon-checkbox: url("data:image/svg+xml;utf8,"); --icon-chevron: url("data:image/svg+xml;utf8,"); --icon-close: url("data:image/svg+xml;utf8,"); --icon-calendar: url("data:image/svg+xml;utf8,"); --icon-invalid: url("data:image/svg+xml;utf8,"); --icon-minus: url("data:image/svg+xml;utf8,"); --icon-time: url("data:image/svg+xml;utf8,"); --icon-search: url("data:image/svg+xml;utf8,"); --icon-valid: url("data:image/svg+xml;utf8,"); --icon-star: url("data:image/svg+xml;utf8,"); --icon-fixme: url("data:image/svg+xml;utf8,"); } /* die noch unvollständigen SVG Bubble-Kombis * wenn inline SVG verfügbar, den Eintrag hier entfernen */ #wia-icon-person-cross, #wia-icon-person-question { color: firebrick; } symbol[id] :where(g,:is(circle, ellipse, path, rect)):not([stroke]) { stroke: currentColor; } symbol[id] :where(g,:is(circle, ellipse, path, rect)):not([stroke-width]) { stroke-width: var(--icon-stroke-width, 1.45px); } symbol[id*=bubble] :where(:is(circle, ellipse, path, rect)) { stroke-linejoin: round; } .icon-bg { fill: var(--icon-fill, #fff); fill-rule: nonzero; } .icon-no-bg { fill: none !important; fill-rule: nonzero; stroke: currentColor; stroke-width: var(--icon-stroke-width, 1px); } symbol[id] use[transform] { transform-origin: center; } :where(span, label)[class|=icon] { padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: self-end; gap: var(--widget-gap, var(--gap, 1ch)); } [class|=icon] > span:only-of-type { line-height: 1; } [class|=icon] > span:only-of-type::before { display: inline-block; height: var(--symbol-size, auto); width: auto; aspect-ratio: 1; } .icon-checkbox > span::before { content: var(--icon-checkbox); } .icon-chevron > span::before { content: var(--icon-chevron); } .icon-close > span::before { content: var(--icon-close); } .icon-calendar > span::before { content: var(--icon-calendar); } .icon-invalid > span::before { content: var(--icon-invalid); } .icon-minus > span::before { content: var(--icon-minus); } .icon-time > span::before { content: var(--icon-time); } .icon-search > span::before { content: var(--icon-search); } .icon-valid > span::before { content: var(--icon-valid); } .icon-star > span::before { content: var(--icon-star); } .icon-fixme > span::before { content: var(--icon-fixme); } /* SVG icons */ .icon-24h span::before { content: var(--icon-fixme); } .icon-account span::before { content: var(--icon-fixme); } .icon-application span::before { content: var(--icon-fixme); } .icon-calendar span::before { content: var(--icon-fixme); } .icon-care span::before { content: var(--icon-fixme); } .icon-cross span::before { content: var(--icon-fixme); } .icon-favorite span::before { content: var(--icon-fixme); } .icon-house span::before { content: var(--icon-fixme); } .icon-info span::before { content: var(--icon-fixme); } .icon-lock span::before { content: var(--icon-fixme); } .icon-map span::before { content: var(--icon-fixme); } .icon-other span::before { content: var(--icon-fixme); } .icon-pin span::before { content: var(--icon-fixme); } #wia-icon-bath:hover path.sm { animation: short-bubble 1500ms linear; } @keyframes short-bubble { 0% { transform: translate3d(0px, 6px, 0); opacity: 0; } 13% { transform: translate3d(0px, -2px, 0); opacity: 1; } 20% { transform: translate3d(1px, -4px, 0); } 30% { transform: translate3d(0px, -6px, 0); } 40% { transform: translate3d(-1px, -8px, 0); } 50% { transform: translate3d(0px, -10px, 0); } 60% { transform: translate3d(0px, -12px, 0); } 70% { opacity: 0.4; } 80%, 100% { transform: translate3d(0, -16px, 0); opacity: 0; } } #wia-icon-stairlift:hover path.seat { animation: lifter 1500ms linear alternate; } @keyframes lifter { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-20%, -20%); } 75% { transform: translate(20%, 20%); } } /* Countries */ [class^=flag-] { vertical-align: middle; } .flag-cz::after { content: "${cc}"; } .flag-de::after { content: "${cc}"; } .flag-do::after { content: "${cc}"; } .flag-es::after { content: "${cc}"; } .flag-nl::after { content: "${cc}"; } /* utilities.exterminator */ body > *:only-child:not(main), body > section:first-child { outline: 5px solid firebrick; outline-offset: -2px; } body > *:only-child:not(main)::before, body > section:first-child::before { position: absolute; z-index: 27; font: normal 14px/1 monospace; padding: 0.4ex 1ex; top: 5px; left: 5px; content: "KEIN Einzel-Wrapper im BODY außer MAIN\a> header\a> main\a> footer\a\a> #page-head.page-head\a> #page-main.page-main\a> #page-foot.page-foot"; white-space: pre; background-color: papayawhip; outline: 3px solid white; color: firebrick; } html > body .btn-link { color: hotpink !important; border-color: currentColor !important; } .btn:not(.-link-like):not(.-primary, .-secondary, .-accent, .-compl), .btn:is(:any-link, .-ghost, .-half):not(.-primary, .-secondary, .-accent, .-compl) { color: inherit; outline: 2px solid firebrick !important; outline-offset: 2px; position: relative !important; } .btn:not(.-link-like):not(.-primary, .-secondary, .-accent, .-compl)::after, .btn:is(:any-link, .-ghost, .-half):not(.-primary, .-secondary, .-accent, .-compl)::after { position: absolute !important; bottom: -2em; z-index: 2; content: 'Farb-Modifier fehlt: "' attr(class) '"'; background: lime; color: black; font: normal 0.8rem/1 sans-serif; padding: 0.5ex; }