@charset "utf-8";
/*
framework.css - last update: 2025/05/03
IT IS NOT RECOMMENDED TO EDIT THIS FILE (TO AVOID TROUBLESHOOTING AFTER UPDATING) - DO CHANGES/OVERWRITES IN template.css or a custom css-file ONLY
*/

/* begin table of contents ------------------------------------------------------------------------------------------ */
/*
- VARIABLES ------------------------

- MAIN STYLES ------------------------
B ------------------------
  - basic selectors and classes
  - boxes
  - buttons

C ------------------------
  - clearfix

D ------------------------
  - disabled

F ------------------------
  - flex-containers
  - forms: basic elements
  - forms: progressbar
  - forms: range-slider

G ------------------------
  - grid-containers

H ------------------------
  - headlines
  - hyperlinks & anchors

I ------------------------
  - icons

L ------------------------
  - lists

N ------------------------
  - navigation

S ------------------------
  - system messages

T ------------------------
  - tables
  - transforms

- MEDIA QUERIES ------------------------
- browser specific css
- css for print only
- css for dark-mode
*/
/* end table of contents ------------------------------------------------------------------------------------------ */

/* ---------------------------------------------- BEGIN VARIABLES & TOKENS -------------------------------------------------- */
:root {
    color-scheme: light dark; /* activate color-scheme detection for css */
}

