:root {
  --band-color: #cd1c39;
  --band-font-color: #fff;
  --text-color: #000;
  --header-max-width: 1440px;
  --main-max-width: 1220px;
  --student-background-color: hsl(209, 14%, 92%);
  --student-background-color-transparent: hsla(209, 14%, 92%, 70%);
  --list-background: rgba(210, 216, 221, 0.24);
  --list-separator-color: rgba(210, 216, 221, 0.44);
  --list-hover-color: #fff;
  --inactive-color: #aaa;
  --teacher-static-backgorund-color: #495056;
  --teacher-static-background-color-transparent: #495056aa;
  --teacher-background-color: linear-gradient(360deg, hsl(208, 10%, 45%) 0%, var(--teacher-static-backgorund-color) 100%) no-repeat;
  --heading-color: #000;
  --teacher-font-color: #fff;
  --teacher-heading-color: #fff;
  --page-background: hsl(207, 14%, 85%);
  --page-background-disabled: hsl(209, 14%, 62%);
  --page-number-background: var(--page-background);
  --search-color: #9a9a9a;
  --disabled-color: #919FAC;
  --no-license-color: #003366;
  --focus-color: #9ecaec;
  --background-color: var(--student-background-color);
  --static-background-color: var(--student-background-color);
  --static-background-color-transparent: var(--student-background-color-transparent);
  --font-color: var(--text-color);
  --side-menu-width: 4.6875rem;
  --details-padding: 1.75rem 1.5625rem;
  --band-nav-padding: 2rem;
}

@font-face {
  font-family: 'PoloWeb-Buch';
  src: url("../fonts/PoloWeb-Buch-b50783492b635f4dbd5fabc3242435e6.woff") format('woff'), url("../fonts/PoloWeb-Buch-3c92f20dcbb5cc36ca764827bc920610.ttf") format('truetype'), url('./fonts/PoloWeb-Buch.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: klt;
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/83d7bbaf49675f590cff90ced079a208-944112b958b01c47c023b37dadefd068.woff") format('woff');
  font-display: swap;
}

@font-face {
  font-family: klt;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/54895d2f1dff5120d7230bd076c94022-b50783492b635f4dbd5fabc3242435e6.woff") format('woff');
  font-display: swap;
}

@font-face {
  font-family: klt;
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/8d83ea70a34f9f0c9b9a5cd27a9361e6-a7dfae424efdc8b4419508661a508ba7.woff") format('woff');
  font-display: swap;
}

html {
  font-family: 'klt', Helvetica, sans-serif;
  scroll-padding: 5rem;
}

html,
body {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--background-color);
  color: var(--font-color);
  transition: background 0.2s;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

body:has(#modal[open]) {
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

@layer base {
  .page-wrapper {
    --main-padding-top: 3.3rem;
    display: grid;
    flex-grow: 1;
    width: 100%;
    grid-template-columns: 1fr minmax(auto, var(--main-max-width)) 1fr;
    column-gap: 2rem;
    grid-template-areas:
      "empty1 main sidemenu"
      "empty2 footer empty3";


  }

  .page-wrapper .main-container {
    grid-area: main;
    padding: var(--main-padding-top) var(--band-nav-padding) 2rem;
  }

  .page-wrapper .side-menu-wrapper {
    --side-menu-top: 1.5rem;
    --top: calc(var(--side-menu-top) + var(--main-padding-top));
    display: flex;
    padding-right: 1rem;
    grid-area: sidemenu;
    align-self: start;
    position: sticky;
    top: var(--side-menu-top);
    margin-top: var(--top);
  }

  .page-wrapper #main-footer {
    grid-area: footer;
  }
}

@media (max-width: 580px) {
  body {
    --side-menu-width: 3.5rem;
  }

  .page-wrapper {
    position: relative;
    grid-template-areas:
      "sidemenu sidemenu sidemenu"
      "empty1 main empty2"
      "empty3 footer empty4";
  }

  .main-container {
    padding: 0;
  }

  .side-menu-wrapper {
    justify-content: flex-end;
    margin-top: 0;
    padding-block: 1.5rem;
    top: 0;
    background-color: var(--static-background-color-transparent);
  }
}

h1 {
  letter-spacing: 1.15px;
  margin-bottom: 2rem;
  font-size: 2.25rem;
}

body:has(> #teacherIndicator[data-teacher="1"]) {
  --background-color: var(--teacher-background-color);
  --static-background-color: var(--teacher-static-backgorund-color);
  --static-background-color-transparent: var(--teacher-static-background-color-transparent);
  --font-color: var(--teacher-font-color);
}

accordion-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;


}

accordion-list accordion-content {
  display: flex;
  flex-direction: column;
}

accordion-list accordion-content .download-category {
  margin-left: auto;
  margin-top: 0.75rem;
}

accordion-list[data-download="0"] {
  .download-category {
    display: none;
  }
}

media-list {
  max-height: 600px;
  overflow: auto;
}

strong {
  font-weight: 700;
  letter-spacing: 0.35px;
}

.spinner {
  --size: 80px;
  color: var(--spinner-color, var(--band-color));
}

.spinner,
.spinner:after {
  box-sizing: border-box;
}

.spinner {
  display: inline-block;
  width: var(--size);
  height: var(--size);
}

.spinner.spinner--hidden {
  display: none;
}

.spinner.htmx-request {
  display: inline-block !important;
}

.spinner:after {
  content: " ";
  display: block;
  width: calc(64 / 80 * var(--size));
  height: calc(64 / 80 * var(--size));
  margin: calc(8 / 80 * var(--size));
  border-radius: 50%;
  border: calc(6.4 / 80 * var(--size)) solid currentColor;
  border-color: currentColor transparent currentColor transparent;
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

accordion-element:not(:defined) {
  background: white;
  color: black;
  width: 100%;
}

accordion-element:not(:defined) accordion-header {
  display: inline-block;
  padding: var(--details-padding);
  width: 100%;
}

accordion-element:not(:defined) accordion-content {
  display: none;
}

sl-select:not(:defined) sl-option,
sl-option:not(:defined) {
  display: none;
}

sl-tooltip:not(:defined) {
  display: contents;
}

accordion-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

accordion-element[open].htmx-request .spinner {
  display: inline-block !important;
}

accordion-element[open]:has(accordion-content:empty) .spinner {
  display: inline-block !important;
}

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