@charset "UTF-8";
@media screen and (max-width: 2800px) {
  .\4 xl\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-1 {
    grid-column: span 1;
  }
  .\4 xl\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-2 {
    grid-column: span 2;
  }
  .\4 xl\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-3 {
    grid-column: span 3;
  }
  .\4 xl\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-4 {
    grid-column: span 4;
  }
  .\4 xl\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-5 {
    grid-column: span 5;
  }
  .\4 xl\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-6 {
    grid-column: span 6;
  }
  .\4 xl\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-7 {
    grid-column: span 7;
  }
  .\4 xl\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-8 {
    grid-column: span 8;
  }
  .\4 xl\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-9 {
    grid-column: span 9;
  }
  .\4 xl\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-10 {
    grid-column: span 10;
  }
  .\4 xl\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-11 {
    grid-column: span 11;
  }
  .\4 xl\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\4 xl\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\4 xl\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 2800px) {
  .\4 xl\:hidden {
    display: none !important;
  }
  .\4 xl\:block {
    display: block !important;
  }
  .\4 xl\:inline {
    display: inline !important;
  }
  .\4 xl\:flex {
    display: flex !important;
  }
  .\4 xl\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 2000px) {
  .\3 xl\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-1 {
    grid-column: span 1;
  }
  .\3 xl\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-2 {
    grid-column: span 2;
  }
  .\3 xl\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-3 {
    grid-column: span 3;
  }
  .\3 xl\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-4 {
    grid-column: span 4;
  }
  .\3 xl\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-5 {
    grid-column: span 5;
  }
  .\3 xl\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-6 {
    grid-column: span 6;
  }
  .\3 xl\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-7 {
    grid-column: span 7;
  }
  .\3 xl\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-8 {
    grid-column: span 8;
  }
  .\3 xl\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-9 {
    grid-column: span 9;
  }
  .\3 xl\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-10 {
    grid-column: span 10;
  }
  .\3 xl\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-11 {
    grid-column: span 11;
  }
  .\3 xl\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\3 xl\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\3 xl\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 2000px) {
  .\3 xl\:hidden {
    display: none !important;
  }
  .\3 xl\:block {
    display: block !important;
  }
  .\3 xl\:inline {
    display: inline !important;
  }
  .\3 xl\:flex {
    display: flex !important;
  }
  .\3 xl\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 1500px) {
  .\2 xl\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-1 {
    grid-column: span 1;
  }
  .\2 xl\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-2 {
    grid-column: span 2;
  }
  .\2 xl\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-3 {
    grid-column: span 3;
  }
  .\2 xl\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-4 {
    grid-column: span 4;
  }
  .\2 xl\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-5 {
    grid-column: span 5;
  }
  .\2 xl\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-6 {
    grid-column: span 6;
  }
  .\2 xl\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-7 {
    grid-column: span 7;
  }
  .\2 xl\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-8 {
    grid-column: span 8;
  }
  .\2 xl\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-9 {
    grid-column: span 9;
  }
  .\2 xl\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-10 {
    grid-column: span 10;
  }
  .\2 xl\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-11 {
    grid-column: span 11;
  }
  .\2 xl\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .\2 xl\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .\2 xl\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 1500px) {
  .\2 xl\:hidden {
    display: none !important;
  }
  .\2 xl\:block {
    display: block !important;
  }
  .\2 xl\:inline {
    display: inline !important;
  }
  .\2 xl\:flex {
    display: flex !important;
  }
  .\2 xl\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 1280px) {
  .xl\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-1 {
    grid-column: span 1;
  }
  .xl\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-2 {
    grid-column: span 2;
  }
  .xl\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-3 {
    grid-column: span 3;
  }
  .xl\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-4 {
    grid-column: span 4;
  }
  .xl\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-5 {
    grid-column: span 5;
  }
  .xl\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-6 {
    grid-column: span 6;
  }
  .xl\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-7 {
    grid-column: span 7;
  }
  .xl\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-8 {
    grid-column: span 8;
  }
  .xl\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-9 {
    grid-column: span 9;
  }
  .xl\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-10 {
    grid-column: span 10;
  }
  .xl\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-11 {
    grid-column: span 11;
  }
  .xl\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 1280px) {
  .xl\:hidden {
    display: none !important;
  }
  .xl\:block {
    display: block !important;
  }
  .xl\:inline {
    display: inline !important;
  }
  .xl\:flex {
    display: flex !important;
  }
  .xl\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 1024px) {
  .lg\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-1 {
    grid-column: span 1;
  }
  .lg\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-2 {
    grid-column: span 2;
  }
  .lg\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-3 {
    grid-column: span 3;
  }
  .lg\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-4 {
    grid-column: span 4;
  }
  .lg\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-5 {
    grid-column: span 5;
  }
  .lg\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-6 {
    grid-column: span 6;
  }
  .lg\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-7 {
    grid-column: span 7;
  }
  .lg\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-8 {
    grid-column: span 8;
  }
  .lg\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-9 {
    grid-column: span 9;
  }
  .lg\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-10 {
    grid-column: span 10;
  }
  .lg\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-11 {
    grid-column: span 11;
  }
  .lg\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 1024px) {
  .lg\:hidden {
    display: none !important;
  }
  .lg\:block {
    display: block !important;
  }
  .lg\:inline {
    display: inline !important;
  }
  .lg\:flex {
    display: flex !important;
  }
  .lg\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 750px) {
  .md\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-1 {
    grid-column: span 1;
  }
  .md\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-2 {
    grid-column: span 2;
  }
  .md\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-3 {
    grid-column: span 3;
  }
  .md\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-4 {
    grid-column: span 4;
  }
  .md\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-5 {
    grid-column: span 5;
  }
  .md\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-6 {
    grid-column: span 6;
  }
  .md\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-7 {
    grid-column: span 7;
  }
  .md\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-8 {
    grid-column: span 8;
  }
  .md\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-9 {
    grid-column: span 9;
  }
  .md\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-10 {
    grid-column: span 10;
  }
  .md\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-11 {
    grid-column: span 11;
  }
  .md\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 750px) {
  .md\:hidden {
    display: none !important;
  }
  .md\:block {
    display: block !important;
  }
  .md\:inline {
    display: inline !important;
  }
  .md\:flex {
    display: flex !important;
  }
  .md\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 640px) {
  .sm\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-1 {
    grid-column: span 1;
  }
  .sm\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-2 {
    grid-column: span 2;
  }
  .sm\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-3 {
    grid-column: span 3;
  }
  .sm\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-4 {
    grid-column: span 4;
  }
  .sm\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-5 {
    grid-column: span 5;
  }
  .sm\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-6 {
    grid-column: span 6;
  }
  .sm\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-7 {
    grid-column: span 7;
  }
  .sm\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-8 {
    grid-column: span 8;
  }
  .sm\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-9 {
    grid-column: span 9;
  }
  .sm\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-10 {
    grid-column: span 10;
  }
  .sm\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-11 {
    grid-column: span 11;
  }
  .sm\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 640px) {
  .sm\:hidden {
    display: none !important;
  }
  .sm\:block {
    display: block !important;
  }
  .sm\:inline {
    display: inline !important;
  }
  .sm\:flex {
    display: flex !important;
  }
  .sm\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 400px) {
  .xs\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-1 {
    grid-column: span 1;
  }
  .xs\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-2 {
    grid-column: span 2;
  }
  .xs\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-3 {
    grid-column: span 3;
  }
  .xs\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-4 {
    grid-column: span 4;
  }
  .xs\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-5 {
    grid-column: span 5;
  }
  .xs\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-6 {
    grid-column: span 6;
  }
  .xs\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-7 {
    grid-column: span 7;
  }
  .xs\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-8 {
    grid-column: span 8;
  }
  .xs\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-9 {
    grid-column: span 9;
  }
  .xs\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-10 {
    grid-column: span 10;
  }
  .xs\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-11 {
    grid-column: span 11;
  }
  .xs\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 400px) {
  .xs\:hidden {
    display: none !important;
  }
  .xs\:block {
    display: block !important;
  }
  .xs\:inline {
    display: inline !important;
  }
  .xs\:flex {
    display: flex !important;
  }
  .xs\:grid {
    display: grid !important;
  }
}
@font-face {
  font-family: "Suisse-Regular";
  src: url("../fonts/SuisseIntl-Regular-WebM.woff2") format("woff2"), url("../fonts/SuisseIntl-Regular-WebM.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Suisse-Medium";
  src: url("../fonts/SuisseIntl-Medium.woff2") format("woff2"), url("../fonts/SuisseIntl-Medium.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Suisse-Mono";
  src: url("../fonts/SuisseIntlMono-Regular-WebXL.woff2") format("woff2"), url("../fonts/SuisseIntlMono-Regular-WebXL.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
:root {
  /* GENERAL */
  --w-main: 2000px;
  --font-main: "Suisse-Medium";
  --font-secondary: "Suisse-Mono";
  --accessibility-font-size: 1;
  --text-us: calc(clamp(10px, 9.7654320988px + 0.0617283951vw, 11px) * var(--accessibility-font-size));
  --text-xxs: calc(clamp(15px, 14.2962962963px + 0.1851851852vw, 18px) * var(--accessibility-font-size));
  --text-xs: calc(clamp(16px, 15.0617283951px + 0.2469135802vw, 20px) * var(--accessibility-font-size));
  --text-sm: calc(clamp(18px, 17.0617283951px + 0.2469135802vw, 22px) * var(--accessibility-font-size));
  --text-md: calc(clamp(22px, 19.6543209877px + 0.6172839506vw, 32px) * var(--accessibility-font-size));
  --text-lg: calc(clamp(24px, 20.7160493827px + 0.8641975309vw, 38px) * var(--accessibility-font-size));
  --text-xl: calc(clamp(26px, 22.2469135802px + 0.987654321vw, 42px) * var(--accessibility-font-size));
  --text-ul: calc(clamp(30px, 25.3086419753px + 1.2345679012vw, 50px) * var(--accessibility-font-size));
  /* SPACES */
  --space-2xs: clamp(4px, 3.5308641975px + 0.1234567901vw, 6px);
  --space-xs: clamp(8px, 7.0617283951px + 0.2469135802vw, 12px);
  --space-sm: clamp(16px, 14.1234567901px + 0.4938271605vw, 24px);
  --space-md: clamp(16px, 14.1234567901px + 0.4938271605vw, 24px);
  --space-lg: clamp(48px, 36.7407407407px + 2.962962963vw, 96px);
  --space-xl: clamp(32px, 28.2469135802px + 0.987654321vw, 48px);
  --space-2xl: clamp(48px, 42.3703703704px + 1.4814814815vw, 72px);
  --space-3xl: clamp(64px, 56.4938271605px + 1.975308642vw, 96px);
  --space-4xl: clamp(96px, 84.7407407407px + 2.962962963vw, 144px);
  --space-5xl: clamp(128px, 112.987654321px + 3.950617284vw, 192px);
  --space-collapsible-initial: calc(clamp(60px, 54.1358024691px + 1.5432098765vw, 85px));
  /* COLORS */
  --color-black: rgb(31, 31, 31);
  --color-white: rgb(255, 255, 255);
  --color-primary: rgb(10, 10, 10);
  --color-secondary: rgb(130, 190, 160);
  --color-text: var(--color-black-60);
  --color-highlight: var(--color-primary);
  --color-bg: var(--color-white);
  --color-white-0: rgba(var(255, 255, 255), 0);
  --color-primary-0: rgba(var(10, 10, 10), 0);
  --color-white-10: rgba(var(255, 255, 255), 0.1);
  --color-primary-10: rgba(var(10, 10, 10), 0.1);
  --color-white-20: rgba(var(255, 255, 255), 0.2);
  --color-primary-20: rgba(var(10, 10, 10), 0.2);
  --color-white-30: rgba(var(255, 255, 255), 0.3);
  --color-primary-30: rgba(var(10, 10, 10), 0.3);
  --color-white-40: rgba(var(255, 255, 255), 0.4);
  --color-primary-40: rgba(var(10, 10, 10), 0.4);
  --color-white-50: rgba(var(255, 255, 255), 0.5);
  --color-primary-50: rgba(var(10, 10, 10), 0.5);
  --color-white-60: rgba(var(255, 255, 255), 0.6);
  --color-primary-60: rgba(var(10, 10, 10), 0.6);
  --color-white-70: rgba(var(255, 255, 255), 0.7);
  --color-primary-70: rgba(var(10, 10, 10), 0.7);
  --color-white-80: rgba(var(255, 255, 255), 0.8);
  --color-primary-80: rgba(var(10, 10, 10), 0.8);
  --color-white-90: rgba(var(255, 255, 255), 0.9);
  --color-primary-90: rgba(var(10, 10, 10), 0.9);
  --color-black-0: white;
  --color-black-5: rgb(242.25, 242.25, 242.25);
  --color-black-10: rgb(229.5, 229.5, 229.5);
  --color-black-15: rgb(216.75, 216.75, 216.75);
  --color-black-20: #cccccc;
  --color-black-25: rgb(191.25, 191.25, 191.25);
  --color-black-30: rgb(178.5, 178.5, 178.5);
  --color-black-35: rgb(165.75, 165.75, 165.75);
  --color-black-40: #999999;
  --color-black-45: rgb(140.25, 140.25, 140.25);
  --color-black-50: rgb(127.5, 127.5, 127.5);
  --color-black-55: rgb(114.75, 114.75, 114.75);
  --color-black-60: #666666;
  --color-black-65: rgb(89.25, 89.25, 89.25);
  --color-black-70: rgb(76.5, 76.5, 76.5);
  --color-black-75: rgb(63.75, 63.75, 63.75);
  --color-black-80: #333333;
  --color-black-85: rgb(38.25, 38.25, 38.25);
  --color-black-90: rgb(25.5, 25.5, 25.5);
  --color-black-95: rgb(12.75, 12.75, 12.75);
  --color-black-100: black;
  /* EASING */
  --easing1: cubic-bezier(0.85, 0, 0.15, 1);
  /* DURATION */
  --duration-1: 0.2s;
  --duration-2: 0.5s;
  --duration-3: 0.7s;
  /* GAPS */
  --gap-1: var(--space-2xs);
  --gap-2: var(--space-xs);
  --gap-3: var(--space-md);
  /* BORDER OUTLINES */
  --outline-sm: 1px solid var(--color-text);
  --outline-md: 2px solid var(--color-text);
  --outline-lg: 3px solid var(--color-text);
  /* BORDER RADIUS */
  --radius-1: 3px;
  --radius-2: 10px;
  --radius-round: 50%;
}
:root .accessibility-invert {
  --color-text: var(--color-white);
  --color-bg: var(--color-black);
}
:root .accessibility-biggerText {
  --font-size-xs: calc(clamp(24px, 20.6222222222px + 0.8888888889vw, 38.4px) * 1.5);
  --font-size-sm: calc(clamp(24px, 20.6222222222px + 0.8888888889vw, 38.4px) * 1.5);
  --font-size-md: calc(clamp(24px, 20.6222222222px + 0.8888888889vw, 38.4px) * 1.5);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-main), sans-serif;
  font-size: var(--text-md);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h2 {
  font-weight: normal;
}

html,
body,
main {
  /* Firefox */
  scrollbar-width: none;
  /* IE/old Edge */
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  /* Chrome/Safari */
  display: none;
}

body,
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  background-color: var(--color-white);
}

body {
  transition: all 0.5s ease-in-out;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-main), sans-serif;
}

main {
  overflow: clip;
  background-color: var(--color-white);
}

.main {
  min-height: 50dvh;
}
@media screen and (max-width: 750px) {
  .main {
    margin-top: var(--space-header);
  }
}

.project-item.filterHidden {
  display: none !important;
}

.news-section.filterHidden {
  display: none !important;
}

.team-item.filterHidden {
  display: none !important;
}

.team-section-item.filterHidden {
  display: none !important;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--color-black);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, opacity 0.2s ease;
}
@media screen and (max-width: 750px) {
  .custom-cursor {
    display: none;
  }
}

.custom-cursor.is-hover {
  width: 20px;
  height: 20px;
}

.custom-cursor.is-hidden {
  opacity: 0;
}

/* Normalen Cursor überall verstecken */
html,
body,
a,
button {
  cursor: none !important;
}

/* Bei Galerie mit mehreren Bildern wieder normalen Cursor erlauben */
.news-img.has-gallery {
  cursor: none;
}

p,
span,
a {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

p {
  color: var(--color-black-60);
}

a {
  text-decoration: none;
  cursor: pointer;
  transition: all 0.1s ease;
}

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

svg {
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

img {
  font-size: 10px;
  width: 100%;
}

img[src=""],
img:not([src]) {
  background: var(--color-white-variant);
  border: 1px solid var(--color-white-variant);
}

.arrow svg {
  width: auto;
  height: calc(var(--text-xs) * 1.1);
  fill: var(--color-black-60);
}
@media screen and (max-width: 750px) {
  .arrow svg {
    margin-top: 0.1em;
    height: var(--text-xs);
  }
}

.arrow-home svg {
  width: auto;
  fill: var(--color-black-60);
  margin-top: 0.1em;
  height: calc(var(--text-xs) * 1.25);
}

.arrow-up {
  display: none;
}

.more-button.open .arrow-down {
  display: none;
}

.more-button.open .arrow-up {
  display: inline;
}

.underline a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.05em;
}

.text-xxs,
.text-xxs * {
  font-size: max(12px, var(--text-xs) / 1.2);
  line-height: 1.3;
}
@media screen and (max-width: 750px) {
  .text-xxs,
  .text-xxs * {
    font-size: var(--text-xxs);
  }
}

.text-xs,
.text-xs * {
  font-size: var(--text-xs);
  line-height: 1.1;
}
@media screen and (max-width: 750px) {
  .text-xs,
  .text-xs * {
    font-size: calc(var(--text-xs) * 1.2);
    line-height: 1.15;
    letter-spacing: -0.2%;
  }
}

.text-sm,
.text-sm * {
  font-size: var(--text-sm);
  line-height: 1.2;
}

.text-md,
.text-md * {
  font-size: var(--text-md);
  line-height: 1.2;
}

.text-lg,
.text-lg * {
  font-size: var(--text-lg);
  line-height: 1.2;
}

.text-xl,
.text-xl * {
  font-size: var(--text-xl);
  line-height: 1.2;
}

.text-xxl,
.text-xxl * {
  font-size: calc(var(--text-xl) * 1.2);
  line-height: 1.1;
}
@media screen and (max-width: 750px) {
  .text-xxl,
  .text-xxl * {
    font-size: calc(var(--text-xl) * 1.1);
    letter-spacing: -0.8%;
  }
}

.text-ul,
.text-ul * {
  font-size: var(--text-ul);
  line-height: 1;
}

.text-uul,
.text-uul * {
  font-size: calc(var(--text-ul) * 1.2);
  line-height: 1.05;
}

.text-quote,
.text-quote * {
  font-size: clamp(1rem, 3vw, 3rem);
  line-height: 1.2;
}
@media screen and (max-width: 750px) {
  .text-quote,
  .text-quote * {
    font-size: var(--text-xl);
    line-height: 1.1;
    padding: 0 var(--space-xs);
  }
}

.color-black-30,
.color-black-30 * {
  color: var(--color-black-30);
}

.color-black-60,
.color-black-60 * {
  color: var(--color-black-60);
}

.color-black,
.color-black * {
  color: var(--color-black);
}

.color-white,
.color-white * {
  color: var(--color-white);
}

.color-secondary,
.color-secondary * {
  color: var(--color-black-60);
}

.mb-2xl {
  margin-bottom: var(--space-2xl);
}

.mb-3xl {
  margin-bottom: var(--space-3xl);
}

.table-numb {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.four-char {
  font-size: var(--text-xs);
  width: 4ch;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  flex-shrink: 0;
}
@media screen and (max-width: 750px) {
  .four-char {
    display: none;
  }
}

.text-secondary,
.text-secondary p,
.text-secondary a,
.text-secondary * {
  font-family: var(--font-secondary), monospace;
  font-size: max(12px, var(--text-xs) / 1.6);
}
@media screen and (max-width: 750px) {
  .text-secondary,
  .text-secondary p,
  .text-secondary a,
  .text-secondary * {
    font-size: max(12px, var(--text-xs) / 1.4);
  }
}

.category-space {
  display: inline-block;
  width: 0.3em;
}

.mix-blend-difference {
  mix-blend-mode: difference;
}

summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

.color-black-60 a:hover {
  color: var(--color-black);
}

.black-hover,
.black-hover a {
  transition: color 0.3s ease;
}

.black-hover:hover,
.black-hover a:hover {
  color: var(--color-black) !important;
}

.black-60-hover,
.black-60-hover a {
  transition: color 0.3s ease;
}

.black-60-hover:hover,
.black-60-hover a:hover {
  color: var(--color-black-60) !important;
}

.mobile {
  display: none !important;
}
@media screen and (max-width: 750px) {
  .mobile {
    display: block !important;
  }
}

.desktop {
  display: block !important;
}
@media screen and (max-width: 750px) {
  .desktop {
    display: none !important;
  }
}

.width-100 {
  width: 100%;
}

.height-100 {
  height: 100%;
}

.p-fixed {
  position: fixed;
}

.left-sm {
  left: var(--space-sm);
}

.left-middle {
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--space-sm) + var(--text-xs) - 1.02em);
}

.right-sm {
  right: var(--space-sm);
}

.video-wrapper {
  position: relative;
}
.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
}