html {
    /* BEGIN WEBSITE-GRID AND GLOBAL SETTINGS ------------------------------------------------------------------------------------------ */
    /* max-widths */
    --max-width: 144rem; /* width used to limit website-parts */
    --header-max-width: var(--max-width); /* width used to limit header-content */
    --width-limitation-wrapper: var(--max-width); /* width used to limit width-limitation-wrapper in main-content */
    --footer-max-width: var(--max-width); /* width used to limit footer-content */

    /* grid */
    --grid-columns: 12; /* grid-columns */
    --grid-small-span: 3; /* default column span smaller part */
    --grid-half-span: calc(var(--grid-columns) / 2); /* half column span of grid columns */
    --grid-large-span: calc(var(--grid-columns) - var(--grid-small-span)); /* default column span larger part */
    --grid-layout-columns: calc(var(--grid-columns) / var(--grid-small-span)); /* layout/optical columns */
    --grid-gap: var(--default-gap); /* grid-gap for grid-items */

    /* golden-ratio */
    --golden-ratio-small-width: 38.2%; /* width for small-item for golden-ratio */
    --golden-ratio-large-width: 61.8%; /* width for large-item for golden-ratio */

    /* paddings, margins, gaps, radii, ratios */
    --default-padding: 1rem; /* default paddings */
    --default-padding-half: calc(var(--default-padding) / 2); /* half of default padding */
    --default-padding-third: calc(var(--default-padding) / 3); /* third of default padding */
    --default-margin: 1rem; /* default margins */
    --default-margin-half: calc(var(--default-margin) / 2); /* half of default margin */
    --default-margin-third: calc(var(--default-margin) / 3); /* third of default margin */
    --default-gap: 2rem; /* default gap for flex- and grid-containers */
    --default-gap-half: calc(var(--default-gap) / 2); /* half of default gap for flex- and grid-containers */
    --default-gap-third: calc(var(--default-gap) / 3); /* third of default gap for flex- and grid-containers */
    --icon-and-text-gap: .5rem; /* gap between icons and text if wrapped inside .icontext-wrapper */
    --default-border-radius: 0; /* default radius */
    --full-circle: 50%; /* radius for full circles */
    --default-aspect-ratio: auto; /* default aspect-ratio */
    /* END WEBSITE-GRID AND GLOBAL SETTINGS ------------------------------------------------------------------------------------------ */

    /* BEGIN SITE HEADER ------------------------------------------------------------------------------------------ */
    --site-header-border: var(--default-border); /* border for site-header */
    --site-header-background: var(--color-scheme-background); /* background for site-header */
    --site-header-text-color: var(--color-scheme-text-color); /* text-color for site-header */
    --site-header-padding: var(--default-padding); /* padding for site-header */
    /* END SITE HEADER ------------------------------------------------------------------------------------------ */

    /* BEGIN MAIN NAVIGATION ------------------------------------------------------------------------------------------ */
    --main-navigation-background: var(--color-scheme-background); /* background(-color) for entire main navigation (and all sub-entries) */
    --main-navigation-background-highlighted: var(--color-white); /* background(-color) for highlighted entries in main navigation (and all sub-entries) */
    --main-navigation-border: var(--default-border); /* border for main navigation (and all sub-entries) */
    --main-navigation-border-radius: var(--default-border-radius); /* border-radius for main navigation (and bottom of sub-entries-list) */
    --main-navigation-hyperlink-color: var(--color-scheme-text-color); /* hyperlink-color for main-navigation */
    --main-navigation-hyperlink-color-highlighted: var(--hyperlink-color); /* highlighted hyperlink-color for main-navigation */
    --main-navigation-hyperlink-color-active: var(--hyperlink-color); /* active hyperlink-color for  main-navigation */
    --main-navigation-main-level-icon-size: var(--default-icon-size); /* icon-size for icons on main-level of main-navigation */
    --main-navigation-sub-level-icon-size: var(--default-icon-size); /* icon-size for icons on (all) sub-levels of main-navigation */
    /* END MAIN NAVIGATION ------------------------------------------------------------------------------------------ */

    /* BEGIN SITE FOOTER ------------------------------------------------------------------------------------------ */
    --site-footer-border: var(--default-border); /* border for site-footer */
    --site-footer-background: var(--color-scheme-background); /* background for site-footer */
    --site-footer-headline-color: var(--headline-text-color); /* headline-text-color for site-footer */
    --site-footer-text-color: var(--color-scheme-text-color); /* text-color for site-footer */
    --site-footer-hyperlink-color: var(--hyperlink-color); /* hyperlink-color for site-footer */
    --site-footer-hyperlink-color-highlighted: var(--hyperlink-color-highlighted); /* highlighted hyperlink-color for site-footer */
    --site-footer-text-decoration: none; /* text-decoration for hyperlinks in site-footer */
    --site-footer-text-decoration-highlighted: underline; /* text-decoration for highlighted hyperlinks in site-footer */
    --site-footer-text-decoration-color-highlighted: var(--color-scheme-text-color); /* text-decoration-color for highlighted hyperlinks in site-footer */
    --site-footer-padding: var(--default-padding); /* padding for site-footer */
    /* END SITE FOOTER ------------------------------------------------------------------------------------------ */

    /* BEGIN BACKGROUNDS ------------------------------------------------------------------------------------------ */
    /* default backgrounds */
    --default-background: var(--color-light-gray); /* default-background(-color) - will not be influenced by color-scheme */
    --default-background-color-reduced-opacity: hsla(var(--default-background), var(--reduced-opacity)); /* default-background-color with reduced opacity */;

    /* disabled backgrounds - keep identical for light- and dark-mode due to accessibility reasons */
    --disabled-background-lightness: 78%; /* disabled-background-color-lightness */
    --disabled-background: hsl(from var(--color-black) h s var(--disabled-background-lightness)); /* disabled-background(-color) */
    --disabled-background-reduced-opacity: hsla(var(--disabled-background), var(--reduced-opacity)); /* disabled-background-color with reduced opacity */

    /* background-lightness for filles inputfields (default, :valid, :invalid) */
    --form-input-filled-background-lightness: 97%;
    /* END BACKGROUNDS ------------------------------------------------------------------------------------------ */

    /* BEGIN BORDERS AND OUTLINES ------------------------------------------------------------------------------------------ */
    /* borders */
    --default-border-color: var(--color-scheme-text-color); /* border-color */
    --default-border-width: .1rem; /* border-width */
    --default-border-style: solid; /* border-style */
    --default-border: var(--default-border-width) var(--default-border-style) var(--default-border-color); /* default-border */
    --default-border-reduced-opacity: var(--default-border-width) var(--default-border-style) var(--secondary-color-reduced-opacity); /* default-border with reduced opacity */
    --error-border: var(--default-border-width) var(--default-border-style) var(--error-color); /* border with error-color */
    --success-border: var(--default-border-width) var(--default-border-style) var(--success-color); /* border with success-color */
    --primary-border: var(--default-border-width) var(--default-border-style) var(--primary-color); /* border with primary-color (i.e. for :focus-status) */
    --secondary-border: var(--default-border-width) var(--default-border-style) var(--secondary-color); /* border with secondary-color */
    --tertiary-border: var(--default-border-width) var(--default-border-style) var(--tertiary-color); /* border with tertiary-color */
    --disabled-border: var(--default-border-width) var(--default-border-style) var(--disabled-color); /* border with disabled-color */
    --transparent-border: var(--default-border-width) var(--default-border-style) transparent; /* transparent border */

    /* outlines */
    --default-outline-color: var(--color-scheme-text-color); /* outline-color */
    --default-outline-width: 0; /* outline-width */
    --default-outline-style: var(--default-border-style); /* outline-style */
    --default-outline: var(--default-outline-width) var(--default-outline-style) var(--default-outline-color); /* default-outline */
    --default-outline-reduced-opacity: var(--default-outline-width) var(--default-outline-style) var(--secondary-color-reduced-opacity); /* default-outline with reduced opacity */
    --error-outline: var(--default-outline-width) var(--default-outline-style) var(--error-color); /* outline with error-color */
    --success-outline: var(--default-outline-width) var(--default-outline-style) var(--success-color); /* outline with success-color */
    --primary-outline: var(--default-outline-width) var(--default-outline-style) var(--primary-color); /* outline with primary-color (i.e. for :focus-status) */
    --secondary-outline: var(--default-outline-width) var(--default-outline-style) var(--secondary-color); /* outline with secondary-color */
    --tertiary-outline: var(--default-outline-width) var(--default-outline-style) var(--tertiary-color); /* outline with tertiary-color */
    --disabled-outline: var(--default-outline-width) var(--default-outline-style) var(--disabled-color); /* outline with disabled-color */
    --transparent-outline: var(--default-outline-width) var(--default-outline-style) transparent; /* transparent outline */
    /* END BORDERS AND OUTLINES ------------------------------------------------------------------------------------------ */

    /* BEGIN COLORS ------------------------------------------------------------------------------------------ */
    /* black */
    --color-black: hsl(0, 0%, 0%); /* (pure) black color - values are used as base for all colors */
    --color-black-reduced-opacity: hsl(from var(--color-black) h s l / var(--reduced-opacity)); /* pure-white-color with reduced opacity */

    /* white */
    --color-white: hsl(0, 0%, 100%); /* (pure) white color */
    --color-white-reduced-opacity: hsl(from var(--color-white) h s l / var(--reduced-opacity)); /* pure-white-color with reduced opacity */

    /* shaded of gray */
    --color-gray-10: hsl(from var(--color-black) h s 90%); /* gray 90% lightness */
    --color-gray-20: hsl(from var(--color-black) h s 80%); /* gray 80% lightness */
    --color-gray-30: hsl(from var(--color-black) h s 70%); /* gray 70% lightness */
    --color-gray-40: hsl(from var(--color-black) h s 60%); /* gray 60% lightness */
    --color-gray-50: hsl(from var(--color-black) h s 50%); /* gray 50% lightness */
    --color-gray-60: hsl(from var(--color-black) h s 40%); /* gray 40% lightness */
    --color-gray-70: hsl(from var(--color-black) h s 30%); /* gray 30% lightness */
    --color-gray-80: hsl(from var(--color-black) h s 20%); /* gray 20% lightness */
    --color-gray-90: hsl(from var(--color-black) h s 10%); /* gray 10% lightness */

    /* predefined shades of gray */
    --color-light-gray: var(--color-gray-10); /* assign alternative variable for light-gray-color */
    --color-medium-gray: var(--color-gray-50); /* assign alternative variable for medium-gray-color */
    --color-dark-gray: var(--color-gray-90); /* assign alternative variable for dark-gray-color */

    /* error-colors - keep identical for light- and dark-mode due to accessibility reasons */
    --error-color-hue: 8; /* error-color-hue */
    --error-color-saturation: 100%; /* error-color-saturation */
    --error-color-lightness: 36%; /* error-color-lightness */
    --error-color: hsl(var(--error-color-hue), var(--error-color-saturation), var(--error-color-lightness)); /* error-color */

    /* warning-colors - keep identical for light- and dark-mode due to accessibility reasons */
    --warning-color-hue: 46; /* warning-color-hue */
    --warning-color-saturation: 100%; /* warning-color-saturation */
    --warning-color-lightness: 45%; /* warning-color-lightness */
    --warning-color: hsl(var(--warning-color-hue), var(--warning-color-saturation), var(--warning-color-lightness)); /* warning-color */

    /* success-colors - keep identical for light- and dark-mode due to accessibility reasons */
    --success-color-hue: 116; /* success-color-hue */
    --success-color-saturation: 100%; /* success-color-saturation */
    --success-color-lightness: 23%; /* success-color-lightness */
    --success-color: hsl(var(--success-color-hue), var(--success-color-saturation), var(--success-color-lightness)); /* success-color */

    /* info-colors - keep identical for light- and dark-mode due to accessibility reasons */
    --info-color-hue: 217; /* info-color-hue */
    --info-color-saturation: 100%; /* info-color-saturation */
    --info-color-lightness: 63%; /* info-color-lightness */
    --info-color: hsl(var(--info-color-hue), var(--info-color-saturation), var(--info-color-lightness)); /* info-color */

    /* primary-color (i.e. for primary-buttons) */
    --primary-color-hue: 201; /* primary-color-hue */
    --primary-color-saturation: 93%; /* primary-color-saturation */
    --primary-color-lightness: 26%; /* primary-color-lightness */
    --primary-color-hsl-values: var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness); /* primary-color hsl-values */
    --primary-color: hsl(var(--primary-color-hsl-values)); /* primary-color */
    --primary-color-reduced-opacity: hsl(from var(--primary-color) h s l / var(--reduced-opacity)); /* primary-color with reduced opacity */

    /* secondary-color (i.e. for secondary-buttons) */
    --secondary-color-hue: 0; /* secondary-color-hue */
    --secondary-color-saturation: 0%; /* secondary-color-saturation */
    --secondary-color-lightness: 30%; /* secondary-color-lightness */
    --secondary-color-hsl-values: var(--secondary-color-hue), var(--secondary-color-saturation), var(--secondary-color-lightness); /* secondary-color hsl-values */
    --secondary-color: hsl(var(--secondary-color-hsl-values)); /* secondary-color */
    --secondary-color-reduced-opacity: hsl(from var(--secondary-color) h s l / var(--reduced-opacity)); /* secondary-color with reduced opacity */

    /* tertiary-color (i.e. for tertiary-buttons) */
    --tertiary-color-hue: 201; /* tertiary-color-hue */
    --tertiary-color-saturation: 93%; /* tertiary-color-saturation */
    --tertiary-color-lightness: 70%; /* tertiary-color-lightness */
    --tertiary-color-hsl-values: var(--tertiary-color-hue), var(--tertiary-color-saturation), var(--tertiary-color-lightness); /* tertiary-color hsl-values */
    --tertiary-color: hsl(var(--tertiary-color-hsl-values)); /* tertiary-color */
    --tertiary-color-reduced-opacity: hsl(from var(--tertiary-color) h s l / var(--reduced-opacity)); /* tertiary-color with reduced opacity */

    /* text-colors */
    --default-text-color-hue: 0; /* default-text-color-hue */
    --default-text-color-saturation: 0%; /* default-text-color-saturation */
    --default-text-color-lightness: 15%; /* default-text-color-lightness */
    --default-text-color-hsl-values: var(--default-text-color-hue), var(--default-text-color-saturation), var(--default-text-color-lightness); /* default-text-color-hsl-values */
    --default-text-color: hsla(var(--default-text-color-hsl-values), var(--reduced-opacity)); /* default-text-color - will not be influenced by color-scheme */

    /* hyperlink-color (default) (i.e. for :link, :visited) */
    --hyperlink-color-hue-light-mode: var(--primary-color-hue); /* hyperlink-color-hue for light-mode */
    --hyperlink-color-saturation-light-mode: var(--primary-color-saturation); /* hyperlink-color-saturation for light-mode */
    --hyperlink-color-lightness-light-mode: var(--primary-color-lightness); /* hyperlink-color-lightness  for light-mode */
    --hyperlink-color-hue-dark-mode: var(--primary-color-hue); /* hyperlink-color-hue for dark-mode */
    --hyperlink-color-saturation-dark-mode: var(--primary-color-saturation); /* hyperlink-color-saturation for dark-mode */
    --hyperlink-color-lightness-dark-mode: 40%; /* hyperlink-color-lightness for dark-mode */
    --hyperlink-color: light-dark(hsl(var(--hyperlink-color-hue-light-mode), var(--hyperlink-color-saturation-light-mode), var(--hyperlink-color-lightness-light-mode)), hsl(var(--hyperlink-color-hue-dark-mode), var(--hyperlink-color-saturation-dark-mode), var(--hyperlink-color-lightness-dark-mode))); /* hyperlink-color */

    /* hyperlink-color (highlighted) (i.e. for :hover, :active, :focus, .active) */
    --hyperlink-color-highlighted-hue-light-mode: var(--primary-color-hue); /* hyperlink-color-hue for light-mode */
    --hyperlink-color-highlighted-saturation-light-mode: var(--primary-color-saturation); /* hyperlink-color-saturation for light-mode */
    --hyperlink-color-highlighted-lightness-light-mode: var(--primary-color-lightness); /* hyperlink-color-lightness for light-mode */
    --hyperlink-color-highlighted-hue-dark-mode: var(--primary-color-hue); /* hyperlink-color-hue for dark-mode */
    --hyperlink-color-highlighted-saturation-dark-mode: var(--primary-color-saturation); /* hyperlink-color-saturation for dark-mode */
    --hyperlink-color-highlighted-lightness-dark-mode: 60%; /* hyperlink-color-lightness for dark-mode */
    --hyperlink-color-highlighted: light-dark(hsl(var(--hyperlink-color-highlighted-hue-light-mode), var(--hyperlink-color-highlighted-saturation-light-mode), var(--hyperlink-color-highlighted-lightness-light-mode)), hsl(var(--hyperlink-color-highlighted-hue-dark-mode), var(--hyperlink-color-saturation-dark-mode), var(--hyperlink-color-highlighted-lightness-dark-mode))) !important; /* hyperlink-color */

    /* colors for disabled elements */
    --disabled-color: var(--color-gray-70); /* disabled-color - do not set light-dark-mode (color should remain the same) */
    --disabled-color-label-light-mode: var(--disabled-color);
    --disabled-color-label-dark-mode: var(--color-gray-50);
    --disabled-color-label: light-dark(var(--disabled-color-label-light-mode), var(--disabled-color-label-dark-mode));
    /* END COLORS ------------------------------------------------------------------------------------------ */

    /* BEGIN FONTS AND TYPOGRAPHY ------------------------------------------------------------------------------------------ */
    --default-font-family: arial, sans-serif; /* default-font-family */

    /* font-sizes */
    --root-font-size: 62.5%; /* default size is 16px, 62.5% of that is 10px = 1rem */
    --default-font-size: var(--font-size-medium); /* default font-size for text-elements */
    --font-size-small: 1.2rem; /* font-size for small text */
    --font-size-medium: 1.4rem; /* font-size for default/medium text */
    --font-size-large: 1.6rem; /* font-size for large text */

    /* font-weights */
    --default-font-weight: var(--font-weight-normal); /* default font-weight for text-elements */
    --font-weight-thin: 100; /* font-weight for thin text (must be supported by font-family) */
    --font-weight-extra-light: 200; /* font-weight for extra-light text (must be supported by font-family) */
    --font-weight-light: 300; /* font-weight for light text (must be supported by font-family) */
    --font-weight-normal: 400; /* font-weight for default text */
    --font-weight-medium: 500; /* font-weight for medium text (must be supported by font-family) */
    --font-weight-semi-bold: 600; /* font-weight for semi-bold text (must be supported by font-family) */
    --font-weight-bold: 700; /* font-weight for bold text */
    --font-weight-extra-bold: 800; /* font-weight for extra-bold text (must be supported by font-family) */
    --font-weight-black: 900; /* font-weight for black text (must be supported by font-family) */

    /* icon-sizes */
    --default-icon-size: var(--icon-size-medium); /* default font-size for icons */
    --icon-size-small: 1.2rem; /* font-size for small icons */
    --icon-size-medium: 1.4rem; /* font-size for default/medium icons */
    --icon-size-large: 1.6rem; /* font-size for small icons */

    /* line-heights */
    --default-line-height: 1.4; /* line-height - may not be set as percentage to work properly in calc() */
    --line-height-none: 1; /* may not be set to zero and may not be set as percentage to work properly in calc() */
    --line-of-text-height: calc(var(--default-font-size) * var(--default-line-height)); /* height of one line of (default) text */

    /* text-decorations */
    --hyperlink-text-decoration: underline; /* text-decoration for hyperlinks */
    --hyperlink-text-decoration-color: var(--hyperlink-color); /* text-decoration-color for hyperlinks */
    --hyperlink-text-decoration-style: solid; /* text-decoration-style for hyperlinks */
    --hyperlink-text-decoration-thickness: auto; /* text-decoration-thickness for hyperlinks */
    --hyperlink-text-decoration-highlighted: none; /* text-decoration for highlighted (:hover, :active, :focus) hyperlinks */

    /* headlines */
    --headline-font-family: var(--default-font-family); /* font-family for headlines */
    --headline-font-size-h1: 3.6rem; /* font-size for h1 */
    --headline-font-size-h2: 2.8rem; /* font-size for h2 */
    --headline-font-size-h3: 2.4rem; /* font-size for h3 */
    --headline-font-size-h4: 2rem; /* font-size for h4 */
    --headline-font-size-h5: 1.8rem; /* font-size for h5 */
    --headline-font-size-h6: 1.6rem; /* font-size for h6 */
    --headline-text-color: var(--color-scheme-text-color); /* text-color for headlines */
    --headline-text-transform: none; /* text-transform for headline */
    --headline-line-height: 1.3; /* line-height for headlines */
    --headline-font-weight: var(--font-weight-bold); /* font-weight for headlines */
    --headline-margin-top: calc(var(--default-margin) * 2); /* margin-top for headlines */
    --headline-margin-bottom: var(--default-margin); /* margin-bottom for headlines */
    /* END FONTS AND TYPOGRAPHY ------------------------------------------------------------------------------------------ */

    /* BEGIN BOXES ------------------------------------------------------------------------------------------ */
    --box-background: var(--color-scheme-background); /* background(-color) for entire box (could be partially covered by box-header-background(-color) if box header exists) */
    --box-header-background: var(--primary-color); /* background(-color) for box-header */
    --box-footer-background: none; /* background(-color) for box-footer */
    --box-border-width: var(--default-border-width); /* border-width for boxes */
    --box-border-style: var(--default-border-style); /* border-style for boxes */
    --box-border-color: var(--default-border-color); /* border-color for boxes */
    --box-border: var(--box-border-width) var(--box-border-style) var(--box-border-color); /* border for boxes */
    --box-border-radius: var(--default-border-radius); /* border-radius for boxes */
    --box-header-text-color: var(--color-white); /* text-color for box-header */
    --box-header-padding: calc(var(--default-padding) / 2) var(--default-padding); /* padding for box-header */
    --box-body-text-color: var(--color-scheme-text-color); /* text-color for box-header */
    --box-body-padding: var(--default-padding); /* padding for box-body */
    --box-footer-padding: var(--default-padding); /* padding for box-footer */
    --box-footer-text-color: var(--color-scheme-text-color); /* text-color for box-header */
    --box-box-shadow: var(--default-box-shadow); /* box-shadow for boxes */
    /* END BOXES ------------------------------------------------------------------------------------------ */

    /* BEGIN BUTTONS ------------------------------------------------------------------------------------------ */
    /* button typography */
    --button-text-color-light-mode: var(--color-white); /* text-color for buttons in light-mode */
    --button-text-color-dark-mode: var(--color-white); /* text-color for buttons in dark-mode */
    --button-text-color: light-dark(var(--button-text-color-light-mode), var(--button-text-color-dark-mode)); /* text-color for buttons */
    --button-text-color-highlighted: var(--secondary-color); /* highlighted text-color for buttons */
    --button-font-size: var(--font-size-medium); /* font-size for buttons */
    --button-font-weight: var(--font-weight-bold); /* font-weight for buttons */
    --button-line-height: var(--line-height-none); /* line-height for buttons */
    --button-primary-text-color: var(--button-text-color); /* text-color for primary-buttons */
    --button-primary-text-color-highlighted: var(--primary-color); /* highlighted text-color for primary-buttons */
    --button-secondary-text-color: var(--button-text-color); /* text-color for primary-buttons */
    --button-secondary-text-color-highlighted: var(--primary-color); /* highlighted text-color for primary-buttons */
    --button-tertiary-text-color: var(--button-text-color); /* text-color for primary-buttons */
    --button-tertiary-text-color-highlighted: var(--primary-color); /* highlighted text-color for primary-buttons */

    /* button border and outline for (default) buttons */
    --button-outline: var(--default-outline); /* outline for (default) buttons */
    --button-outline-highlighted: var(--default-outline); /* outline for (default) buttons */
    --button-border-width: var(--default-border-width); /* border-width for (default) buttons */
    --button-border-style: var(--default-border-style); /* border-style for (default) buttons */
    --button-border-color: var(--default-border-color); /* border-color for (default) buttons */
    --button-border: var(--button-border-width) var(--button-border-style) var(--button-border-color); /* border for (default) buttons */
    --button-border-highlighted: var(--secondary-border); /* border for highlighted (default) buttons */
    --button-border-radius: var(--default-border-radius); /* border-radius for (default) buttons */

    /* button border and outline for primary-buttons */
    --button-primary-outline: var(--default-outline); /* outline for primary-buttons */
    --button-primary-outline-highlighted: var(--default-outline); /* outline for primary-buttons */
    --button-primary-border-width: var(--default-border-width); /* border-width for primary-buttons */
    --button-primary-border-style: var(--default-border-style); /* border-style for primary-buttons */
    --button-primary-border-color: var(--primary-color); /* border-color for primary-buttons */
    --button-primary-border: var(--button-primary-border-width) var(--button-primary-border-style) var(--button-primary-border-color); /* border for primary-buttons */
    --button-primary-border-highlighted: var(--button-primary-border); /* border for highlighted primary-buttons */
    --button-primary-border-radius: var(--button-border-radius); /* border-radius for primary-buttons */

    /* button border and outline for tertiary-buttons */
    --button-tertiary-outline: var(--default-outline); /* outline for tertiary-buttons */
    --button-tertiary-outline-highlighted: var(--default-outline); /* outline for tertiary-buttons */
    --button-tertiary-border-width: var(--default-border-width); /* border-width for tertiary-buttons */
    --button-tertiary-border-style: var(--default-border-style); /* border-style for tertiary-buttons */
    --button-tertiary-border-color: var(--tertiary-color); /* border-color for tertiary-buttons */
    --button-tertiary-border: var(--button-tertiary-border-width) var(--button-tertiary-border-style) var(--button-tertiary-border-color); /* border for tertiary-buttons */
    --button-tertiary-border-highlighted: var(--button-tertiary-border); /* border for highlighted tertiary-buttons */
    --button-tertiary-border-radius: var(--button-border-radius); /* border-radius for tertiary-buttons */

    /* button backgrounds */
    --button-background: var(--secondary-color); /* background(-color) for (default) buttons */
    --button-background-highlighted: var(--color-white); /* background for highlighted buttons */
    --button-primary-background: var(--primary-color); /* background(-color) for primary-buttons */
    --button-primary-background-highlighted: var(--color-white); /* background for highlighted primary-buttons */
    --button-tertiary-background: var(--tertiary-color); /* background(-color) for tertiary-buttons */
    --button-tertiary-background-highlighted: var(--color-white); /* background for highlighted tertiary-buttons */

    /* button dimensions */
    --button-padding: var(--default-padding); /* padding for button */
    --button-min-width: var(--button-min-width-medium); /* required to keep buttons identical in size across different browsers */
    --button-min-height: var(--button-min-height-medium); /* required to keep buttons identical in size across different browsers */

    /* small buttons */
    --button-min-width-small: 3rem; /* minimum width for small buttons */
    --button-min-height-small: 3rem; /* minimum height for small buttons */
    --button-font-size-small: var(--font-size-small); /* font-size for small buttons */
    --button-padding-small: calc(var(--button-padding) / 2); /* padding for small buttons */

    /* default/medium buttons */
    --button-min-width-medium: 4rem; /* minimum width for medium buttons */
    --button-min-height-medium: 4rem; /* minimum height for medium buttons */

    /* large buttons */
    --button-font-size-large: var(--font-size-large); /* font-size for large buttons */
    --button-min-width-large: 6rem; /* minimum width for large buttons */
    --button-min-height-large: 6rem; /* minimum height for large buttons */
    --button-padding-large: calc(var(--button-padding) * 2); /* padding for large buttons */

    /* buttons with large icon */
    --button-large-icon-icon-size: 5rem; /* icon-size for button with large-icon */

    /* buttons shadow */
    --button-box-shadow: none; /* box-shadow for buttons */
    /* END BUTTONS ------------------------------------------------------------------------------------------ */

    /* BEGIN FORMS AND FIELDSETS ------------------------------------------------------------------------------------------ */
    /* fieldsets */
    --fieldset-background: var(--color-scheme-background); /* background(-color) for fieldsets */
    --fieldset-border: var(--default-border); /* border for fieldsets */
    --fieldset-border-radius: var(--default-border-radius); /* border-radius for fieldsets */
    --fieldset-box-shadow: none; /* box-shadow for fieldsets */
    --fieldset-padding: calc(var(--default-padding) * 2); /* padding for fieldsets */
    --fieldset-margin: 0 0 calc(var(--default-margin) * 2) 0; /* margin for fieldsets */

    /* legends */
    --legend-text-color: var(--color-scheme-text-color); /* text-color for fieldset legends */
    --legend-font-weight: var(--font-weight-bold); /* font-weight for fieldset legends */
    --legend-font-size: var(--default-font-size); /* font-size for fieldset legend */

    /* labels */
    --label-text-font-size: var(--default-font-size); /* font-size for labels */
    --label-text-font-weight: var(--default-font-weight); /* font-weight for labels */
    --label-text-color: var(--color-scheme-text-color); /* text-color for labels */
    --label-text-color-highlighted: var(--hyperlink-color-highlighted); /* text-color for highlighted labels */
    --label-text-color-checked: var(--hyperlink-color); /* text-color for labels with a corresponding checked input */
    --label-text-color-checked-highlighted: var(--hyperlink-color-highlighted); /* text-color for highlighted labels with a corresponding checked input */
    --label-text-icon-color: var(--color-white); /* icon-color for icons inside label-text */

    /* asterisk-color */
    --asterisk-color: var(--hyperlink-color); /* asterisk color for mandatory form-elements */
    --asterisk-font-size: var(--font-size-large); /* asterisk font-size for mandatory form-elements */
    --asterisk-font-weight: var(--default-font-weight); /* asterisk font-weight for mandatory form-elements */

    /* placeholder texts */
    --placeholder-color-light-mode: var(--color-medium-gray); /* text-color for placeholder texts in inputfields in light-mode */
    --placeholder-color-dark-mode: var(--color-light-gray); /* text-color for placeholder texts in inputfields in dark-mode */
    --placeholder-text-color: light-dark(var(--placeholder-color-light-mode), var(--placeholder-color-dark-mode)); /* text-color for placeholder texts in inputfields */
    --placeholder-font-style: italic; /* font-style for placeholder texts */
    --placeholder-text-opacity: .5; /* opacity for placeholder texts (should not be lower than 0.5 to avoid w2aa accessibility standards */

    /* inputfields */
    --form-input-height: 4rem; /* fixed height to render inputs and select same height across different browsers */
    --form-input-padding: 1rem .1rem 1rem .5rem; /* padding for inputfields and selectboxes */
    --form-input-max-width-short-fields: 14rem; /* maximum width for small inputs (to avoid stretching if horizontal space is available) */
    --form-input-border: var(--default-border); /* border for form-elements */
    --form-input-border-color-highlighted: var(--hyperlink-color); /* border-color highlighted for form-elements */
    --form-input-border-radius: var(--default-border-radius); /* border-radius for form-elements */
    --textarea-border-radius: var(--form-input-border-radius); /* border-radius for textareas */
    --textarea-padding: calc(var(--default-padding) / 2); /* padding for textarea */
    --select-options-text-color: var(--color-scheme-text-color); /* text color for options inside selectboxes */
    --form-input-with-icon-padding: calc(var(--default-padding) * 3); /* padding(-left) for form-elements with icon */
    /* END FORMS AND FIELDSETS ------------------------------------------------------------------------------------------ */

    /* BEGIN SYSTEM-MESSAGES ------------------------------------------------------------------------------------------ */
    --system-message-text-color: var(--color-white); /* text-color for all system-messages - do not change due to accessibility reasons */
    --system-message-border: var(--default-border); /* border for system-messages */
    --system-message-border-radius: var(--default-border-radius); /* border-radius for system-messages */
    --system-message-font-weight: var(--font-weight-bold); /* font-weight for system-messages */
    --system-message-padding: var(--default-padding); /* padding for system-messages */
    /* END SYSTEM-MESSAGES ------------------------------------------------------------------------------------------ */

    /* BEGIN TABLES ------------------------------------------------------------------------------------------ */
    /* tables */
    --table-border: var(--default-border); /* border for table (not cells) */
    --table-border-radius: var(--default-border-radius); /* border-radius for table (and cells in the corners) */

    /* table-rows */
    --table-row-background: var(--color-scheme-background); /* define background for rows */
    --table-row-background-highlighted: var(--color-scheme-background); /* define background for highlighted rows */

    /* table cells (th and td) */
    --table-cell-padding: var(--default-padding); /* padding for all cells */
    --table-cell-border: var(--default-border); /* border for all cells */
    --table-cell-text-color: var(--color-scheme-text-color); /* text-color for table-cells */

    /* table head */
    --table-head-background: var(--primary-color); /* background(-color) for table-head */
    --table-head-text-color: var(--color-white); /* text-color for table-head */
    --table-head-font-size: var(--font-size-large); /* font-size for table-head */
    --table-head-font-weight: var(--font-weight-bold); /* font-weight-color for table-head */
    --table-head-text-align: center; /* text-align for table-head */

    /* active table-cells */
    --active-table-cell-background-light-mode: var(--color-gray-10);
    --active-table-cell-background-dark-mode: var(--color-gray-80);
    --active-table-cell-background: light-dark(var(--active-table-cell-background-light-mode), var(--active-table-cell-background-dark-mode)); /* background(-color) for active table-cells */
    --active-table-cell-text-color: var(--color-scheme-text-color); /* text-color for active/highlighted table-cells */
    --active-table-cell-background-highlighted: var(--primary-color); /* highlighted background(-color) for active table-cells */
    --active-table-cell-text-color-highlighted: var(--color-white); /* highlighted text-color for active table-cells */
    /* END TABLES ------------------------------------------------------------------------------------------ */

    /* BEGIN MISCELLANEOUS ------------------------------------------------------------------------------------------ */
    /* flex */
    --reset-flex: 0 1 auto;
    /* reset flex to its default behavior (i.e. to overwrite flex: none;)

       /* opacity */
    --reduced-opacity: .75; /* reduced opacity (should be at least 0.75 for accessibility) */

    /* shadows */
    --box-shadow-color: light-dark(var(--color-dark-gray), none); /* box-shadow-color */
    --default-box-shadow: light-dark(0 0 0 var(--box-shadow-color), none); /* box-shadow */
    --text-shadow-color: light-dark(var(--color-dark-gray), none); /* text-shadow-color */
    --default-text-shadow: light-dark(.1rem .1rem .1rem var(--text-shadow-color), none); /* text-shadow */

    /* transitions */
    --default-transition: all .5s; /* default transition */
    /* END MISCELLANEOUS ------------------------------------------------------------------------------------------ */

    /* BEGIN GLOBAL VARIABLES FOR COLOR-SCHEMES (LIGHT-/DARK-MODE SET BY BROWSER/OS)------------------------------------------------------------------------------------------ */
    /* styles for color-schemes (light-/dark-mode) */
    --light-mode-text-color: var(--default-text-color); /* text-color for light-mode */
    --light-mode-text-color-buttons: var(--color-white); /* button-text-color for light-mode */
    --light-mode-background: var(--color-white); /* background(-color) for light-mode */
    --dark-mode-text-color: hsl(0, 0%, 85%); /* text-color for dark-mode */
    --dark-mode-text-color-buttons: var(--dark-mode-background); /* button-text-color for dark-mode */
    --dark-mode-background: var(--color-dark-gray); /* background(-color) for dark-mode */
    --show-in-light-mode-only: block; /* display-behavior for elements using .show-in-light-mode-only */
    --show-in-dark-mode-only: none; /* display-behavior for elements using .show-in-dark-mode-only */

    /* assign default styles to color-scheme related variables */
    --color-scheme-text-color: light-dark(var(--light-mode-text-color), var(--dark-mode-text-color)); /* assign text-color to color-scheme */
    --color-scheme-text-color-buttons: light-dark(var(--light-mode-text-color-buttons), var(--dark-mode-text-color-buttons)); /* assign button-text-color to color-scheme */
    --color-scheme-text-color-inverted: light-dark(var(--dark-mode-text-color), var(--light-mode-text-color)); /* assign an inverted text-color to color-scheme */
    --color-scheme-background: light-dark(var(--light-mode-background), var(--dark-mode-background)); /* assign background(-color) to color-scheme */
    --color-scheme-background-inverted: light-dark(var(--dark-mode-background), var(--light-mode-background)); /* assign an inverted background(-color) to color-scheme */
    /* END VARIABLES FOR NATIVE COLOR-SCHEMES (LIGHT-MODE SET BY BROWSER/OS)------------------------------------------------------------------------------------------ */
}

