diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/css-ours.css b/css-ours.css new file mode 100644 index 0000000..acd6da0 --- /dev/null +++ b/css-ours.css @@ -0,0 +1,818 @@ +/* Design system tokens — source: frontend/DESIGN.md (living-styleguide, ref=main) */ +:root { + --ds-color-primary: #00759e; + --ds-color-on-primary: #ffffff; + --ds-color-brand-cyan: #00a5e1; + --ds-color-canvas: #ffffff; + --ds-color-surface-bright: #f9f9f9; + --ds-color-surface-medium: #efefef; + --ds-color-ink: #000000; + --ds-color-tertiary: #6d6d6d; + --ds-color-border: #6d6d6d; + --ds-color-disabled-shape: #c6c6c6; + --ds-color-shadow-elevation: #0000001a; + --ds-color-shadow-token: #00000029; + --ds-color-dark-clickable: #77ddff; + --ds-color-dark-ink: #d7e9f4; + --ds-color-dark-ink-secondary: #afc1c7; + --ds-color-dark-canvas: #15202b; + --ds-color-dark-container: #22303c; + --ds-color-dark-hover: #2d3740; + --ds-color-dark-disabled: #84999f; + --ds-rounded-xs: 4px; + --ds-rounded-md: 10px; + --ds-rounded-pill: 32px; + --ds-spacing-xs: 4px; + --ds-spacing-sm: 6px; + --ds-spacing-md: 8px; + --ds-spacing-control-height: 43px; + --ds-spacing-xl: 16px; + --ds-spacing-xxl: 24px; + --ds-motion-duration: 0.3s; + --ds-motion-transition: var(--ds-motion-duration) ease all; + + /* Typography tokens — source: frontend/DESIGN.md (living-styleguide, ref=main) */ + --ds-typography-body-website-font-size: 18px; + --ds-typography-body-website-line-height: 27px; + --ds-typography-body-md-font-size: 15px; + --ds-typography-body-md-line-height: 24px; + --ds-typography-body-strong-font-size: 15px; + --ds-typography-body-strong-line-height: 24px; + --ds-typography-footer-md-font-size: 15px; + --ds-typography-footer-md-line-height: 19px; + --ds-typography-caption-subfooter-font-size: 13px; + --ds-typography-caption-subfooter-line-height: 16px; + --ds-typography-heading-h1-website-font-size: 45px; + --ds-typography-heading-h1-website-line-height: 58.5px; + --ds-typography-heading-h1-website-margin-bottom: 30px; + --ds-typography-heading-h2-website-font-size: 40px; + --ds-typography-heading-h2-website-line-height: 52px; + --ds-typography-heading-h2-website-margin-bottom: 15px; + --ds-typography-heading-h3-website-font-size: 25px; + --ds-typography-heading-h3-website-line-height: 40px; + --ds-typography-heading-h3-website-margin-bottom: 12px; + --ds-typography-heading-h4-font-size: 23px; + --ds-typography-heading-h4-line-height: 29.9px; + --ds-typography-heading-h4-margin-bottom: 12px; + --ds-typography-heading-h5-font-size: 20px; + --ds-typography-heading-h5-line-height: 26px; + --ds-typography-heading-h5-margin-bottom: 12px; + --ds-typography-heading-h6-font-size: 18px; + --ds-typography-heading-h6-line-height: 24px; + --ds-typography-heading-h6-margin-bottom: 12px; +} + +[data-md-color-scheme="default"] { + --md-primary-fg-color: var(--ds-color-on-primary); + --md-primary-bg-color: var(--ds-color-primary); + --md-primary-bg-color--light: var(--ds-color-primary); + --md-default-fg-color--light: var(--ds-color-ink); + + --md-accent-fg-color: var(--ds-color-primary); + --md-accent-fg-color--transparent: color-mix(in srgb, var(--ds-color-brand-cyan) 12.5%, transparent); + --md-accent-bg-color: var(--ds-color-canvas); + + --md-typeset-a-color: var(--ds-color-primary); + --md-custom-accent-color: var(--ds-color-primary); + --md-custom-text-color: var(--ds-color-on-primary); + + --language-toggle-active-color: var(--ds-color-on-primary); + --language-toggle-active-text-color: var(--ds-color-primary); + --language-toggle-inactive-text-color: var(--ds-color-on-primary); + + --md-typeset-color: var(--ds-color-ink); + --md-footer-bg-color: var(--ds-color-canvas); + --md-footer-bg-color--dark: var(--ds-color-tertiary); + --md-footer-fg-color: var(--ds-color-tertiary); +} + +[data-md-color-scheme="slate"] { + --md-hue: 210; + + --md-default-fg-color: var(--ds-color-dark-ink); + --md-default-bg-color: var(--ds-color-dark-canvas); + --md-default-fg-color--light: var(--ds-color-dark-ink); + + --md-primary-fg-color: var(--ds-color-dark-container); + --md-primary-bg-color: var(--ds-color-dark-clickable); + --md-primary-bg-color--light: var(--ds-color-dark-clickable); + + --md-accent-fg-color: var(--ds-color-dark-clickable); + --md-accent-fg-color--transparent: color-mix(in srgb, var(--ds-color-brand-cyan) 12.5%, transparent); + --md-accent-bg-color: var(--ds-color-canvas); + + --md-typeset-a-color: var(--ds-color-dark-clickable); + --md-custom-accent-color: var(--ds-color-dark-canvas); + --md-custom-text-color: var(--ds-color-dark-ink); + + --language-toggle-active-color: var(--ds-color-dark-container); + --language-toggle-active-text-color: var(--ds-color-dark-clickable); + --language-toggle-inactive-text-color: var(--ds-color-dark-clickable); + + --md-typeset-color: var(--ds-color-dark-ink); + --md-footer-bg-color: var(--ds-color-dark-container); + --md-footer-bg-color--dark: var(--ds-color-dark-container); + --md-footer-fg-color: var(--ds-color-dark-ink-secondary); +} + +@font-face { + font-family: "Inter"; + src: url("../fonts/Inter-Regular.woff") format("woff"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Inter SemiBold"; + src: url("../fonts/Inter-SemiBold.woff") format("woff"); + font-weight: 600; + font-style: normal; +} + +:root { + --md-text-font: Inter, Arial, Helvetica, sans-serif; + + .md-header--shadow { + box-shadow: 0 0 10px var(--ds-color-shadow-elevation); + } + + .md-header { + padding-top: var(--ds-spacing-xs); + padding-bottom: var(--ds-spacing-xs); + } + + .md-search__form { + background-color: var(--md-primary-fg-color); + border: 1px solid var(--md-primary-bg-color); + border-radius: var(--ds-rounded-md); + min-height: var(--ds-spacing-control-height); + } + + [data-md-toggle="search"]:checked ~ .md-header .md-search__form { + border-radius: var(--ds-rounded-md) var(--ds-rounded-md) 0 0; + } + + .md-search__output { + border: 1px solid var(--md-primary-bg-color); + border-radius: 0 0 var(--ds-rounded-md) var(--ds-rounded-md); + } + + .md-tabs__item { + color: var(--md-typeset-color); + opacity: 1; + font-family: "Inter SemiBold", Arial, Helvetica, sans-serif; + font-size: var(--ds-typography-body-strong-font-size); + font-weight: 600; + line-height: var(--ds-typography-body-strong-line-height); + } + + .md-tabs__item a:hover { + color: var(--md-typeset-a-color); + } + + .md-tabs__item--active { + color: var(--md-typeset-a-color); + opacity: 1; + font-weight: 600; + } + + .md-top:hover { + color: var(--md-default-bg-color); + } + + .md-header__title { + margin-left: var(--ds-spacing-md); + margin-right: var(--ds-spacing-sm); + } + + .md-logo svg { + color: var(--md-default-fg-color--light); + height: 1.6rem; + width: auto; + } + + .md-header__button.md-logo { + margin: var(--ds-spacing-xs); + padding: var(--ds-spacing-xs); + } + + .md-status { + display: none; + } + + .md-sidebar[hidden] ~ .md-content { + border-left: none; + } + + /* Stretch main area on short pages so the content divider reaches the footer */ + .md-main { + display: flex; + flex-direction: column; + } + + .md-main__inner { + flex: 1; + width: 100%; + align-items: stretch; + } + + .md-content { + border-left: solid; + border-width: 1px; + border-color: var(--ds-color-border); + transition: border-color var(--ds-motion-duration) ease; + } + + .md-content .md-typeset h1, + .md-content .md-typeset h2, + .md-content .md-typeset h3, + .md-content .md-typeset h4, + .md-content .md-typeset h5, + .md-content .md-typeset h6 { + font-family: "Inter SemiBold", Arial, Helvetica, sans-serif; + font-weight: 600; + } + + /* Website typography — source: typography.body-website, heading-h*-website */ + body { + font-family: Inter, Arial, Helvetica, sans-serif; + font-size: var(--ds-typography-body-website-font-size); + line-height: var(--ds-typography-body-website-line-height); + } + + .md-content .md-typeset h1 { + font-size: var(--ds-typography-heading-h1-website-font-size); + line-height: var(--ds-typography-heading-h1-website-line-height); + margin-bottom: var(--ds-typography-heading-h1-website-margin-bottom); + } + + .md-content .md-typeset h2 { + font-size: var(--ds-typography-heading-h2-website-font-size); + line-height: var(--ds-typography-heading-h2-website-line-height); + margin-bottom: var(--ds-typography-heading-h2-website-margin-bottom); + } + + .md-content .md-typeset h3 { + font-size: var(--ds-typography-heading-h3-website-font-size); + line-height: var(--ds-typography-heading-h3-website-line-height); + margin-bottom: var(--ds-typography-heading-h3-website-margin-bottom); + } + + .md-content .md-typeset h4 { + font-size: var(--ds-typography-heading-h4-font-size); + line-height: var(--ds-typography-heading-h4-line-height); + margin-bottom: var(--ds-typography-heading-h4-margin-bottom); + } + + .md-content .md-typeset h5 { + font-size: var(--ds-typography-heading-h5-font-size); + line-height: var(--ds-typography-heading-h5-line-height); + margin-bottom: var(--ds-typography-heading-h5-margin-bottom); + } + + .md-content .md-typeset h6 { + font-size: var(--ds-typography-heading-h6-font-size); + line-height: var(--ds-typography-heading-h6-line-height); + margin-bottom: var(--ds-typography-heading-h6-margin-bottom); + } + + /* link-primary — no underline at rest */ + .md-typeset a { + text-decoration: none; + color: var(--md-typeset-a-color); + transition: var(--ds-motion-transition); + } + + .md-typeset a:hover { + text-decoration: underline; + text-decoration-thickness: 1px; + } + + [data-md-color-scheme="default"] .md-typeset ul:not([class]) > li { + list-style-image: url("data:image/svg+xml;utf8,"); + } + + [data-md-color-scheme="slate"] .md-typeset ul:not([class]) > li { + list-style-image: url("data:image/svg+xml;utf8,"); + } + + /* table-default — source: docs/components-html-css/Molecules/table.md */ + .md-typeset table:not([class]) { + border: none; + border-collapse: collapse; + border-radius: var(--ds-rounded-md); + box-shadow: none; + font-size: var(--ds-typography-body-md-font-size); + line-height: var(--ds-typography-footer-md-line-height); + white-space: nowrap; + } + + .md-typeset table:not([class]) thead { + font-family: "Inter SemiBold", Arial, Helvetica, sans-serif; + font-weight: 600; + color: var(--md-typeset-color); + } + + /* Rahmen um tbody per Pseudo-Elemente (Default-Stil) */ + .md-typeset table:not([class]) tbody { + position: relative; + } + + .md-typeset table:not([class]) tbody::before, + .md-typeset table:not([class]) tbody::after { + content: ""; + position: absolute; + inset: 0; + border: 1px solid var(--ds-color-disabled-shape); + border-radius: var(--ds-rounded-md); + pointer-events: none; + } + + .md-typeset table:not([class]) th { + padding: 0 15px 7px 15px; + background-color: transparent; + text-align: left; + } + + .md-typeset table:not([class]) td { + padding: 15px; + border: none; + } + + .md-typeset table:not([class]) tbody tr { + height: 50px; + border-bottom: 1px solid var(--ds-color-disabled-shape); + text-align: left; + } + + .md-typeset table:not([class]) tbody tr:last-child { + border-bottom: none; + } + + .md-typeset table:not([class]) tbody tr:hover { + background-color: var(--ds-color-surface-bright); + } + + [data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody::before, + [data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody::after { + border-color: var(--ds-color-dark-disabled); + } + + [data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr { + border-bottom-color: var(--ds-color-dark-disabled); + } + + [data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr:hover { + background-color: var(--ds-color-dark-hover); + } + + .md-path__item:not(:first-child) { + align-items: center; + font-size: var(--ds-typography-caption-subfooter-font-size); + line-height: var(--ds-typography-caption-subfooter-line-height); + } + + .md-footer { + font-size: var(--ds-typography-footer-md-font-size); + line-height: var(--ds-typography-footer-md-line-height); + } + + .md-footer-meta { + border-top: 1px solid var(--ds-color-disabled-shape); + } +} + +.md-icon svg.lucide { + fill: none; + stroke: currentcolor; + height: 1rem; + width: 1rem; +} + +/* switch-icon-3 — source: docs/components-html-css/Molecules/switch.md (Icon-3) */ +.ds-switch-wrapper.md-header__option { + width: auto; + flex-shrink: 0; + overflow: visible; +} + +.ds-switch-wrapper { + padding: 0; + margin: 0 var(--ds-spacing-md) 0 0; +} + +.ds-switch-wrapper *, +.ds-switch-wrapper *::before, +.ds-switch-wrapper *::after { + box-sizing: border-box; +} + +.ds-switch-wrapper .switch-field { + display: flex; + overflow: hidden; + position: relative; + border-radius: 1rem; + align-items: center; + user-select: none; +} + +.ds-switch-wrapper .switch-field input[type="radio"] { + position: absolute; + clip: rect(0, 0, 0, 0); + height: 0.0625rem; + width: 0.0625rem; + border: 0; + overflow: hidden; +} + +.ds-switch-wrapper .switch-field label.option { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 2rem; + width: 2rem; + min-width: 0; + background-color: var(--ds-color-primary); + color: var(--ds-color-on-primary); + font: normal normal 600 0.75rem/1.563rem Inter, Arial, Helvetica, sans-serif; + text-align: center; + padding: 0.25rem; + margin-right: -0.0625rem; + cursor: pointer; + transition: all 0.1s ease-in-out; +} + +.ds-switch-wrapper .switch-field label.option:last-of-type { + margin-right: 0; +} + +.ds-switch-wrapper .switch-field label.option:hover { + cursor: pointer; +} + +.ds-switch-wrapper .switch { + display: flex; + align-items: center; + justify-content: center; + width: 1.75rem; + height: 1.25rem; + padding: 0; + background-color: var(--ds-color-on-primary); + color: var(--ds-color-primary); + border-radius: 2rem; + position: absolute; + z-index: 2; + border: 0; + transition: 0.3s ease all; + left: 0.125rem; + pointer-events: none; +} + +.ds-switch-wrapper .switch__icon { + display: none; + align-items: center; + justify-content: center; +} + +.ds-switch-wrapper .switch__icon svg { + height: 0.875rem; + width: 0.875rem; +} + +.ds-switch-wrapper svg.lucide-circle-half path { + fill: currentColor; +} + +.ds-switch-wrapper .switch-field:hover .switch { + transform: translateX(0.125rem); +} + +.ds-switch-wrapper:has(#__palette_1:checked) .switch-field:hover .switch { + transform: none; +} + +.ds-switch-wrapper:has(#__palette_2:checked) .switch-field:hover .switch { + transform: translateX(-0.125rem); +} + +.ds-switch-wrapper:has(#__palette_0:checked) .switch { + left: 0.125rem; +} + +.ds-switch-wrapper:has(#__palette_1:checked) .switch { + left: 2.0625rem; +} + +.ds-switch-wrapper:has(#__palette_2:checked) .switch { + left: 4rem; +} + +.ds-switch-wrapper:has(#__palette_0:checked) .switch__icon--0, +.ds-switch-wrapper:has(#__palette_1:checked) .switch__icon--1, +.ds-switch-wrapper:has(#__palette_2:checked) .switch__icon--2 { + display: flex; +} + +.ds-switch-wrapper .switch-field label.option:focus-visible { + outline: none; + box-shadow: + 0 0 0 2px var(--ds-color-on-primary), + 0 0 0 4px var(--ds-color-primary); + border-radius: 2rem; +} + +/* Dark mode: darker track distinct from header, rounded sliding pill for the active segment */ +[data-md-color-scheme="slate"] .ds-switch-wrapper .switch-field { + background-color: var(--ds-color-dark-canvas); +} + +[data-md-color-scheme="slate"] .ds-switch-wrapper .switch-field label.option { + background-color: var(--ds-color-dark-canvas); + color: var(--ds-color-dark-clickable); +} + +[data-md-color-scheme="slate"] .ds-switch-wrapper .switch { + background-color: var(--ds-color-dark-container); + color: var(--ds-color-dark-clickable); +} + +[data-md-color-scheme="slate"] .ds-switch-wrapper .switch-field label.option:focus-visible { + box-shadow: + 0 0 0 2px var(--ds-color-dark-canvas), + 0 0 0 4px var(--ds-color-dark-clickable); +} + +.md-grid { + max-width: min(1800px, 100% - 4rem); +} + +/* ToC collapse toggle: available wherever Material renders the secondary + sidebar (>= 60em), not just on the wide desktop layout (>= 76.25em). */ +@media screen and (min-width: 60em) { + .md-sidebar--secondary { + transition: + width var(--ds-motion-duration) ease, + min-width var(--ds-motion-duration) ease, + opacity var(--ds-motion-duration) ease, + visibility 0s linear 0s; + } + + .md-main__inner { + transition: margin var(--ds-motion-duration) ease; + } + + html[data-ds-toc-collapsed] .md-sidebar--secondary { + width: 0; + min-width: 0; + opacity: 0; + overflow: hidden; + pointer-events: none; + visibility: hidden; + transition: + width var(--ds-motion-duration) ease, + min-width var(--ds-motion-duration) ease, + opacity var(--ds-motion-duration) ease, + visibility 0s linear var(--ds-motion-duration); + } + + html[data-ds-toc-collapsed] .md-main__inner { + margin-right: 80px; + } + + .ds-toc-toggle-wrapper { + position: fixed; + top: 6rem; + right: var(--ds-spacing-xl); + } + + .ds-toc-toggle { + display: flex; + align-items: center; + justify-content: center; + width: var(--ds-spacing-control-height); + height: var(--ds-spacing-control-height); + padding: 0; + margin: 5px 0 0 0; + border: inset 0 0 0 2px var(--ds-color-primary); + border-radius: 50px; + background-color: var(--md-default-bg-color); + color: var(--md-default-fg-color); + cursor: pointer; + transition: var(--ds-motion-transition); + } + + [data-md-color-scheme="slate"] .ds-toc-toggle { + border-color: var(--ds-color-dark-clickable); + } + + .ds-toc-toggle:hover { + color: white; + background-color: var(--ds-color-primary); + } + + .ds-toc-toggle:focus-visible { + outline: none; + box-shadow: + 0 0 0 2px var(--ds-color-on-primary), + 0 0 0 4px var(--ds-color-primary); + } + + [data-md-color-scheme="slate"] .ds-toc-toggle:focus-visible { + box-shadow: + 0 0 0 2px var(--ds-color-dark-canvas), + 0 0 0 4px var(--ds-color-dark-clickable); + } + + .ds-toc-toggle[hidden], + .ds-toc-toggle-wrapper:has(.ds-toc-toggle[hidden]) { + display: none; + } + + .ds-toc-toggle__icon { + display: flex; + align-items: center; + justify-content: center; + } + + .ds-toc-toggle__icon[hidden] { + display: none; + } + + /* tooltip-light */ + .ds-toc-toggle__tooltip { + position: absolute; + top: calc(100% + var(--ds-spacing-xl)); + right: 0; + width: min(14rem, calc(100vw - 2 * var(--ds-spacing-xl))); + padding: var(--ds-spacing-xl) var(--ds-spacing-xxl); + border-radius: var(--ds-rounded-md); + background-color: var(--ds-color-surface-medium); + color: var(--ds-color-ink); + font-size: var(--ds-typography-body-md-font-size); + line-height: var(--ds-typography-body-md-line-height); + text-align: left; + white-space: normal; + overflow-wrap: break-word; + word-wrap: break-word; + hyphens: auto; + box-sizing: border-box; + box-shadow: 0 0 10px var(--ds-color-shadow-elevation); + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; + } + + .ds-toc-toggle__tooltip::before { + content: ""; + position: absolute; + bottom: 100%; + right: calc(var(--ds-spacing-control-height) / 2); + transform: translateX(50%); + border: 8px solid transparent; + border-bottom-color: var(--ds-color-surface-medium); + filter: drop-shadow(0 -2px 1px var(--ds-color-shadow-elevation)); + } + + [data-md-color-scheme="slate"] .ds-toc-toggle__tooltip { + background-color: var(--ds-color-disabled-shape); + color: var(--ds-color-ink); + } + + [data-md-color-scheme="slate"] .ds-toc-toggle__tooltip::before { + border-bottom-color: var(--ds-color-disabled-shape); + } + + .ds-toc-toggle__tooltip--visible { + opacity: 1; + } + + @media (prefers-reduced-motion: reduce) { + .md-sidebar--secondary, + .md-main__inner, + .ds-toc-toggle { + transition: none !important; + } + } +} + +@media screen and (min-width: 76.25em) { + .md-content { + padding-left: 40px; + } + + .md-sidebar--primary, + .md-sidebar--secondary { + transition: + width var(--ds-motion-duration) ease, + min-width var(--ds-motion-duration) ease, + opacity var(--ds-motion-duration) ease, + visibility 0s linear 0s; + } + + .md-main__inner { + transition: margin var(--ds-motion-duration) ease; + } + + html[data-ds-content-wide] .md-sidebar--primary { + width: 0; + min-width: 0; + opacity: 0; + overflow: hidden; + pointer-events: none; + visibility: hidden; + transition: + width var(--ds-motion-duration) ease, + min-width var(--ds-motion-duration) ease, + opacity var(--ds-motion-duration) ease, + visibility 0s linear var(--ds-motion-duration); + } + + html[data-ds-content-wide] .md-main__inner { + margin-left: 0; + } + + html[data-ds-content-wide] .md-content { + border-left-color: transparent; + } + + .ds-content-width-toggle { + --ds-toggle-size: var(--ds-spacing-control-height); + position: fixed; + top: 50%; + margin-top: calc(var(--ds-toggle-size) / -2); + margin-left: calc(var(--ds-toggle-size) / -2); + display: flex; + align-items: center; + justify-content: center; + width: var(--ds-toggle-size); + height: var(--ds-toggle-size); + padding: 0; + border: 2px solid var(--ds-color-border); + border-radius: 50px; + background-color: var(--md-default-bg-color); + color: var(--md-default-fg-color); + cursor: pointer; + transition: var(--ds-motion-transition); + } + + .ds-content-width-toggle:hover { + color: white; + background-color: var(--ds-color-primary); + } + + .ds-content-width-toggle:focus-visible { + outline: none; + box-shadow: + 0 0 0 2px var(--ds-color-on-primary), + 0 0 0 4px var(--ds-color-primary); + } + + [data-md-color-scheme="slate"] .ds-content-width-toggle:focus-visible { + box-shadow: + 0 0 0 2px var(--ds-color-dark-canvas), + 0 0 0 4px var(--ds-color-dark-clickable); + } + + .ds-content-width-toggle[hidden] { + display: none; + } + + .ds-content-width-toggle__icon { + display: flex; + align-items: center; + justify-content: center; + } + + .ds-content-width-toggle__icon[hidden] { + display: none; + } + + html[data-ds-content-wide] .ds-content-width-toggle { + left: var(--ds-spacing-xl); + margin-left: 0; + border: inset 0 0 0 2px var(--ds-color-primary); + border-radius: 50px; + } + + [data-md-color-scheme="slate"] html[data-ds-content-wide] .ds-content-width-toggle { + border-color: var(--ds-color-dark-clickable); + } + + @media (prefers-reduced-motion: reduce) { + .md-sidebar--primary, + .md-sidebar--secondary, + .md-main__inner, + .md-content, + .ds-content-width-toggle, + .ds-toc-toggle, + .ds-switch-wrapper .switch { + transition: none !important; + } + } +} + +/* Remove the opaque background/box-shadow Material adds to the sticky ToC title */ +.md-nav--secondary .md-nav__title { + background-color: transparent; + box-shadow: none; +} diff --git a/css-theirs.css b/css-theirs.css new file mode 100644 index 0000000..1c0c4fd --- /dev/null +++ b/css-theirs.css @@ -0,0 +1,764 @@ +/* Design system tokens — source: frontend/DESIGN.md (living-styleguide, ref=main) */ +:root { + --ds-color-primary: #00759e; + --ds-color-on-primary: #ffffff; + --ds-color-brand-cyan: #00a5e1; + --ds-color-canvas: #ffffff; + --ds-color-surface-bright: #f9f9f9; + --ds-color-surface-medium: #efefef; + --ds-color-ink: #000000; + --ds-color-tertiary: #6d6d6d; + --ds-color-border: #6d6d6d; + --ds-color-disabled-shape: #c6c6c6; + --ds-color-shadow-elevation: #0000001a; + --ds-color-shadow-token: #00000029; + --ds-color-dark-clickable: #77ddff; + --ds-color-dark-ink: #d7e9f4; + --ds-color-dark-ink-secondary: #afc1c7; + --ds-color-dark-canvas: #15202b; + --ds-color-dark-container: #22303c; + --ds-color-dark-hover: #2d3740; + --ds-color-dark-disabled: #84999f; + --ds-rounded-xs: 4px; + --ds-rounded-md: 10px; + --ds-rounded-pill: 32px; + --ds-spacing-xs: 4px; + --ds-spacing-sm: 6px; + --ds-spacing-md: 8px; + --ds-spacing-control-height: 43px; + --ds-spacing-xl: 16px; + --ds-spacing-xxl: 24px; + --ds-motion-duration: 0.3s; + --ds-motion-transition: var(--ds-motion-duration) ease all; +} + +[data-md-color-scheme="default"] { + --md-primary-fg-color: var(--ds-color-on-primary); + --md-primary-bg-color: var(--ds-color-primary); + --md-primary-bg-color--light: var(--ds-color-primary); + --md-default-fg-color--light: var(--ds-color-ink); + + --md-accent-fg-color: var(--ds-color-primary); + --md-accent-fg-color--transparent: #00a5e120; + --md-accent-bg-color: var(--ds-color-canvas); + + --md-typeset-a-color: var(--ds-color-primary); + --md-custom-accent-color: var(--ds-color-primary); + --md-custom-text-color: var(--ds-color-on-primary); + + --language-toggle-active-color: var(--ds-color-on-primary); + --language-toggle-active-text-color: var(--ds-color-primary); + --language-toggle-inactive-text-color: var(--ds-color-on-primary); + + --md-typeset-color: var(--ds-color-ink); + --md-footer-bg-color: var(--ds-color-canvas); + --md-footer-bg-color--dark: var(--ds-color-tertiary); + --md-footer-fg-color: var(--ds-color-tertiary); +} + +[data-md-color-scheme="slate"] { + --md-hue: 210; + + --md-default-fg-color: var(--ds-color-dark-ink); + --md-default-bg-color: var(--ds-color-dark-canvas); + --md-default-fg-color--light: var(--ds-color-dark-ink); + + --md-primary-fg-color: var(--ds-color-dark-container); + --md-primary-bg-color: var(--ds-color-dark-clickable); + --md-primary-bg-color--light: var(--ds-color-dark-clickable); + + --md-accent-fg-color: var(--ds-color-dark-clickable); + --md-accent-fg-color--transparent: #00a5e120; + --md-accent-bg-color: var(--ds-color-canvas); + + --md-typeset-a-color: var(--ds-color-dark-clickable); + --md-custom-accent-color: var(--ds-color-dark-canvas); + --md-custom-text-color: var(--ds-color-dark-ink); + + --language-toggle-active-color: var(--ds-color-dark-container); + --language-toggle-active-text-color: var(--ds-color-dark-clickable); + --language-toggle-inactive-text-color: var(--ds-color-dark-clickable); + + --md-typeset-color: var(--ds-color-dark-ink); + --md-footer-bg-color: var(--ds-color-dark-container); + --md-footer-bg-color--dark: var(--ds-color-dark-container); + --md-footer-fg-color: var(--ds-color-dark-ink-secondary); +} + +@font-face { + font-family: "Inter"; + src: url("../fonts/Inter-Regular.woff") format("woff"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Inter SemiBold"; + src: url("../fonts/Inter-SemiBold.woff") format("woff"); + font-weight: 600; + font-style: normal; +} + +:root { + --md-text-font: Inter, Arial, Helvetica, sans-serif; + + .md-header--shadow { + box-shadow: 0 0 10px var(--ds-color-shadow-elevation); + } + + .md-header { + padding-top: var(--ds-spacing-xs); + padding-bottom: var(--ds-spacing-xs); + } + + .md-search__form { + background-color: var(--md-primary-fg-color); + border: 1px solid var(--md-primary-bg-color); + border-radius: var(--ds-rounded-md); + min-height: var(--ds-spacing-control-height); + } + + [data-md-toggle="search"]:checked ~ .md-header .md-search__form { + border-radius: var(--ds-rounded-md) var(--ds-rounded-md) 0 0; + } + + .md-search__output { + border: 1px solid var(--md-primary-bg-color); + border-radius: 0 0 var(--ds-rounded-md) var(--ds-rounded-md); + } + + .md-tabs__item { + color: var(--md-typeset-color); + opacity: 1; + font-family: "Inter SemiBold", Arial, Helvetica, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 24px; + } + + .md-tabs__item a:hover { + color: var(--md-typeset-a-color); + } + + .md-tabs__item--active { + color: var(--md-typeset-a-color); + opacity: 1; + font-weight: 600; + } + + .md-top:hover { + color: var(--md-default-bg-color); + } + + .md-header__title { + margin-left: var(--ds-spacing-md); + margin-right: var(--ds-spacing-sm); + } + + .md-logo svg { + color: var(--md-default-fg-color--light); + height: 1.6rem; + width: auto; + } + + .md-header__button.md-logo { + margin: var(--ds-spacing-xs); + padding: var(--ds-spacing-xs); + } + + .md-status { + display: none; + } + + .md-sidebar[hidden] ~ .md-content { + border-left: none; + } + + /* Stretch main area on short pages so the content divider reaches the footer */ + .md-main { + display: flex; + flex-direction: column; + } + + .md-main__inner { + flex: 1; + width: 100%; + align-items: stretch; + } + + .md-content { + border-left: solid; + border-width: 1px; + border-color: var(--ds-color-border); + transition: border-color var(--ds-motion-duration) ease; + } + + .md-content .md-typeset h1, + .md-content .md-typeset h2, + .md-content .md-typeset h3, + .md-content .md-typeset h4, + .md-content .md-typeset h5, + .md-content .md-typeset h6 { + font-family: "Inter SemiBold", Arial, Helvetica, sans-serif; + font-weight: 600; + } + + /* Website typography — source: typography.body-website, heading-h*-website */ + body { + font-family: Inter, Arial, Helvetica, sans-serif; + font-size: 18px; + line-height: 27px; + } + + .md-content .md-typeset h1 { + font-size: 45px; + line-height: 58.5px; + margin-bottom: 30px; + } + + .md-content .md-typeset h2 { + font-size: 40px; + line-height: 52px; + margin-bottom: 15px; + } + + .md-content .md-typeset h3 { + font-size: 25px; + line-height: 40px; + margin-bottom: 12px; + } + + .md-content .md-typeset h4 { + font-size: 23px; + line-height: 29.9px; + margin-bottom: 12px; + } + + .md-content .md-typeset h5 { + font-size: 20px; + line-height: 26px; + margin-bottom: 12px; + } + + .md-content .md-typeset h6 { + font-size: 18px; + line-height: 24px; + margin-bottom: 12px; + } + + /* link-primary — no underline at rest */ + .md-typeset a { + text-decoration: none; + color: var(--md-typeset-a-color); + transition: var(--ds-motion-transition); + } + + .md-typeset a:hover { + text-decoration: underline; + text-decoration-thickness: 1px; + } + + [data-md-color-scheme="default"] .md-typeset ul:not([class]) > li { + list-style-image: url("data:image/svg+xml;utf8,"); + } + + [data-md-color-scheme="slate"] .md-typeset ul:not([class]) > li { + list-style-image: url("data:image/svg+xml;utf8,"); + } + + /* table-default — source: docs/components-html-css/Molecules/table.md */ + .md-typeset table:not([class]) { + border: none; + border-collapse: collapse; + border-radius: var(--ds-rounded-md); + box-shadow: none; + font-size: 15px; + line-height: 19px; + white-space: nowrap; + } + + .md-typeset table:not([class]) thead { + font-family: "Inter SemiBold", Arial, Helvetica, sans-serif; + font-weight: 600; + color: var(--md-typeset-color); + } + + /* Rahmen um tbody per Pseudo-Elemente (Default-Stil) */ + .md-typeset table:not([class]) tbody { + position: relative; + } + + .md-typeset table:not([class]) tbody::before, + .md-typeset table:not([class]) tbody::after { + content: ""; + position: absolute; + inset: 0; + border: 1px solid var(--ds-color-disabled-shape); + border-radius: var(--ds-rounded-md); + pointer-events: none; + } + + .md-typeset table:not([class]) th { + padding: 0 15px 7px 15px; + background-color: transparent; + text-align: left; + } + + .md-typeset table:not([class]) td { + padding: 15px; + border: none; + } + + .md-typeset table:not([class]) tbody tr { + height: 50px; + border-bottom: 1px solid var(--ds-color-disabled-shape); + text-align: left; + } + + .md-typeset table:not([class]) tbody tr:last-child { + border-bottom: none; + } + + .md-typeset table:not([class]) tbody tr:hover { + background-color: var(--ds-color-surface-bright); + } + + [data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody::before, + [data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody::after { + border-color: var(--ds-color-dark-disabled); + } + + [data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr { + border-bottom-color: var(--ds-color-dark-disabled); + } + + [data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr:hover { + background-color: var(--ds-color-dark-hover); + } + + .md-path__item:not(:first-child) { + align-items: center; + font-size: 13px; + line-height: 16px; + } + + .md-footer { + font-size: 15px; + line-height: 19px; + } + + .md-footer-meta { + border-top: 1px solid var(--ds-color-disabled-shape); + } +} + +.md-icon svg.lucide { + fill: none; + stroke: currentcolor; + height: 1rem; + width: 1rem; +} + +/* switch-icon-3 — source: docs/components-html-css/Molecules/switch.md (Icon-3) */ +.ds-switch-wrapper.md-header__option { + width: auto; + flex-shrink: 0; + overflow: visible; +} + +.ds-switch-wrapper { + padding: 0; + margin: 0 var(--ds-spacing-md) 0 0; +} + +.ds-switch-wrapper *, +.ds-switch-wrapper *::before, +.ds-switch-wrapper *::after { + box-sizing: border-box; +} + +.ds-switch-wrapper .switch-field { + display: flex; + overflow: hidden; + position: relative; + border-radius: var(--ds-rounded-lg); + align-items: center; + user-select: none; +} + +.ds-switch-wrapper .switch-field input[type="radio"] { + position: absolute; + clip: rect(0, 0, 0, 0); + height: 0.0625rem; + width: 0.0625rem; + border: 0; + overflow: hidden; +} + +.ds-switch-wrapper .switch-field label.option { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 2rem; + width: 2rem; + min-width: 0; + background-color: var(--ds-color-primary); + color: var(--ds-color-on-primary); + font: normal normal 600 0.75rem/1.563rem Inter, Arial, Helvetica, sans-serif; + text-align: center; + padding: 0.25rem; + margin-right: -0.0625rem; + cursor: pointer; + transition: all 0.1s ease-in-out; +} + +.ds-switch-wrapper .switch-field label.option:last-of-type { + margin-right: 0; +} + +.ds-switch-wrapper .switch-field label.option:hover { + cursor: pointer; +} + +.ds-switch-wrapper .switch { + display: flex; + align-items: center; + justify-content: center; + width: 1.75rem; + height: 1.25rem; + padding: 0; + background-color: var(--ds-color-on-primary); + color: var(--ds-color-primary); + border-radius: var(--ds-rounded-pill); + position: absolute; + z-index: 2; + border: 0; + transition: 0.3s ease all; + left: 0.125rem; + pointer-events: none; +} + +.ds-switch-wrapper .switch__icon { + display: none; + align-items: center; + justify-content: center; +} + +.ds-switch-wrapper .switch__icon svg { + height: 0.875rem; + width: 0.875rem; +} + +.ds-switch-wrapper svg.lucide-circle-half path { + fill: currentColor; +} + +.ds-switch-wrapper .switch-field:hover .switch { + transform: translateX(0.125rem); +} + +.ds-switch-wrapper:has(#__palette_1:checked) .switch-field:hover .switch { + transform: none; +} + +.ds-switch-wrapper:has(#__palette_2:checked) .switch-field:hover .switch { + transform: translateX(-0.125rem); +} + +.ds-switch-wrapper:has(#__palette_0:checked) .switch { + left: 0.125rem; +} + +.ds-switch-wrapper:has(#__palette_1:checked) .switch { + left: 2.0625rem; +} + +.ds-switch-wrapper:has(#__palette_2:checked) .switch { + left: 4rem; +} + +.ds-switch-wrapper:has(#__palette_0:checked) .switch__icon--0, +.ds-switch-wrapper:has(#__palette_1:checked) .switch__icon--1, +.ds-switch-wrapper:has(#__palette_2:checked) .switch__icon--2 { + display: flex; +} + +.ds-switch-wrapper .switch-field label.option:focus-visible { + outline: none; + box-shadow: + 0 0 0 2px var(--ds-color-on-primary), + 0 0 0 4px var(--ds-color-primary); + border-radius: 2rem; +} + +/* Dark mode: darker track distinct from header, rounded sliding pill for the active segment */ +[data-md-color-scheme="slate"] .ds-switch-wrapper .switch-field { + background-color: var(--ds-color-dark-canvas); +} + +[data-md-color-scheme="slate"] .ds-switch-wrapper .switch-field label.option { + background-color: var(--ds-color-dark-canvas); + color: var(--ds-color-dark-clickable); +} + +[data-md-color-scheme="slate"] .ds-switch-wrapper .switch { + background-color: var(--ds-color-dark-container); + color: var(--ds-color-dark-clickable); +} + +[data-md-color-scheme="slate"] .ds-switch-wrapper .switch-field label.option:focus-visible { + box-shadow: + 0 0 0 2px var(--ds-color-dark-canvas), + 0 0 0 4px var(--ds-color-dark-clickable); +} + +.md-grid { + max-width: min(1800px, 100% - 4rem); +} + +@media screen and (min-width: 76.25em) { + .md-content { + padding-left: 40px; + } + + .md-sidebar--primary, + .md-sidebar--secondary { + transition: + width var(--ds-motion-duration) ease, + min-width var(--ds-motion-duration) ease, + opacity var(--ds-motion-duration) ease, + visibility 0s linear 0s; + } + + .md-main__inner { + transition: margin var(--ds-motion-duration) ease; + } + + html[data-ds-content-wide] .md-sidebar--primary { + width: 0; + min-width: 0; + opacity: 0; + overflow: hidden; + pointer-events: none; + visibility: hidden; + transition: + width var(--ds-motion-duration) ease, + min-width var(--ds-motion-duration) ease, + opacity var(--ds-motion-duration) ease, + visibility 0s linear var(--ds-motion-duration); + } + + html[data-ds-toc-collapsed] .md-sidebar--secondary { + width: 0; + min-width: 0; + opacity: 0; + overflow: hidden; + pointer-events: none; + visibility: hidden; + transition: + width var(--ds-motion-duration) ease, + min-width var(--ds-motion-duration) ease, + opacity var(--ds-motion-duration) ease, + visibility 0s linear var(--ds-motion-duration); + } + + html[data-ds-content-wide] .md-main__inner { + margin-left: 0; + } + + html[data-ds-toc-collapsed] .md-main__inner { + margin-right: 80px; + } + + html[data-ds-content-wide] .md-content { + border-left-color: transparent; + } + + .ds-content-width-toggle { + --ds-toggle-size: 2rem; + position: fixed; + top: 50%; + margin-top: calc(var(--ds-toggle-size) / -2); + margin-left: calc(var(--ds-toggle-size) / -2); + display: flex; + align-items: center; + justify-content: center; + width: var(--ds-toggle-size); + height: var(--ds-toggle-size); + padding: 0; + border: 2px solid var(--ds-color-border); + border-radius: 50px; + background-color: var(--md-default-bg-color); + color: var(--md-default-fg-color); + cursor: pointer; + transition: var(--ds-motion-transition); + } + + .ds-content-width-toggle:hover { + color: var(--ds-color-on-primary); + background-color: var(--ds-color-primary); + + } + + .ds-content-width-toggle:focus-visible { + outline: none; + box-shadow: + 0 0 0 2px var(--ds-color-on-primary), + 0 0 0 4px var(--ds-color-primary); + } + + [data-md-color-scheme="slate"] .ds-content-width-toggle:focus-visible { + box-shadow: + 0 0 0 2px var(--ds-color-dark-canvas), + 0 0 0 4px var(--ds-color-dark-clickable); + } + + .ds-content-width-toggle[hidden] { + display: none; + } + + .ds-content-width-toggle__icon { + display: flex; + align-items: center; + justify-content: center; + } + + .ds-content-width-toggle__icon[hidden] { + display: none; + } + + html[data-ds-content-wide] .ds-content-width-toggle { + --ds-toggle-size: var(--ds-spacing-control-height); + left: var(--ds-spacing-xl); + margin-left: 0; + border: inset 0 0 0 2px var(--ds-color-primary); + border-radius: 50px; + } + + [data-md-color-scheme="slate"] html[data-ds-content-wide] .ds-content-width-toggle { + border-color: var(--ds-color-dark-clickable); + } + + .ds-toc-toggle-wrapper { + position: fixed; + top: 6rem; + right: var(--ds-spacing-xl); + } + + .ds-toc-toggle { + display: flex; + align-items: center; + justify-content: center; + width: var(--ds-spacing-control-height); + height: var(--ds-spacing-control-height); + padding: 0; + margin: 5px 0 0 0; + border: inset 0 0 0 2px var(--ds-color-primary); + border-radius: 50px; + background-color: var(--md-default-bg-color); + color: var(--md-default-fg-color); + cursor: pointer; + transition: var(--ds-motion-transition); + } + + [data-md-color-scheme="slate"] .ds-toc-toggle { + border-color: var(--ds-color-dark-clickable); + } + + .ds-toc-toggle:hover { + color: var(--ds-color-on-primary); + background-color: var(--ds-color-primary); + } + + .ds-toc-toggle:focus-visible { + outline: none; + box-shadow: + 0 0 0 2px var(--ds-color-on-primary), + 0 0 0 4px var(--ds-color-primary); + } + + [data-md-color-scheme="slate"] .ds-toc-toggle:focus-visible { + box-shadow: + 0 0 0 2px var(--ds-color-dark-canvas), + 0 0 0 4px var(--ds-color-dark-clickable); + } + + .ds-toc-toggle[hidden], + .ds-toc-toggle-wrapper:has(.ds-toc-toggle[hidden]) { + display: none; + } + + .ds-toc-toggle__icon { + display: flex; + align-items: center; + justify-content: center; + } + + .ds-toc-toggle__icon[hidden] { + display: none; + } + + /* tooltip-light */ + .ds-toc-toggle__tooltip { + position: absolute; + top: calc(100% + var(--ds-spacing-xl)); + right: 0; + width: min(14rem, calc(100vw - 2 * var(--ds-spacing-xl))); + padding: var(--ds-spacing-xl) var(--ds-spacing-xxl); + border-radius: var(--ds-rounded-md); + background-color: var(--ds-color-surface-medium); + color: var(--ds-color-ink); + font-size: 15px; + line-height: 24px; + text-align: left; + white-space: normal; + overflow-wrap: break-word; + word-wrap: break-word; + hyphens: auto; + box-sizing: border-box; + box-shadow: 0 0 10px var(--ds-color-shadow-elevation); + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; + } + + .ds-toc-toggle__tooltip::before { + content: ""; + position: absolute; + bottom: 100%; + right: calc(var(--ds-spacing-control-height) / 2); + transform: translateX(50%); + border: 8px solid transparent; + border-bottom-color: var(--ds-color-surface-medium); + filter: drop-shadow(0 -2px 1px var(--ds-color-shadow-elevation)); + } + + [data-md-color-scheme="slate"] .ds-toc-toggle__tooltip { + background-color: var(--ds-color-disabled-shape); + color: var(--ds-color-ink); + } + + [data-md-color-scheme="slate"] .ds-toc-toggle__tooltip::before { + border-bottom-color: var(--ds-color-disabled-shape); + } + + .ds-toc-toggle__tooltip--visible { + opacity: 1; + } + + .ds-toc-toggle__tooltip[hidden] { + display: none; + } + + @media (prefers-reduced-motion: reduce) { + .md-sidebar--primary, + .md-sidebar--secondary, + .md-main__inner, + .md-content, + .ds-content-width-toggle, + .ds-toc-toggle, + .ds-switch-wrapper .switch { + transition: none !important; + } + } +} diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..d2c0b9d --- /dev/null +++ b/docs/README.md @@ -0,0 +1,25 @@ +--- +hide: + - navigation + - toc +--- + +# Projekt-Space + +Willkommen im Projekt-Space. Von hier aus gelangen Sie in die zentralen Bereiche der Dokumentation. + +
Hier dokumentieren Sie die Architektur des Projekts – von der fachlichen Einordnung bis zu technischen Sichten und Schnittstellen.
+Projektspace: Im Template liegt zunächst nur diese Datei. Unterordner und konkrete Artefakte entstehen im Projektverlauf und werden mit dem Blueprint Architecture Toolkit (BAT) für die Architektur angelegt.
+ + + + + + + + + + + + + +0&&i[i.length-1])&&(p[0]===6||p[0]===2)){r=0;continue}if(p[0]===3&&(!i||p[1]>i[0]&&p[1]=e.length&&(e=void 0),{value:e&&e[o++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function K(e,t){var r=typeof Symbol=="function"&&e[Symbol.iterator];if(!r)return e;var o=r.call(e),n,i=[],s;try{for(;(t===void 0||t-- >0)&&!(n=o.next()).done;)i.push(n.value)}catch(a){s={error:a}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(s)throw s.error}}return i}function B(e,t,r){if(r||arguments.length===2)for(var o=0,n=t.length,i;o