.video-control {
  position: absolute;
  left: var(--space-xs);
  bottom: var(--space-xs);
  z-index: 2;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
  color: var(--color-white);
}

.video-control-news {
  position: absolute;
  padding: var(--space-xs);
  z-index: 2;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}

.video-control .play-text,
.video-control-news .play-text {
  display: none;
  color: var(--color-white);
}

.video-control.paused .play-text,
.video-control-news.paused .play-text {
  display: inline;
  color: var(--color-white);
}

.video-control.paused .pause-text,
.video-control-news.paused .pause-text {
  display: none;
  color: var(--color-white);
}

.play-text,
.pause-text {
  color: var(--color-white);
}

[data-keyboard-nav] a:focus {
  outline: none;
}

[data-keyboard-nav] a:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fade-in-top {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fade-in-bottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-out-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes fade-out-top {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes fade-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes fade-out-bottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
.delay-1 {
  transition-delay: 0.1s !important;
}

.delay-2 {
  transition-delay: 0.2s !important;
}

.delay-3 {
  transition-delay: 0.3s !important;
}

.delay-4 {
  transition-delay: 0.4s !important;
}

.delay-5 {
  transition-delay: 0.5s !important;
}

.delay-6 {
  transition-delay: 0.6s !important;
}

.delay-7 {
  transition-delay: 0.7s !important;
}

.delay-8 {
  transition-delay: 0.8s !important;
}

.delay-9 {
  transition-delay: 0.9s !important;
}

.delay-10 {
  transition-delay: 1s !important;
}

[data-text-reveal] span {
  opacity: 0.2;
  transition: opacity 0.2s linear;
}

.transition-overlay {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: var(--color-black);
  opacity: 0;
  transform: translate3d(0, calc(-100% * var(--overlay-direction, 1)), 0);
  pointer-events: none;
}

/* Slightly move main content */
html.is-changing .transition-overlay {
  transition: transform 550ms cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 1;
}

html.is-animating .transition-overlay {
  transform: translate3d(0, 0, 0);
}

html.is-rendering .transition-overlay {
  transform: translate3d(0, calc(var(--overlay-direction, 1) * 100%), 0);
}

html.to-back {
  /* --overlay-direction: -1; */
}

.swup-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.swup-text a {
  display: block;
  white-space: nowrap;
  font-size: clamp(3rem, 11.3vw, 12rem);
  line-height: 1;
  color: var(--color-black-80);
}
@media screen and (max-width: 750px) {
  .swup-text a {
    font-size: clamp(1.5rem, 11vw, 12rem);
  }
}

.accessibility-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  display: none;
}

.accessibility-spotlight {
  display: none;
}

.accessibility-cursor {
  width: 100px;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-image: url("../img/accessibility-cursor.png");
  background-position: start center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  display: none;
}

.accessibility-highlightTitle h1,
.accessibility-highlightTitle h2,
.accessibility-highlightTitle h3,
.accessibility-highlightTitle h4,
.accessibility-highlightTitle h5,
.accessibility-highlightTitle h6 {
  border: var(--color-highlight) 2px solid;
}

.accessibility-highlightLinks a {
  border: var(--color-highlight) 2px solid;
}

.accessibility-moreLineSpace * {
  line-height: 2em !important;
}

.accessibility-moreLetterSpace * {
  letter-spacing: 0.1em;
}

.accessibility-darkerContrast p,
.accessibility-darkerContrast h1,
.accessibility-darkerContrast h2,
.accessibility-darkerContrast h3,
.accessibility-darkerContrast h4,
.accessibility-darkerContrast h5,
.accessibility-darkerContrast h6,
.accessibility-darkerContrast span,
.accessibility-darkerContrast a {
  background-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white) !important;
  fill: var(--color-white);
}
.accessibility-darkerContrast p svg,
.accessibility-darkerContrast h1 svg,
.accessibility-darkerContrast h2 svg,
.accessibility-darkerContrast h3 svg,
.accessibility-darkerContrast h4 svg,
.accessibility-darkerContrast h5 svg,
.accessibility-darkerContrast h6 svg,
.accessibility-darkerContrast span svg,
.accessibility-darkerContrast a svg {
  fill: var(--color-white);
  background: var(--color-black);
}