/* ---------------------------------------------- END VARIABLES & TOKENS -------------------------------------------------- */

/* ---------------------------------------------- BEGIN MAIN STYLES -------------------------------------------------- */
/* begin basic selectors and classes ------------------------------------------------------------------------------------------ */
html {
    font-size: var(--root-font-size);

    &.light-mode {
        color-scheme: light;

        /* must be set for light-mode-class separately, because styles will not be triggered by preferred-color-scheme */
        .show-in-light-mode-only {
            display: block;
        }

        .show-in-dark-mode-only {
            display: none;
        }
    }

    &.dark-mode {
        color-scheme: dark;

        /* must be set for dark-mode-class separately, because styles will not be triggered by preferred-color-scheme */
        .show-in-light-mode-only {
            display: none;
        }

        .show-in-dark-mode-only {
            display: block;
        }
    }
}

* {
    min-width: 0; /* corrects flex-item shrink-behavior */
    min-height: 0; /* corrects flex-item shrink-behavior */
}

html, body {
    height: 100dvh; /* maximises visible area. do not set to "min-height" (important to fix footer at bottom!) */
    background: var(--color-scheme-background); /* necessary for accessibility to set default value */
}

body {
    min-height: 100%; /* stretch body to entire screen */
    word-wrap: break-word; /* breaks word at the end of the line */
    font-size: var(--default-font-size); /* sets the default font-size for every element */
    line-height: var(--default-line-height); /* improves reading on the screen. default is 120% */
}

body, dialog {
    color: var(--color-scheme-text-color); /* fallback for text-color to inherit (must be set separately for dialog-tag) */
}

body, fr {
    font-family: var(--default-font-family); /* font-family for entire page */
}

dialog {
    border: var(--default-border);
}

time {
    display: inline;
    white-space: nowrap;
}

dfn {
    font-style: normal;
    border-bottom: .1rem dashed;

    &:hover, &:active, &:focus {
        cursor: help;
    }
}

object, svg, img, video, canvas, .responsive-wrapper {
    max-width: 100%;
    height: auto;
}

body.no-transitions *, .no-transitions {
    transition: none !important;
}

/* begin utility-classes */
.inline-size {
    container-type: inline-size; /* set reference for @container-rule for child-elements */
}

.hide-for-small-up, .hide-for-medium-up {
    display: none !important;
}

.highlighted {
    color: var(--hyperlink-color);
}

.width-limitation-wrapper {
    width: 100%; /* assure container to be stretched if wrapped in a flex-container */
    max-width: var(--width-limitation-wrapper);
    margin: 0 auto;
}

/* begin display-behaviors */
.display-block {
    display: block; !important
}

.display-inline {
    display: inline; !important;
}

.display-inline-block {
    display: inline-block; !important;
}

.display-flex {
    display: flex; !important
}

.display-inline-flex {
    display: inline-flex !important;
}

.display-grid {
    display: grid; !important;
}

.display-none {
    display: none !important;
}
/* end display-behaviors */

/* begin paddings, margins, gaps */
.no-padding {
    padding: 0 !important;
}

.default-padding {
    padding: var(--default-padding) !important;

    > *:last-child {
        margin-bottom: 0 !important;
    }
}

.no-margin {
    margin: 0 !important;
}

.default-margin {
    margin: var(--default-margin) !important;
}

.no-gap {
    gap: 0 !important;
}

.default-gap {
    gap: var(--default-gap) !important;
}
/* end paddings, margins, gaps */

/* begin positions */
.sticky, .position-sticky {
    position: sticky;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100;
}

.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

.position-static {
    position: static;
}
/* end positions */

.display-contents {
    display: contents; /* remove parent from html (children act normally) */
}

.center-content {
    &.flex-container {
        display: flex;
        place-content: center;

        > * {
            flex: none !important;
        }
    }

    &.grid-container {
        display: grid;
        place-items: center;
    }
}

.center-content-absolute {
    --position: 50%;
    position: absolute;
    display: block;
    top: var(--position);
    left: var(--position);
    translate: calc(var(--position) * -1);
}

