.viewy {
  max-width: var(--xl-width);
  margin: var(--xl-gap-y) auto;
  padding: 0 var(--xl-gap-x);
  box-sizing: border-box;
}

.viewy__wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
  gap: 40px 25px;
  @media (max-width: 1090px) {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
}

.viewy__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.viewy__header {
  @media (min-width: 1090px) {
    align-self: flex-end;
  }
}

.viewy__filter-headline {
  font: var(--venti);
  color: var(--teal);
  @media (max-width: 1090px) {
    display: none;
  }
}

.viewy__filter-toggler:focus,
.viewy__filter-toggler:active {
  border: 2px solid;
}

.viewy__filters-head {
  display: none;
  @media (max-width: 1090px) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px var(--xl-gap-x);
    border-bottom: 1px solid var(--slate);
    font-weight: 600;
    cursor: pointer;
  }
}

.viewy__filters fieldset {
  border: none;
  padding: 0;
  margin: 10px 0;
}

.viewy__filters legend {
  font: var(--petite);
  cursor: pointer;
  color: var(--teal);
  font-weight: 600;
  margin: 0 0 20px 0;
}

.viewy__filters legend::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' viewBox='0 0 7 6' fill='none'%3E%3Cpath d='M3.12 5.30195L6.24 0L0 0L3.12 5.30195Z' fill='%23195365'/%3E%3C/svg%3E") no-repeat center;
  vertical-align: middle;
  transition: .3s ease-in-out;
  transform-origin: center;
}

.viewy__filters legend:hover::after {
  transform: rotate(180deg);
  transform-origin: center;
}

.viewy__filters .future-skills-group:last-child {
  margin-bottom: 0;
}

.viewy__filters .future-skills-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.viewy__filters .future-skills-group__head .bit {
  margin: 0;
  flex: 1 1 auto;
}

.viewy__filters .bit {
  display: flex;
  gap: 15px;
}

.viewy__filters .future-skills-group__head label {
  cursor: pointer;
}

.viewy__filters .future-skills-group__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.viewy__filters .future-skills-group__toggle::after {
  content: '';
  display: block;
  width: 7px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' viewBox='0 0 7 6' fill='none'%3E%3Cpath d='M3.12 5.30195L6.24 0L0 0L3.12 5.30195Z' fill='%23195365'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .3s ease-in-out;
}

.viewy__filters .future-skills-group--open .future-skills-group__toggle::after {
  transform: rotate(180deg);
}

.viewy__filters .future-skills-group .collapsible {
  display: none;
  padding: 0 0 0 24px;
}

.viewy__filters .future-skills-group .collapsible.show {
  display: block;
}

.viewy__filters .future-skills-group .collapsible > .bit:nth-of-type(n+4) {
  display: none;
}

.viewy__filters .future-skills-group--more .collapsible > .bit:nth-of-type(n+4) {
  display: flex;
}

.viewy__filters .future-skills-group__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--teal);
  font: var(--petite);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.viewy__filters .future-skills-group__more::after {
  content: '';
  width: 7px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' viewBox='0 0 7 6' fill='none'%3E%3Cpath d='M3.12 5.30195L6.24 0L0 0L3.12 5.30195Z' fill='%23195365'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .3s ease-in-out;
}

.viewy__filters .future-skills-group--more .future-skills-group__more::after {
  transform: rotate(180deg);
}

/* "Mehr anzeigen" is mobile-only; on desktop show all child options. */
@media (min-width: 1091px) {
  .viewy__filters .future-skills-group .collapsible > .bit:nth-of-type(n+4) {
    display: flex;
  }

  .viewy__filters .future-skills-group__more {
    display: none;
  }
}

.viewy__filters input[type="submit"],
.viewy__filters button[type="submit"] {
  display: none;
  @media (max-width: 1090px) {
    display: inline;
  }
}