.accessibility-lighterContrast p,
.accessibility-lighterContrast h1,
.accessibility-lighterContrast h2,
.accessibility-lighterContrast h3,
.accessibility-lighterContrast h4,
.accessibility-lighterContrast h5,
.accessibility-lighterContrast h6,
.accessibility-lighterContrast span,
.accessibility-lighterContrast a {
  background-color: var(--color-white) !important;
  background: var(--color-white);
  color: var(--color-black) !important;
  fill: var(--color-black);
}
.accessibility-lighterContrast p svg,
.accessibility-lighterContrast h1 svg,
.accessibility-lighterContrast h2 svg,
.accessibility-lighterContrast h3 svg,
.accessibility-lighterContrast h4 svg,
.accessibility-lighterContrast h5 svg,
.accessibility-lighterContrast h6 svg,
.accessibility-lighterContrast span svg,
.accessibility-lighterContrast a svg {
  fill: var(--color-black);
  background: var(--color-white);
}
.accessibility-lighterContrast .accessibility-item__toggle.checked {
  border: var(--color-black) 3px solid;
}

.accessibility-highContrast .accessibility-overlay {
  display: block;
  backdrop-filter: contrast(200%);
}

.accessibility-highSaturation .accessibility-overlay {
  display: block;
  backdrop-filter: saturate(200%);
}

.accessibility-littleSaturation .accessibility-overlay {
  display: block;
  backdrop-filter: saturate(50%);
}

.accessibility-monochromatic .accessibility-overlay {
  display: block;
  backdrop-filter: grayscale(1);
}

.accessibility-monochromatic .accessibility-overlay {
  display: block;
  backdrop-filter: grayscale(1);
}

.accessibility-readingGuide .accessibility-spotlight {
  display: block;
  position: fixed;
  left: 0;
  top: 50px;
  width: 100vw;
  height: 7vh;
  /* Darken everything else with a massive spread shadow */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  pointer-events: none; /* don't block clicks */
  z-index: 9999;
}

.accessibility-noAnimations * {
  animation: none !important;
  transition: none !important;
}

.accessibility-bigCursor {
  cursor: none;
}
.accessibility-bigCursor * {
  cursor: none;
}
.accessibility-bigCursor .accessibility-cursor {
  display: block;
}