/* begin aspect-ratios */
.responsive-wrapper {
    aspect-ratio: auto;
    overflow: hidden;

    iframe {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.aspect-ratio-auto {
    aspect-ratio: auto;
}

.aspect-ratio-16-9 {
    aspect-ratio: 16/9;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4/3;
}

.aspect-ratio-3-2 {
    aspect-ratio: 3/2;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1/1;
}

/* end aspect-ratios */

/* begin widths and heights */
.full-width, .full-height {
    display: block; /* sets element to a block-element */
    float: none; /* element should not float */
}

.full-width {
    width: 100% !important; /* overwrite set width */
    max-width: none !important; /* overwrite set max-width */
}

.full-height {
    height: 100% !important; /* overwrite set height */
    max-height: none !important; /* overwrite set max-height */
}

.width-auto {
    width: auto !important; /* overwrite set width */
}

.height-auto {
    height: auto !important; /* overwrite set height */
}

/* end widths and heights */

/* begin wrapping and word-breaks */
.wrap, .white-space-normal {
    white-space: normal
}

.nowrap, .white-space-nowrap {
    white-space: nowrap;
}

.word-break-keep-all {
    word-break: keep-all;
}

/* end wrapping and word-breaks  */

/* begin text-align */
.text-align-left {
    text-align: left;
}

.text-align-center {
    text-align: center;
}

.text-align-right {
    text-align: right;
}

.text-align-justify {
    text-align: justify;
}

.text-align-justify-all {
    text-align: justify-all;
}

[class^="icon-"], [class*="icon-"] {
    vertical-align: baseline !important; /* avoid vertical-alignment to be overwritten by later imported icon-font */
}
/* end text-align */

/* begin borders and radii */
.no-border {
    border: 0 !important;
}

.no-background {
    background: none !important;
}

.box-shadow {
    box-shadow: var(--default-box-shadow) !important;  /* box-shadow (color, left/right, top/bottom, blur) for any element with this class */
}

.text-shadow {
    text-shadow: var(--default-text-shadow) !important;
}

.border-radius {
    border-radius: var(--default-border-radius) !important;
}

.full-circle {
    border-radius: var(--full-circle); /* border-radius for full-circle (do no apply to elements that should not have aspect-ratio 1/1) */
    aspect-ratio: 1/1;
}

.border {
    border: var(--default-border); /* border (width, style, color) for any element with this class */
}

/* end borders */

/* begin visibility */
.hidden, .display-none {
    display: none !important;
}

.visibility-hidden {
    visibility: hidden !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-scroll {
    overflow: scroll !important;
}

.overflow-visible {
    overflow: visible !important;
}

.show-in-light-mode-only {
    display: var(--show-in-light-mode-only);
}

.show-in-dark-mode-only {
    display: var(--show-in-dark-mode-only);
}

/* end visibility */
/* end utility-classes */

/* begin basic typography */
p, ul, ol, dl, table, address {
    margin-bottom: var(--default-margin); /* margin-bottom for most elements containing text */
}

strong {
    font-weight: var(--font-weight-bold);
}

em, cite, .italic {
    font-style: italic;
}

small, small > :where(a, span), .small {
    font-size: var(--font-size-small);
}

blockquote, q {
    quotes: none;
}

hr {
    border-width: 0;
    border-top-width: var(--default-border-width);
    margin: calc(var(--default-margin) * 2);
    clear: both;
    color: var(--color-scheme-text-color);
}

hr + * {
    margin-top: calc(var(--default-margin) * 2);
}

:is(p, li, a, dd, td) :is(code, pre) {
    display: inline;
}

/* end typography */

/* begin images */
figure {
    margin: 0;
}

a :is(img, figcaption) {
    display: block;
    text-align: center;
    margin: 0 auto;
}

img {
    border-radius: var(--default-border-radius);
    max-height: 100%;

    &.grayscale {
        filter: grayscale(1);
    }
}

a img {
    border: var(--default-border);
}

a:where(:hover, :active, :focus) img {
    border-color: var(--hyperlink-color);
}

/* end images */
/* end basic selectors and classes ------------------------------------------------------------------------------------------ */

/* begin boxes ------------------------------------------------------------------------------------------ */
.box {
    background: var(--box-background);
    border: var(--box-border);
    border-radius: var(--box-border-radius);
    padding: var(--box-body-padding);
    box-shadow: var(--box-box-shadow);

    .box-header {
        display: flex;
        align-items: center;
        padding: var(--box-header-padding);
        background: var(--box-header-background);
        border-top-left-radius: var(--box-border-radius);
        border-top-right-radius: var(--box-border-radius);

        & > * {
            color: var(--box-header-text-color);
            margin: 0;
            text-decoration: none !important; /* avoid overwriting by hyperlink if box-header is clickable */
        }
    }

    &:has(.box-header) {
        padding: 0;
    }

    &:has(> img:only-child) {
        align-self: flex-start;

        > img {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            display: block;
        }
    }

    .box-body {
        border-bottom-left-radius: var(--default-border-radius);
        border-bottom-right-radius: var(--default-border-radius);

        &:has(*:only-child) {
            margin: 0;
        }

        fieldset {
            background: none;
        }
    }

    &:has(> .box-footer) {
        display: flex;
        flex-direction: column;

        .box-body {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    .box-footer {
        padding: var(--box-footer-padding);
        color: var(--box-footer-text-color);
        background: var(--box-footer-background);
        border-top: var(--box-border);
        border-bottom-left-radius: var(--default-border-radius);
        border-bottom-right-radius: var(--default-border-radius);
        margin-top: auto;

        &:has(a:only-child) {
            text-align: center;
        }

        &:has(p:only-child) {
            margin: 0;
        }
    }

    > div:first-child {
        margin-top: 0;
    }

    > p:last-child {
        margin-bottom: 0;
    }

    &.center-content {
        p:last-child {
            margin: 0;
        }

        > div {
            border: var(--box-border);
            margin: 0 auto;
            top: 50%;
            transform: translateY(-50%);
            display: table;
            padding: var(--default-padding);
            flex: 0 1 auto;
        }

        &:is(.grid-container, .flex-container) {
            place-content: center;

            > div {
                top: auto;
                transform: none;
            }
        }

        &.flex-container {
            align-items: center; /* required to center flex items vertical correctly */
        }
    }
}

/* end boxes ------------------------------------------------------------------------------------------ */

/* begin buttons ------------------------------------------------------------------------------------------ */
:is(button, .button, input[type="submit"]), ::file-selector-button {
    background: var(--button-background);
    border: var(--button-border);
    border-radius: var(--button-border-radius);
    outline: var(--button-outline);
    color: var(--button-text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--button-font-weight);
    margin: 0;
    padding: var(--button-padding);
    text-align: center;
    text-decoration: none;
    line-height: var(--button-line-height);
    font-size: var(--button-font-size);
    min-width: var(--button-min-width);
    min-height: var(--button-min-height);
    box-shadow: var(--button-box-shadow);
    align-self: flex-start; /* avoid button to be stretched in flex-containers (with flex: 1 for flex-items) */

    > :is(span, [class*="icon-"]) {
        text-decoration: none !important; /* avoid overwriting by hyperlink for a.button */
        color: var(--button-text-color);
        align-self: center; /* necessary to keep text and icon centered if button has different alignment */
    }

    > [class*="icon-"]:not(:only-child) {
        top: -.1rem; /* corrects vertical position of icon to an optical center */
    }

    &:is(:hover, :active, :focus-visible, .active) {
        color: var(--button-text-color-highlighted);
        background: var(--button-background-highlighted);
        cursor: pointer;
        text-shadow: none;
        border: var(--button-border-highlighted);
        outline: var(--button-outline-highlighted); /* avoids overwrite from a:hover */

        > :is(span, [class*="icon-"]) {
            color: inherit;
        }
    }

    &.primary {
        --button-background: var(--button-primary-background);
        --button-border: var(--button-primary-border);
        --button-border-radius: var(--button-primary-border-radius);

        > :is(span, span[class*="icon-"]) {
            color: var(--button-primary-text-color);
        }

        &:is(:hover, :active, :focus-visible, .active) {
            --button-background: var(--button-primary-background-highlighted);

            color: var(--button-tertiary-text-color-highlighted);
            border: var(--button-primary-border-highlighted);

            > :is(span, span[class*="icon-"]) {
                color: inherit;
            }
        }
    }

    &.tertiary {
        --button-background: var(--button-tertiary-background);
        --button-border: var(--button-tertiary-border);
        --button-border-radius: var(--button-tertiary-border-radius);

        &:is(:hover, :active, :focus-visible, .active) {
            --button-background: var(--button-tertiary-background-highlighted);

            color: var(--button-tertiary-text-color-highlighted);
            border-color: var(--tertiary-color);

            > :is(span, [class*="icon-"]) {
                color: inherit;
            }
        }
    }

    &.cancel {
        --button-background: var(--error-color);
        --color-scheme-text-color: var(--error-color);

        border: var(--error-border);

        &:is(:hover, :active, :focus) {
            span {
                color: var(--error-color);
            }
        }
    }

    &.confirm {
        --button-background: var(--success-color);
        --color-scheme-text-color: var(--success-color);

        border: var(--success-border);

        &:is(:hover, :active, :focus-visible) {
            span {
                color: var(--success-color);
            }
        }
    }

    &.center {
        display: table;
        float: none;
        margin: 0 auto;
    }

    &:last-child {
        margin: 0;
    }

    &.small {
        padding: var(--button-padding-small);
        min-width: var(--button-min-width-small);
        min-height: var(--button-min-height-small);
        font-size: var(--button-font-size-small);

        :is(span, [class*="icon-"]) {
            font-size: inherit;
        }
    }

    &.large {
        padding: var(--button-padding-large);
        min-width: var(--button-min-width-large);
        min-height: var(--button-min-height-large);
        font-size: var(--button-font-size-large);

        :is(span, [class*="icon-"]) {
            font-size: inherit;
        }
    }

    &.large-icon {
        flex-direction: column;
        gap: 1rem;

        :is(span, [class*="icon-"]) {
            margin: 0;
        }

        [class*="icon-"] {
            font-size: var(--button-large-icon-icon-size);
        }
    }

    &.use-icon-as-background[class*="icon-"] {
        &:is(:hover, &:active, :focus)::before {
            color: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), 50%);
        }

        &.confirm {
            &::before {
                color: var(--success-color);
            }

            &:is(:hover, &:active, :focus)::before {
                color: hsl(var(--success-color-hue), var(--success-color-saturation), 30%);
            }
        }

        &.error {
            &::before {
                color: var(--error-color);
            }

            &:is(:hover, &:active, :focus)::before {
                color: hsl(var(--error-color-hue), var(--error-color-saturation), 40%)
            }
        }

        &:is(.disabled, :disabled) {
            &::before {
                color: var(--disabled-background) !important;
            }

            > span[class*="icon-"]::before {
                color: var(--disabled-color) !important;
            }
        }
    }
}

::file-selector-button {
    border-radius: var(--form-input-border-radius);
}

/* begin back-to-top-button */
#back-to-top-button {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 3000;
    line-height: var(--button-line-height);

    [class*="icon-"] {
        line-height: inherit; /* avoids icon-bounding-box to be stretched by global line-height */
    }
}

/* end back-to-top-button */
/* end buttons ------------------------------------------------------------------------------------------ */

/* begin clearfix ------------------------------------------------------------------------------------------ */
/* clearfix is for clearing the boxes in ie and ff correctly (= the height of the outer container will be displayed correctly) */
.clearfix {
    display: block;

    &::after {
        content: ".";
        visibility: hidden;
        display: block;
        clear: both;
        height: 0;
    }
}

.clear, .clear-both {
    visibility: hidden;
    clear: both;
    height: 0;
    line-height: 0;
}

/* end clearfix ------------------------------------------------------------------------------------------ */

/* begin disabled ------------------------------------------------------------------------------------------ */
[readonly],
.disabled:not(a),
.disabled:not(a) :is(input, select, textarea, .input),
[disabled]:not(fieldset),
[disabled]:not(fieldset) > span,
:is(button, input[type="submit"]):disabled,
:is(button, .button, input[type="submit"]).disabled {
    background: var(--disabled-background) !important;
    color: var(--disabled-color) !important;
    border-color: var(--disabled-color) !important;
    text-shadow: none !important;
    outline: none !important;
}

:is(button, .button, input[type="submit"]) {
    &:disabled, &.disabled {
        :is(span, [class*="icon-"]), &:not(a) span {
            color: var(--disabled-color) !important;
            text-shadow: none !important;
        }
    }
}

:where(input[type="checkbox"], input[type="radio"]):disabled + span,
.toggle-switch .switch-label-wrapper input:disabled ~ .label-text {
    color: var(--disabled-color-label) !important;
}

:where([readonly], .disabled, [disabled]:not(fieldset)):is(:hover, :active, :focus) {
    cursor: not-allowed !important;
}

:is(label, .label).disabled,
:is(label, .label).disabled span {
    color: var(--disabled-color-label) !important;
    background: none !important;
}

.toggle-switch {
    input:checked:disabled::after, .switch-label-wrapper input:checked:disabled ~ .label-text::before {
        background: var(--disabled-color) !important;
        border-color: var(--disabled-color) !important;
    }

    .switch-label-wrapper input:disabled ~ .label-text {
        color: var(--disabled-color-label) !important;
    }

    &.disabled .switch-label-wrapper {
        border-color: var(--disabled-color) !important;
        background: var(--disabled-background) !important;
    }
}

.disabled .replace-input-type,
.toggle-switch.disabled .label-text::before {
    border-color: var(--disabled-color) !important;
}

/* end disabled ------------------------------------------------------------------------------------------ */

/* begin flex-containers ------------------------------------------------------------------------------------------ */
.flex-container, .button-wrapper {
    display: flex;
    flex-wrap: wrap; /* breaks children to new line if they are wider than their parent */
    gap: var(--default-gap);

    &.space-between, &.space-around {
        justify-content: space-between;

        > * {
            flex: none !important; /* must be set to make space-between work properly */
        }
    }

    &.space-around {
        justify-content: space-around;
    }

    > img {
        align-self: flex-start; /* avoid images to be stretched unproportional */
    }
}

.flexible-scroll-container {
    display: flex;
    flex-direction: column;
    max-height: 20rem;
    overflow: hidden;

    > .fixed-wrapper {
        flex: none;
    }

    > .scroll-wrapper {
        flex: 1;
        overflow-y: auto;
    }
}

:where(ul, ol).flex-container:not(.vertical) {
    margin: 0;

    li {
        list-style-type: none;
        margin: inherit;
    }
}

.flex-container {
    > *:not(.button) {
        flex: 1; /* items should have same width */
    }

    &.stretch > * {
        align-self: stretch; /* stretch items to same height (elements must/should not have a set height) */
    }

    &.align-center > * {
        align-self: center;
    }

    &.align-bottom > * {
        align-self: flex-end;
    }

    &.align-items-top, &.align-items-flex-start {
        align-items: flex-start !important;
    }

    &.align-items-center {
        align-items: center !important;
    }

    &.align-items-bottom, &.align-items-flex-end {
        align-items: flex-end !important;
    }

    &.justify-content-top, &.justify-content-flex-start {
        justify-content: flex-start;
    }

    &.justify-content-center {
        justify-content: center;
    }

    &.justify-content-bottom, &.justify-content-flex-end {
        justify-content: flex-end;
    }

    &.justify-content-space-between, &.justify-content-space-around {
        justify-content: space-between;

        > * {
            flex: none;
        }
    }

    &.justify-content-space-around {
        justify-content: space-around;
    }

    &.horizontal {
        flex-direction: row; /* class forces flex-containers flex-direction to stay in row on all devices */
    }

    &.vertical {
        flex-direction: column;
        flex-wrap: nowrap;

        > * {
            max-width: 100%;
            flex: none;
            margin-top: 0;
            margin-bottom: 0;
        }

        > a {
            align-self: flex-start; /* avoid sensitive-area of link to be stretched to full width of parent-container */
        }
    }

    > .flex-item-one-third,
    .flex-item-one-forth {
        flex: 1;
    }

    > .flex-item-two-third {
        flex: 2;
    }

    > .flex-item-three-forth {
        flex: 3;
    }
}

:is(label, .label) > .flex-container > :is(label, .label) {
    display: flex;
    align-items: center;
}

.no-gap {
    gap: 0 !important;
}

.no-wrap {
    flex-wrap: nowrap !important;
}

.reset-flex, .reset-flex > *,
.no-flex, .no-flex > * {
    flex: 0 1 auto !important; /* don't stretch items (item(s) will have default width) */
}

.flex-none {
    flex: none !important; /* remove all flex-abilities completely */
    align-self: flex-start; /* ensure element will not be stretched */
}

[data-type="multistep"] .button-wrapper {
    flex-direction: row;

    > [name="prev"] {
        margin-left: 0;
    }

    > [name="next"] {
        margin-left: auto;
    }
}

:is(ul, ol).flex-list {
    display: flex;
    padding: var(--default-padding);
    border: var(--default-border);
    background: var(--color-scheme-background);

    > li {
        list-style-type: none;
        margin: 0;
        flex: 1;
    }
}

/* begin .button-wrapper (flex-container for group of buttons only) */
.button-wrapper {
    flex-direction: row-reverse;

    &.stretch-buttons > :where(button, .button) {
        flex: 1;
    }

    &.align-right {
        flex-direction: row-reverse;
    }

    &:is(.align-left, .align-center, .space-between) {
        flex-direction: row;
    }

    &.align-center {
        justify-content: center;
    }

    &.space-between {
        justify-content: space-between;
    }

    > small {
        position: absolute;
        left: 0;
    }
}

/* end .button-wrapper (flex-container for group of buttons only) */
/* end flex-containers ------------------------------------------------------------------------------------------ */

/* begin forms: basic elements ------------------------------------------------------------------------------------------ */
form [class*="grid-container"] {
    grid-auto-rows: min-content;
    grid-template-rows: min-content;
}

/* begin fieldsets */
fieldset {
    background: var(--fieldset-background);
    border: var(--fieldset-border);
    border-radius: var(--fieldset-border-radius);
    box-shadow: var(--fieldset-box-shadow);
    padding: var(--fieldset-padding);
    margin: var(--fieldset-margin);

    > * {
        margin: 0;
    }

    &.flex-container {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    & > .flex-container {
        width: 100%;
        align-items: flex-end;
        flex: none !important;

        &.vertical {
            align-items: flex-start;

            & > *:not(hr) {
                width: 100%;
            }
        }
    }

    &.grid-container-create-columns {
        grid-template-columns: min-content; /* items should be minimum as wide as content */

        > *, .grid-container-create-columns {
            grid-column: span var(--grid-columns);
        }

        :is(label, .label).inline > span:first-child {
            grid-column: span var(--grid-small-span);
        }
    }

    &[class*="grid-container"] > * {
        grid-column: 1 / span var(--grid-columns);
        margin-bottom: 0;
    }

    &:is(.flex-container, [class*="grid-container"]) :is(h1, h2, h3, h4, h5, h6) {
        margin-bottom: 0;
    }

    legend {
        color: var(--legend-text-color);
        font-weight: var(--legend-font-weight);
        font-size: var(--legend-font-size);
        position: absolute; /* must be placed absolute for fieldset-flex-container to work properly */
        top: calc(var(--fieldset-padding) * -1);
        right: 0; /* align right to avoid collision with optional headlines above fieldset */
    }

    > *:first-child, legend + * {
        margin-top: 0;
    }

    fieldset {
        margin-bottom: 0;
    }

    hr {
        margin: var(--default-margin);

        & + * {
            margin-top: 0;
        }
    }

    &.error, :is(label, .label).error :where(input:not([type="range"]), select, textarea, .input, .replace-input-type, .toggle-switch, .multiple-switch) {
        border-color: var(--error-color);
    }

    &.error, :is(label, .label).error :where(input:not([type="range"]), select, textarea, .input) {
        color: var(--error-color);
    }

    &.warning, :is(label, .label).warning :where(input:not([type="range"]), select, textarea, .input, .replace-input-type, .toggle-switch, .multiple-switch) {
        border-color: var(--warning-color);
    }

    &.success, :is(label, .label).success :where(input:not([type="range"]), select, textarea, .input, .replace-input-type, .toggle-switch, .multiple-switch) {
        border-color: var(--success-color);
    }

    &.info, :is(label, .label).info :where(input:not([type="range"]), select, textarea, .input, .replace-input-type, .toggle-switch, .multiple-switch) {
        border-color: var(--info-color);
    }

    /* begin disabled fieldset */

    &[disabled] {
        background: var(--color-light-gray) !important; /* avoid overwriting */

        :is(input, select, textarea, .input, .replace-input-type) {
            background: var(--disabled-background) !important; /* avoid overwriting */
            border-color: var(--disabled-color) !important; /* avoid overwriting */
        }

        :is(input, select, textarea, .input, .replace-input-type, .toggle-switch, .multiple-switch):is(:hover, :active, :focus),
        .multiple-switch label:is(:hover, :active, :focus) {
            cursor: not-allowed;
        }

        input[type="range"] {
            background: none !important; /* avoid overwriting */
        }

        input[type="range"]::-webkit-slider-thumb {
            background: var(--disabled-background) !important; /* avoid overwriting */
            border-color: var(--disabled-color) !important; /* avoid overwriting */
        }

        input[type="range"]::-webkit-slider-runnable-track {
            background: var(--disabled-background) !important; /* avoid overwriting */
        }

        input[type="range"]::-moz-range-thumb {
            background: var(--disabled-background) !important; /* avoid overwriting */
            border-color: var(--disabled-color) !important; /* avoid overwriting */
        }

        input[type="range"]::-moz-range-track {
            background: var(--disabled-background) !important; /* avoid overwriting */
        }

        input[type="search"] + a.button {
            color: var(--disabled-color) !important; /* avoid overwriting */
            background: var(--disabled-background) !important; /* avoid overwriting */
        }

        input[type="search"] + a.button span,
        .switch-label-wrapper + span {
            color: var(--disabled-color) !important; /* avoid overwriting */
        }

        :is(.toggle-switch input::after, .toggle-switch .label-text::before, .switch-label-wrapper),
        input[type="checkbox"].replace-input-type:checked::after {
            border-color: var(--disabled-color) !important; /* avoid overwriting */
        }

        /* do not combine to :where/:is-selector (does not work for pseudo-elements */

        .toggle-switch input::after,
        .switch-label-wrapper,
        .toggle-switch .label-text::before {
            border-color: var(--disabled-color) !important; /* avoid overwriting */
        }

        .toggle-switch > input[class*="icon-"],
        .multiple-switch span {
            color: var(--disabled-color) !important; /* avoid overwriting */
        }

        .multiple-switch label {
            background: var(--disabled-background) !important; /* avoid overwriting */
        }
    }

    /* end disabled fieldset */
}

/* end fieldsets */

/* begin labels */
label, .label {
    --status-color: var(--label-text-color);

    display: block;
    white-space: nowrap; /* avoid wrapping of inputelement and (inline) text) */

    > span {
        white-space: normal; /* wrap text in label */
    }

    .label-text {
        font-size: var(--label-text-font-size);
        font-weight: var(--label-text-font-weight);

        & ~ * {
            --status-color: var(--label-text-color);

            color: var(--status-color);
        }

        /* begin inner label text and hyperlinks */
        span {
            color: var(--status-color);

            & > a {
                font-size: var(--label-text-font-size);
                margin-left: auto;
            }
        }
        /* end inner label text and hyperlinks */

        /* begin mandatory asterisk */
        sup {
            --status-color: var(--asterisk-color);

            font-size: var(--asterisk-font-size); /* overwrite normalize.css */
            font-weight: var(--asterisk-font-weight);
            top: -.2rem; /* overwrite normalize.css */
        }
        /* end mandatory asterisk */

        :where(a, span)[class*="icon-"], a:has([class*="icon-"]) {
            --status-color: var(--hyperlink-color);

            align-self: center; /* avoids stretching if label wraps */
            border-radius: var(--full-circle);
            line-height: 1;
            margin-left: auto;
            color: var(--status-color);
            background: var(--label-text-icon-color);

            &:is(:hover, :active, :focus) {
                --status-color: var(--label-text-color-highlighted) !important;
                background: var(--color-white);
            }
        }
    }

    &.error  {
        > *, :where(a, span)[class*="icon-"], a:has([class*="icon-"]) {
            --status-color: var(--error-color);
        }
    }

    &.warning {
            > *, :where(a, span)[class*="icon-"], a:has([class*="icon-"]) {
                --status-color: var(--warning-color);
            }
    }

    &.success {
        > *, :where(a, span)[class*="icon-"], a:has([class*="icon-"]) {
            --status-color: var(--success-color);
        }
    }

    &.info {
        > *, :where(a, span)[class*="icon-"], a:has([class*="icon-"]) {
            --status-color: var(--info-color);
        }
    }

    :where(.label-text :is(a[class*="icon-"], a:has([class*="icon-"])), .place-inside[class*="icon-"], sup, input, select, textarea) {
        color: var(--status-color);
    }

    &:has(:user-invalid) :is(.label-text :is(span,a[class*="icon-"], a:has([class*="icon-"])), .place-inside[class*="icon-"], sup, input, select, textarea) {
        --status-color: var(--error-color);
    }

    &:has(:user-valid) {
        :where(.label-text :is(a[class*="icon-"], a:has([class*="icon-"])), .place-inside[class*="icon-"], sup, input, select, textarea) {
            color: var(--status-color);
        }
    }

    > input {
        margin-top: 0;
        margin-left: 0;
    }

    &.inline {
        display: flex;

        &.stretch-field input {
            width: 100%;
            max-width: none;
        }

        .label-text {
            display: flex;

            a[class*="icon"], a:has([class*="icon"]) {
                margin-left: calc(var(--default-margin) / 2);
            }
        }

        &:not(.textarea) {
            & > * {
                align-self: center;
                white-space: nowrap;
            }

            & > .label-text {
                flex: none;
            }
        }

        > span:first-child {
            white-space: normal;
            margin: 0 var(--default-margin) 0 0;

            & + * {
                grid-column: span var(--grid-large-span);
            }
        }
    }

    /* use :where for selectors to set specificity to 0 */

    &:not(.inline) :where(.label-text:not(.hidden)) {
        display: flex;
        margin-bottom: calc(var(--default-margin) / 2);
        align-items: flex-end;
    }

    :where(button, .button) button {
        align-self: stretch;
    }

    input + .label-text {
        display: inline-flex;
        margin-bottom: 0;
    }

    :where(input, select, textarea, .input):not(:first-child) {
        display: block;
        width: 100%;
    }

    :is(input[type="checkbox"], input[type="radio"]) {
        display: inline-block;
        align-self: center;
    }

    /* begin place-inside (place icon inside/over inputfield) */

    .place-inside {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: var(--default-margin);
        z-index: 10;
        margin: 0;

        &[class*="icon-"] {
            --status-color: var(--color-scheme-text-color);

            color: var(--status-color);
        }

        &[class*="icon-"].error,
        &.error [class*="icon-"] {
            color: var(--error-color);
        }

        &.warning[class*="icon-"],
        &.warning [class*="icon-"] {
            color: var(--warning-color);
        }

        &.success[class*="icon-"],
        &.success [class*="icon-"] {
            color: var(--success-color);
        }

        &.info[class*="icon-"],
        &.info [class*="icon-"] {
            color: var(--info-color);
        }

        &[class*="icon-"], & [class*="icon-"] {
            & + :is(input, select, textarea, .input) {
                padding-left: var(--form-input-with-icon-padding);
            }

            & + input:focus {
                border-color: var(--hyperlink-color);
            }
        }
    }

    &.inline .place-inside {
        display: none;
    }

    /* end place-inside (place icon inside/over inputfield) */
}

.grid-container-create-columns > :where(label, .label) {
    grid-column: 1 / span var(--grid-columns);
}

td .toggle-switch.switch-label {
    display: inline-flex;
}

/* end labels */

/* begin form-elements */
:where(input, select, textarea, .input) {
    min-width: 5rem;
    border: var(--form-input-border);
    border-radius: var(--form-input-border-radius);
    align-self: flex-end; /* required to let items be as high as their content */
    background: var(--color-scheme-background);

    &:is(:hover, :active, :focus) {
        border-color: var(--form-input-border-color-highlighted);
    }

    &:not(:placeholder-shown) {
        background: hsl(from var(--color-black) h s var(--form-input-filled-background-lightness));

        &:valid {
            background: hsl(120, 100%, var(--form-input-filled-background-lightness));
        }
    }

    &:user-invalid {
        border-color: var(--error-color);
        background: hsl(0, 100%, var(--form-input-filled-background-lightness));
    }

    &.error::placeholder {
        color: var(--error-color);
    }
}

input {
    &:checked ~ span.label-text {
        color: var(--label-text-color-checked);
    }

    &[type="range"], &[type="date"], &[type="file"] {
        background: none !important;
    }

    &[type="search"] {
        align-self: stretch;
        box-sizing: border-box; /* overwrite normalize.css */

        & + :is(button, .button) {
            border-radius: var(--form-input-border-radius);
            height: var(--form-input-height); /* assures that button will not gain vertical space by padding */
        }
    }

    &:is([type="checkbox"], [type="radio"]) {
        margin-bottom: 0;
        min-width: auto;
        height: auto;
        accent-color: var(--hyperlink-color);

        &:focus + span {
            color: var(--hyperlink-color);
        }
    }

    &[type="file"] {
        padding: 0;
    }

    &[type="color"] {
        padding: 0;
    }

    &[type="image"] {
        width: auto;
        height: auto;
        padding: 0;
        margin: 0 .3rem;
        border: 0;
    }

    &:is([type="checkbox"], [type="radio"], [type="image"]) {
        background: none;
        width: auto;
        border-radius: 0;
        min-width: 0;
    }
}

input, select, .input {
    height: var(--form-input-height); /* forces different browsers to render same height */
    padding: var(--form-input-padding);
}

select {
    padding-top: 0; /* avoids text to be cropped */
    padding-bottom: 0; /* avoids text to be cropped */
    word-wrap: normal; /* break words only at allowed break points */
    background: none !important;

    &:valid {
        background: hsl(120, 100%, var(--form-input-filled-background-lightness)) !important;
        color: var(--success-color);
    }

    &[multiple] {
        max-height: 10rem;
    }

    option {
        color: var(--select-options-text-color);
    }
}

::placeholder {
    font-style: var(--placeholder-font-style);
    color: var(--placeholder-text-color) !important;
    opacity: var(--placeholder-text-opacity);
}

textarea {
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 9rem;
    max-height: 30rem;
    field-sizing: content; /* allows field to grow if required (no more scrolling) */
    padding: var(--textarea-padding);
    border-radius: var(--textarea-border-radius);
}

.inline input:where([type="date"], [type="number"], [type="color"]) {
    max-width: var(--form-input-max-width-short-fields);
}

input[type="submit"] input:where(:hover, :active, :focus) {
    cursor: pointer;
}

:where(input, select):not([type="hidden"]) + input, :where(input:not([type="hidden"]), select) + select {
    border-left: 0;
}

/* end form-elements */

/* begin form-elements in table */
td {
    :where(label, .label, select, textarea, .input) {
        width: 100%;
        margin: 0;
    }

    :where(label, .label) {
        width: auto;
        padding: 0;
    }
}

/* end form-elements in table */

/* begin .input-wrapper/.input-group */
.input-wrapper, .input-group {
    display: flex;
    gap: 0;
    align-items: flex-end;
    flex-wrap: nowrap;

    &:has([type="checkbox"], [type="radio"]) {
        flex-wrap: wrap;
    }

    > * {
        flex: auto;
    }

    > :is(label, .label) {
        &:first-child :is(input, select) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:last-child :is(input, select) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
}

/* end .input-wrapper/.input-group */
/* end forms: basic elements ------------------------------------------------------------------------------------------ */

/* begin forms: replace-input-type (radio/checkbox) ------------------------------------------------------------------------------------------ */
label { /* label required for specificity */
    input.replace-input-type {
        appearance: none;
        min-width: 0;
        width: 1.28rem;
        height: 1.28rem;
        padding: .1rem;
        border: var(--default-border);
        border-color: var(--color-scheme-text-color);
        background: var(--color-white);
        box-shadow: none;
        display: inline-flex; /* avoids label-text to wrap */

        &:checked {
            border-color: var(--label-text-color-checked);

            &::after {
                content: "";
                border-radius: var(--full-circle);
                background: var(--label-text-color-checked);
                width: .8rem;
                top: .1rem;
                aspect-ratio: 1/1;
                align-self: center;
                margin: 0 auto;
                display: block;
            }
        }

        &:is(:hover, :active, :focus), &:checked:is(:hover, :active, :focus)::after {
            border-color: var(--label-text-color-checked-highlighted);
        }

        &:is(:hover, :active, :focus) + .label-text {
            color: var(--label-text-color-highlighted);
        }

        &.error, &.error:checked {
            border-color: var(--error-color);

            &::after {
                background: var(--error-color);
            }
        }

        &[type="radio"] {
            border-radius: var(--full-circle);

            &:checked {
                &:is(:hover, :active, :focus)::after {
                    background-color: var(--label-text-color-checked-highlighted);
                }

                &:disabled::after {
                    background: var(--disabled-color) !important; /* avoid overwriting */
                }
            }
        }

        &[type="checkbox"] {
            border-radius: 0;

            /* the check */

            &:checked {
                &::after {
                    content: "";
                    top: .15rem;
                    width: 1rem;
                    height: .5rem;
                    border-radius: 0;
                    border: .3rem solid var(--label-text-color-checked);
                    border-top: 0;
                    border-right: 0;
                    background: none;
                    transform: rotate(-45deg) skewX(-10deg);
                    position: absolute;
                }

                & + .label {
                    color: var(--label-text-color);
                }

                &.error + .label {
                    color: var(--error-color);
                }

                &[disabled]:checked + .label {
                    color: var(--disabled-color);
                }
            }

            &[disabled]::after {
                border-color: var(--disabled-color);
            }

            &.error {
                &:not(:checked) {
                    border-color: var(--error-color);
                }

                &::after {
                    border-color: var(--error-color);
                }
            }
        }
    }
}

/* end forms: replace-input-type (radio/checkbox) ------------------------------------------------------------------------------------------ */

/* begin forms: progressbar ------------------------------------------------------------------------------------------ */
progress {
    -webkit-appearance: progress-bar;
    -webkit-writing-mode: horizontal-tb;

    &[value] {
        appearance: none;
        width: 25rem;
        border-radius: var(--default-border-radius);
        border: var(--default-border);
        border-color: var(--hyperlink-color);
        background: var(--color-scheme-background); /* background(-color) for entire bar - does not work on -webkit-browsers */
        box-shadow: none;
    }
}

/* required for webkit (only way to style progress-bar/overwrite default behavior) */
progress[value]::-webkit-progress-bar {
    background: var(--color-scheme-background); /* background(-color) for entire bar in webkit */
}

progress[value]::-webkit-progress-value {
    background-image: -webkit-repeating-linear-gradient(-45deg, var(--hyperlink-color), var(--hyperlink-color) .7rem, var(--hyperlink-color) .7rem, var(--hyperlink-color) 1.4rem);
}

progress[value]::-moz-progress-bar {
    border-top-left-radius: var(--default-border-radius);
    border-bottom-left-radius: var(--default-border-radius);
    background-image: repeating-linear-gradient(-45deg, var(--hyperlink-color), var(--hyperlink-color) .7rem, var(--hyperlink-color) .7rem, var(--hyperlink-color) 1.4rem);
}

/* end forms: progressbar ------------------------------------------------------------------------------------------ */

/* begin forms: range-slider ------------------------------------------------------------------------------------------ */
input[type="range"] {
    appearance: none;
    background: unset;
    border: 0;
    box-shadow: none;
    margin: 0;

    &:focus {
        outline: none;
    }

    &:is([disabled], .disabled),
    &:is([disabled], .disabled):is(:hover, :active, :focus) {
        background: none !important; /* avoid overwriting */
    }

    &:is(:hover, :active, :focus) {
        border: 0;
    }
}

input[type="range"]::-webkit-slider-runnable-track {
    height: .4rem;
    border: none;
    border-radius: .2rem;
}

input[type="range"]::-moz-range-track {
    height: .4rem;
    border: 0;
    border-radius: .2rem;
}

/* the thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 0;
    width: 1.6rem;
    aspect-ratio: 1/1;
    border-radius: var(--full-circle);
    margin-top: -.7rem;
    background: var(--color-scheme-background);
    border: var(--default-border);
}

input[type="range"]::-webkit-slider-thumb:is(:hover, :active, :focus) {
    border: var(--hyperlink-color);
}

input[type="range"]::-moz-range-thumb {
    border: 0;
    width: 1.6rem;
    aspect-ratio: 1/1;
    border-radius: var(--full-circle);
    margin-top: -.5rem;
    background: var(--color-scheme-background);
    border: var(--default-border);
}

input[type="range"]::-moz-range-thumb:is(:hover, :active, :focus) {
    border-color: var(--hyperlink-color);
}

/* the track */
input[type="range"]::-webkit-slider-runnable-track {
    background: var(--color-scheme-background);
    border-color: var(--hyperlink-color);
}

input[type="range"]::-webkit-slider-runnable-track:is(:hover, :active, :focus) {
    border-color: var(--hyperlink-color);
}

input[type="range"]::-moz-range-track {
    background: var(--color-scheme-background);
    border: var(--default-border);
}

input[type="range"]::-moz-range-track:is(:hover, :active, :focus) {
    border-color: var(--hyperlink-color);
}

/* focus the track */
/* do not set :focus for IE - css are controlled by -ms-fill-lower/-ms-fill-upper */
input[type="range"]:focus::-moz-range-thumb {
    background: var(--hyperlink-color);
}

input[type="range"]:is([disabled], .disabled)::-moz-range-thumb {
    background: var(--disabled-background) !important; /* avoid overwriting */
    border-color: var(--disabled-color) !important; /* avoid overwriting */
}

input[type="range"]:is([disabled], .disabled)::-webkit-slider-thumb {
    background: var(--disabled-background) !important; /* avoid overwriting */
    border-color: var(--disabled-color) !important; /* avoid overwriting */
}

input[type="range"]:is([disabled], .disabled)::-moz-range-track {
    background: var(--disabled-background) !important; /* avoid overwriting */
    border-color: var(--disabled-color) !important; /* avoid overwriting */
}

input[type="range"]:is([disabled], .disabled)::-webkit-slider-runnable-track {
    background: var(--disabled-background) !important; /* avoid overwriting */
    border-color: var(--disabled-color) !important; /* avoid overwriting */
}

/* end forms: range-slider ------------------------------------------------------------------------------------------ */

/* begin toggle-switch-checkbox and -radio ------------------------------------------------------------------------------------------ */
.toggle-switch {
    --status-color: var(--color-scheme-text-color);

    flex: none;
    display: flex;
    align-items: center;

    .label-text {
        align-self: center;
        margin-top: 0;
        margin-bottom: 0;
    }

    input {
        flex: none; /* avoid input to be shrunk */

        &:is([type="checkbox"], [type="radio"]) { /* type required for specificity */
            appearance: none;
            width: 4rem !important; /* avoids overwrite by media queries for input-elements */
            height: 2rem;
            border-radius: 1rem;
            padding: .2rem;
            border: var(--default-border);
            border-color: var(--status-color);
            background: var(--color-scheme-background);
            box-shadow: none;
            display: flex;

            ~ .label-text {
                color: var(--color-scheme-text-color);
            }
        }

        &::after {
            content: "";
            border-radius: var(--full-circle);
            border: var(--default-border);
            border-color: var(--status-color);
            background: var(--color-scheme-background);
            width: 1.4rem;
            aspect-ratio: 1/1;
            display: block;
            align-self: center;
        }

        &[disabled]::after {
            border-color: var(--disabled-color) !important;
        }

        /* begin checked toggle-switch */

        &:checked {
            &::after {
                border-color: var(--hyperlink-color);
                background: var(--hyperlink-color);
                margin-left: auto
            }

            &:is(:hover, :active, :focus)::after {
                border-color: var(--hyperlink-color-highlighted);
                background: var(--hyperlink-color-highlighted);
            }

            ~ .label-text {
                color: var(--hyperlink-color);
            }
        }

        /* end checked toggle-switch */

        &[class*="icon-"] {
            &::before {
                position: absolute;
                z-index: 10;
                font-size: var(--font-size-large);
                top: 50%;
                transform: translateY(-50%);
                left: .2rem;
            }

            &::after, &:checked:disabled::after {
                border: 0;
                background: none;
            }

            & + span {
                margin-left: 0; /* overwrite default 'text to icon'-margin */
            }

            &:checked {
                &::before {
                    left: auto;
                    right: .2rem;
                    color: var(--hyperlink-color);
                }

                &:disabled::before {
                    color: var(--disabled-color) !important; /* avoid overwriting */
                }
            }

            &.error {
                .label-text {
                    color: var(--error-color);
                }

                input:not(:checked) {
                    border-color: var(--error-color);
                }

                &::after {
                    border-color: var(--error-color);
                    background: var(--error-color);
                }
            }
        }
    }

    &:is(:hover, :active, :focus) {
        &:not(.colored) {
            input, input::after {
                border-color: var(--hyperlink-color-highlighted);
            }
        }

        *, input ~ .label-text, .label-text:not(:first-of-type) {
            color: var(--hyperlink-color-highlighted);
        }
    }

    &.colored {
        --status-color: var(--error-color);

        input {
            &:checked {
                --status-color: var(--success-color);

                &::after {
                    border-color: var(--status-color);
                    background: var(--status-color);
                }
            }

            & ~ .label-text {
                color: var(--color-scheme-text-color);
            }
        }

        &:has(input:checked) {
            --status-color: var(--success-color);
        }

        &:is(:hover, :active, :focus) {
            input ~ .label-text {
                color: var(--hyperlink-color-highlighted);
            }
        }
    }

    /* begin toggle switches with switch-label */

    .switch-label-wrapper {
        display: flex;
        border: var(--default-border);
        background: var(--color-scheme-background);
        border-radius: 1.2rem;
        overflow: hidden;
        height: 2rem;
        padding: .2rem var(--default-padding);
        align-self: center;

        .label-text {
            min-width: 3.5rem;
        }

        input {
            border: 0;
            background: none;
            display: none;
            width: auto !important; /* overwrite settings for default toggle-switch */

            ~ .label-text {
                white-space: nowrap;
                left: 0;

                &::before {
                    content: "";
                    border-radius: var(--full-circle);
                    border: var(--default-border);
                    border-color: var(--status-color);
                    background: var(--hyperlink-color);
                    width: 1.4rem;
                    aspect-ratio: 1/1;
                    display: block;
                    align-self: center;
                    position: absolute;
                    right: -.7rem;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            + .label-text {
                padding-right: var(--default-padding);
                display: block;

                & + .label-text {
                    padding-left: var(--default-padding);
                    text-align: right;

                    &::before {
                        border-color: var(--default-text-color); /* do not change to color-scheme-text-color */
                        background: none;
                        left: -.7rem;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }

            &:checked + .label-text {
                & + .label-text {
                    left: -100%;
                    position: absolute;
                }
            }

            &:not(:checked) + .label-text:not(:only-child) {
                position: absolute;
                left: 100%;
            }
        }

        & + span {
            margin-left: calc(var(--default-margin) / 2);
        }

        &:has(input:checked) {
            --status-color: var(--hyperlink-color);
        }
    }

    &:not(.colored):is(:hover, :active, :focus) .switch-label-wrapper {
        border-color: var(--hyperlink-color-highlighted);

        input {
            &:checked + .label-text::before {
                border-color: var(--hyperlink-color-highlighted);
                background: var(--hyperlink-color-highlighted);
            }

            & + .label-text + .label-text::before {
                border-color: var(--hyperlink-color-highlighted);
            }
        }
    }

    /* end toggle switches with switch-label */

    /* begin toggle-switch (with switch-label) colored */

    &.colored {
        .switch-label-wrapper {
            --status-color: var(--error-color);
            border-color: var(--status-color);

            span.label-text {
                --status-color: var(--error-color);
                color: var(--status-color);

                &::before {
                    border-color: var(--status-color);
                }
            }

            &:has(input:checked) {
                --status-color: var(--success-color); /* overwrite default-checked-colored */
            }

            input:checked {
                & ~ span.label-text {
                    --status-color: var(--success-color);

                    &::before {
                        background: var(--status-color);
                    }
                }
            }

            + .label-text {
                span {
                    color: var(--color-scheme-text-color);
                }

                & + .label-text {
                    &::before {
                        border-color: var(--status-color);
                    }
                }
            }
        }
    }

    /* end toggle-switch (with switch-label) colored */
}

/* end toggle-switch-checkbox and -radio ------------------------------------------------------------------------------------------ */
/* end toggle switches with switch-label ------------------------------------------------------------------------------------------ */

/* begin multiple-switch  ------------------------------------------------------------------------------------------ */
.multiple-switch {
    display: block !important; /* overwrite default-behavior for labels */

    .label-text {
        display: inline-flex;
        justify-content: center;

        a[class*="icon-"], a:has([class*="icon-"]) {
            margin-left: calc(var(--default-margin) / 2);
        }
    }

    input {
        display: none !important;
    }

    label {
        padding: var(--default-padding);
        margin: 0;
        background: var(--color-scheme-background);
        border: var(--default-border);
        border-left: 0;
        flex-direction: column;

        &:first-child {
            border-left: var(--default-border);
            border-top-left-radius: var(--default-border-radius);
            border-bottom-left-radius: var(--default-border-radius);
        }

        &:last-child {
            border-top-right-radius: var(--default-border-radius);
            border-bottom-right-radius: var(--default-border-radius);
        }

        span {
            display: block;
            text-align: center;
            width: 100%;
            margin: 0;
        }

        input {
            &:checked ~ span {
                color: var(--hyperlink-color);
            }
        }

        &:is(:hover, :active, :focus) {
            cursor: pointer;

            input {
                ~ span {
                    color: var(--hyperlink-color);
                }

                &:checked ~ span {
                    color: var(--hyperlink-color);
                }
            }
        }

        [class*="icon-"] {
            font-size: 3rem;
            margin-bottom: calc(var(--default-margin) / 2);
        }

        &.active {
            background: var(--hyperlink-color);

            input:checked ~ span {
                color: var(--color-scheme-background);
            }
        }

        &.disabled {
            background: var(--disabled-background);
        }
    }

    &.disabled {
        label {
            background: var(--disabled-background) !important;

            &:hover {
                cursor: not-allowed;
            }
        }
    }
}

/* end multiple-switch ------------------------------------------------------------------------------------------ */

/* begin grid-containers ------------------------------------------------------------------------------------------ */
[class*="grid-container"] {
    display: grid;
    grid-gap: var(--grid-gap);

    [class*="grid-item"] {
        grid-column: span var(--grid-small-span);
    }

    &.stretch-items {
        grid-auto-rows: auto;
    }
}

.grid-container-create-columns {
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); /* creates grid-container with predefined number of columns */

    & > .grid-small-item {
        grid-column: span var(--grid-small-span);
    }

    & > .grid-large-item {
        grid-column: span var(--grid-large-span);
    }

    & > .grid-item-full-width {
        grid-column: span var(--grid-columns);
    }

    & > .grid-item-half-width {
        grid-column: span calc(var(--grid-columns) / 2);
    }
}

.grid-container-auto-columns {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

/* begin golden-ratio */
.flex-container-no-gap, [class*="grid-container"] {
    & > .golden-ratio-small-item {
        width: var(--golden-ratio-small-width);
    }

    & > .golden-ratio-large-item {
        width: var(--golden-ratio-large-width);
    }
}

.flex-container {
    & > .golden-ratio-small-item {
        width: calc(var(--golden-ratio-small-width) - calc(var(--default-gap) / 2));
    }

    & > .golden-ratio-large-item {
        width: calc(var(--golden-ratio-large-width) - calc(var(--default-gap) / 2));
    }
}

/* end golden-ratio */

/* begin classic grid controlled by classes */
.grid-item-1, .grid-span-1 {
    grid-column: span 1
}

.grid-item-2, .grid-span-2 {
    grid-column: span 2
}

.grid-item-3, .grid-span-3 {
    grid-column: span 3
}

.grid-item-4, .grid-span-4 {
    grid-column: span 4
}

.grid-item-5, .grid-span-5 {
    grid-column: span 5
}

.grid-item-6, .grid-span-6 {
    grid-column: span 6
}

.grid-item-7, .grid-span-7 {
    grid-column: span 7
}

.grid-item-8, .grid-span-8 {
    grid-column: span 8
}

.grid-item-9, .grid-span-9 {
    grid-column: span 9
}

.grid-item-10, .grid-span-10 {
    grid-column: span 10
}

.grid-item-11, .grid-span-11 {
    grid-column: span 11
}

.grid-item-12, .grid-span-12 {
    grid-column: span 12
}

/* end classic grid controlled by classes */
/* end grid-containers ------------------------------------------------------------------------------------------ */

/* begin headlines ------------------------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--headline-font-family);
    color: var(--headline-text-color);
    font-weight: var(--headline-font-weight);
    margin-top: var(--headline-margin-top);
    margin-bottom: var(--headline-margin-bottom);
    text-transform: var(--headline-text-transform);
    line-height: var(--headline-line-height);

    & > * {
        line-height: var(--headline-line-height);
    }
}

h1, h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6,
:where(h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

[class*="grid-container"] > :where(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 0;
}

h1, h1 > :is(a, span, [class*="icon-"]) {
    font-size: var(--headline-font-size-h1); /* font-size for h1 */
}

h2, h2 > :is(a, span, [class*="icon-"]) {
    font-size: var(--headline-font-size-h2); /* font-size for h2 */
}

h3, h3 > :is(a, span, [class*="icon-"]) {
    font-size: var(--headline-font-size-h3); /* font-size for h3 */
}

h4, h4 > :is(a, span, [class*="icon-"]) {
    font-size: var(--headline-font-size-h4); /* font-size for h4 */
}

h5, h5 > :is(a, span, [class*="icon-"]) {
    font-size: var(--headline-font-size-h5); /* font-size for h5 */
}

h6, h6 > :is(a, span, [class*="icon-"]) {
    font-size: var(--headline-font-size-h6); /* font-size for h6 */
}

/* end headlines ------------------------------------------------------------------------------------------ */

/* begin hyperlinks & anchors ------------------------------------------------------------------------------------------ */
a {
    color: var(--hyperlink-color);
    text-decoration: var(--hyperlink-text-decoration);
    text-decoration-color: var(--hyperlink-text-decoration-color);
    text-decoration-style: var(--hyperlink-text-decoration-style);
    text-decoration-thickness: var(--hyperlink-text-decoration-thickness);

    & * {
        color: inherit;
    }

    &:is(:hover, :active, :focus) {
        color: var(--hyperlink-color-highlighted);
        text-decoration: var(--hyperlink-text-decoration-highlighted);
    }

    &[class*="icon-"],
    & :where(span, [class*="icon-"]) {
        color: var(--hyperlink-color);
    }

    &:has(span[class*="icon-"]) {
        text-decoration: none;

        > :not(span[class*="icon-"]) {
            text-decoration: var(--hyperlink-text-decoration);
        }

        &:not(:only-child):not(.button) {
            display: flex;
            align-items: center;
            gap: var(--icon-and-text-gap);

            > span {
                margin: 0 !important; /* avoid overwrite by margins of span-siblings */
            }
        }

        &:where(:hover, :active, :focus, .active) {
            > :not(span[class*="icon-"]) {
                text-decoration: var(--hyperlink-text-decoration-highlighted);
            }
        }
    }

    &[class*="icon-"]:where(:hover, :active, :focus, .active),
    &:where(:hover, :active, :focus, .active) {
        > :where(span, [class*="icon-"]) {
            color: var(--hyperlink-color-highlighted);
        }

        > :not(span[class*="icon-"]) {
            text-decoration: var(--hyperlink-text-decoration-highlighted);
        }
    }

    & > [class*="icon-"] {
        font-size: var(--default-icon-size); /* adjust icon to size as text */
    }

    /* set display 'ruby' to avoid font-size-rendering for empty anchors in firefox and to let element not be counted as flex- or grid-item */

    &[id]:not([href]):empty {
        display: ruby;
    }

    &.disabled {
        color: var(--disabled-color) !important;

        & > * {
            color: inherit;
        }
    }

    &:has(dfn) {
        text-decoration: none;
    }
}

/* begin active links */
a.active:not([class*="icon-"]), li.active > a:not([class*="icon-"]) {
    background: var(--hyperlink-color);
    color: var(--color-white);
}

:is(a, li).active > :is(span, [class*="icon-"]) {
    color: var(--color-white);
}

li a.active {
    padding: .2rem calc(var(--default-padding) / 2);
    text-decoration: none;

    /* do not set :focus */
    &:is(:hover, :active) {
        color: var(--hyperlink-color);
        background: none;
    }
}

/* end active links */
/* end hyperlinks & anchors ------------------------------------------------------------------------------------------ */

/* begin icons ------------------------------------------------------------------------------------------ */
[class*="icon-"] {
    font-size: var(--default-icon-size);
    text-decoration: none !important;
    display: inline-block;

    & > * {
        font-family: var(--default-font-family);
        font-size: var(--default-icon-size);
    }

    & + span {
        margin-left: calc(var(--default-margin) / 2);
    }

    &.button, button&,
    :where(button, .button) & {
        line-height: var(--button-line-height);
    }
}

/* do not add hyphen between .icontext to avoid trouble by icon-font-renderings */
.icontext-wrapper {
    display: flex;
    align-items: center;
    gap: var(--icon-and-text-gap);

    span {
        margin: 0 !important; /* avoid overwrite by margins of span-siblings */
    }
}

/* do not replace by span + [class*="icon-"], because compiler cannot handle it */
span + [class*="icon-"] {
    margin-left: calc(var(--default-margin) / 2);
}

:where(h1, h2, h3, h4, h5, h6) [class*="icon-"] + span {
    margin-left: calc(var(--default-margin) / 2);
}

/* begin use icon as background */
.use-icon-as-background[class*="icon-"] {
    min-width: 0;
    min-height: 0;
    background: none !important;
    border: 0 !important;
    padding: 0;

    &::before {
        color: var(--secondary-color);
        font-size: 4rem;
    }

    &.primary {
        ::before {
            color: var(--primary-color);
        }

        &:is(:hover, &:active, :focus)::before {
            color: hsl(var(--primary-color-hue), var(--primary-color-saturation), 50%);
        }
    }

    &.tertiary {
        &::before {
            color: var(--tertiary-color);
        }

        &:is(:hover, &:active, :focus)::before {
            color: hsl(var(--tertiary-color-hue), var(--tertiary-color-saturation), 50%);
        }
    }

    > span[class*="icon-"] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: var(--icon-size-large);

        &::before {
            color: var(--color-white);
        }
    }
}

/* end use icon as background */
/* end icons ------------------------------------------------------------------------------------------ */

/* begin lists ------------------------------------------------------------------------------------------ */
/* begin ordered and unordered-lists */
/* indent for nested lists */
ul, ol {
    margin: 0 0 var(--default-margin) var(--default-margin);

    &.highlight-list-style-item {
        li::marker {
            color: var(--primary-color);
        }
    }

    &.no-indent {
        margin-left: 0;
    }

    /* nested lists */
    ul, ol {
        margin-bottom: 0;
    }

    /* text-indent for second-line */

    li {
        list-style-type: disc;
        list-style-position: outside;
        margin-left: 1.7rem; /* set back to native indent */
    }

    &.no-list-items {
        margin: 0;

        li {
            list-style-type: none;
            margin-left: 0;
        }
    }

    &.list-of-images {
        display: flex;
        margin: 0;
        gap: var(--default-gap);

        &.vertical {
            flex-direction: column;

            li {
                align-self: flex-start; /* avoid stretching over complete column */
            }
        }

        li {
            list-style-type: none;
            margin: 0;
        }

        a, img, figure {
            display: block;
        }
    }
}

ol li {
    list-style-type: decimal;
}

/* end ordered and unordered-lists */

/* begin description-lists */
dl {
    display: grid;
    grid-gap: .2rem 1rem; /* row, column */
    grid-template-columns: min-content minmax(min-content, auto);
    grid-auto-rows: min-content;
}

dt {
    white-space: nowrap;
}

dd {
    grid-column: 2;
    white-space: normal;

    ul, ol {
        margin: 0;
    }
}

/* end description-lists */
/* end lists ------------------------------------------------------------------------------------------ */

/* begin site-header ------------------------------------------------------------------------------------------ */
.site-header {
    grid-area: site-header;
    display: flex;
    flex-direction: column;
    border: var(--site-header-border);
    border-top: 0;
    border-left: 0;
    border-right: 0;
    background: var(--site-header-background);

    &.sticky {
        position: sticky;
        left: 0;
        right: 0;
        top: 0;
        z-index: 300;
    }

    header {
        max-width: var(--header-max-width);
        width: 100%;
        margin: 0 auto;
        padding: var(--site-header-padding);
        align-items: center;

        & > * {
            color: var(--site-header-text-color);
        }

        &:has(:only-child) {
            row-gap: 0;
        }

        .company-logo {
            grid-area: company-logo;
            grid-column: span var(--grid-small-span);

            a img {
                border: 0;
                max-height: 10rem;
            }
        }

        .main-navigation-wrapper {
            grid-area: main-navigation;
            grid-column: span var(--grid-large-span);
            border: 0;
            background: none;
            justify-content: flex-end;

            nav {
                border: 0;
                padding: 0;
                background: inherit;
                justify-content: flex-end;

                > ul {
                    background: inherit;

                    > li {
                        border: 0;
                        background: inherit;

                        &:first-child {
                            border: inherit; /* required for specificity */
                        }
                    }
                }
            }

            /* button to toggle potential offcanvas */
            #toggle-offcanvas {
                margin-left: auto;
                margin-bottom: 0;
            }
        }
    }
}

/* end site-header ------------------------------------------------------------------------------------------ */

/* begin site-footer ------------------------------------------------------------------------------------------ */
.site-footer {
    border: var(--site-footer-border);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    background: var(--site-footer-background);
    flex: none;

    footer {
        max-width: var(--footer-max-width);
        width: 100%;
        margin: 0 auto;
        padding: var(--site-footer-padding);

        h2, h3, h4, h5, h6 {
            color: var(--site-footer-headline-color);

            span {
                color: inherit;
            }
        }

        & * {
            color: var(--site-footer-text-color);
        }

        a {
            text-decoration: var(--site-footer-text-decoration);
            color: var(--site-footer-hyperlink-color);

            span {
                color: inherit;
            }

            &:hover, &:active, &:focus {
                color: var(--site-footer-hyperlink-color-highlighted);
                text-decoration: var(--site-footer-text-decoration-highlighted);
                text-decoration-color: var(--site-footer-text-decoration-color-highlighted);

                span {
                    color: inherit;
                }
            }

            &:has([class*="icon"]) {
                text-decoration: none;
            }
        }
    }
}

/* end site-footer ------------------------------------------------------------------------------------------ */

/* begin main-navigation ------------------------------------------------------------------------------------------ */
.main-navigation-wrapper {
    background: var(--main-navigation-background);
    border-top: var(--main-navigation-border);
    border-bottom: var(--main-navigation-border);
    border-radius: var(--main-navigation-border-radius);

    nav {
        width: 100%;
        padding-left: var(--default-padding);
        padding-right: var(--default-padding);
        border-radius: inherit;
    }

    nav, .nav {
        margin: 0 auto;
        display: flex;
        border-left: var(--main-navigation-border);
        border-right: var(--main-navigation-border);

        /* begin first-level only */

        > ul {
            display: flex;

            > li {
                border-right: var(--main-navigation-border);

                &:first-child {
                    border-left: var(--main-navigation-border);
                }

                a span[class*="icon-"] {
                    font-size: var(--main-navigation-main-level-icon-size);
                }
            }
        }
        /* end first-level only */

        /* begin all levels (incl. first-level) */
        ul {
            margin: 0;

            &.stretch-items {
                width: 100%;

                > li {
                    flex: 1;

                    a {
                        justify-content: center;
                    }
                }
            }

            li {
                list-style-type: none;
                margin: 0;
                white-space: nowrap;

                li a span[class*="icon-"].subentry-icon::before {
                    display: inline-block;
                    transform: rotate(-90deg);
                }

                a {
                    display: flex;
                    align-items: center;
                    padding: var(--default-padding);
                    text-decoration: none;
                    color: var(--main-navigation-hyperlink-color);

                    span, span[class*="icon-"] {
                        color: inherit;
                        white-space: nowrap;
                        text-decoration: inherit !important;
                    }

                    span[class*="icon-"] {
                        font-size: var(--main-navigation-sub-level-icon-size);

                        &.subentry-icon {
                            font-size: var(--font-size-small);
                        }
                    }

                    &:is(:hover, :active, :focus) {
                        background: var(--main-navigation-background-highlighted);
                        color: var(--main-navigation-hyperlink-color-highlighted);

                        :is(span, [class*="icon-"]) {
                            color: inherit;
                        }
                    }
                }

                &.active {
                    a, a:focus {
                        background: var(--primary-color);
                        color: var(--main-navigation-hyperlink-color-active);
                    }

                    :is(span, [class*="icon-"]) {
                        color: inherit;
                    }
                }

                &:is(:hover, :active, :focus, .active) {
                    /* show dropdown on hover */

                    > ul {
                        display: block;
                    }
                }
            }

            /* begin dropdown/second-level */

            ul {
                display: none;
                position: absolute; /* brings sub-navigation to own layer */
                left: 0; /* left-position of layer (as left as top-level-entries) */
                z-index: 100; /* brings sub-navigation to front */
                min-width: 100%;
                border-bottom: var(--main-navigation-border);
                border-bottom-left-radius: var(--main-navigation-border-radius);
                border-bottom-right-radius: var(--main-navigation-border-radius);
                background: var(--main-navigation-background);

                li {
                    border: var(--main-navigation-border);
                    border-bottom: 0;

                    &:last-child {
                        border-bottom-left-radius: var(--main-navigation-border-radius);
                        border-bottom-right-radius: var(--main-navigation-border-radius);

                        a {
                            border-bottom-left-radius: var(--main-navigation-border-radius);
                            border-bottom-right-radius: var(--main-navigation-border-radius);
                        }
                    }
                }

                /* third-level only */

                ul {
                    border-top: var(--main-navigation-border);
                    top: 0;
                    left: 100%;

                    li:first-child {
                        border-top: 0;
                    }
                }
            }

            /* end dropdown/second-level */
        }
    }

    /* button to toggle potential offcanvas */
    #toggle-offcanvas {
        margin-left: auto;
        display: none;
        margin-bottom: var(--default-margin);
    }
}

/* end main-navigation ------------------------------------------------------------------------------------------ */

/* begin system-messages ------------------------------------------------------------------------------------------ */
.system-message {
    display: flex;
    border: var(--system-message-border);
    border-width: .3rem;
    border-radius: var(--system-message-border-radius);
    font-weight: var(--system-message-font-weight);
    padding: var(--system-message-padding);
    margin-bottom: var(--default-margin);
    background: var(--system-message-status-color);
    background-clip: padding-box; /* important to keep border transparent */
    border-color: hsl(from var(--system-message-status-color) h 70% 50%);

    *, [class*="icon-"] {
        color: var(--system-message-text-color);
    }

    a {
        color: var(--system-message-text-color);
        text-decoration-color: var(--system-message-text-color);
        text-decoration: underline; /* ensure links can be identified easily with accessible text-color for system-messages */

        &:is(:hover, :active, :focus) {
            text-decoration: none;
        }
    }

    & > .message-headline {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    /* begin fake-icon (with checkbox) to close system-message */

    & > input[type="checkbox"] {
        appearance: none;
        border: var(--default-border);
        border-color: var(--system-message-text-color);
        border-radius: var(--default-border-radius);
        background: none;
        box-shadow: none;
        padding: var(--default-padding-half);
        cursor: pointer;
        aspect-ratio: 1/1;
        align-self: flex-start;
        line-height: .5;
        margin: 0;

        &:is(:hover, :active, :focus) {
            background: var(--system-message-text-color);
            color: var(--system-message-status-color);
        }

        &::before {
            content: "x";
        }
    }

    /* hide system-message when checkbox is checked */

    &:has(input[type="checkbox"]:checked) {
        display: none;
    }

    /* end fake-icon (with checkbox) to close system-message */

    .message-headline {
        margin: 0 auto;
    }

    /* begin different status */

    &.error {
        --system-message-status-color: var(--error-color);
    }

    &.warning {
        --system-message-status-color: var(--warning-color);
        --system-message-text-color: var(--color-dark-gray); /* must be set to a dark color for accessibility */
    }

    &.success {
        --system-message-status-color: var(--success-color);
    }

    &.info {
        --system-message-status-color: var(--info-color);
    }

    &.hide-close-icon {
        > input {
            display: none;
        }
    }

    /* end different status */
}

.grid-container-create-columns .system-message {
    grid-column: span var(--grid-columns);
}

/* end system-messages ------------------------------------------------------------------------------------------ */

/* begin tables ------------------------------------------------------------------------------------------ */
.table-wrapper {
    overflow-x: auto;

    table {
        margin-bottom: 0;
    }
}

table {
    border: var(--table-border);
    border-radius: var(--table-border-radius);

    &.full-width {
        display: table; /* tables must have display: table; */
    }

    a {
        display: block;
    }

    thead {
        &.word-wrap-normal th {
            word-wrap: normal; /* break words only at allowed break points */
        }

        tr {
            border-top-left-radius: var(--table-border-radius);
            border-top-right-radius: var(--table-border-radius);
        }
    }

    thead, th:first-child, th:last-child {
        border-radius: var(--table-border-radius);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    tr {
        background: var(--table-row-background);

        &:last-child th[scope="row"] {
            border-bottom: 0;
        }

        &:is(:hover, :active, :focus) td {
            background: var(--table-row-background-highlighted);
        }

        &:last-of-type td {
            border-bottom: 0;

            &:first-child {
                border-bottom-left-radius: var(--table-border-radius);
            }

            &:last-child {
                border-bottom-right-radius: var(--table-border-radius);
            }
        }

        /* begin highlighted table rows/cells */

        &.active td, td.active {
            background: var(--active-table-cell-background);
            color: var(--active-table-cell-text-color);
        }

        tr.active:is(:hover, :active, :focus) td,
        td.active:is(:hover, :active, :focus),
        tr:is(:hover, :active, :focus) td.active {
            background: var(--active-table-cell-background-highlighted);
            color: var(--active-table-cell-text-color-highlighted);
        }

        /* end highlighted table rows/cells */

        th, td {
            padding: var(--table-cell-padding);
            border: var(--table-cell-border);
            border-top: 0;
            border-left: 0;
            color: var(--table-cell-text-color);

            &:last-child {
                border-right: 0;
            }
        }

        th {
            background: var(--table-head-background);
            color: var(--table-head-text-color);
            font-size: var(--table-head-font-size);
            font-weight: var(--table-head-font-weight);
            text-align: var(--table-head-text-align);
            border-right: var(--table-cell-border);
            border-right-color: var(--color-scheme-text-color-inverted);
            white-space: nowrap;

            &:first-child {
                border-top-right-radius: 0;
            }

            &:last-child {
                border-top-left-radius: 0;
            }

            &[scope="row"] {
                border-radius: 0;
                border-bottom: var(--table-border);
                border-bottom-color: var(--color-white);
            }
        }

        td {
            vertical-align: middle;

            &[colspan] {
                text-align: center;
            }

            form {
                margin-bottom: 0; /* margin-bottoms of forms in table-cells */
            }

            .toggle-switch > span {
                white-space: nowrap;
            }

            &.center-content {
                text-align: center;

                :is(button, .button) {
                    float: none;
                    display: table;
                    margin: 0 auto;
                }

                input {
                    float: none;
                    text-align: center;
                }
            }
        }
    }

    tfoot {
        border: var(--table-border);

        td {
            border-top: var(--table-border);
        }
    }

    tfoot tr, tbody:last-child tr:last-of-type {
        border-bottom-left-radius: var(--table-border-radius);
        border-bottom-right-radius: var(--table-border-radius);
    }
}

[class*="grid-container"] table {
    align-self: start;
}

/* end tables ------------------------------------------------------------------------------------------ */
/* ---------------------------------------------- END MAIN STYLES -------------------------------------------------- */

/* ---------------------------------------------- BEGIN MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */
/* begin container-styles ------------------------------------------------------------------------------------------ */
@container (width <= 400px) {
    .flex-container, .button-wrapper {
        flex-direction: column; /* arrange flex-items vertically */

        > * {
            max-width: 100%;
            width: 100%;
            flex: none !important;
        }

        legend, .place-inside {
            width: auto;
        }

        &.row-for-small {
            flex-direction: row; /* arrange flex-items horizontally */

            & > * {
                width: 100%;
            }
        }
    }

    fieldset {
        padding: var(--default-padding);
        container-type: inline-size; /* enables flex-containers in fieldset to work with @container (DO NOT SET TO 'size' because of render-height-issue) */

        [type="submit"].button {
            width: 100%;
        }
    }

    .button-wrapper {
        container-type: inline-size; /* enables button-wrappers to work with @container (DO NOT SET TO 'size' because of render-height-issue) */

        .button {
            width: 100%;
        }
    }
}

/* end container-styles ------------------------------------------------------------------------------------------ */

/* begin css webkit-browsers only ------------------------------------------------------------------------------------------ */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    :where([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="month"], [type="number"],
[type="range"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="week"]) {
        -webkit-appearance: none; /* avoid default rounded border on safari */
    }

    /* set disabled-color in chrome (will be to set darkest-possible value by browser) */
    select[disabled], select[disabled] > option {
        color: var(--color-black) !important;
    }
}

html::-webkit-scrollbar {
    width: 1vw;
}

html::-webkit-scrollbar-thumb {
    background-color: var(--primary-color-reduced-opacity);
    border-radius: var(--default-border-radius);
}

html::-webkit-scrollbar-thumb:hover { /* do not set :active, :focus (does not work anymore then) */
    background-color: var(--primary-color);
}

html::-webkit-scrollbar-track {
    background-color: var(--color-light-gray);
}

html::-webkit-scrollbar-track:hover { /* do not set :active, :focus (does not work anymore then) */
    background-color: var(--color-medium-gray);
}

/* end css webkit-browsers only ------------------------------------------------------------------------------------------ */

/* begin css firefox only ------------------------------------------------------------------------------------------ */
/* set disabled-color to default */
@-moz-document url-prefix() {
    select[disabled], select[disabled] > option {
        color: var(--disabled-color) !important;
    }
}

/* end css firefox only ------------------------------------------------------------------------------------------ */
/* ---------------------------------------------- END MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */

/* begin css for print only ------------------------------------------------------------------------------------------ */
@media only print {
    * {
        color: var(--color-dark-gray);
    }

    a[href]:after {
        content: " <" attr(href) ">";
        font-style: italic;
    }

    *[cite]:after {
        content: close-quote " (Source: " attr(cite) ")";
    }

    img[alt]:after {
        content: "\A (" attr(alt) ")";
    }
}

/* end css for print only ------------------------------------------------------------------------------------------ */

/* begin css for dark-mode only ------------------------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    html {
        --show-in-light-mode-only: none; /* display-behavior for elements using .show-in-light-mode-only */
        --show-in-dark-mode-only: block; /* display-behavior for elements using .show-in-dark-mode-only */
    }

    html::-webkit-scrollbar-track {
        background-color: var(--color-scheme-background);
    }
}

/* end css for dark-mode only ------------------------------------------------------------------------------------------ */

/* begin iphone-styles only */
@supports (-webkit-touch-callout: none) {
    html {
        border: 2px solid red !important;
    }

    .table-wrapper {
        border: 2px solid green !important;
        max-width: 100%;
    }
}

/* end iphone-styles only */