@charset "UTF-8";
@font-face {
  font-family: "fira-sans";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/fira/firasans-book.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "fira-sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/fira/firasans-bold.woff2") format("woff2");
  font-display: swap;
}
:root {
  --text-color: #212121;
  --page-bg-color: #fff;
  --linkColorHover: #d50000;
  --code-bg: sandybrown;
  --aside-bg: #e0e0e0;
  --aside-color: #313131;
  --details-border-color: #aaa;
  --full-bleed-bg: #a0cbe4;
  --full-bleed-color: #212121;
  --main-nav-bg-color: transparent;
  --main-nav-item-text: #212121;
  --main-nav-active-bordercolor: #259fb6;
  --main-nav-box-shadow: 2px 8px rgba(15, 18, 25, 0.05);
  --toggle-button-border: 1px solid #000;
  --site-footer-bg: #12768c;
  --site-footer-color: #fff;
  --tag-link-bg-color: #12768c;
  --tag-link-hover-bg-color: #2f6b1b;
  --tag-link-color: #fdfdfd;
  --list-marker-color: #a20000;
  --aside-source-border: var(--tag-link-bg-color);
  --linklist-background-color: #e0e0e0;
  --linklist-color: #313131;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #fff;
    --page-bg-color: #313131;
    --linkColorHover: rgb(255, 241.5666666667, 216);
    --code-bg: #a20000;
    --aside-bg: #e0e0e0;
    --aside-color: #313131;
    --details-border-color: #aaa;
    --full-bleed-bg: #ffe0a5;
    --full-bleed-color: #212121;
    --main-nav-bg-color: transparent;
    --main-nav-item-text: #fff;
    --main-nav-box-shadow: 2px 8px rgba(222, 225, 231, 0.05);
    --main-nav-active-bordercolor: #ffe0a5;
    --toggle-button-border: 1px solid #fff;
    --site-footer-bg: #12768c;
    --site-footer-color: #fff;
    --tag-link-bg-color: #12768c;
    --tag-link-hover-bg-color: #2f6b1b;
    --tag-link-color: #fdfdfd;
    --list-marker-color: #ffe0a5;
    --aside-source-border: var(--tag-link-bg-color);
    --linklist-background-color: #e0e0e0;
    --linklist-color: #313131;
  }
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Set core root defaults */
html {
  padding: 0;
  font-size: 16px;
  color-scheme: dark light;
}

:where(html) {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
  tab-size: 2;
}

/* Remove default margin */
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
  margin: 0 0 24px 0;
}

/* Set core body defaults */
body {
  font-family: "fira-sans", -apple-system, system-ui, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--page-bg-color);
  padding: 0;
  margin: 0;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

small, .text_small {
  font-size: 0.75rem;
}

:where(h1, h2, h3, h4, h5, h6) {
  margin: 2rem 0 1.25rem 0;
  font-weight: 700;
  line-height: 1.3;
  padding: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-align: left;
}

h1 {
  margin-top: 0;
  font-size: 3.125rem;
}

h2 {
  font-size: 2.4375rem;
}

h3 {
  font-size: 1.9375rem;
}

h4 {
  font-size: 1.5625rem;
}

h5 {
  font-size: 1.25rem;
}

:where(a) {
  color: currentColor;
  text-underline-offset: 0.2ex;
}

:where(a):where(:hover, :focus, :focus-visible) {
  text-decoration: none;
}

:where(:focus-visible) {
  outline: 3px solid CanvasText;
  box-shadow: 0 0 0 6px Canvas;
  outline-offset: 1px;
}

:where(:focus-visible, :target) {
  scroll-margin-block: 8vh;
}

/*
  barrierefreies Entfernen der Marker, auch für Voice Over
  https://matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics
*/
:where(ul, ol)[class], :where(ul, ol)[role=list] {
  list-style-type: "";
  padding-left: 0;
}

:where(li) {
  margin-bottom: 3px;
}

/* ================ */
:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible;
}