.accessibility-invert .icon-toggle .light {
  display: initial;
}
.accessibility-invert .icon-toggle .dark {
  display: none;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-col-reverse {
  display: flex;
  flex-direction: column-reverse;
}

.flex-col-inline {
  display: inline-flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-between-start {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.flex-between-end {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center-2 {
  display: inline-flex;
  align-items: center;
}

.h-xl {
  height: var(--h-xl);
}

.h-lg {
  height: var(--h-lg);
}

.h-md {
  height: var(--h-md);
}

.h-md-min {
  min-height: var(--h-md);
}

.h-sm {
  height: var(--h-sm);
}

.h-screen {
  height: 100dvh;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

:root {
  --space-uul: clamp(300px, 276.5432098765px + 6.1728395062vw, 400px);
  --space-ul: clamp(100px, 76.5432098765px + 6.1728395062vw, 200px);
  --space-xl: clamp(50px, 38.2716049383px + 3.0864197531vw, 100px);
  --space-lg: clamp(25px, 19.1358024691px + 1.5432098765vw, 50px);
  --space-md: clamp(15px, 11.4814814815px + 0.9259259259vw, 30px);
  --space-sm: clamp(10px, 7.6543209877px + 0.6172839506vw, 20px);
  --space-xs: clamp(5px, 3.8271604938px + 0.3086419753vw, 10px);
  --space-header: clamp(210px, 186.5432098765px + 6.1728395062vw, 310px);
}

.m-uul {
  margin: var(--space-uul);
}

.mt-uul {
  margin-top: var(--space-uul);
}

.mr-uul {
  margin-right: var(--space-uul);
}

.mb-uul {
  margin-bottom: var(--space-uul);
}

.ml-uul {
  margin-left: var(--space-uul);
}

.p-uul {
  padding: var(--space-uul);
}

.pt-uul {
  padding-top: var(--space-uul);
}

.pr-uul {
  padding-right: var(--space-uul);
}

.pb-uul {
  padding-bottom: var(--space-uul);
}

.pl-uul {
  padding-left: var(--space-uul);
}

.gap-uul {
  gap: var(--space-uul) !important;
}

.row-gap-uul {
  row-gap: var(--space-uul);
}

.col-gap-uul {
  column-gap: var(--space-uul);
}

.m-ul {
  margin: var(--space-ul);
}

.mt-ul {
  margin-top: var(--space-ul);
}

.mr-ul {
  margin-right: var(--space-ul);
}

.mb-ul {
  margin-bottom: var(--space-ul);
}

.ml-ul {
  margin-left: var(--space-ul);
}

.p-ul {
  padding: var(--space-ul);
}

.pt-ul {
  padding-top: var(--space-ul);
}

.pr-ul {
  padding-right: var(--space-ul);
}

.pb-ul {
  padding-bottom: var(--space-ul);
}

.pl-ul {
  padding-left: var(--space-ul);
}

.gap-ul {
  gap: var(--space-ul) !important;
}

.row-gap-ul {
  row-gap: var(--space-ul);
}

.col-gap-ul {
  column-gap: var(--space-ul);
}

.m-xl {
  margin: var(--space-xl);
}

.mt-xl {
  margin-top: var(--space-xl);
}

.mr-xl {
  margin-right: var(--space-xl);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}

.ml-xl {
  margin-left: var(--space-xl);
}

.p-xl {
  padding: var(--space-xl);
}

.pt-xl {
  padding-top: var(--space-xl);
}

.pr-xl {
  padding-right: var(--space-xl);
}

.pb-xl {
  padding-bottom: var(--space-xl);
}

.pl-xl {
  padding-left: var(--space-xl);
}

.gap-xl {
  gap: var(--space-xl) !important;
}

.row-gap-xl {
  row-gap: var(--space-xl);
}

.col-gap-xl {
  column-gap: var(--space-xl);
}

.m-lg {
  margin: var(--space-lg);
}

.mt-lg {
  margin-top: var(--space-lg);
}

.mr-lg {
  margin-right: var(--space-lg);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.ml-lg {
  margin-left: var(--space-lg);
}

.p-lg {
  padding: var(--space-lg);
}

.pt-lg {
  padding-top: var(--space-lg);
}

.pr-lg {
  padding-right: var(--space-lg);
}

.pb-lg {
  padding-bottom: var(--space-lg);
}

.pl-lg {
  padding-left: var(--space-lg);
}

.gap-lg {
  gap: var(--space-lg) !important;
}

.row-gap-lg {
  row-gap: var(--space-lg);
}

.col-gap-lg {
  column-gap: var(--space-lg);
}

.m-md {
  margin: var(--space-md);
}

.mt-md {
  margin-top: var(--space-md);
}

.mr-md {
  margin-right: var(--space-md);
}

.mb-md {
  margin-bottom: var(--space-md);
}

.ml-md {
  margin-left: var(--space-md);
}

.p-md {
  padding: var(--space-md);
}

.pt-md {
  padding-top: var(--space-md);
}

.pr-md {
  padding-right: var(--space-md);
}

.pb-md {
  padding-bottom: var(--space-md);
}

.pl-md {
  padding-left: var(--space-md);
}

.gap-md {
  gap: var(--space-md) !important;
}

.row-gap-md {
  row-gap: var(--space-md);
}

.col-gap-md {
  column-gap: var(--space-md);
}

.m-sm {
  margin: var(--space-sm);
}

.mt-sm {
  margin-top: var(--space-sm);
}

.mr-sm {
  margin-right: var(--space-sm);
}

.mb-sm {
  margin-bottom: var(--space-sm);
}

.ml-sm {
  margin-left: var(--space-sm);
}

.p-sm {
  padding: var(--space-sm);
}

.pt-sm {
  padding-top: var(--space-sm);
}

.pr-sm {
  padding-right: var(--space-sm);
}

.pb-sm {
  padding-bottom: var(--space-sm);
}

.pl-sm {
  padding-left: var(--space-sm);
}

.gap-sm {
  gap: var(--space-sm) !important;
}

.row-gap-sm {
  row-gap: var(--space-sm);
}

.col-gap-sm {
  column-gap: var(--space-sm);
}

.m-xs {
  margin: var(--space-xs);
}

.mt-xs {
  margin-top: var(--space-xs);
}

.mr-xs {
  margin-right: var(--space-xs);
}

.mb-xs {
  margin-bottom: var(--space-xs);
}

.ml-xs {
  margin-left: var(--space-xs);
}

.p-xs {
  padding: var(--space-xs);
}

.pt-xs {
  padding-top: var(--space-xs);
}

.pr-xs {
  padding-right: var(--space-xs);
}

.pb-xs {
  padding-bottom: var(--space-xs);
}

.pl-xs {
  padding-left: var(--space-xs);
}

.gap-xs {
  gap: var(--space-xs) !important;
}

.row-gap-xs {
  row-gap: var(--space-xs);
}

.col-gap-xs {
  column-gap: var(--space-xs);
}

.m-header {
  margin: var(--space-header);
}

.mt-header {
  margin-top: var(--space-header);
}

.mr-header {
  margin-right: var(--space-header);
}

.mb-header {
  margin-bottom: var(--space-header);
}

.ml-header {
  margin-left: var(--space-header);
}

.p-header {
  padding: var(--space-header);
}

.pt-header {
  padding-top: var(--space-header);
}

.pr-header {
  padding-right: var(--space-header);
}

.pb-header {
  padding-bottom: var(--space-header);
}

.pl-header {
  padding-left: var(--space-header);
}

.gap-header {
  gap: var(--space-header) !important;
}

.row-gap-header {
  row-gap: var(--space-header);
}

.col-gap-header {
  column-gap: var(--space-header);
}

.grid-cols-1 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-1-auto {
  display: grid;
  grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-1 {
  grid-column: span 1;
}

.grid-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-2-auto {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-2 {
  grid-column: span 2;
}

.grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-3-auto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-3 {
  grid-column: span 3;
}

.grid-cols-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-4-auto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-4 {
  grid-column: span 4;
}

.grid-cols-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-5-auto {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-5 {
  grid-column: span 5;
}

.grid-cols-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-6-auto {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-6 {
  grid-column: span 6;
}

.grid-cols-7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-7-auto {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-7 {
  grid-column: span 7;
}

.grid-cols-8 {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-8-auto {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-8 {
  grid-column: span 8;
}

.grid-cols-9 {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-9-auto {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-9 {
  grid-column: span 9;
}

.grid-cols-10 {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-10-auto {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-10 {
  grid-column: span 10;
}

.grid-cols-11 {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-11-auto {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-11 {
  grid-column: span 11;
}

.grid-cols-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--space-gap);
}

.grid-cols-12-auto {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

.col-span-12 {
  grid-column: span 12;
}

.flex {
  display: flex;
}

.justify-start {
  justify-content: start;
}

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

.justify-end {
  justify-content: end;
}

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

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

.justify-evenly {
  justify-content: space-evenly;
}

.content-start {
  align-content: start;
}

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

.content-end {
  align-content: end;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-evenly {
  align-content: space-evenly;
}

.items-start {
  align-items: start;
}

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

.items-end {
  align-items: end;
}

.items-baseline {
  align-items: baseline;
}

.items-between {
  align-items: space-between;
}

.items-around {
  align-items: space-around;
}

.items-evenly {
  align-items: space-evenly;
}

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

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

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

/* all sides */
.b-sm {
  border: var(--outline-sm);
}

.b-md {
  border: var(--outline-md);
}

.b-lg {
  border: var(--outline-lg);
}

/* top */
.bt-sm {
  border-top: var(--outline-sm);
}

.bt-md {
  border-top: var(--outline-md);
}

.bt-lg {
  border-top: var(--outline-lg);
}

/* right */
.br-sm {
  border-right: var(--outline-sm);
}

.br-md {
  border-right: var(--outline-md);
}

.br-lg {
  border-right: var(--outline-lg);
}

/* bottom */
.bb-sm {
  border-bottom: var(--outline-sm);
}

.bb-md {
  border-bottom: var(--outline-md);
}

.bb-lg {
  border-bottom: var(--outline-lg);
}

/* left */
.bl-sm {
  border-left: var(--outline-sm);
}

.bl-md {
  border-left: var(--outline-md);
}

.bl-lg {
  border-left: var(--outline-lg);
}

.radius-1 {
  border-radius: var(--radius-1);
}

.radius-2 {
  border-radius: var(--radius-2);
}

.radius-round {
  border-radius: var(--radius-round);
}

nav {
  position: fixed;
  display: flex;
  justify-content: flex-end;
  margin: var(--space-sm) var(--space-sm);
  right: 0;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  z-index: 999;
}
@media screen and (max-width: 750px) {
  nav {
    position: fixed;
    line-height: 1;
    width: 100%;
    margin: unset;
  }
}

nav {
  transition: opacity 0.3s ease-in-out;
}

nav.hidden {
  opacity: 0;
  pointer-events: none;
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: space-between;
  column-gap: calc(var(--space-xs) / 1.8);
  flex-wrap: wrap;
}
@media screen and (max-width: 750px) {
  nav ul {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-self: flex-start;
  }
}

.FilterNav {
  max-width: 50ch;
}
@media screen and (max-width: 1500px) {
  .FilterNav {
    max-width: 33ch;
  }
}
@media screen and (max-width: 1280px) {
  .FilterNav {
    max-width: 25ch;
  }
}
@media screen and (max-width: 1024px) {
  .FilterNav {
    max-width: 20ch;
  }
}
@media screen and (max-width: 750px) {
  .FilterNav {
    max-width: unset;
    top: unset;
  }
}

@media screen and (max-width: 750px) {
  .MobileNav {
    align-self: flex-start;
    padding-top: var(--space-sm);
  }
}

@media screen and (max-width: 750px) {
  .globalNav {
    flex-direction: column;
    position: relative;
    right: unset;
    top: unset;
    max-width: unset !important;
    align-self: flex-start;
    margin-top: var(--space-sm);
  }
}

@media screen and (max-width: 820px) {
  .globalNav {
    max-width: 20ch;
  }
}
nav li,
nav a {
  color: var(--color-black-30);
}

nav a:hover {
  color: var(--color-black-60);
}

nav a.active {
  color: var(--color-black-60);
}

.studio-Name li {
  position: fixed;
  line-height: 1;
  z-index: 999;
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  /* mix-blend-mode: difference; */
}

.studio-Name li a {
  color: var(--color-black);
}

.studio-Name li:nth-child(1) {
  bottom: 20%;
  left: var(--space-sm);
}

.studio-Name li:nth-child(2) {
  top: var(--space-sm);
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}

.studio-Name li:nth-child(3) {
  top: 45%;
  right: var(--space-sm);
}

.studio-Name {
  transition: all 0.3s ease;
  position: fixed;
  z-index: 999;
}

@media screen and (max-width: 750px) {
  .studio-Name-Mobile {
    display: flex !important;
    position: relative;
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-top: calc(var(--space-lg) + var(--space-sm));
    z-index: 998;
  }
}

@media screen and (max-width: 750px) {
  .studio-Name-Mobile a {
    display: block;
    white-space: nowrap;
    font-size: clamp(1.5rem, 10.6vw, 12rem);
    line-height: 1;
    text-align: center;
    color: var(--color-black);
    justify-self: flex-start;
  }
}

.studio-Name-Mobile a:hover {
  color: var(--color-black);
}

.studio-Name li:nth-child(1).hidden {
  opacity: 0;
  pointer-events: none;
}

.studio-Name li:nth-child(2).hidden {
  opacity: 0;
  pointer-events: none;
}

.studio-Name li:nth-child(3).hidden {
  opacity: 0;
  pointer-events: none;
}

.projectNav {
  position: fixed;
  left: var(--space-sm);
}
@media screen and (max-width: 750px) {
  .projectNav {
    position: relative;
    align-self: flex-start;
    left: unset;
    padding-top: var(--space-lg);
  }
}

.project-sub-nav {
  position: fixed;
  width: 100%;
  mix-blend-mode: difference;
}
@media screen and (max-width: 750px) {
  .project-sub-nav {
    z-index: 100;
    position: relative;
    mix-blend-mode: unset;
  }
}

.project-sub-footer {
  display: none;
}
@media screen and (max-width: 750px) {
  .project-sub-footer {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
  }
}

footer {
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#globalNavMobile {
  display: none;
}

#globalNavMobile.is-open {
  display: block !important;
  margin-top: 0;
}

#navMenuButton {
  cursor: pointer;
}

#navMenuButton.is-open .menu-label {
  display: none;
}

#navMenuButton.is-open .current-label {
  display: none;
}

.nav-hidden {
  display: none !important;
}

.globalNav,
.FilterNav,
.projectNav {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}
@media screen and (max-width: 750px) {
  .globalNav,
  .FilterNav,
  .projectNav {
    margin-left: var(--space-sm);
    margin-right: var(--space-sm);
    z-index: 998;
  }
}

@media screen and (max-width: 750px) {
  .nav-scroll-hidden {
    opacity: 0 !important;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
  }
}

@media screen and (max-width: 750px) {
  .nav-scroll-hidden-global {
    pointer-events: none;
  }
}

.nav-mobile-accessibility {
  display: none;
}
@media screen and (max-width: 750px) {
  .nav-mobile-accessibility {
    display: block;
    position: absolute;
    width: 100%;
    height: calc(100% + var(--space-sm));
    top: 0;
    background-color: var(--color-white);
    z-index: 997;
  }
}

input,
textarea,
select {
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  outline: none;
  transition: all 0.2s ease-in-out;
}

input {
  width: 100%;
  display: block;
  background-color: transparent;
  border: var(--outline-md);
  padding: var(--space-md) var(--space-md);
  margin-bottom: var(--space-md);
}
input[type=radio], input[type=checkbox] {
  width: 20px;
  height: 20px;
  border: var(--outline-md);
  border-radius: var(--radius-1); /* Apply a small border radius */
  background-color: transparent;
}
input[type=radio]:checked, input[type=checkbox]:checked {
  background-color: var(--color-bg); /* Optional: Highlight when checked */
  border-color: var(--color-text);
}
input:focus {
  border-color: var(--color-text);
}

textarea {
  width: 100%;
  display: block;
  background-color: transparent;
  border: var(--outline-md);
  padding: var(--space-md) var(--space-md);
  margin-bottom: var(--space-md);
}

.loader {
  background-color: var(--color-white);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  width: 100vw;
  height: 100dvh;
  position: fixed;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 750px) {
  .loader {
    justify-content: start;
  }
}

.loader-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
@media screen and (max-width: 750px) {
  .loader-text {
    display: none;
  }
}

.loader-text a {
  display: block;
  white-space: nowrap;
  font-size: clamp(3rem, 10.9vw, 12rem);
  line-height: 1;
  color: var(--color-black);
}

footer {
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
@media screen and (max-width: 750px) {
  footer {
    bottom: unset;
    left: unset;
    width: unset;
    margin: unset;
    text-align: unset;
    margin-left: var(--space-md);
    margin-bottom: var(--space-3xl);
    margin-top: var(--space-uul);
  }
}

footer.open {
  transform: translateY(0);
}

footer a {
  display: block;
  white-space: nowrap;
  font-size: clamp(3rem, 10.9vw, 12rem);
  line-height: 1;
  color: var(--color-black);
}
@media screen and (max-width: 750px) {
  footer a {
    display: inline !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    width: max-content;
    height: fit-content;
    font-size: unset;
    line-height: unset;
  }
}

footer svg {
  fill: var(--color-black);
  width: 10px;
  height: 10px;
  transition: width 0.2s ease, height 0.2s ease;
}

footer.is-clicked svg {
  width: 20px;
  height: 20px;
}

.cookie-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow-y: auto;
  visibility: visible;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s;
}

.cookie-overlay[hidden] {
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s, 0.5s;
}

.cookie-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  width: 100%;
  max-height: 60dvh;
  padding: var(--space-md) var(--space-sm);
  background-color: var(--color-black-5);
  color: var(--color-black);
  overflow: hidden;
  box-sizing: border-box;
  word-break: break-word;
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transform: translateY(0);
}
.cookie-panel h2 {
  font-size: var(--text-xs);
  line-height: 1;
}
@media screen and (max-width: 750px) {
  .cookie-panel {
    grid-template-columns: 1fr;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .cookie-panel h2 {
    font-size: calc(var(--text-xs) * 1.2);
    line-height: 1.15;
    letter-spacing: -0.2%;
  }
  .cookie-panel::-webkit-scrollbar {
    display: none;
  }
}

.cookie-panel > section.is-scrollable {
  max-height: calc(60dvh - var(--space-sm) - var(--space-lg));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.cookie-panel > section.is-scrollable::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 750px) {
  .cookie-panel > section.is-scrollable {
    max-height: none;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    touch-action: auto;
    overscroll-behavior: auto;
  }
}

.cookie-panel > section.is-scrollable,
.cookie-individual.is-scrollable {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 50px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 50px), transparent 100%);
}
@media screen and (max-width: 750px) {
  .cookie-panel > section.is-scrollable,
  .cookie-individual.is-scrollable {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.cookie-panel > section.is-scrollable.can-scroll-up,
.cookie-individual.is-scrollable.can-scroll-up {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 50px, #000 calc(100% - 50px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 50px, #000 calc(100% - 50px), transparent 100%);
}
@media screen and (max-width: 750px) {
  .cookie-panel > section.is-scrollable.can-scroll-up,
  .cookie-individual.is-scrollable.can-scroll-up {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.cookie-panel > section.is-scrollable.scroll-end,
.cookie-individual.is-scrollable.scroll-end {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 50px, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 50px, #000 100%);
}
@media screen and (max-width: 750px) {
  .cookie-panel > section.is-scrollable.scroll-end,
  .cookie-individual.is-scrollable.scroll-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media screen and (max-width: 750px) {
  .cookie-panel section {
    padding-right: 0;
  }
}

@media screen and (max-width: 750px) {
  .cookie-copy p {
    font-size: var(--text-xxs);
  }
}

@media screen and (max-width: 750px) {
  .cookie-head,
  .cookie-intro {
    padding: var(--space-sm);
  }
}

@media screen and (max-width: 750px) {
  .cookie-head {
    flex-direction: column;
    align-items: start;
    position: fixed;
    top: 0;
    padding: var(--space-lg) var(--space-sm) var(--space-sm) var(--space-sm);
    background-color: var(--color-black-5);
    width: 100%;
  }
}

@media screen and (max-width: 750px) {
  .cookie-buttons button:nth-child(3),
  .cookie-links {
    display: none !important;
  }
}

.cookie-links-m {
  display: none;
}
@media screen and (max-width: 750px) {
  .cookie-links-m {
    display: block;
    padding: var(--space-md) var(--space-sm) var(--space-lg) var(--space-sm);
    background-color: var(--color-black-5);
  }
}

.cookie-links-cont {
  display: none;
}
@media screen and (max-width: 750px) {
  .cookie-links-cont {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}

@media screen and (max-width: 750px) {
  .cookie-links-gradient {
    width: 100%;
    height: var(--space-ul);
    background: linear-gradient(to bottom, transparent 0%, var(--color-black-5) 100%);
    opacity: 1;
    pointer-events: none;
  }
}

.cookie-individual.is-scrollable.can-scroll-up {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 50px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 50px), transparent 100%);
}
@media screen and (max-width: 750px) {
  .cookie-individual.is-scrollable.can-scroll-up {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.cookie-individual.is-scrollable.scroll-end {
  -webkit-mask-image: none;
  mask-image: none;
}

.cookie-individual {
  position: absolute;
  top: var(--space-md);
  bottom: var(--space-md);
  right: var(--space-sm);
  width: calc(50% - var(--space-sm));
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
}
.cookie-individual::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 750px) {
  .cookie-individual {
    position: static;
    width: auto;
    min-height: 0;
    padding-right: var(--space-sm);
    padding-bottom: calc(var(--space-ul) + var(--space-lg));
    padding-left: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
}

.cookie-individual-close {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  padding-bottom: var(--space-xs);
  background-color: var(--color-black-5);
}
@media screen and (max-width: 750px) {
  .cookie-individual-close {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    padding: var(--space-md) var(--space-sm);
    background-color: var(--color-black-5);
  }
}

label,
input {
  cursor: none;
  transition: all 0.3s ease-in-out;
}

input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  border: 0.1em solid var(--color-black-30);
  margin: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

input[type=checkbox]:checked {
  background: var(--color-black);
  border-color: var(--color-black);
}

label span {
  color: var(--color-black-30);
}

label:has(input[type=checkbox]:checked) span {
  color: var(--color-black);
}

input[type=checkbox]:disabled {
  opacity: 1;
}

@media (hover: hover) {
  label:hover span {
    color: var(--color-black);
  }
  label:hover input[type=checkbox] {
    background: var(--color-black);
    border-color: var(--color-black);
  }
}
.cookie-service-data {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  gap: var(--space-xs);
}
@media screen and (max-width: 750px) {
  .cookie-service-data {
    display: block;
  }
}

.cookie-service-data dd {
  color: var(--color-black-30);
}
@media screen and (max-width: 750px) {
  .cookie-service-data dd {
    padding-bottom: var(--space-sm);
  }
}

@media screen and (max-width: 750px) {
  cookie-service-data dd:last-child {
    padding-bottom: none;
  }
}

.cookie-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
@media screen and (max-width: 750px) {
  .cookie-buttons {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
}

html.cookie-dialog-open {
  overflow: hidden;
  overscroll-behavior: none;
}
html.cookie-dialog-open body {
  overflow: hidden;
}

.cookie-overlay {
  overscroll-behavior: contain;
}

@media screen and (max-width: 750px) {
  .cookie-head,
  .cookie-links-cont {
    z-index: 3;
    box-sizing: border-box;
  }
  .cookie-intro,
  .cookie-individual {
    position: absolute;
    inset: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    transition: transform 300ms cubic-bezier(0.77, 0, 0.175, 1);
    padding-bottom: calc(var(--cookie-footer-height, 0px) + var(--space-xs));
  }
  .cookie-copy {
    padding-top: calc(var(--cookie-head-height, 0px) + var(--space-xs));
  }
  .cookie-intro {
    transform: translateX(0);
  }
  .cookie-individual {
    padding-top: calc(var(--cookie-head-height, 0px) + var(--space-xs));
    padding-left: var(--space-sm) !important;
    transform: translateX(100%);
  }
  .cookie-individual > :nth-child(2) {
    padding-top: 0;
  }
  .cookie-individual-close {
    display: none;
  }
  .cookie-panel.is-individual-open .cookie-intro {
    transform: translateX(-100%);
  }
  .cookie-panel.is-individual-open .cookie-individual {
    transform: translateX(0);
  }
  .cookie-ind-copy-m,
  .cookie-ind-copy-m * {
    font-size: var(--text-xxs);
  }
}
@media screen and (max-width: 750px) and (prefers-reduced-motion: reduce) {
  .cookie-intro,
  .cookie-individual {
    transition: none;
  }
}
.orientation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  display: none;
}
.orientation-overlay.visible {
  display: block;
}

.article-home p:first-child {
  max-width: 50ch;
  word-break: normal;
  overflow-wrap: normal;
}
@media screen and (max-width: 1500px) {
  .article-home p:first-child {
    max-width: 40ch;
  }
}
@media screen and (max-width: 1280px) {
  .article-home p:first-child {
    max-width: 38ch;
  }
}
@media screen and (max-width: 1024px) {
  .article-home p:first-child {
    max-width: 30ch;
  }
}
@media screen and (max-width: 750px) {
  .article-home p:first-child {
    max-width: unset;
  }
}

.gallery {
  display: flex;
  flex-direction: column;
  margin: var(--space-xl) var(--space-sm) var(--space-uul) var(--space-sm);
  gap: var(--space-lg);
}
@media screen and (max-width: 750px) {
  .gallery {
    display: grid;
    row-gap: var(--space-3xl);
    column-gap: var(--space-xs);
    margin: var(--space-xl) var(--space-sm) var(--space-ul) var(--space-sm);
  }
}

.gallery-block--threeBlock {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}
@media screen and (max-width: 750px) {
  .gallery-block--threeBlock {
    grid-template-columns: 1fr;
    gap: unset;
  }
}

.gallery-three-left {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 750px) {
  .gallery-three-left {
    gap: var(--space-3xl);
  }
}

.gallery-three-left > .gallery-item:last-child {
  align-self: flex-end;
  width: 70%;
  margin-top: var(--space-lg);
  margin-right: var(--space-3xl);
}
@media screen and (max-width: 750px) {
  .gallery-three-left > .gallery-item:last-child {
    align-self: unset;
    width: unset;
    margin-top: unset;
    margin-right: unset;
  }
}

.gallery-three-right {
  margin-right: var(--space-xl);
  padding-top: var(--space-ul);
}
@media screen and (max-width: 750px) {
  .gallery-three-right {
    margin-right: unset;
    padding-top: var(--space-3xl);
  }
}

.gallery-block--fiveBlock {
  display: grid;
  grid-template-rows: 1fr;
  row-gap: var(--space-lg);
}
@media screen and (max-width: 750px) {
  .gallery-block--fiveBlock {
    row-gap: var(--space-3xl);
  }
}

.gallery-five-pair-first {
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  gap: var(--space-xs);
}
@media screen and (max-width: 750px) {
  .gallery-five-pair-first {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }
}

.gallery-five-pair-first > .gallery-item:first-child {
  margin-top: var(--space-xl);
}
@media screen and (max-width: 750px) {
  .gallery-five-pair-first > .gallery-item:first-child {
    margin-top: unset;
  }
}

.gallery-five-pair-second {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}
@media screen and (max-width: 750px) {
  .gallery-five-pair-second {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }
}

.gallery-five-pair-second > .gallery-item:first-child {
  justify-self: end;
  width: 80%;
}
@media screen and (max-width: 750px) {
  .gallery-five-pair-second > .gallery-item:first-child {
    width: 100%;
  }
}

.gallery-five-subpair {
  display: grid;
  margin-top: calc(-1 * var(--space-ul));
}
@media screen and (max-width: 750px) {
  .gallery-five-subpair {
    margin-top: unset;
    gap: var(--space-3xl);
  }
}

.gallery-five-subpair > .gallery-item:last-child {
  width: 60%;
  margin-top: var(--space-lg);
  margin-left: var(--space-3xl);
}
@media screen and (max-width: 750px) {
  .gallery-five-subpair > .gallery-item:last-child {
    width: 100%;
    margin-left: unset;
    margin-top: unset;
  }
}

.gallery-block--twoBlock {
  display: grid;
  grid-template-columns: 1fr 0.6fr;
  gap: var(--space-xs);
}
@media screen and (max-width: 750px) {
  .gallery-block--twoBlock {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }
}

.gallery-block--twoBlock > .gallery-item:last-child {
  margin-top: var(--space-ul);
}
@media screen and (max-width: 750px) {
  .gallery-block--twoBlock > .gallery-item:last-child {
    width: 100%;
    margin-top: unset;
  }
}

.gallery-item {
  position: relative;
  width: 100%;
  height: fit-content;
}

.gallery-item > a {
  display: block;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 1;
  line-height: 1;
}

.gallery-overlay p {
  font-size: var(--text-xs);
  color: var(--color-white);
}

.gallery-overlay:hover {
  opacity: 1;
}

.more-text .list-item {
  overflow: hidden;
  transition: max-height 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

.more-text .list-item.hidden {
  max-height: 0;
}

.article-home .more-button {
  padding-top: var(--space-lg);
}

.article-home-m {
  padding-bottom: var(--space-lg);
}

@media screen and (max-width: 750px) {
  .gallery-overlay {
    display: none;
  }
}

.mobile-project-title {
  display: none;
}
@media screen and (max-width: 750px) {
  .mobile-project-title {
    width: 100%;
    position: fixed;
    top: 50%;
    text-align: center;
    justify-self: center;
    display: block;
    z-index: 100;
    pointer-events: none;
    transform: translateY(-50%);
    color: var(--color-white);
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 0 calc(var(--space-lg) * 1.8);
    justify-content: center;
    align-items: center;
  }
}
.mobile-project-title.is-visible {
  opacity: 1;
}
.mobile-project-title p {
  color: var(--color-white);
}

#about {
  color: var(--color-black-60);
}

#about section,
#about div {
  scroll-margin-top: 100px;
}
@media screen and (max-width: 750px) {
  #about section,
  #about div {
    scroll-margin-top: 200px;
  }
}

.profil-images {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0 var(--space-sm);
}
@media screen and (max-width: 750px) {
  .profil-images {
    flex-direction: column;
    margin: var(--space-sm);
    gap: var(--space-sm);
  }
}

.profil-images img,
.profil-images .video-wrapper {
  flex: 1;
  width: 0;
  height: auto;
}
@media screen and (max-width: 750px) {
  .profil-images img,
  .profil-images .video-wrapper {
    flex: unset;
    width: unset;
    height: auto;
    max-width: 100%;
    max-height: clamp(390px, 375.9259259259px + 3.7037037037vw, 450px);
  }
}

.team-filter {
  column-gap: calc(var(--space-xs) / 1.8);
  flex-wrap: wrap;
  line-height: 1;
}

.team-filter a {
  color: var(--color-black-30);
}

.team-filter a:hover {
  color: var(--color-black-60);
}

.team-filter a.active {
  color: var(--color-black-60);
}

.team-images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 1280px) {
  .team-images {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 750px) {
  .team-images {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 640px) {
  .team-images {
    grid-template-columns: repeat(1, 1fr);
  }
}

.team-images img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.team-img {
  aspect-ratio: 3/4;
  background-color: var(--color-black-10);
}

.team-item {
  position: relative;
  overflow: hidden;
}

.team-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: var(--space-xs);
  padding-top: var(--space-xs);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  color: var(--color-black-60);
  background-color: var(--color-white);
}
@media screen and (max-width: 750px) {
  .team-overlay {
    position: relative;
    inset: unset;
    visibility: visible;
    opacity: 1;
    padding: var(--space-sm) var(--space-xs) var(--space-lg) 0;
  }
}

@media screen and (max-width: 750px) {
  .team-overlay * {
    font-size: var(--text-xs);
  }
}

.team-item:hover .team-overlay {
  opacity: 1;
  visibility: visible;
}

.team-section {
  display: inline-block;
  line-height: 1;
}

.team-section-title {
  cursor: pointer;
}

.team-section-item {
  display: inline;
}

.team-section-info {
  display: none;
  word-break: break-word;
}

.team-section-item.active .team-section-info {
  display: inline;
}

.team-section-item:hover,
.team-section-title:hover,
.team-section-title.active,
.team-section-info.active,
.team-section-info.active a {
  color: var(--color-black-60);
}

.team-section-title.has-comma::after,
.team-section-info.has-comma::after {
  content: ",";
  font: inherit;
  color: inherit;
}

.competitionsANDawards,
.lecturesANDpublications {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
@media screen and (max-width: 1024px) {
  .competitionsANDawards,
  .lecturesANDpublications {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}
@media screen and (max-width: 750px) {
  .competitionsANDawards,
  .lecturesANDpublications {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

@media screen and (max-width: 750px) {
  #competitionsANDawards,
  #lecturesANDpublications {
    margin: unset;
  }
}

#publications {
  margin-bottom: var(--space-ul);
}

@media screen and (max-width: 750px) {
  .lecturesANDpublications {
    margin-top: var(--space-xl);
  }
}

.grid-cols-about {
  display: grid;
  grid-template-columns: 0fr 1fr;
  gap: 0 var(--space-gap);
}
@media screen and (max-width: 750px) {
  .grid-cols-about {
    grid-template-columns: 1fr;
  }
}

.list-item {
  max-height: 1000dvh;
  transition: max-height 0.7s ease, opacity 0.7s ease-in-out;
  opacity: 1;
}

@media screen and (max-width: 750px) {
  #about .list-item-txt:not(.list-item.hidden) {
    margin-bottom: var(--space-sm);
  }
}

.list-item.hidden {
  opacity: 0;
  max-height: 0;
  user-select: none;
  pointer-events: none;
}

.list-item {
  overflow: clip;
  opacity: 1;
  transition: max-height 0.7s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.2s ease-in-out;
}

.list-item.hidden {
  pointer-events: none;
  user-select: none;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.more-button {
  display: inline-flex;
  gap: 0.2em;
  transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 750px) {
  .more-button {
    padding-top: var(--space-sm);
  }
}

.more-button:hover .arrow svg {
  fill: var(--color-black);
}

.more-button *:hover {
  color: var(--color-black);
}

@media screen and (max-width: 750px) {
  .table-numb {
    color: var(--color-black);
  }
}

@media screen and (max-width: 750px) {
  .competitionsANDawards *,
  .ehemalig-team *,
  .lecturesANDpublications * {
    font-size: var(--text-xxs);
  }
}

.publication-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(var(--space-ul) * 2);
  height: auto;
  z-index: 99998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  visibility: hidden;
  transform: translate(var(--space-sm), calc(-100% - var(--space-sm)));
}
.publication-preview.is-visible {
  opacity: 1;
  visibility: visible;
}
@media (hover: none), (max-width: 768px) {
  .publication-preview {
    display: none;
  }
}

#projects a {
  transition: color 0.3s ease-in-out;
}

#projects a:hover {
  color: var(--color-black);
}

@media screen and (max-width: 750px) {
  #project-sub {
    height: 100dvh;
    background-color: VAR(--color-black-5);
  }
}

@media screen and (max-width: 750px) {
  .projects {
    margin-top: var(--space-xl);
  }
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--space-xs);
  padding: var(--space-sm);
  row-gap: calc(var(--space-ul) * 1.5);
  margin-bottom: var(--space-uul);
}
@media screen and (max-width: 1280px) {
  .projects-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 750px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-ul);
    margin-bottom: var(--space-ul);
    column-gap: var(--space-sm);
  }
}

@media screen and (max-width: 750px) {
  .projectPage-overlay {
    display: grid;
    grid-template-rows: auto auto 1fr;
  }
  .projectPage-overlay p:last-of-type {
    margin-bottom: auto;
  }
  .projectPage-overlay p {
    margin: 0;
    font-size: var(--text-xs) !important;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}
.projects-grid img,
.projects-grid video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.projects-list {
  display: flex;
  flex-direction: column;
  margin-left: var(--space-sm);
  margin-right: var(--space-sm);
  margin-bottom: var(--space-uul);
}
@media screen and (max-width: 750px) {
  .projects-list {
    margin-bottom: var(--space-ul);
  }
}

.projects-heading {
  position: absolute;
  transform: translateY(-140%);
  color: var(--color-black);
  display: flex;
  flex-wrap: wrap;
  width: 30%;
}
@media screen and (max-width: 750px) {
  .projects-heading {
    position: relative;
    margin-bottom: unset;
    display: block;
    flex-wrap: unset;
    align-self: unset;
    width: unset;
    transform: unset;
  }
}

@media screen and (max-width: 750px) {
  #project-link {
    justify-self: flex-end;
  }
}

.projects-list-img {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-xs);
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  padding-bottom: 0;
  padding-top: 0;
  transition: max-height 0.8s ease-in-out, padding-bottom 0.6s ease-in-out, margin-bottom 0.6s ease-in-out, margin-top 0.8s ease-in-out;
}
@media screen and (max-width: 750px) {
  .projects-list-img {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-xl);
    margin-bottom: 0;
  }
}

.projects-list-img.open {
  pointer-events: auto;
  margin-bottom: var(--space-lg);
  margin-top: calc(var(--space-xs) / 2);
}
@media screen and (max-width: 750px) {
  .projects-list-img.open {
    padding-bottom: unset;
    margin-bottom: var(--space-ul);
    margin-top: var(--space-md);
  }
}

.projects-list-gallery {
  display: contents;
}
@media screen and (max-width: 750px) {
  .projects-list-gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--space-xs)) / 2);
    gap: var(--space-xs);
    grid-column: 1/-1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .projects-list-gallery::-webkit-scrollbar {
    display: none;
  }
}

.projects-list-gallery-item {
  min-width: 0;
}
@media screen and (max-width: 750px) {
  .projects-list-gallery-item {
    scroll-snap-align: start;
  }
}

.projects-list-img img,
.projects-list-img .video-wrapper {
  display: block;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.6s ease-in-out;
}

.projects-list-img.open img,
.projects-list-img.open .video-wrapper {
  transform: translateY(0);
  opacity: 1;
}

.projects-heading {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.projects-list-img.open .projects-heading {
  opacity: 1;
}

.project-placeholder {
  background-color: var(--color-black-5);
  width: 100%;
  height: 100%;
}

.project-link {
  position: relative;
  display: block;
}

.projectPage-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  background: var(--color-white);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  z-index: 2;
}

.project-link:hover .projectPage-overlay {
  opacity: 1;
  visibility: visible;
}

.projects-grid,
.projects-list {
  transition: opacity 0.7s cubic-bezier(0.77, 0, 0.175, 1), transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 0;
  transform: translateY(100px);
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}

.projects.view-grid .projects-grid {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  position: relative;
  pointer-events: auto;
}

.projects.view-list .projects-list {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  position: relative;
  pointer-events: auto;
}

#projects {
  position: relative;
}

.project-toggle.active {
  color: var(--color-black);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-xs);
  width: 100%;
}
@media screen and (max-width: 750px) {
  .project-toggle.active {
    grid-template-columns: 1fr;
  }
}

.project-hero,
.hero-item {
  position: absolute;
  z-index: -1;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--color-black-5);
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 750px) {
  .project-hero,
  .hero-item {
    display: none;
  }
}

.hero-nav {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 10;
  cursor: none;
  mix-blend-mode: difference;
}

.hero-nav-prev {
  right: 0;
}

.hero-nav-next {
  left: 0;
}

.hero-nav svg {
  position: fixed;
  pointer-events: none;
  width: 50px;
  height: 50px;
  min-height: 50px;
  min-width: 50px;
  opacity: 0;
}

.hero-nav:hover svg {
  opacity: 1;
}

.project-hero img,
.hero-item img,
.project-hero video,
.hero-item video {
  height: 100%;
  width: 100%;
  object-fit: contain;
  display: block;
}
@media screen and (max-width: 750px) {
  .project-hero img,
  .hero-item img,
  .project-hero video,
  .hero-item video {
    height: unset;
    width: 100%;
  }
}

.project-hero-mobile {
  display: none;
}
@media screen and (max-width: 750px) {
  .project-hero-mobile {
    display: flex;
    width: 100dvw;
    height: max(0px, 100dvh - var(--project-nav-height, 0px) - var(--project-footer-height, 0px));
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background-color: var(--color-black-5);
  }
}

.project-hero-mobile::-webkit-scrollbar {
  display: none;
}

.project-hero-mobile img,
.project-hero-mobile video,
.project-hero-mobile > div {
  flex: 0 0 100%;
  width: 100dvw;
  height: 100%;
  scroll-snap-align: start;
  object-fit: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}

.project-hero-mobile img,
.project-hero-mobile video {
  display: block;
}

.project-gallery {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.project-gallery.is-scrollable {
  cursor: none;
}
@media screen and (max-width: 750px) {
  .project-gallery {
    display: none;
  }
}

.project-gallery::-webkit-scrollbar {
  display: none;
}

.project-gallery-mobile {
  display: none;
}
@media screen and (max-width: 750px) {
  .project-gallery-mobile {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    white-space: unset;
    touch-action: auto;
    scrollbar-width: unset;
    -ms-overflow-style: unset;
    padding: var(--space-sm) var(--space-sm) calc(var(--space-ul) * 1.5) var(--space-sm);
    gap: var(--space-xs);
  }
}

.project-gallery::-webkit-scrollbar {
  display: none;
}

.hero-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.hero-item.active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

.hero-item.fade-out {
  opacity: 0;
  z-index: 1;
}

.project-thumb {
  height: 80px;
  width: auto;
  cursor: none;
  display: flex;
}

.project-thumb img,
.project-thumb video {
  height: 100%;
  width: auto;
  object-fit: cover;
}

.project-thumb.active {
  filter: grayscale(1);
}

.project-thumb-quote {
  width: 120px;
  height: 80px;
  position: relative;
}
@media screen and (max-width: 750px) {
  .project-thumb-quote {
    width: 60px;
    height: 80px;
  }
}

.quote-preview {
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
}

.quote-preview p {
  transform: scale(0.15);
  transform-origin: top left;
  width: 666.6666666667px;
  height: 444.4444444444px;
  padding: var(--space-sm);
  margin-top: 12%;
  white-space: normal;
  line-height: 1.2;
}
@media screen and (max-width: 750px) {
  .quote-preview p {
    transform: scale(0.14);
    transform-origin: top left;
    width: 333.3333333333px;
    height: 444.4444444444px;
    padding: var(--space-xs);
    margin-top: 12%;
    white-space: normal;
    line-height: 1.2;
  }
}

.project-ov-info {
  width: 100dvw;
  display: grid;
  grid-template-columns: 1fr 0.5fr 0.5fr 0.1fr;
  align-items: start;
  gap: var(--space-sm);
}
@media screen and (max-width: 1280px) {
  .project-ov-info {
    grid-template-columns: 1fr 0.5fr 0.1fr;
  }
}
@media screen and (max-width: 750px) {
  .project-ov-info {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding-top: var(--space-lg);
  }
}

.project-ov-group {
  display: contents;
}
@media screen and (max-width: 1280px) {
  .project-ov-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
}
@media screen and (max-width: 750px) {
  .project-ov-group {
    gap: var(--space-lg);
  }
}

.project-ov-text,
.project-ov-group {
  min-width: 0;
  min-height: 0;
  max-height: 50dvh;
  overflow-y: auto;
  scrollbar-width: none;
}
.project-ov-text::-webkit-scrollbar,
.project-ov-group::-webkit-scrollbar {
  display: none;
}
.project-ov-text.is-scrollable,
.project-ov-group.is-scrollable {
  --fade-top: 0px;
  --fade-bottom: 50px;
  cursor: none;
  mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
}
.project-ov-text.can-scroll-up,
.project-ov-group.can-scroll-up {
  --fade-top: 50px;
}
.project-ov-text.scroll-end,
.project-ov-group.scroll-end {
  --fade-bottom: 0px;
}
@media screen and (max-width: 750px) {
  .project-ov-text,
  .project-ov-group {
    max-height: none;
    overflow: visible;
  }
}

@media screen and (max-width: 1280px) {
  .project-ov-group > .project-ov-text {
    max-height: none;
    overflow: visible;
    flex-shrink: 0;
  }
}

.ns-resize-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
@media screen and (max-width: 750px) {
  .ns-resize-cursor {
    display: none;
  }
}

.ns-resize-cursor.is-visible {
  opacity: 1;
}

.ns-resize-cursor svg {
  width: 50px;
  height: 50px;
  display: block;
}

.project-ov-text.is-scrollable {
  cursor: none;
}

.project-ov-text::-webkit-scrollbar {
  display: none;
}

.projectImgTwo-Cont {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.projectImgTwo-Images {
  display: flex;
  height: 100%;
}

.projectImgTwo-Images img,
.projectImgTwo-Images video {
  width: 50% !important;
}

.projectImgThree-Cont {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.projectImgThree-Images {
  display: flex;
  height: 100%;
}

.projectImgThree-Images img,
.projectImgThree-Images video {
  width: 33.3333333333%;
}

.project-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(20px);
  background-color: rgba(242, 242, 242, 0.65);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 99;
  transform: translateY(100%);
}
@media screen and (max-width: 750px) {
  .project-overlay {
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

.project-overlay.open {
  transform: translateY(0);
}

@media screen and (max-width: 750px) {
  .project-overlay-btn {
    padding: var(--space-lg) var(--space-sm);
    background: transparent;
    transition: background 0.2s ease-in-out;
  }
}

@media screen and (max-width: 750px) {
  .project-overlay-btn.open {
    background: var(--color-black-5);
  }
}

.project-overlay-btn .close-text {
  display: none;
}

.project-overlay-btn.open .open-text {
  display: none;
}

.project-overlay-btn.open .close-text {
  display: inline;
}

.project-title {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.overlay-header-m {
  margin-top: calc(var(--space-lg) + 20px + var(--space-md));
}

.project-ov-gradient {
  display: none;
}
@media screen and (max-width: 750px) {
  .project-ov-gradient {
    display: block;
    position: absolute;
    bottom: 100%;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
}

@media screen and (max-width: 750px) {
  .project-ov-gradient.open {
    width: 100%;
    height: var(--space-ul);
    background: linear-gradient(to bottom, transparent 0%, var(--color-black-5) 100%);
    opacity: 1;
    pointer-events: none;
  }
}

.background-ov {
  background-color: var(--color-black-5);
}

.map-container {
  position: relative;
  height: 50dvh;
  background-color: var(--color-black-5);
}
@media screen and (max-width: 1280px) {
  .map-container {
    height: 30dvh;
  }
}
@media screen and (max-width: 750px) {
  .map-container {
    height: 35dvh;
  }
}

.map-placeholder {
  width: 100%;
  height: 100%;
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  text-align: left;
}

.map-placeholder .cookie-buttons {
  padding: 0;
}

.map-placeholder[hidden] {
  display: none;
}

.map-placeholder button {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: calc(var(--space-xs) / 2) var(--space-sm);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.contact-adress {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}
@media screen and (max-width: 750px) {
  .contact-adress {
    grid-template-columns: 1fr;
    gap: var(--space-ul);
    margin-bottom: var(--space-sm);
    margin-top: unset !important;
  }
}

@media screen and (max-width: 750px) {
  .contact-grid.grid-cols-2 {
    grid-template-columns: 1fr;
    margin-bottom: var(--space-ul) !important;
  }
}

.jobs {
  display: grid;
}

.jobs-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.8s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.3s ease;
}

.jobs.open .jobs-content {
  opacity: 1;
}

.jobs-toggle.active {
  color: var(--color-black);
}

#privacy strong {
  font-weight: normal;
  color: var(--color-black);
  padding-top: var(--space-sm);
}

#privacy p:has(strong):not(:first-of-type) {
  padding-top: var(--space-sm);
}

#privacy ul {
  padding-left: var(--space-sm);
  list-style-type: disc !important;
}
@media screen and (max-width: 750px) {
  #privacy ul {
    padding-left: var(--space-lg);
  }
}

@media screen and (max-width: 750px) {
  #privacy p,
  #privacy ul li,
  #privacy strong,
  #privacy *,
  #imprint p,
  #imprint ul li,
  #imprint strong,
  #imprint * {
    font-size: var(--text-xxs);
  }
}

#news {
  margin-top: var(--space-ul);
}
@media screen and (max-width: 750px) {
  #news {
    margin-bottom: var(--space-ul) !important;
    margin-top: var(--space-header);
  }
}

.news-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
}
@media screen and (max-width: 750px) {
  .news-columns {
    grid-template-columns: 1fr;
    padding-top: var(--space-lg);
  }
}

@media screen and (max-width: 750px) {
  .news-columns:first-child {
    padding-top: var(--space-sm);
  }
}

.news-container {
  position: relative;
  max-width: calc(var(--space-5xl) * 3.4);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 750px) {
  .news-container {
    max-width: unset;
    padding-bottom: var(--space-lg);
    gap: var(--space-md) !important;
  }
}

.news-img-info {
  margin-top: auto;
  padding-top: var(--space-lg);
}
@media screen and (max-width: 750px) {
  .news-img-info {
    padding-top: var(--space-sm);
  }
}

.news-img {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
}
@media screen and (max-width: 750px) {
  .news-img {
    display: none;
  }
}

.news-img.has-gallery {
  cursor: none;
}

.news-gallery-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
  mix-blend-mode: difference;
}

.news-gallery-cursor svg {
  width: 50px;
  height: 50px;
  display: block;
  mix-blend-mode: difference;
}

.news-img.has-gallery {
  cursor: none;
}

.news-img.has-gallery:hover .news-gallery-cursor {
  opacity: 1;
}

.news-img img,
.news-img video {
  width: auto;
  max-width: 90%;
  height: clamp(300px, 229.6296296296px + 18.5185185185vw, 600px);
  min-width: none;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s linear 0.5s;
}
@media screen and (max-width: 750px) {
  .news-img img,
  .news-img video {
    max-width: unset;
    height: auto;
    width: 100%;
  }
}

.news-img video {
  justify-self: end;
}

.news-img img.active,
.news-img video.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s;
}

