.hide {
  /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.visually-hidden {
  /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

:root {
  --tabelle-focus-style: 3px solid #7fb2f8;
}
@supports (outline: 3px auto -webkit-focus-ring-color) {
  :root {
    --tabelle-focus-style: 3px auto -webkit-focus-ring-color;
  }
}

.tabelle-arrow {
  /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
:not(:checked) + .tabelle-arrow--asc::after, :checked + .tabelle-arrow--asc + :not(:checked) + .tabelle-arrow--desc::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--tabelle-arrow-height, 1.5em);
  z-index: 1;
  cursor: pointer;
}
.tabelle-arrow--desc::before {
  width: 1em;
  height: 1em;
  background-color: var(--tabelle-arrow-color, #535353);
  display: block;
  content: " ";
  -webkit-mask-image: var(--tabelle-arrow-sort-image, url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort" class="svg-inline--fa fa-sort fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z"></path></svg>'));
          mask-image: var(--tabelle-arrow-sort-image, url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort" class="svg-inline--fa fa-sort fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z"></path></svg>'));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
:checked + .tabelle-arrow--asc + :not(:checked) + .tabelle-arrow--desc::before {
  -webkit-mask-image: var(--tabelle-arrow-sort-up-image, url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-up" class="svg-inline--fa fa-sort-up fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z"></path></svg>'));
          mask-image: var(--tabelle-arrow-sort-up-image, url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-up" class="svg-inline--fa fa-sort-up fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z"></path></svg>'));
}
:not(:checked) + .tabelle-arrow--asc + :checked + .tabelle-arrow--desc::before {
  -webkit-mask-image: var(--tabelle-arrow-sort-down-image, url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-down" class="svg-inline--fa fa-sort-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"></path></svg>'));
          mask-image: var(--tabelle-arrow-sort-down-image, url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-down" class="svg-inline--fa fa-sort-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"></path></svg>'));
}
:focus + .tabelle-arrow--asc + :not(:checked) + .tabelle-arrow--desc::before, :focus + .tabelle-arrow--asc + :checked + .tabelle-arrow--desc::before {
  -webkit-mask-image: var(--tabelle-arrow-sort-up-image, url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-up" class="svg-inline--fa fa-sort-up fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z"></path></svg>'));
          mask-image: var(--tabelle-arrow-sort-up-image, url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-up" class="svg-inline--fa fa-sort-up fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z"></path></svg>'));
}
:not(:checked) + .tabelle-arrow--asc + :focus + .tabelle-arrow--desc::before, :checked + .tabelle-arrow--asc + :focus + .tabelle-arrow--desc::before {
  -webkit-mask-image: var(--tabelle-arrow-sort-down-image, url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-down" class="svg-inline--fa fa-sort-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"></path></svg>'));
          mask-image: var(--tabelle-arrow-sort-down-image, url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-down" class="svg-inline--fa fa-sort-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"></path></svg>'));
}
:hover ~ .tabelle-arrow--desc {
  --tabelle-arrow-color: var(--tabelle-arrow-color-hover, #868686);
}
:focus ~ .tabelle-arrow--desc {
  outline: var(--tabelle-focus-style);
  --tabelle-arrow-color: var(--tabelle-arrow-color-focus, #868686);
}
:focus:not(:focus-visible) ~ .tabelle-arrow--desc {
  outline: none;
}

.tabelle-arrows {
  border: 0;
  padding: 0;
  position: relative;
}
.tabelle-arrows legend {
  /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.tabelle-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: var(--tabelle-header-height, 1.5em) var(--tabelle-filter-height, auto);
  -webkit-column-gap: var(--tabelle-column-gap, 0.125rem);
     -moz-column-gap: var(--tabelle-column-gap, 0.125rem);
          column-gap: var(--tabelle-column-gap, 0.125rem);
  grid-template-areas: "header arrows" "search search";
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  position: relative;
  /* DEPRECATED: wrap arrows in .tabelle-arrows fieldset */
}
.tabelle-header .header {
  grid-area: header;
  align-self: center;
}
.tabelle-header .tabelle-arrows {
  grid-area: arrows;
  align-self: center;
  position: static;
}
.tabelle-header input, .tabelle-header select, .tabelle-header .tabelle-input {
  grid-area: search;
}
.tabelle-header .tabelle-arrow--asc,
.tabelle-header .tabelle-arrow--desc {
  grid-area: arrows;
  align-self: center;
}

.tabelle {
  border-spacing: 0;
}
.tabelle th {
  vertical-align: top;
}
.tabelle--sticky thead tr:nth-child(1) th {
  position: sticky;
  top: 0;
  background-color: #fff;
  border-bottom: 1px solid #535353;
}

tabelle-search {
  display: block;
}

body {
  font-family: "helvetica neue", helvetica, arial;
  color: #535353;
}

.tabelle td {
  padding: 0 0.5rem;
}