/* === Formulare === */
:where(button) {
  all: unset;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

:where(textarea) {
  resize: vertical;
  resize: block;
}

:where(button, label, select, summary, [role=button], [role=option]) {
  cursor: pointer;
}

:where(:disabled) {
  cursor: not-allowed;
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, picture, svg, video) {
  max-width: 100%;
  height: auto;
}

/* SVG's without a fill attribute */
:where(svg):where(:not([fill])) {
  /* Remove fill and set stroke colour to the inherited font colour */
  stroke: currentColor;
  fill: none;
  /* Rounded stroke */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Set a size for SVG's without a width attribute */
:where(svg):where(:not([width])) {
  inline-size: 5rem;
}

p code, li code {
  display: inline-block;
  padding: 0 0.4em;
  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  background: var(--code-bg);
  border-radius: 6px;
}

li code {
  margin-right: 3px;
}

li:has(code) {
  margin-bottom: 3px;
}

/* ==== details/summary ==== */
details {
  border: 1px solid var(--details-border-color);
  border-radius: 3px;
  padding: 6px 6px 0;
}

summary {
  font-weight: bold;
  margin: -6px -6px 0;
  padding: 6px;
}

details[open] {
  padding: 6px;
}

details[open] summary {
  margin-bottom: 6px;
}

.details__content {
  margin-inline: auto;
  max-width: 90%;
}

/* hide only visually */
/* https://gist.github.com/jensgro/743c37c3c1b226f7917fa0fc0825e3c2 */
:where(.visually-hidden:not(:focus-within, :active)) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  border: 0;
}

/* Avoid visible focus style on focusable elements like main */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
    scroll-behavior: auto !important;
  }
}
body {
  display: flex;
  flex-direction: column;
}

body.index {
  overflow-x: hidden;
}

.site-footer-wrapper {
  margin-top: auto;
}

.container {
  --container-bgcolor: get-color("white");
  background-color: var(--container-bgcolor);
  padding: 12px 24px;
  margin: 0 12px;
}
@media (min-width: 1000px) {
  .container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
  }
}