.news-img img.fade-out,
.news-img video.fade-out {
  opacity: 0;
  visibility: visible;
  position: absolute;
}

.news-img-count {
  position: relative;
  padding-right: var(--space-xs);
  margin-bottom: -0.3em;
  color: var(--color-black-60);
}
@media screen and (max-width: 750px) {
  .news-img-count {
    padding-right: unset;
    margin-bottom: unset;
    padding-top: var(--space-sm);
  }
}

.current,
.mobile-current {
  color: var(--color-black-60);
}

.news-img img.active,
.news-img video.active {
  display: flex;
  background-color: var(--color-black-5);
}

.news-section:last-child {
  border-bottom: var(--outline-sm);
}

.news-section.last-visible {
  border-bottom: var(--outline-sm);
}

.news-img-mobile {
  display: none;
}
@media screen and (max-width: 750px) {
  .news-img-mobile {
    display: flex;
    position: relative;
    background-color: var(--color-black-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
}
.news-img-mobile::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 750px) {
  .news-img-mobile img,
  .news-img-mobile video {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    scroll-snap-align: start;
    object-fit: contain;
  }
}

.news-img-mobile .news-img-count {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
}

.news-video-wrapper-mobile {
  flex: 0 0 100%;
  display: flex;
  position: relative;
  width: 100%;
}

.cta-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-size: var(--text-xs);
  border-color: var(--color-black-60);
  border: solid 1px;
  display: inline-block;
  border-radius: 50px;
  padding: calc(var(--space-xs) / 2) calc(var(--space-sm) / 1.5);
  align-self: flex-start;
  color: var(--color-black-60);
  font-size: calc(var(--text-xs) / 1.15);
}
@media screen and (max-width: 750px) {
  .cta-button {
    font-size: var(--text-xs);
  }
}

.cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-black-10);
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: -1;
}

.cta-button:hover::before {
  transform: translateY(0);
}

.close-button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  min-width: 40px;
}
@media screen and (max-width: 750px) {
  .close-button {
    width: 20px;
    height: 20px;
    min-height: 20px;
    min-width: 20px;
  }
}

@media screen and (max-width: 750px) {
  .close-button svg path {
    stroke-width: 2 !important;
  }
}

.close-button-desktop {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}

.close-button-desktop[data-hidden] {
  opacity: 0;
  visibility: hidden;
  user-select: none;
  pointer-events: none;
}

.close-button-overlay {
  justify-self: flex-end;
}
@media screen and (max-width: 750px) {
  .close-button-overlay {
    display: none;
  }
}

.close-button-overlay svg path {
  stroke: var(--color-black) !important;
}

.cookie-close-button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  min-width: 40px;
  background: none;
  border: none;
}
@media screen and (max-width: 750px) {
  .cookie-close-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
    width: 20px;
    height: 20px;
    min-height: 20px;
    min-width: 20px;
  }
  .cookie-close-button svg {
    display: block;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
  }
}

.cookie-close-button svg path {
  stroke: var(--color-black);
}
@media screen and (max-width: 750px) {
  .cookie-close-button svg path {
    stroke-width: 2 !important;
  }
}