.viewy__items .views-infinite-scroll-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.viewy__filter-toggler {
  display: none;
  @media (max-width: 1090px) {
    display: block;
    width: max-content;
    border: 1px solid var(--teal);
    border-radius: 2px;
    color: var(--teal);
    font-weight: 600;
    padding: 14px 30px;
    cursor: pointer;
  }
  @media (max-width: 399px) {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

.viewy .moa--submit {
  display: none;
  @media (max-width: 1090px) {
    display: block;
    width: max-content;
    margin: 0 auto;
  }
}

.viewy__filters .bit input[type="checkbox"] + label {
  color: black;
  font: var(--common);
  font-weight: 600;
  background-color: white;
  border: 1px solid var(--teal);
  border-radius: 25px;
  padding: 9px 15px;
  margin: 0;
  width: 100%;
  text-align: center;
  cursor: pointer;
  transition: .3s ease-in-out;
}

.viewy__filters .bit input[type="checkbox"]:checked + label,
.viewy__filters .bit input[type="checkbox"] + label:hover {
  background-color: var(--subtle-lime);
  border-color: var(--lime);
}

.viewy__filters .bit input[type="checkbox"] {
  display: none;
}

.viewy__filters .future-skills-group .bit input[type="checkbox"] {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  color: var(--pen);
  appearance: none;
  border-color: var(--teal);
}

.viewy__filters .future-skills-group .bit input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.55566 5.04456L5.05566 8.54456L10.5557 1.54456' stroke='%2315282C' stroke-width='2.2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-color: var(--subtle-lime);
  border-color: var(--lime);
}

.viewy__filters .future-skills-group .bit input[type="checkbox"] + label {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: var(--common);
  font-weight: 600;
  width: fit-content;
  text-align: start;
}

.viewy__filters .future-skills-group .collapsible .bit input[type="checkbox"] + label {
  font-weight: 400;
}

.viewy__filters .future-skills-group__head:has(+ .collapsible.show input[type="checkbox"]:checked) input[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='3' viewBox='0 0 12 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.09998 1.09998H10.1' stroke='%2315282C' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E%0A");
  background-color: var(--subtle-lime);
  border-color: var(--lime);
}

.viewy__filters .checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 0 0 30px 0;
}

.viewy__filters .checkbox > .bit {
  width: calc(50% - calc(15px / 2));
  margin: 0;
}

.viewy__filters .fieldgroup {
  padding: 0 30px;
  margin: 30px 0 0 0;
  border-bottom: 1px solid var(--slate);
}

.viewy__filters {
  @media (max-width: 1090px) {
    font: var(--common);
    font-weight: 600;
    position: fixed;
    top: var(--drupal-displace-offset-top, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    background-color: var(--pale-slate);
    z-index: 3;
    height: 100vh;
    overflow-y: auto;
    transition: .3s ease-in-out;
    padding: 0 0 30px 0;
    box-sizing: border-box;
    overscroll-behavior: contain;
  }
  @media (min-width: 1091px) {
    height: max-content;
    background-color: var(--subtle-slate);
  }
}

@media (max-width: 1090px) {
  .viewy__filter-toggler::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M5.06352 8.75928L10.1073 5.84392e-05L-3.82761e-08 0.0132082L5.06352 8.75928Z' fill='%23195365'/%3E%3C/svg%3E");
    padding: 0 0 0 10px;
  }

  .viewy__filters--open {
    opacity: 1;
    visibility: visible;
  }

  .viewy__filter-text {
    color: var(--teal);
  }

  .viewy__filters-close {
    font-family: 'misty';
    color: var(--teal);
  }
}

.viewy__results {
  display: none;
}

.ajax-progress {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

.ajax-progress.ajax-progress-fullscreen::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  --sq:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M10 0L0 0L0 10H10V0Z' fill='%23195365'/></svg>");
  --dia:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M10 5L5 0L0 5L5 10L10 5Z' fill='%23FF5F2E'/></svg>");
  --cir:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M9.39 2.61C10.71 5.04 9.81 8.08 7.39 9.39 4.96 10.71 1.92 9.81 0.61 7.39-0.71 4.96 0.19 1.92 2.61 0.61 5.04-0.71 8.08 0.19 9.39 2.61Z' fill='%23AFD700'/></svg>");
  --tri:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'><path d='M5.52 0L11.42 9.78L0 10L5.52 0Z' fill='%23CCB1EC'/></svg>");

  background:
    var(--sq)  50%   0%,    /* top    — square   */
    var(--cir) 50% 100%,    /* bottom — circle   */
    var(--dia) 100%  50%,   /* right  — diamond  */
    var(--tri) 0%    50%;   /* left   — triangle */
  background-size: 13.4px 13.4px;
  background-repeat: no-repeat;
  animation: spinner-shapes 1s infinite;
}

@keyframes spinner-shapes {
  to { transform: rotate(1turn); }
}