aside {
  padding: var(--aside-padding-block, 36px) var(--aside-padding-inline, 36px) 12px;
  margin: var(--aside-margin-block, 24px) var(--aside-margin-inline, 0);
  color: var(--aside-color);
  background-color: var(--aside-bg, #ccc);
  position: relative;
}
aside h2, aside h3 {
  margin-top: 6px;
}

aside.aside::before {
  content: "Auch interessant";
  padding: 6px;
  background-color: var(--aside-after-bg, #fff);
  font-size: 0.875rem;
  position: absolute;
  top: 0;
  right: 0;
}

.source, .sources {
  --aside-padding-block: 24px;
  border-left: 12px solid var(--aside-source-border, #333);
}

.btn {
  --btn-primary-text-color: #000;
  --btn-secondary-text-color: #333;
  --btn-border-radius: 4px;
  --btn-text-transform: uppercase;
  --btn-font-size: 1rem;
  --btn-font-weight: 600;
  --btn-padding: 6px 18px;
}

.btn {
  color: var(--primary-text-color);
  border-radius: var(--btn-border-radius);
  text-transform: var(--btn-text-transform);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding);
}

.main-nav {
  box-shadow: var(--main-nav-box-shadow);
}
.main-nav .nav {
  display: flex;
  align-items: center;
}
.main-nav__logo {
  width: 48px;
  height: 48px;
  margin-right: 36px;
}
.main-nav__site-title {
  font-size: 1.5rem;
  font-weight: 700;
}
.main-nav__content {
  margin-left: auto;
}
.main-nav__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-inline: 6px;
  margin-block: 0;
  margin-left: auto;
}
.main-nav__item {
  color: var(--main-nav-item-text);
  text-transform: capitalize;
}
.main-nav__item:nth-child(1) {
  margin-right: auto;
}
.main-nav__link {
  display: inline-block;
  color: currentColor;
  text-decoration: 5px underline var(--main-nav-bg-color);
  text-underline-offset: 6px;
  padding: 6px 24px;
  transition: text-decoration 0.5s ease;
}
.main-nav__link:hover, .main-nav__link:focus, .main-nav__link--active {
  --main-nav-bg-color: var(--main-nav-active-bordercolor);
}
.main-nav__link--active {
  font-weight: 700;
}

body.index .main-nav__site-title {
  display: none;
}

.site-header {
  position: relative;
  margin-top: 30px;
}
@media print {
  .site-header {
    aspect-ratio: auto;
  }
}
.site-header__headline {
  font-size: clamp(30px, 6vw, 4rem);
  line-height: 1;
}
.site-header__subline {
  font-size: clamp(1.2rem, 3.5vw, 1.5rem);
}
.site-header__headline-cnt {
  position: static;
}
@media print {
  .site-header__headline-cnt {
    position: static;
  }
}

.index-list {
  display: grid;
  gap: 18px;
}
@media screen and (min-width: 860px) {
  .index-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.index-list li {
  display: flex;
  gap: 24px;
}
.index-list svg {
  position: relative;
  top: 4px;
}
.index-list a {
  display: block;
  font-size: 1.125rem;
}
@media screen and (min-width: 860px) {
  .index-list a {
    font-size: 1.25rem;
  }
}
.index-list a:hover, .index-list a:focus {
  color: var(--linkColorHover);
}

.list {
  padding-left: 24px;
}
.list li::marker {
  color: var(--list-marker-color);
}

.list--ul {
  list-style-type: square;
}

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

.linklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
  gap: 40px;
}
.linklist li {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 6px;
}
.linklist li:nth-child(odd) {
  color: var(--linklist-color);
  background-color: var(--linklist-background-color);
}
.linklist span {
  display: block;
  margin-top: 6px;
}

.codepen-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.codepen-list-wrapper {
  margin-block: 36px;
}

.codepenlist {
  columns: 2;
  column-gap: 20px;
}

/*
 * a11y theme for JavaScript, CSS, and HTML
 * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
 * @author ericwbailey
 */
/*
 * MARK: Setup
 */
@layer vendor-prism {
  @media (forced-colors: none), (forced-colors: active) and (prefers-color-scheme: light), (prefers-color-scheme: dark) {
    :root {
      --prism-a11y-border-radius: 0.3em;
      --prism-a11y-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
      --prism-a11y-line-height: 1.5;
      --prism-a11y-code-block-margin: 0.5em 0;
      --prism-a11y-code-block-padding: 1em;
      --prism-a11y-code-inline-padding: 0.1em;
      --prism-a11y-width-border: 1px;
      --prism-a11y-width-tab: 2;
    }
  }
  @media (forced-colors: none) and (prefers-color-scheme: light) {
    :root {
      --prism-a11y-color-background: hsla(0, 0%, 95%, 1);
      --prism-a11y-color-text-no-token: hsla(0, 0%, 33%, 1);
      --prism-a11y-color-text-comment: hsla(16, 100%, 25%, 1);
      --prism-a11y-color-text-blue: hsla(195, 100%, 30%, 1);
      --prism-a11y-color-text-green: hsla(120, 100%, 25%, 1);
      --prism-a11y-color-text-gray: hsla(0, 0%, 41%, 1);
      --prism-a11y-color-text-purple: hsla(282, 100%, 41%, 1);
      --prism-a11y-color-text-red: hsla(2, 80%, 47%, 1);
      --prism-a11y-color-text-yellow: hsla(43, 74%, 30%, 1);
      --prism-a11y-plugin-color-border: hsla(43, 74%, 30%, 0.55);
      --prism-a11y-plugin-color-background: hsla(43, 74%, 30%, 0.1);
    }
  }
  @media (forced-colors: none) and (prefers-color-scheme: dark) {
    :root {
      --prism-a11y-color-background: hsla(0, 0%, 13%, 1);
      --prism-a11y-color-text-no-token: hsla(60, 30%, 96%, 1);
      --prism-a11y-color-text-comment: hsla(54, 32%, 75%, 1);
      --prism-a11y-color-text-blue: hsla(180, 100%, 44%, 1);
      --prism-a11y-color-text-green: hsla(80, 75%, 55%, 1);
      --prism-a11y-color-text-gray: hsla(60, 30%, 96%, 1);
      --prism-a11y-color-text-purple: hsla(291, 30%, 83%, 1);
      --prism-a11y-color-text-red: hsla(17, 100%, 74%, 1);
      --prism-a11y-color-text-yellow: hsla(51, 100%, 50%, 1);
      --prism-a11y-plugin-color-border: hsla(51, 100%, 50%, 0.55);
      --prism-a11y-plugin-color-background: hsla(51, 100%, 50%, 0.1);
    }
  }
  @media (forced-colors: none), (forced-colors: active) and (prefers-color-scheme: light), (prefers-color-scheme: dark) {
    /*
     * MARK: Theme
     */
    :where(code[class*=language-],
    pre[class*=language-]) {
      color: var(--prism-a11y-color-text-no-token);
      background: var(--prism-a11y-color-background);
      font-family: var(--prism-a11y-font-family);
      text-align: start;
      white-space: pre;
      word-spacing: normal;
      word-break: normal;
      word-wrap: normal;
      line-height: var(--prism-a11y-line-height);
      -moz-tab-size: var(--prism-a11y-width-tab);
      -o-tab-size: var(--prism-a11y-width-tab);
      tab-size: var(--prism-a11y-width-tab);
      -webkit-hyphens: none;
      -moz-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
    }
    /* Code blocks */
    pre[class*=language-] {
      padding: var(--prism-a11y-code-block-padding);
      margin: var(--prism-a11y-code-block-margin);
      overflow: auto;
      border-radius: var(--prism-a11y-border-radius);
    }
    :where(:not(pre) > code[class*=language-],
    pre[class*=language-]) {
      background: var(--prism-a11y-color-background);
    }
    /* Inline code */
    :not(pre) > code[class*=language-] {
      padding: var(--prism-a11y-code-inline-padding);
      border-radius: var(--prism-a11y-border-radius);
      white-space: normal;
    }
    :where(.token.comment,
    .token.prolog,
    .token.doctype,
    .token.cdata) {
      color: var(--prism-a11y-color-text-comment);
    }
    .token.punctuation {
      color: var(--prism-a11y-color-text-gray);
    }
    :where(.token.property,
    .token.tag,
    .token.constant,
    .token.symbol,
    .token.deleted) {
      color: var(--prism-a11y-color-text-red);
    }
    :where(.token.operator,
    .token.entity,
    .token.url,
    .language-css .token.string,
    .style .token.string,
    .token.variable,
    .token.keyword) {
      color: var(--prism-a11y-color-text-blue);
    }
    :where(.token.selector,
    .token.attr-name,
    .token.string,
    .token.char,
    .token.builtin,
    .token.inserted) {
      color: var(--prism-a11y-color-text-green);
    }
    :where(.token.atrule,
    .token.attr-value,
    .token.function,
    .token.regex,
    .token.important) {
      color: var(--prism-a11y-color-text-yellow);
    }
    :where(.token.boolean,
    .token.number,
    .token.keyword) {
      color: var(--prism-a11y-color-text-purple);
    }
    :where(.token.important,
    .token.bold) {
      font-weight: bold;
    }
    .token.italic {
      font-style: italic;
    }
    .token.entity {
      cursor: help;
    }
    /*
     * MARK: Plugin support
     */
    /* Line highlight */
    .line-highlight {
      background: var(--prism-a11y-plugin-color-background);
      border-top: var(--prism-a11y-width-border) solid var(--prism-a11y-plugin-color-border);
      border-bottom: var(--prism-a11y-width-border) solid var(--prism-a11y-plugin-color-border);
    }
    /* Line numbers */
    .line-numbers .line-numbers-rows {
      border-right: var(--prism-a11y-width-border) solid var(--prism-a11y-color-text-no-token);
    }
    .line-numbers-rows > span:before {
      color: var(--prism-a11y-color-text-comment);
    }
  }
  /*
   * MARK: Forced color mode support
   */
  @media (forced-colors: active) {
    :root {
      --prism-a11y-color-background: Canvas;
      --prism-a11y-color-text-no-token: CanvasText;
      --prism-a11y-color-text-comment: GrayText;
      --prism-a11y-color-text-blue: LinkText;
      --prism-a11y-color-text-gray: LinkText;
      --prism-a11y-color-text-green: CanvasText;
      --prism-a11y-color-text-purple: CanvasText;
      --prism-a11y-color-text-red: CanvasText;
      --prism-a11y-color-text-yellow: GrayText;
      --prism-a11y-plugin-color-border: LinkText;
      --prism-a11y-plugin-color-background: Canvas;
    }
    :where(.token.boolean,
    .token.number,
    .token.keyword) {
      font-weight: bold;
    }
  }
}
.tags {
  margin-top: 24px;
}

.taglist {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0.5rem;
}

.taglist__link {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background-color: var(--tag-link-bg-color);
  color: var(--tag-link-color);
  text-decoration: none;
  transition: background-color 0.2s;
}
.taglist__link:hover, .taglist__link:focus {
  background-color: var(--tag-link-hover-bg-color);
}
.taglist__link svg {
  margin-left: 6px;
  fill: currentColor;
  width: 16px;
  height: 16px;
}

.list-item-tag {
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.025rem 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--tag-link-bg-color);
  color: var(--tag-link-color);
}
.list-item-tag:hover, .list-item-tag:focus {
  background-color: var(--tag-link-hover-bg-color);
}