.cookie-buttons button {
  display: inline-flex;
  width: fit-content;
  border: solid 0.1em var(--color-black-30);
  color: var(--color-black-30);
  background-color: transparent;
  padding: calc(var(--space-xs) - 0.04em) calc(var(--space-xs) + 0.4em);
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 750px) {
  .cookie-buttons button {
    border: solid 0.1em var(--color-black-60);
    color: var(--color-black-60);
  }
}

.cookie-buttons button:active,
.cookie-buttons button:hover {
  border-color: var(--color-black);
  color: var(--color-black);
}

main {
  display: flex;
  flex-direction: column;
}

.article-subpage {
  margin-top: 2rem;
}
@media screen and (max-width: 1280px) {
  .article-subpage {
    margin-top: 2.7rem;
  }
}

article {
  line-height: 1.2;
}

.dropdown__label {
  cursor: pointer;
}

.dropdown.expanded .dropdown__content {
  visibility: visible;
}

.dropdown__content {
  overflow: hidden;
  height: 0;
  visibility: hidden;
  transition: height 0.3s ease, visibility 0.3s ease;
}

.collapsible {
  padding: 10px;
  overflow: hidden;
  transition: height 0.3s ease, visibility 0.3s ease;
}

.simple-slider {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.simple-slider .simple-slider__border {
  margin: 0 var(--space-md);
  border-top: 2px solid var(--color-primary);
}
.simple-slider .simple-slider__track {
  display: flex;
  flex: none;
  flex-flow: row nowrap;
  gap: 2px;
  overflow-x: auto; /* enable horizontal scrolling */
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none; /* Firefox */
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--space-md);
  scroll-padding-right: var(--space-md);
  scroll-behavior: smooth;
}
.simple-slider .simple-slider__slide {
  width: 34%;
  min-width: 280px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.simple-slider .simple-slider__padding-spaceholder {
  width: unset;
  min-width: calc(var(--space-md) - 2px);
}
.simple-slider .simple-slider__controls {
  display: flex;
  visibility: visible;
  opacity: 1;
  position: relative;
}
.simple-slider ul,
.simple-slider li,
.simple-slider p,
.simple-slider video {
  cursor: default;
}
@media screen and (max-width: 750px) {
  .simple-slider {
    overflow: visible;
  }
}

.card {
  background-color: beige;
  margin: 10px;
  padding: 30px;
}

.dropdown {
  padding: 10px;
}
.dropdown__label {
  font-weight: 800;
}

.splide__slide {
  display: flex;
  cursor: default;
  overflow: hidden;
}
.splide__slide-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  max-width: 80%;
}
.splide__slide-link {
  display: inline-flex;
  align-items: center;
  width: 100% !important;
  padding: 6px 14px;
  padding-top: 7px;
}
.splide__slide-link a {
  line-height: 1;
  color: var(--color-secondary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.splide__arrows {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 2px;
}
.splide__arrow {
  position: relative;
  top: unset;
  left: unset;
  right: unset;
  width: unset;
  height: unset;
  transform: unset;
  background: unset;
  opacity: unset;
  border-radius: unset;
}
.splide__arrow:hover:not(:disabled) {
  opacity: 1;
}
.splide__arrow:disabled {
  opacity: 0.5;
}

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