@charset "UTF-8";
/* ---------------------------------------------------------------------------- (i) Fonts importieren -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css?family=Fredericka+the+Great|Merriweather:300,300i,400,400i,700,700i,900");
/* ---------------------------------------------------------------------------- (ii) Elements Styling System importieren -------------------------------------------------------------------------- */
/* Single point of include für die Erweiterbarkeit */
/* ---------------------------------------------------------------------------- (i) Variablen mit vernünftigen Grundeinstellungen einlesen. -------------------------------------------------------------------------- */
/* Colors ------------------------------------------------------------------- */
/* Backgrounds -------------------------------------------------------------- | @see https://www.w3schools.com/w3css/w3css_color_themes.asp +--------------------------------------------------------------------------- */
/* Fonts -------------------------------------------------------------------- */
/* vendor/base.scss --------------------------------------------------------- */
/* typography/block.scss ---------------------------------------------------- */
/* typography/inline.scss --------------------------------------------------- */
/* typography/manual.scss --------------------------------------------------- */
/* code/styles.scss --------------------------------------------------------- */
/* table/styles.scss -------------------------------------------------------- */
/* form/form.scss ----------------------------------------------------------- */
/* form/checkbox.scss ------------------------------------------------------- */
/* form/radio.scss ---------------------------------------------------------- */
/* element/audio.scss ------------------------------------------------------- */
/* element/button.scss ------------------------------------------------------ */
/* element/cookieconsent.scss ----------------------------------------------- */
/* element/credit.scss ------------------------------------------------------ */
/* element/figure.scss ------------------------------------------------------ */
/* element/footer.scss ------------------------------------------------------ */
/* element/footnotes.scss --------------------------------------------------- */
/* element/header.scss ------------------------------------------------------ */
/* element/infobox.scss ----------------------------------------------------- */
/* element/navigation.scss -------------------------------------------------- */
/* element/sidebar.scss ----------------------------------------------------- */
/* element/social.scss ------------------------------------------------------ */
/* element/testimonial.scss ------------------------------------------------- */
/* element/youtube.scss ----------------------------------------------------- */
.sans-serif { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

.serif { font-family: "Merriweather", "Apple Garamond", Georgia, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

.fw-bolder { font-weight: bolder; }

/* Backgrounds (use as mixin class) ----------------------------------------- */
.bg-red { background-color: var(--bg-red); }

.bg-pink { background-color: var(--bg-pink); }

.bg-purple { background-color: var(--bg-purple); }

.bg-indigo { background-color: var(--bg-indigo); }

.bg-blue { background-color: var(--bg-blue); }

.bg-cyan { background-color: var(--bg-cyan); }

.bg-teal { background-color: var(--bg-teal); }

.bg-green { background-color: var(--bg-green); }

.bg-lime { background-color: var(--bg-lime); }

.bg-yellow { background-color: var(--bg-yellow); }

.bg-orange { background-color: var(--bg-orange); }

.bg-gray { background-color: var(--bg-gray); }

/* Margins ------------------------------------------------------------------ */
.mr-1 { margin-right: .25rem; }

/* Orientierung Bilder im Fließtext ----------------------------------------- */
.left { float: left; margin-right: 1rem; }

.right { float: right; margin-left: 1rem; }

.w-2\/3 { max-width: 58.75rem; margin: 0 auto; }

@media (min-width: 1024px) { .w-2\/3 { padding-left: 11px; } }

/* Icons ------------------------------------------------------------------- */
.icon { width: 1rem; height: 1rem; }

/* ---------------------------------------------------------------------------- (ii) Standard Farbschema setzen. -------------------------------------------------------------------------- */
:root { --font-size-on-mobile: 87.5%; --font-size-on-desktop: 112.5%; --font-color: #374151; --blockquote-bg-color: #f1f5f9; --blockquote-border-color: #97a6ba; --blockquote-color: #374151; --link-color: #cfd8e3; --mark-color: #e2e8f0; --inline-code-color: #475569; --inline-code-bg-color: #e2e8f0; --border-color: white; --white: white; --black: black; --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cfd8e3; --gray-400: #97a6ba; --gray-500: #64748b; --gray-600: #475569; --gray-700: #364152; --gray-800: #27303f; --gray-900: #1a202e; --initiale-color: #374151; --bg-red: #fef4f3 !important; --bg-pink: #fef2f6 !important; --bg-purple: #faf0fc !important; --bg-indigo: #f3f4fb !important; --bg-blue: #f2f9fe !important; --bg-cyan: #edfdff !important; --bg-teal: #e9fffd !important; --bg-green: #f4faf4 !important; --bg-lime: #fcfdf3 !important; --bg-yellow: #fffef3 !important; --bg-orange: #fff5f2 !important; --bg-gray: #f8fafc; --callout-bg-color: #f8fafc; --callout-border-color: #97a6ba; --avatar-bg-color: #f8fafc; --code-border-color: #e5e7eb; --code-lineno-color: #6b7280; --table-bg-color: white; --table-thead-bg-color: white; --table-odd-bg-color: white; --table-even-bg-color: white; --table-border-color: #cfd8e3; --scedule-color: #fff; --scedule-rahmen-bg-color: #07B86C; --scedule-intro-bg-color: #7E02C9; --scedule-support-bg-color: #26A3D7; --scedule-oss-bg-color: #FFC000; --scedule-lecture-bg-color: #C8117D; --scedule-summary-bg-color: #83D8F2; --scedule-break-bg-color: #dbdbdb; --scedule-break-color: #000; --form-border-color: #e5e7eb; --form-legend-color: #71767C; --form-label-color: #64748b; --form-field-border-color: #ECECEC; --form-field-bg-color: #ffffff; --form-field-focus-color: #0075d5; --form-field-focus-shadow: rgba(164, 202, 254, 0.45); --form-field-focus-border: #a4cafe; --form-field-valid-color: green; --form-checkbox-color: #3f83f8; --form-radio-color: #3f83f8; --audio-source-color: #97a6ba; --audio-description-color: #475569; --audio-meta-info-color: white; --audio-progress-bg-color: #313252; --audio-progress-color: #00a0ff; --audio-meta-info-bg-color: #202136; --button-color: white; --button-bg-color: #475569; --button-hover-color: #364152; --button-focus-color: #27303f; --button-active-color: #364152; --button-text-style: italic; --button-alt-color: #97a6ba; --cc-bg-color: #057a55; --cc-icon-bg-color: #03543f; --cc-button-hover-color: #0e9f6e; --cc-button-color: #057a55; --cc-button-hover-color: #0e9f6e; --cc-message-color: white; --cc-svg-icon-color: white; --cc-accept-button-bg-color: white; --cc-accept-button-shadow: rgba(118, 169, 250, 0.45); --credit-border-color: #333; --figure-figcaption-color: #475569; --figure-header-color: #97a6ba; --footer-icon-color: #64748b; --footer-icon-color-hover: #27303f; --footer-border-color: #e5e7eb; --footnotes-color: #364152; --footnotes-hover-color: #97a6ba; --header-figure-bg-color: white; --header-kicker-color: #64748b; --header-description-color: #364152; --header-meta-color: #64748b; --infobox-bg-color: #f8fafc; --infobox-mark-bg-color: #e2e8f0; --infobox-meta-font-style: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --infobox-meta-color: #97a6ba; --nav-bg-color: white; --nav-border-color: #e5e7eb; --nav-cell-border-color: white; --nav-open-sidebar-color: #6b7280; --nav-open-sidebar-focus-color: #10b981; --nav-top-link-active-bg-color: #f3f4f6; --nav-top-link-active-color: #111827; --nav-top-link-inactive-color: #4b5563; --nav-top-link-inactive-hover-color: #111827; --nav-top-link-inactive-hover-bg-color: #f9fafb; --nav-search-field-color: #9ca3af; --nav-search-field-within-color: #4b5563; --nav-search-field-text-color: #111827; --nav-search-field-placeholder-color: #6b7280; --nav-search-field-placeholder-focus: #9ca3af; --nav-cta-link-color: white; --nav-cta-link-bg-color: #475569; --nav-cta-link-bg-hover-color: #364152; --nav-cta-link-focus-color: #e2e8f0; --nav-cta-link-bg-active-color: #64748b; --sidebar-overlay-bg-color: #4b5563; --sidebar-bg-color: white; --sidebar-close-button-color: #e5e7eb; --sidebar-close-button-hover-color: white; --sidebar-item-color: #9ca3af; --sidebar-group-hover-color: #6b7280; --sidebar-item-active-color: #111827; --sidebar-item-active-bg-color: #f3f4f6; --sidebar-item-inactive-color: #4b5563; --sidebar-item-inactive-hover-bg-color: #f9fafb; --sidebar-item-inactive-hover-color: #111827; --social-icon-color: #64748b; --social-icon-color-hover: #27303f; --testimonial-avatar-border-color: white; --youtube-kicker-color: #e53e3e; --youtube-description-color: #475569; }

/* ---------------------------------------------------------------------------- (iii) Vendorstile importieren. -------------------------------------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document ========================================================================== */
/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */
html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/* Sections ========================================================================== */
/** Remove the margin in all browsers. */
body { margin: 0; }

/** Render the `main` element consistently in IE. */
main { display: block; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/* Grouping content ========================================================================== */
/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/* Text-level semantics ========================================================================== */
/** Remove the gray background on active links in IE 10. */
a { background-color: transparent; }

/** 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/** Remove the border on images inside links in IE 10. */
img { border-style: none; }

/* Forms ========================================================================== */
/** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */
button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** Correct the inability to style clickable types in iOS and Safari. */
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Correct the padding in Firefox. */
fieldset { padding: 0.35em 0.75em 0.625em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Remove the default vertical scrollbar in IE 10+. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10. 2. Remove the padding in IE 10. */
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* Interactive ========================================================================== */
/* Add the correct display in Edge, IE 10+, and Firefox. */
details { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Misc ========================================================================== */
/** Add the correct display in IE 10+. */
template { display: none; }

/** Add the correct display in IE 10. */
[hidden] { display: none; }

/** ========================================================================= Manually forked from SUIT CSS Base: https://github.com/suitcss/base A thin layer on top of normalize.css that provides a starting point more suitable for web applications. ------------------------------------------------------------------------- */
/** Removes the default spacing and border for appropriate elements. */
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }

button { background-color: transparent; background-image: none; }

/** Work around a Firefox/IE bug where the transparent `button` background results in a loss of the default `button` focus styles. */
button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; }

fieldset { margin: 0; padding: 0; }

ol, ul { list-style: none; margin: 0; padding: 0; }

/** ========================================================================= Manually forked from Tailwind custom reset styles (@base) ------------------------------------------------------------------------- */
html { font-family: "Merriweather", "Apple Garamond", Georgia, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: var(--font-size-on-mobile); line-height: 1.75; color: var(--font-color); }

@media (min-width: 640px) { html { font-size: var(--font-size-on-desktop); } }

/** 1. Prevent padding and border from affecting element width. We used to set this in the html element and inherit from the parent element for everything else. This caused issues in shadow-dom-enhanced elements like <details> where the content is wrapped by a div with box-sizing set to `content-box`. https://github.com/mozdevs/cssremedy/issues/4 2. Allow adding a border to an element by just adding a border-width. By default, the way the browser specifies that an element should have no border is by setting it's border-style to `none` in the user-agent stylesheet. In order to easily add borders to elements by just setting the `border-width` property, we change the default border-style for all elements to `solid`, and use border-width to hide them instead. This way our `border` utilities only need to set the `border-width` property instead of the entire `border` shorthand, making our border utilities much more straightforward to compose. https://github.com/tailwindcss/tailwindcss/pull/116 */
*, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: var(--border-color); /* 2 */ }

/* Ensure horizontal rules are visible by default */
hr { border-top-width: 1px; }

/** Undo the `border-style: none` reset that Normalize applies to images so that our `border-{width}` utilities have the expected effect. The Normalize reset is unnecessary for us since we default the border-width to 0 on all elements. https://github.com/tailwindcss/tailwindcss/issues/362 */
img { border-style: solid; }

textarea { resize: vertical; }

input::-moz-placeholder, textarea::-moz-placeholder { color: #a0aec0; }

input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #a0aec0; }

input::placeholder, textarea::placeholder { color: #a0aec0; }

button, [role="button"] { cursor: pointer; }

table { border-collapse: collapse; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

/** Reset links to optimize for opt-in styling instead of opt-out. */
a { color: inherit; text-decoration: inherit; }

/** Reset form element properties that are easy to forget to style explicitly so you don't inadvertently introduce styles that deviate from your design system. These styles supplement a partial reset that is already applied by normalize.css. */
button, input, optgroup, select, textarea { padding: 0; line-height: inherit; color: inherit; }

/** Use the configured 'mono' font family for elements that are expected to be rendered with a monospace font, falling back to the system monospace stack if there is no configured 'mono' font family. */
pre, code, kbd, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; line-height: 1.25; }

/** Make replaced elements `display: block` by default as that's the behavior you want almost all of the time. Inspired by CSS Remedy, with `svg` added as well. https://github.com/mozdevs/cssremedy/issues/14 */
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }

/** Constrain images and videos to the parent width and preserve their instrinsic aspect ratio. https://github.com/mozdevs/cssremedy/issues/14 */
img, video { max-width: 100%; height: auto; }

/* Improved screen reader only CSS class @author Gaël Poupard @note Based on Yahoo!'s technique @author Thierry Koblentz @see https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html 1. @note `clip` is deprecated but works everywhere @see https://developer.mozilla.org/en-US/docs/Web/CSS/clip 2. @note `clip-path` is the future-proof version, but not very well supported yet @see https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path @see http://caniuse.com/#search=clip-path @author Yvain Liechti @see https://twitter.com/ryuran78/status/778943389819604992 3. @note preventing text to be condensed author J. Renée Beach @see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe @note Drupal 8 goes with word-wrap: normal instead @see https://www.drupal.org/node/2045151 @see http://cgit.drupalcode.org/drupal/commit/?id=5b847ea 4. @note !important is important @note Obviously you wanna hide something @author Harry Roberts @see https://csswizardry.com/2016/05/the-importance-of-important/ License: https://codepen.io/ffoodd/pen/gwKZyq/license --------------------------------------------------------------------------- */
.sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; /* 2 */ height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; /* 3 */ }

/* Use in conjunction with .sr-only to only display content when it's focused. @note Useful for skip links  @see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 @note Based on a HTML5 Boilerplate technique, included in Bootstrap @note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver @author Sylvain Pigeard @see https://github.com/twbs/bootstrap/issues/20732 */
.sr-only-focusable:focus, .sr-only-focusable:active { clip: auto !important; -webkit-clip-path: none !important; clip-path: none !important; height: auto !important; margin: auto !important; overflow: visible !important; width: auto !important; white-space: normal !important; }

#skiplinks { display: none !important; }

/* ---------------------------------------------------------------------------- (iv) Basisstile importieren. -------------------------------------------------------------------------- */
.default-w { max-width: 40rem; margin: 0 auto; }

article p, article h1, article h2, article h3, article h4, article dl, article ol, article ul, article blockquote, article details { max-width: 40rem; margin: 0 auto; }

article p { padding: 0 1rem .5rem; font-weight: 300; }

article p.initiale { margin-top: 3em; }

article p.initiale:first-letter { font-family: "Fredericka the Great", cursive; font-size: 3.5em; line-height: 1em; font-style: normal; color: #374151; }

article p code { padding: .125em .25em; font-size: .8em; color: var(--inline-code-color); background-color: var(--inline-code-bg-color); border-radius: 4px; }

article h2 { padding: 1.5rem 1rem .5rem; font-weight: 700; font-size: 1.5rem; }

article h3 { padding: 1rem 1rem .5rem; font-weight: 700; font-size: 1.25rem; }

article h4 { padding: .75rem 1rem .5rem; font-weight: 700; }

article blockquote { background-color: var(--blockquote-bg-color); border-left-width: .25rem; border-left-style: solid; border-left-color: var(--blockquote-border-color); color: var(--blockquote-color); font-style: italic; margin-bottom: 1.25rem; }

article blockquote p { padding: .5rem 1rem .5rem .75rem; }

article dl { padding: 0 1rem .5rem; }

article dl dt { font-weight: bolder; }

article dl dd { font-style: italic; margin-left: 1em; }

article ol { padding: 0 1rem .5rem; list-style: decimal; list-style-position: inside; }

article ul { padding: 0 1rem .5rem; list-style: circle; list-style-position: inside; }

article details > p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: smaller; padding: 0 7.5rem .75rem 0; }

@media (min-width: 1024px) { .default-w { padding: 0 1rem 1rem; } article p, article h1, article h2, article h3, article h4, article dl, article ol, article ul, article blockquote, article details { padding: 0 1rem 1rem; } }

article a { background-color: transparent; border-color: var(--link-color); border-style: solid; border-width: 0 0 1px; box-shadow: inset 0 -4px 0 var(--link-color); color: inherit; text-decoration: none; transition: background-color 250ms ease, color 250ms ease, box-shadow 250ms ease, border-color 250ms ease; }

article a:hover, article a.citation:hover, article a.keyword:hover { color: var(--font-color); box-shadow: initial; }

article a svg { width: 1rem; height: 1rem; display: inline-block; }

article a.citation { box-shadow: inset 0 -1px 0 var(--link-color); }

article a.keyword { box-shadow: inset 0 -1px 0 var(--link-color); font-variant: small-caps; }

article a[role=button] { box-shadow: initial; border: initial; text-decoration: none; }

article em, article .em { font-weight: 500; }

article em i, article .em i { font-style: normal; }

article strong, article .strong { font-weight: bolder; }

article strong.callout, article .strong.callout { display: table; background-color: var(--callout-bg-color); padding: .55rem; border-left: 0.25rem solid var(--callout-border-color); margin-left: -.25rem; margin-bottom: 2rem; width: 11rem; }

article abbr { font-style: italic; }

article img.person { width: auto; height: 150px; padding: .7%; border-radius: 50%; background: var(--avatar-bg-color); }

/* code @see _block.scss p */
/* img @see ../element/_figure.scss */
article b, article .b { font-weight: inherit; text-decoration: underline; }

article i, article .i { font-style: italic; }

article mark, article .mark { background-color: var(--mark-color); padding-left: .15em; padding-right: .15em; }

article q { quotes: "»" "«"; font-style: italic; }

article sup, article sub { font-size: 50%; }

article kbd { padding: .125em .25em; font-size: .8em; color: var(--white); background-color: var(--font-color); border-radius: .125em; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); }

article small { font-size: .75em; }

/* cite, dfn, s, span, u */
article em.key { font-variant: small-caps; font-style: normal; font-weight: inherit; }

article em[lang] { font-weight: 300; }

a:visited code { border-color: var(--code-border-color); }

/* Content structure for highlighted code blocks using fences or Liquid (1) fences, no kramdown line_numbers div.highlighter-rouge > div.highlight > pre.highlight > code (2) fences, kramdown line_numbers div.highlighter-rouge > div.highlight > pre.highlight > code > table.rouge-table (3) Liquid highlight tag figure.highlight > pre > code (4) Liquid highlight tag linenos figure.highlight > pre > code > table.rouge-table   */
div.highlighter-rouge, figure.highlight { border-top: 1px solid var(--code-border-color); border-bottom: 1px solid var(--code-border-color); }

figure.highlight { max-width: initial; }

@media (min-width: 1024px) { div.highlight { max-width: 40rem; margin: 0 auto; } }

@media (min-width: 1024px) { div.highlight { max-width: 40rem; margin: 0 auto; } }

div.highlighter-rouge { width: 100%; margin-top: 1.75rem; margin-bottom: 1.75rem; overflow-x: auto; background-color: #fff; -webkit-overflow-scrolling: touch; }

div.highlighter-rouge div.highlight { padding: 1rem; }

div.highlighter-rouge div.highlight > pre.highlight > code { font-size: .75rem; background-color: #fff; }

@media (min-width: 1024px) { figure.highlight.nolinenos > pre { max-width: 40rem; margin: 0 auto; } }

@media (min-width: 1024px) { figure.highlight.linenos > pre { max-width: 40rem; margin: 0 auto; } }

figure.highlight { width: 100%; margin-top: 1.75rem; margin-bottom: 1.75rem; overflow-x: auto; background-color: #fff; -webkit-overflow-scrolling: touch; }

figure.highlight pre { padding: 1rem; }

figure.highlight pre code { font-size: .75rem; background-color: #fff; }

.highlight .rouge-table { padding: 0; margin: 0; border: 0; box-shadow: none; }

.highlight .rouge-table td, .highlight .rouge-table pre { font-size: .75rem; min-width: 0; padding: 0; border: 0; background-color: #fff; }

.highlight .rouge-table td.gl { padding-right: .75rem; }

.highlight .rouge-table pre { margin: 0; line-height: 1.75; }

.highlight .rouge-table pre.lineno { color: var(--code-lineno-color); }

.highlight .c { color: #586e75; }

.highlight .err { color: #93a1a1; }

.highlight .g { color: #93a1a1; }

.highlight .k { color: #859900; }

.highlight .l { color: #93a1a1; }

.highlight .n { color: #93a1a1; }

.highlight .o { color: #859900; }

.highlight .x { color: #cb4b16; }

.highlight .p { color: #93a1a1; }

.highlight .cm { color: #586e75; }

.highlight .cp { color: #859900; }

.highlight .c1 { color: #586e75; }

.highlight .cs { color: #859900; }

.highlight .gd { color: #2aa198; }

.highlight .ge { font-style: italic; color: #93a1a1; }

.highlight .gr { color: #dc322f; }

.highlight .gh { color: #cb4b16; }

.highlight .gi { color: #859900; }

.highlight .go { color: #93a1a1; }

.highlight .gp { color: #93a1a1; }

.highlight .gs { font-weight: bold; color: #93a1a1; }

.highlight .gu { color: #cb4b16; }

.highlight .gt { color: #93a1a1; }

.highlight .kc { color: #cb4b16; }

.highlight .kd { color: #268bd2; }

.highlight .kn { color: #859900; }

.highlight .kp { color: #859900; }

.highlight .kr { color: #268bd2; }

.highlight .kt { color: #dc322f; }

.highlight .ld { color: #93a1a1; }

.highlight .m { color: #2aa198; }

.highlight .s { color: #2aa198; }

.highlight .na { color: #555; }

.highlight .nb { color: #b58900; }

.highlight .nc { color: #268bd2; }

.highlight .no { color: #cb4b16; }

.highlight .nd { color: #268bd2; }

.highlight .ni { color: #cb4b16; }

.highlight .ne { color: #cb4b16; }

.highlight .nf { color: #268bd2; }

.highlight .nl { color: #555; }

.highlight .nn { color: #93a1a1; }

.highlight .nx { color: #555; }

.highlight .py { color: #93a1a1; }

.highlight .nt { color: #268bd2; }

.highlight .nv { color: #268bd2; }

.highlight .ow { color: #859900; }

.highlight .w { color: #93a1a1; }

.highlight .mf { color: #2aa198; }

.highlight .mh { color: #2aa198; }

.highlight .mi { color: #2aa198; }

.highlight .mo { color: #2aa198; }

.highlight .sb { color: #586e75; }

.highlight .sc { color: #2aa198; }

.highlight .sd { color: #93a1a1; }

.highlight .s2 { color: #2aa198; }

.highlight .se { color: #cb4b16; }

.highlight .sh { color: #93a1a1; }

.highlight .si { color: #2aa198; }

.highlight .sx { color: #2aa198; }

.highlight .sr { color: #dc322f; }

.highlight .s1 { color: #2aa198; }

.highlight .ss { color: #2aa198; }

.highlight .bp { color: #268bd2; }

.highlight .vc { color: #268bd2; }

.highlight .vg { color: #268bd2; }

.highlight .vi { color: #268bd2; }

.highlight .il { color: #2aa198; }

.code-example { padding: .75rem; margin-bottom: .75rem; overflow: auto; border: 1px solid var(--code-border-color); border-radius: 4px; }

.code-example + .highlighter-rouge, .code-example + figure.highlight { position: relative; margin-top: -1rem; border-right: 1px solid var(--code-border-color); border-bottom: 1px solid var(--code-border-color); border-left: 1px solid var(--code-border-color); border-top-left-radius: 0; border-top-right-radius: 0; }

table { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: .875rem; margin-top: 1.75rem; margin-bottom: 1.75rem; border-collapse: collapse; border-spacing: 0; background-color: var(--table-bg-color); width: 100%; }

table td, table th { padding: .25rem .125rem; }

table th { vertical-align: bottom; }

table > tr:first-child, table > :first-child, table > :first-child > tr:first-child { background-color: var(--table-thead-bg-color); }

table tr:nth-child(even) { background-color: var(--table-even-bg-color); }

table tr:nth-child(odd) { background-color: var(--table-odd-bg-color); }

table > tr:not(:first-child), table > :not(:first-child) > tr, table > :first-child > tr:not(:first-child) { border-top: 1px solid var(--table-border-color); }

table td { vertical-align: center; }

@media (min-width: 1024px) { table { max-width: 40rem; margin: 1.75rem auto; } }

table.scedule { max-width: 60rem; border-collapse: initial; border-spacing: 1px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: smaller; hyphens: none; }

table.scedule td { text-align: center; height: 4rem; color: var(--scedule-color); border: none; }

table.scedule td.rahmen { background-color: var(--scedule-rahmen-bg-color); }

table.scedule td.intro { background-color: var(--scedule-intro-bg-color); }

table.scedule td.support { background-color: var(--scedule-support-bg-color); }

table.scedule td.oss { background-color: var(--scedule-oss-bg-color); }

table.scedule td.lecture { background-color: var(--scedule-lecture-bg-color); }

table.scedule td.summary { background-color: var(--scedule-summary-bg-color); }

table.scedule td.break { background-color: var(--scedule-break-bg-color); color: var(--scedule-break-color); }

table.scedule td:first-child { border-top: 1px solid #333; font-size: smaller; vertical-align: top; text-align: left; color: #000; }

table.scedule tr:last-child > td:first-child { border-top: none; }

table.scedule th { width: 19%; }

table.scedule th:first-child { width: 5%; text-align: left; }

table.scedule.lg { display: none; }

table.scedule.sm { display: table; }

@media (min-width: 1024px) { table.scedule.lg { display: table; } table.scedule.sm { display: none; } }

table.cutline { border-collapse: inherit; border-spacing: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: small; hyphens: none; margin: 1.5rem auto 3rem; width: 100%; max-width: 600px; }

table.cutline td { border: none; vertical-align: top; min-height: 2.5rem; }

table.cutline td div { height: 2rem; width: 2rem; margin-top: .25rem; }

table.cutline td div.rahmen { background-color: var(--scedule-rahmen-bg-color); }

table.cutline td div.intro { background-color: var(--scedule-intro-bg-color); }

table.cutline td div.support { background-color: var(--scedule-support-bg-color); }

table.cutline td div.oss { background-color: var(--scedule-oss-bg-color); }

table.cutline td div.lecture { background-color: var(--scedule-lecture-bg-color); }

table.cutline td div.summary { background-color: var(--scedule-summary-bg-color); }

table.cutline td div.break { background-color: var(--scedule-break-bg-color); }

table.cutline td > strong { font-weight: bold; }

table.cutline td:first-child { width: 2rem; }

table.cutline td:last-child { padding-left: .5rem; }

@media (min-width: 1024px) { form { max-width: 40rem; margin: 0 auto; } }

form { border-top: 1px solid var(--form-border-color); border-bottom: 1px solid var(--form-border-color); margin-top: 1.75rem; margin-bottom: 1.75rem; padding-bottom: 2rem; width: 100%; opacity: 0; font-family: sans-serif; animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.35s 1 normal forwards; }

form a { color: #00a0ff; text-decoration: underline; }

form a:hover { text-decoration: none; }

form *:focus { outline: 0; }

form.none { border: initial; padding-bottom: 0; }

@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

fieldset, .fieldset { border: 0; margin: 0; padding: 0 1em; }

legend { letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--form-legend-color); margin-top: 2rem; border-bottom: 1px solid var(--form-legend-color); width: 100%; height: 2em; line-height: 2em; }

.form-help-inline { font-size: x-small; display: block; margin-top: 1.25rem; }

.form-help-inline code { background-color: var(--code-border-color); padding: .25rem; border-radius: .25rem; }

.box { width: 100%; margin-top: .5rem; display: flex; }

.grid { margin: 0 0 .75rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; justify-content: stretch; place-items: stretch; gap: 0 0; }

.col-span-1 { grid-column: auto / span 1; position: relative; width: 100%; }

.col-span-2 { grid-column: auto / span 2; position: relative; width: 100%; }

.col-span-3 { grid-column: auto / span 3; position: relative; width: 100%; }

.col-span-4 { grid-column: auto / span 4; position: relative; width: 100%; }

.field { width: 100%; position: relative; height: 2.5em; border: 0px solid var(--form-field-border-color); border-bottom-width: 1px; }

.border-right { border-right-width: 1px; }

.padding-left label, .padding-left input { margin-left: .25em; }

.padding-left select { margin-left: .25em; }

input[type="text"], input[type="email"], input[type="password"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-print-color-adjust: exact; color-adjust: exact; display: block; z-index: 1; box-sizing: border-box; width: 100%; top: .9em; background: none; padding: .0625em; font-size: 1em; font-family: sans-serif; letter-spacing: 0.012em; }

input[type="text"] + label, input[type="email"] + label, input[type="password"] + label { display: block; position: absolute; bottom: 0; padding: .0625em; color: var(--form-label-color); font-size: 1em; letter-spacing: 0.012em; animation-name: labelIn; animation-duration: .5s; animation-direction: reverse; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }

input[type="text"]:focus + label, input[type="email"]:focus + label, input[type="password"]:focus + label { animation-name: labelOut; animation-duration: .5s; animation-direction: normal; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }

input[type="text"]:valid + label, input[type="email"]:valid + label, input[type="password"]:valid + label { animation-name: fieldValid; animation-duration: .5s; animation-direction: normal; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }

@keyframes fieldValid { 0% { font-size: .65em;
    font-weight: 400;
    opacity: 1;
    left: 1px;
    top: 0.2em;
    color: var(--form-field-focus-color); }
  100% { font-size: .65em;
    font-weight: 400;
    opacity: 1;
    left: 1px;
    top: 0.2em;
    color: var(--form-field-valid-color); } }

@keyframes labelIn { 0% { font-size: 1em;
    font-weight: 300;
    opacity: 1;
    left: 1px;
    top: 1.2em; }
  50% { font-size: 1em;
    font-weight: 300;
    opacity: 0;
    left: 1em;
    top: 1.2em; }
  50.01% { font-size: .65em;
    font-weight: 400;
    opacity: 0;
    left: 1em;
    top: 0.2em;
    color: var(--form-field-focus-color); }
  100% { font-size: .65em;
    font-weight: 400;
    opacity: 1;
    left: 1px;
    top: 0.2em;
    color: var(--form-field-focus-color); } }

@keyframes labelOut { 0% { font-size: 1em;
    font-weight: 300;
    opacity: 1;
    left: 1px;
    top: 1.2em; }
  50% { font-size: 1em;
    font-weight: 300;
    opacity: 0;
    left: 1em;
    top: 1.2em; }
  50.01% { font-size: .65em;
    font-weight: 400;
    opacity: 0;
    left: 1em;
    top: 0.2em;
    color: var(--form-field-focus-color); }
  100% { font-size: .65em;
    font-weight: 400;
    opacity: 1;
    left: 1px;
    top: 0.2em;
    color: var(--form-field-focus-color); } }

input[type="checkbox"] + label { display: inline-block; margin-left: .5rem; color: var(--form-label-color); font-weight: 300; }

input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e"); border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }

@media not print { input[type="checkbox"]::-ms-check { border-width: 1px; color: transparent; background: inherit; border-color: inherit; border-radius: inherit; } }

input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-print-color-adjust: exact; color-adjust: exact; display: inline-block; vertical-align: top; background-origin: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; flex-shrink: 0; height: 1rem; width: 1rem; color: var(--form-checkbox-color); background-color: var(--form-field-bg-color); border-style: solid; border-color: var(--form-field-border-color); border-width: 1px; border-radius: 0.25rem; margin-top: .25rem; }

input[type="checkbox"]:focus { outline: none; box-shadow: 0 0 0 3px var(--form-field-focus-shadow); border-color: var(--form-field-focus-border); }

input[type="checkbox"]:checked:focus { border-color: transparent; }

input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }

@media not print { input[type="radio"]::-ms-check { border-width: 1px; color: transparent; background: inherit; border-color: inherit; border-radius: inherit; } }

input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-print-color-adjust: exact; color-adjust: exact; display: inline-block; vertical-align: middle; background-origin: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; flex-shrink: 0; border-radius: 100%; height: 1rem; width: 1rem; color: var(--form-radio-color); background-color: var(--form-field-bg-color); border-color: var(--form-field-border-color); border-width: 1px; }

input[type="radio"]:focus { outline: none; box-shadow: 0 0 0 3px var(--form-field-focus-shadow); border-color: var(--form-field-focus-border); }

input[type="radio"]:checked:focus { border-color: transparent; }

select { width: 100%; top: .9em; z-index: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-print-color-adjust: exact; color-adjust: exact; background: transparent; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1.5em 1.5em; border: 0 solid var(--form-field-border-color); padding: .0625em; font-size: 1em; color: var(--form-label-color); font-weight: 300; }

select::-ms-expand { color: #9fa6b2; border: none; }

@media not print { select::-ms-expand { display: none; } }

@media print and (-ms-high-contrast: active), print and (-ms-high-contrast: none) { select { padding-right: 0.75rem; } }

select:focus { outline: none; color: var(--form-field-focus-color); }

select:valid { color: var(--form-field-valid-color); }

textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--form-field-bg-color); border: 0 solid var(--form-field-border-color); padding: 0; margin-top: .25em; width: 100%; font-family: sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; }

textarea::-moz-placeholder { color: var(--form-label-color); font-weight: 300; opacity: 1; }

textarea:-ms-input-placeholder { color: var(--form-label-color); font-weight: 300; opacity: 1; }

textarea::placeholder { color: var(--form-label-color); font-weight: 300; opacity: 1; }

/* ---------------------------------------------------------------------------- (v) Styles der Designelemente dazulesen.  -------------------------------------------------------------------------- */
div.audio { width: 100%; margin-top: 1.75rem; margin-bottom: 1.75rem; }

div.audio p.source { margin: 0; max-width: inherit; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: 1px .25rem; text-align: right; font-size: x-small; color: var(--audio-source-color); }

div.audio p.description { margin: 0; max-width: inherit; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: 1px .25rem; text-align: left; font-size: small; color: var(--audio-description-color); }

@media (min-width: 1024px) { div.audio { max-width: 40rem; margin: 1.75rem auto; } }

div.control-container { margin-top: 10px; padding-bottom: 10px; }

div.control-container div.amplitude-play-pause { width: 74px; height: 74px; cursor: pointer; float: left; margin-left: 10px; }

div.control-container div.amplitude-play-pause.amplitude-paused { background: url("data:image/svg+xml,%3Csvg width='75' height='75' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(1 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%2342435F' cx='36.5' cy='36.5' r='36.5'/%3E%3Cpath d='M47.625 35.803L27.646 23.426C26.189 22.474 25 23.173 25 24.988V49.01c0 1.812 1.188 2.518 2.646 1.562l19.979-12.375s.711-.5.711-1.197c0-.7-.711-1.198-.711-1.198z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E%0A"); background-size: cover; }

div.control-container div.amplitude-play-pause.amplitude-playing { background: url("data:image/svg+xml,%3Csvg width='75' height='75' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(1 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%2342435F' cx='36.5' cy='36.5' r='36.5'/%3E%3Cpath d='M30.521 23h-4.328C24.982 23 24 23.98 24 25.201v23.592c0 1.221.982 2.207 2.193 2.207h4.328a2.195 2.195 0 002.188-2.207V25.201A2.193 2.193 0 0030.521 23zM46.908 23h-4.33a2.19 2.19 0 00-2.188 2.201v23.592c0 1.221.979 2.207 2.188 2.207h4.33a2.193 2.193 0 002.188-2.207V25.201A2.186 2.186 0 0046.908 23z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E%0A"); background-size: cover; }

div.control-container div.meta-container { float: left; width: calc(100% - 84px); text-align: center; color: var(--audio-meta-info-color); margin-top: 10px; }

div.control-container div.meta-container span[data-amplitude-song-info="title"] { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; color: var(--audio-meta-info-color); display: block; }

div.control-container div.meta-container span[data-amplitude-song-info="kicker"] { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 100; font-size: 14px; color: var(--audio-meta-info-color); display: block; }

div.control-container:after { content: ""; display: table; clear: both; }

@media screen and (max-width: 39.9375em) { div.control-container div.amplitude-play-pause { background-size: cover; width: 64px; height: 64px; } div.control-container div.meta-container { width: calc(100% - 74px); } }

div.time-container { opacity: 0.5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 100; font-size: 12px; color: var(--audio-meta-info-color); height: 15px; }

div.time-container span.current-time { float: left; margin-left: 5px; }

div.time-container span.duration { float: right; margin-right: 5px; }

progress.amplitude-song-played-progress { background-color: var(--audio-progress-bg-color); -webkit-appearance: none; appearance: none; width: 100%; height: 5px; display: block; cursor: pointer; border: none; }

progress.amplitude-song-played-progress:not([value]) { background-color: var(--audio-progress-bg-color); }

progress[value]::-webkit-progress-bar { background-color: var(--audio-progress-bg-color); }

progress[value]::-moz-progress-bar { background-color: var(--audio-progress-color); }

progress[value]::-webkit-progress-value { background-color: var(--audio-progress-color); }

div.bottom-container { background-color: var(--audio-meta-info-bg-color); }

div#single-song-player { margin: auto; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); width: 100%; /*max-width: 460px;*/ -webkit-font-smoothing: antialiased; }

div#single-song-player img[data-amplitude-song-info="cover_art_url"] { width: 100%; }

a.learn-more { display: block; width: 300px; margin: auto; margin-top: 30px; text-align: center; color: var(--audio-meta-info-color); text-decoration: none; background-color: var(--audio-meta-info-bg-color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: 20px; font-weight: 100; }

p.cta { margin-top: 1.75rem; margin-bottom: 1.75rem; }

p.cta a.button, p.cta button { display: inline-flex; align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; color: var(--button-color); transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; border: 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border-color: transparent; font-weight: 500; font-style: var(--button-text-style); background-color: var(--button-bg-color); border-radius: 0.25rem; text-decoration: underline; }

p.cta a.button:hover, p.cta button:hover { background-color: var(--button-hover-color); text-decoration: none; }

p.cta a.button:focus, p.cta button:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--button-focus-color); box-shadow: 0 0 0 3px rgba(248, 180, 180, 0.45); }

p.cta a.button:active, p.cta button:active { background-color: var(--button-active-color); }

p.cta a.no-break { white-space: nowrap; }

p.cta span { display: block; font-size: .75rem; font-style: italic; color: var(--button-alt-color); }

@media (min-width: 1024px) { p.cta span { width: 50%; } }

#cookie-notice { position: fixed; bottom: 0; right: 0; left: 0; padding-bottom: 0.5rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

#cookie-notice div.wrapper { margin-left: auto; margin-right: auto; padding-left: 0.5rem; padding-right: 0.5rem; }

#cookie-notice div.wrapper div.shadow { padding: 0.5rem; border-radius: 0.5rem; background-color: var(--cc-bg-color); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

#cookie-notice div.wrapper div.shadow div.content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }

#cookie-notice div.wrapper div.shadow div.content div.message { width: 0; flex: 1 1 0%; display: flex; align-items: center; }

#cookie-notice div.wrapper div.shadow div.content div.message span.icon { display: flex; padding: 0.5rem; border-radius: 0.5rem; background-color: var(--cc-icon-bg-color); }

#cookie-notice div.wrapper div.shadow div.content div.message p.message { margin: 0 0 0 0.75rem; max-width: inherit; padding: inherit; font-weight: 500; color: var(--cc-message-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#cookie-notice div.wrapper div.shadow div.content div.message p.message span.small { display: block; }

#cookie-notice div.wrapper div.shadow div.content div.message p.message span.large { display: none; }

#cookie-notice div.wrapper div.shadow div.content div.accept { order: 3; margin-top: 0.5rem; flex-shrink: 0; width: 100%; }

#cookie-notice div.wrapper div.shadow div.content div.deny { order: 2; flex-shrink: 0; }

#cookie-notice svg.icon { height: 1.5rem; width: 1.5rem; color: var(--cc-svg-icon-color); }

#cookie-notice button#deny-cookies { margin-right: -0.25rem; display: flex; padding: 0.5rem; border-radius: 0.375rem; transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

#cookie-notice button#deny-cookies:hover { background-color: var(--cc-button-hover-color); }

#cookie-notice button#deny-cookies:focus { outline: 2px solid transparent; outline-offset: 2px; background-color: var(--cc-button-hover-color); }

#cookie-notice button#accept-cookies { width: 100%; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); display: flex; align-items: center; justify-content: center; padding: .5rem 1rem; border-width: 1px; border-color: transparent; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; border-radius: 0.375rem; color: var(--cc-button-color); background-color: var(--cc-accept-button-bg-color); transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

#cookie-notice button#accept-cookies:hover { color: var(--cc-button-hover-color); }

#cookie-notice button#accept-cookies:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px var(--cc-accept-button-shadow); }

@media (min-width: 1024px) { #cookie-notice { padding-bottom: 1.25rem; } #cookie-notice div.wrapper { padding-left: 1.5rem; padding-right: 1.5rem; } #cookie-notice div.wrapper div.shadow { padding: 0.75rem; } #cookie-notice div.wrapper div.shadow div.content div.message p.message span.small { display: none; } #cookie-notice div.wrapper div.shadow div.content div.message p.message span.large { display: inline-block; } #cookie-notice div.wrapper div.shadow div.content div.accept { order: 2; margin-top: 0; margin-left: 0.5rem; width: auto; } #cookie-notice div.wrapper div.shadow div.content div.deny { order: 3; margin-left: 0.5rem; } }

div.credit { display: flex; justify-content: flex-start; align-items: flex-start; align-content: space-between; width: 100%; }

div.credit img { flex: 1 0 30%; width: 150px; height: auto; margin: 0 .5em 1em 1em; border-right: 1px solid var(--credit-border-color); }

div.credit q { flex: 1 0 60%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: .75rem; }

div.credit q::before, div.credit q::after { content: ""; }

@media (min-width: 1024px) { div.credit { max-width: 40rem; margin: 1.74rem auto; } }

article figure { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; margin: 1.75rem 0; width: 100%; }

article figure header.figure { padding: 0 0.25rem 0.25rem; font-size: 0.75rem; color: var(--figure-header-color); text-align: right; }

article figure figcaption { padding: 0.25rem; font-size: 0.875rem; color: var(--figure-figcaption-color); }

@media (min-width: 1024px) { article figure { max-width: 40rem; margin: 1.75rem auto; } }

footer.site-info { font-size: smaller; margin-top: 2.5rem; margin-bottom: 6.5rem; border-top: 1px solid var(--footer-border-color); padding: 0 1rem; }

footer.site-info a.feed-subscribe { display: flex; align-items: center; }

footer.site-info a.feed-subscribe span { margin-left: .25rem; }

footer.site-info a.feed-subscribe svg { fill: currentColor; color: var(--footer-icon-color); width: 1rem; height: 1rem; }

footer.site-info a.feed-subscribe svg:hover { color: var(--footer-icon-color-hover); }

footer.site-info a.feed-subscribe:hover svg { color: var(--footer-icon-color-hover); }

@media (min-width: 1024px) { footer.site-info { padding-top: 1.5rem; padding-bottom: 7.5rem; } }

div.footnotes { max-width: 40rem; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: smaller; color: var(--footnotes-color); }

div.footnotes > ol { list-style: numeric; }

div.footnotes > ol p { padding: 0; }

div.footnotes:before { content: "__"; }

a[role=doc-backlink] { box-shadow: initial; border: none; }

a[role=doc-backlink]:hover { color: var(--footnotes-hover-color); }

@media (min-width: 1024px) { div.footnotes { padding: 0 1rem 1rem; } }

article header { margin-top: 1rem; padding: 0 1rem; }

article header.video { padding-top: 1.75rem; border-color: var(--nav-border-color); border-top-width: 1px; }

article header h1 { font-size: 3rem; font-weight: 900; line-height: 1.5; text-align: left; }

article header h1 span { display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 400; font-size: .9rem; color: var(--header-kicker-color); }

article header h1 span img { float: left; width: .9rem; height: auto; margin: .25rem .25rem 0 0; }

article header h2 { display: flex; justify-content: left; }

article header h2 img { width: 1.5rem; }

article header figure { margin-top: 0; margin-bottom: 0; position: relative; }

article header figure div.footer { position: absolute; font-size: small; padding: .25rem .5rem; border: none; bottom: 0; margin: 0; right: 0; color: var(--header-figure-bg-color); text-shadow: #000 1px 1px 1px; }

article header p.teazer { font-family: "Merriweather", "Apple Garamond", Georgia, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: var(--header-description-color); font-style: italic; font-size: larger; text-align: left; padding: 0; }

article header p.teazer em { font-style: italic; }

article header p.teazer img { float: left; margin: 7px 1rem 0 0; }

article header p.meta { color: var(--header-meta-color); font-size: smaller; text-align: left; }

@media (min-width: 1024px) { article header p.teazer { padding: 0 1rem .5rem; } }

div.infobox { padding: 1.25rem; background-color: var(--infobox-bg-color); margin-top: 1.75rem; margin-bottom: 1.75rem; }

div.infobox mark { background-color: var(--infobox-mark-bg-color); }

div.infobox .meta { font-family: var(--infobox-meta-font-style); font-size: smaller; color: var(--infobox-meta-color); }

div.space-y { padding-top: 4rem; }

div#navigation { background-color: var(--nav-bg-color); height: 4rem; }

div#navigation.fixed { position: fixed; width: 100%; z-index: 50; }

div#navigation .navigation { border-color: var(--nav-border-color); border-bottom-width: 1px; display: flex; height: 4rem; margin-left: auto; margin-right: auto; max-width: 80rem; position: relative; z-index: 10; }

button.open-sidebar, a.open-sidebar { border-color: var(--nav-cell-border-color); border-right-width: 1px; display: flex; flex-direction: row; align-items: center; padding-left: 1rem; color: var(--nav-open-sidebar-color); }

button.open-sidebar:focus, a.open-sidebar:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: inset 0 0 0 0px var(--white), inset 0 0 0 2px var(--nav-open-sidebar-focus-color), 0 0 var(--black); }

button.open-sidebar svg, a.open-sidebar svg { width: 1rem; height: 1rem; align-self: flex-end; }

button.open-sidebar .icon, a.open-sidebar .icon { display: block; height: 1.5rem; width: auto; }

button.open-sidebar .small, a.open-sidebar .small { display: none; height: 2rem; width: auto; }

a.open-sidebar { padding-right: 1rem; }

@media (min-width: 1024px) { button.open-sidebar .icon, a.open-sidebar .icon { display: none; } button.open-sidebar .small, a.open-sidebar .small { display: block; } }

a.top { display: flex; align-items: center; font-weight: 500; line-height: 1.25rem; font-size: 0.875rem; padding: 0.5rem; }

a.top__active { background-color: var(--nav-top-link-active-bg-color); color: var(--nav-top-link-active-color); }

a.top__inactive { color: var(--nav-top-link-inactive-color); }

a.top__inactive:hover { background-color: var(--nav-top-link-inactive-hover-bg-color); color: var(--nav-top-link-inactive-hover-color); }

div.search { position: relative; display: flex; z-index: 12; background-color: var(--nav-bg-color); flex: 1 1 0%; padding-left: 1rem; padding-right: 1rem; }

div.search-field { position: relative; color: var(--nav-search-field-color); width: 100%; }

div.search-field:focus-within { color: var(--nav-search-field-within-color); }

div.search-icon { display: flex; align-items: center; pointer-events: none; position: absolute; top: 0px; bottom: 0px; left: 0px; }

div.search-icon svg { height: 1.25rem; width: 1.25rem; }

input.search-field { border-color: transparent; display: block; height: 100%; width: 100%; padding: 0.5rem 0.75rem 0.5rem 2rem; color: var(--nav-search-field-text-color); }

input.search-field::-moz-placeholder { color: var(--nav-search-field-placeholder-color); }

input.search-field:-ms-input-placeholder { color: var(--nav-search-field-placeholder-color); }

input.search-field::placeholder { color: var(--nav-search-field-placeholder-color); }

input.search-field:focus { border-color: transparent; outline: 2px solid transparent; outline-offset: 2px; }

input.search-field:focus::-moz-placeholder { color: var(--nav-search-field-placeholder-focus); }

input.search-field:focus:-ms-input-placeholder { color: var(--nav-search-field-placeholder-focus); }

input.search-field:focus::placeholder { color: var(--nav-search-field-placeholder-focus); }

input.search-field:focus { box-shadow: inset 0 0 0 0px var(--white), inset 0 0 0 0px var(--white), 0 0 var(--black); }

@media (min-width: 640px) { input.search-field { font-size: 0.875rem; line-height: 1.25rem; } }

div.app-menu { display: flex; align-items: center; border-color: var(--nav-cell-border-color); border-left-width: 1px; padding-left: 0.25rem; }

@media (min-width: 1024px) { div.app-menu { margin-left: 1.5rem; } }

div.cta { padding: 0.5rem 1rem; }

a.cta-link { background-color: var(--nav-cta-link-bg-color); border-radius: 0.375rem; display: inline-flex; align-items: center; font-weight: 500; font-size: 0.875rem; line-height: 1rem; padding: 0.5rem 1rem; color: var(--nav-cta-link-color); }

a.cta-link:hover { background-color: var(--nav-cta-link-bg-hover-color); }

a.cta-link:focus { border-color: var(--nav-cta-link-focus-color); outline: 2px solid transparent; outline-offset: 2px; }

a.cta-link:active { background-color: var(--nav-cta-link-bg-active-color); }

a.cta-link svg { height: 1rem; width: 1rem; }

a.cta-link span { display: none; }

@media (min-width: 1024px) { a.cta-link span { display: inline-block; margin-left: 0.5rem; } }

.search-results { position: absolute; left: 0; display: none; width: 100%; top: 100%; max-height: calc(100vh - 200%) !important; overflow-y: auto; background-color: #fff; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); }

.search-results-list { padding-left: 0; margin-bottom: .25rem; list-style: none; font-size: 14px !important; }

.search-results-list-item { padding: 0; margin: 0; }

.search-result { display: block; padding-top: .25rem; padding-right: .75rem; padding-bottom: .25rem; padding-left: .75rem; }

.search-result:hover, .search-result.active { background-color: #ebedf5; }

.search-result-title { display: block; padding-top: .5rem; padding-bottom: .5rem; }

.search-result-doc { display: flex; align-items: flex-start; word-wrap: break-word; }

.search-result-doc svg { margin-top: .25rem; }

.search-result-doc-description { margin-top: .25rem; opacity: 0.5; font-size: 12px !important; font-style: italic; font-weight: normal; }

.search-result-doc .search-result-icon { width: 1rem; height: 1rem; margin-right: .5rem; color: #1d4ed8; flex-shrink: 0; }

.search-result-doc .search-result-doc-title { overflow: auto; }

.search-result-section { margin-left: 1.5rem; word-wrap: break-word; }

.search-result-rel-url { display: block; overflow: hidden; color: #959396; text-overflow: ellipsis; white-space: nowrap; font-size: 9px !important; }

.search-result-previews { display: block; padding-top: .5rem; padding-bottom: .5rem; padding-left: 1rem; margin-left: .5rem; color: #959396; word-wrap: break-word; border-left: 1px solid; border-left-color: #eeebee; font-size: 11px !important; }

.search-result-preview + .search-result-preview { margin-top: .25rem; }

.search-result-highlight { font-weight: bold; }

.search-no-result { padding-top: .5rem; padding-right: .75rem; padding-bottom: .5rem; padding-left: .75rem; font-size: 12px !important; }

.search-active .search-results { display: block; }

div#sidebar { display: flex; position: fixed; z-index: 40; top: 0px; right: 0px; bottom: 0px; left: 0px; }

div.overlay { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; }

div.overlay.enter { transition-property: opacity; transition-timing-function: linear; transition-duration: 300ms; }

div.overlay.enter-start { opacity: 0; }

div.overlay.enter-end { opacity: 1; }

div.overlay.leave { transition-property: opacity; transition-timing-function: linear; transition-duration: 300ms; }

div.overlay.leave-start { opacity: 1; }

div.overlay.leave-end { opacity: 0; }

div.overlay .background { background-color: var(--sidebar-overlay-bg-color); opacity: 0.75; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }

div.sidebar { background-color: var(--sidebar-bg-color); display: flex; flex-direction: column; flex: 1 1 0%; max-width: 20rem; padding-bottom: 1rem; padding-top: 1rem; position: relative; width: 100%; }

div.sidebar.enter { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; }

div.sidebar.enter-start { transform: translateX(-100%); }

div.sidebar.enter-end { transform: translateX(0px); }

div.sidebar.leave { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; }

div.sidebar.leave-start { transform: translateX(0px); }

div.sidebar.leave-end { transform: translateX(-100%); }

div.close-sidebar { margin-right: -3rem; padding-top: 0.5rem; position: absolute; top: 0px; right: 0px; }

div.close-sidebar button { border-radius: 9999px; display: flex; align-items: center; justify-content: center; height: 2.5rem; margin-left: 0.25rem; width: 2.5rem; color: var(--sidebar-close-button-color); }

div.close-sidebar button:hover { color: var(--sidebar-close-button-hover-color); }

div.close-sidebar button:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: inset 0 0 0 2px var(--white), inset 0 0 0 2px var(--white), 0 0 var(--black); }

div.close-sidebar button svg { height: 1.5rem; width: 1.5rem; }

div.logo { display: flex; align-items: center; flex-shrink: 0; padding-left: 1rem; padding-right: 1rem; }

div.logo img { height: 2rem; width: auto; }

div.menu { flex: 1 1 0%; height: 0px; margin-top: 1.25rem; overflow-y: auto; }

div.menu nav { padding-left: 0.5rem; padding-right: 0.5rem; }

div.menu nav > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; margin-bottom: 0; }

svg.nav-item { width: 1rem; height: 1rem; margin-right: 0.75rem; color: var(--sidebar-item-color); }

.group:hover svg { color: var(--sidebar-group-hover-color); }

a.nav, a.nav-sub { border-radius: 0.375rem; display: flex; align-items: center; font-weight: 500; line-height: 1.25rem; }

a.nav { font-size: 0.875rem; padding: 0.5rem; }

a.nav-sub { margin-left: 2.25rem; font-size: 0.75rem; padding: 0.25rem 0.5rem; }

a.nav__active { background-color: var(--sidebar-item-active-bg-color); color: var(--sidebar-item-active-color); }

a.nav__inactive { color: var(--sidebar-item-inactive-color); }

a.nav__inactive:hover { background-color: var(--sidebar-item-inactive-hover-bg-color); color: var(--sidebar-item-inactive-hover-color); }

div.sidebar-spacer { flex-shrink: 0; width: 3.5rem; }

.social { list-style-type: none; }

.social li { display: inline-flex; }

.social a[rel='me'] svg { width: 1rem; height: 1rem; fill: currentColor; color: var(--social-icon-color); }

.social a[rel='me'] svg:hover { color: var(--social-icon-color-hover); }

blockquote.testimonial { position: relative; padding-left: 7rem; padding-top: .75rem; margin-top: 1.75rem; margin-bottom: 1.75rem; }

blockquote.testimonial img.avatar { position: absolute; padding: .7%; border-radius: 50%; background: var(--testimonial-avatar-border-color); width: 6rem; top: .75rem; left: .75rem; }

div.youtube { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* Modifier class for 16:9 aspect ratio */ /* Modifier class for 4:3 aspect ratio */ }

div.youtube p.video-header { margin: 0; max-width: inherit; padding: 0 0.25rem 0.25rem; font-size: 0.75rem; color: var(--figure-header-color); text-align: right; }

div.youtube p.video-header > a.source { text-decoration: none; box-shadow: initial; border: none; }

div.youtube p.video-header > a.source:hover { text-decoration: none; }

div.youtube h4.video-title { font-weight: 600; margin: 0; padding: 0.25rem 0 0 0.25rem; max-width: inherit; }

div.youtube p.video-kicker { margin: -0.5rem 0 0; padding: 0 0 0 0.25rem; max-width: inherit; font-size: 0.875rem; color: var(--youtube-kicker-color); }

div.youtube p.video-description { margin: 0; max-width: inherit; padding: 0.25rem; font-size: 0.875rem; color: var(--youtube-description-color); line-height: 1.25; }

div.youtube .video-wrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }

div.youtube .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

div.youtube .video-wrapper::after { content: ""; display: table; clear: both; }

div.youtube .video-wrapper-16by9 { padding-bottom: 56.25%; }

div.youtube .video-wrapper-4by3 { padding-bottom: 75%; }

/* ---------------------------------------------------------------------------- (vi) Styles für Meldungen aus der App. -------------------------------------------------------------------------- */
.error { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: small; font-variant: small-caps; color: #e53e3e; }

/* ---------------------------------------------------------------------------- (iii) Review Styles nur im Entwicklermodus einfügen -------------------------------------------------------------------------- */

/*# sourceMappingURL=style.css.map */