.svg-icon {
  width: var(--svg-dimension, 32px);
  height: var(--svg-dimension, 32px);
}

.svg-icon--small {
  --svg-dimension: 16px;
}

.svg-icon--medium {
  --svg-dimension: 64px;
}

.svg-icon--large {
  --svg-dimension: 128px;
}

.nolist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

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

.only-print {
  display: none;
}

@media print {
  .no-print {
    display: none;
  }
  .only-print {
    display: block;
  }
}
.list__item {
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.youtube-embed {
  aspect-ratio: 16/9;
  margin-bottom: 48px;
}

.container:has(+ .site-footer-wrapper) {
  margin-bottom: 24px;
}

.site-footer-wrapper {
  color: var(--site-footer-color);
  background-color: var(--site-footer-bg);
  padding: 6px;
  margin-top: auto;
}

.site-footer__list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-block: 0;
}
.site-footer__list .getback__link {
  margin-left: 0;
  margin-bottom: 12px;
  flex: 1 0 100%;
}
@media (min-width: 860px) {
  .site-footer__list .getback__link {
    margin-right: auto;
    flex-basis: auto;
  }
}
.site-footer__list li {
  margin-right: 24px;
}
.index .site-footer li:first-child {
  margin-left: 0;
}
.site-footer a {
  color: inherit;
}

.sitefooter.sitefooter--home .sitefooter__list {
  justify-content: flex-end;
}