@layer reset {
  * {
    box-sizing: border-box;
    color: inherit;
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-chars: 7 3 3;
    -webkit-hyphenate-limit-lines: 2;
    hyphenate-limit-chars: 7 3 3;
    hyphenate-limit-lines: 2;
    margin: 0;
    padding: 0;
    font-family: Cassise Grotesque, sans-serif;
  }

  body {
    color: var(--front, inherit);
    padding: 1rem;
    padding-block-start: 0;
  }

  button {
    background: unset;
    border: unset;
  }

  button:not([class]):not([id]) {
    min-block-size: var(--min-target-size, 22px);
    min-inline-size: var(--min-target-size, 22px);
  }

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

  main p a:not(:is(:hover, :focus-visible, .footnote)) {
    text-decoration: underline;
  }

  a:has( > svg) {
    line-height: 1;
    display: grid;
  }

  main ul:not([class]), ol {
    list-style-position: inside;
  }

  :is(main ul:not([class]), ol) li {
    text-indent: -1.15em;
    max-inline-size: 50ch;
    margin-block-start: .5rem;
    padding-inline-start: 1.15em;
  }

  :is(main ul:not([class]), ol) li p {
    display: inline;
  }
}

@layer default {
  button[aria-expanded="false"] + * {
    display: none;
  }

  form {
    flex-direction: column;
    grid-area: form;
    align-items: center;
    gap: .5rem;
    inline-size: 100%;
    margin-block-start: 1rem;
    margin-inline: auto;
    display: flex;
  }

  @container settings (inline-size > 35ch) {
    form {
      flex-direction: row;
      align-items: center;
      inline-size: auto;
    }
  }

  form:not(.dreamform) input {
    border: 1px solid var(--front);
    background: none;
    border-radius: 1em;
    padding: .25em .75em;
    font-size: 1.25rem;
  }

  form button[type="submit"] {
    border: 1px solid var(--front);
    background: none;
    border-radius: 1em;
    padding: .25em .75em;
    font-size: 1.25rem;
  }

  svg {
    block-size: 2em;
    inline-size: 2em;
  }

  svg * {
    stroke-width: 12px;
  }

  svg[viewBox*="64"] * {
    stroke-width: 2px;
  }

  details {
    margin-block-start: 1rem;
  }

  details summary {
    text-wrap: balance;
  }

  details summary :is(h1, h2, h3, h4, h5, h6) {
    display: inline;
  }

  details summary :is(h1, h2, h3, h4, h5, h6) svg {
    block-size: 1em;
    inline-size: 1em;
    transform: translateY(12.5%);
  }

  .no-break {
    white-space: nowrap;
  }

  h1 {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
  }

  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    max-inline-size: 35ch;
  }

  :is(h1, h2, h3, h4, h5, h6):not(:first-child):not([class]) {
    margin-block-start: 2rem;
  }

  p {
    max-inline-size: 50ch;
    line-height: 1.35;
  }

  p:not(:is(:first-child, .weekday)) {
    margin-block-start: 1rem;
  }

  b, strong {
    font-weight: 700;
  }
}

@layer themes {
  :root:has(body.legal) {
    --font-size-scale: .9;
  }

  body {
    background-color: var(--back);
    color: var(--front);
  }

  @media screen and (width >= 920px) {
    body {
      grid-template-columns: calc(16ch + 1rem) minmax(0, 1fr);
      grid-template-areas: "aside header"
                           "aside main";
      display: grid;
    }
  }
}

@layer patterns, layouts;

@layer components {
  ul.funding-block {
    font-size: var(--text-font-size, 1rem);
    align-items: center;
    column-gap: 1.5rem;
    max-inline-size: 55ch;
    margin-block: 1rem;
    list-style: none;
    display: flex;
  }

  ul.funding-block[data-align="vertical"] {
    flex-direction: column;
    align-items: flex-start;
    row-gap: .75rem;
  }

  a.funding_logo {
    display: block;
  }

  .funding_logo > :is(img, svg) {
    --width: 0;
    --height: 0;
    --ideal-area: 50000;
    --area: calc(var(--width) * var(--height));
    --ratio: calc(var(--ideal-area) / var(--area));
    --guess01: calc(calc(var(--ratio)  + calc(var(--ratio) / var(--ratio))) / 2);
    --guess02: calc(calc(var(--guess01)  + calc(var(--ratio) / var(--guess01))) / 2);
    --guess03: calc(calc(var(--guess02)  + calc(var(--ratio) / var(--guess02))) / 2);
    --guess04: calc(calc(var(--guess03)  + calc(var(--ratio) / var(--guess03))) / 2);
    --guess05: calc(calc(var(--guess04)  + calc(var(--ratio) / var(--guess04))) / 2);
    --guess06: calc(calc(var(--guess05)  + calc(var(--ratio) / var(--guess05))) / 2);
    --guess07: calc(calc(var(--guess06)  + calc(var(--ratio) / var(--guess06))) / 2);
    --guess08: calc(calc(var(--guess07)  + calc(var(--ratio) / var(--guess07))) / 2);
    block-size: auto;
    inline-size: calc(var(--width) * var(--guess08) / 2 * 1px);
    display: block;
  }

  a.funding_logo[target="_blank"]:is(:hover, :focus-visible):after {
    content: none;
  }

  :is(button, a).footnote {
    z-index: 1;
    --size: 1em;
  }

  :is(button, a).footnote sup {
    color: var(--back);
    block-size: 1em;
    inline-size: 1em;
    margin-inline: .05em;
    padding: .02em;
    font-weight: 550;
    line-height: 1;
    text-decoration: none;
    display: inline-block;
    position: relative;
    transform: translateY(15%);
  }

  :is(button, a).footnote sup:before {
    content: "";
    background-color: var(--front);
    z-index: -1;
    border-radius: 50%;
    position: absolute;
    inset: 0;
    transform: translateY(-20%);
  }
}

@layer utilities;

@font-face {
  font-family: Cassise Grotesque;
  src: url("/assets/fonts/CassiseGrotesque-Thin.woff2") format("woff2");
  font-weight: 100;
}

@font-face {
  font-family: Cassise Grotesque;
  src: url("/assets/fonts/CassiseGrotesque-Light.woff2") format("woff2");
  font-weight: 300;
}

@font-face {
  font-family: Cassise Grotesque;
  src: url("/assets/fonts/CassiseGrotesque-Regular.woff2") format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: Cassise Grotesque;
  src: url("/assets/fonts/CassiseGrotesque-Medium.woff2") format("woff2");
  font-weight: 500;
}

@font-face {
  font-family: Cassise Grotesque;
  src: url("/assets/fonts/CassiseGrotesque-Bold.woff2") format("woff2");
  font-weight: 700;
}

@font-face {
  font-family: Cassise Grotesque;
  src: url("/assets/fonts/CassiseGrotesque-ExtraBold.woff2") format("woff2");
  font-weight: 800;
}

@font-face {
  font-family: Cassise Grotesque;
  src: url("/assets/fonts/CassiseGrotesque-Black.woff2") format("woff2");
  font-weight: 900;
}

:root {
  --logo-font-size: 3.2rem;
  --h1-font-size: calc(2.4rem * var(--font-size-scale, 1));
  --h2-font-size: calc(1.8rem * var(--font-size-scale, 1));
  --h3-font-size: calc(1.4rem * var(--font-size-scale, 1));
  --h4-font-size: calc(1.2rem * var(--font-size-scale, 1));
  --text-font-size: calc(1rem * var(--font-size-scale, 1));
  --small-font-size: .75rem;
  --margin-block-start: calc(1rem * var(--font-size-scale, 1));
  --reg: 400;
  --bld: 700;
  --header: calc(var(--logo-font-size) * 1.3);
  --min-size: 44px;
  --gap: 4vw;
  --grid-padding: calc(.5 * var(--gap));
  --foreground: #a0a5a5;
  --background: #141428;
  --hover: hsl(from var(--front) h s calc(l + 15));
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light dark;
  scroll-padding-block-start: calc((15.5 + var(--filter, 0)  + var(--search, 0)) * 1rem);
  font-size: 1.15em;
  overflow: scroll;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
  }
}

html:has(body.is-scrolled) {
  scroll-padding-block-start: calc((12.25 + var(--filter, 0)  + var(--search, 0)) * 1rem);
}

@media screen and (width >= 600px) {
  :root {
    scroll-padding-block-start: calc((19.25 + var(--filter, 0)  + var(--search, 0)) * 1rem);
    font-size: 1.35em;
  }

  html:has(body.is-scrolled) {
    scroll-padding-block-start: calc((15.75 + var(--filter, 0)  + var(--search, 0)) * 1rem);
  }

  :root:has(button.filter[aria-expanded="true"]) {
    --filter: 11;
  }

  :root:has(button.search[aria-expanded="true"]) {
    --search: 11;
  }
}

@media screen and (width >= 920px) {
  :root {
    scroll-padding-block-start: calc((10.25 + var(--filter, 0)  + var(--search, 0)) * 1rem);
  }

  html:has(body.is-scrolled) {
    scroll-padding-block-start: calc((10.25 + var(--filter, 0)  + var(--search, 0)) * 1rem);
  }

  :root:has(button.filter[aria-expanded="true"]) {
    --filter: 11;
  }

  :root:has(button.search[aria-expanded="true"]) {
    --search: 11;
  }
}

@layer default.colors {
  :root {
    --front: #141428;
    --back: #a0a5a5;
    --hover: hsl(from var(--front) h s calc(l + 15));
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --back: #141428;
      --front: #a0a5a5;
      --hover: hsl(from var(--front) h s calc(l + 15));
    }
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

fieldset.color-theme-toggle {
  grid-area: color-toggle;
  place-self: flex-start flex-end;
  block-size: 1.75rem;
  min-inline-size: 1.75rem;
  max-inline-size: 11ch;
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  container: color-toggle / inline-size;
}

@media screen and (width <= 599px) {
  fieldset.color-theme-toggle {
    inset-block-start: 3.25rem;
  }

  fieldset.color-theme-toggle svg {
    block-size: 1.75rem;
    inline-size: 1.75rem;
  }
}

@media screen and (width >= 920px) {
  fieldset.color-theme-toggle {
    inset: unset;
    inline-size: 11ch;
    position: relative;
  }
}

@container color-toggle (inline-size < 10ch) {
  fieldset.color-theme-toggle {
    block-size: 1.75rem;
    inline-size: 1.75rem;
  }

  fieldset.color-theme-toggle label {
    min-block-size: 1.75rem;
    min-inline-size: 1.75rem;
  }

  fieldset.color-theme-toggle label span {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }
}

body > main > header {
  border-block-end: 1px solid var(--front);
  background-color: var(--back);
  z-index: 666;
  padding-block-start: .5rem;
  position: sticky;
  inset-block-start: 18.1ch;
}

body > main > header:has(button[aria-expanded="true"]) {
  border-block-end: none;
}

body > main > header:has(button[aria-expanded="true"]) nav {
  display: none;
}

@media screen and (width >= 600px) {
  body > main > header:has(button[aria-expanded="true"]) nav {
    display: flex;
  }
}

body:has( > header.expanded) > main > header {
  background-color: rgba(0, 0, 0, 0);
}

@media screen and (width >= 600px) {
  body > main > header:has(button[aria-expanded="true"]) {
    border-block-end: 1px solid var(--front);
  }
}

body > header.expanded + main header {
  border-block-end: none;
}

body > header.expanded + main header nav {
  display: none;
}

@media screen and (width <= 919px) {
  body.is-scrolled > header:not(:has(button#btn-nav-main[aria-expanded="true"])) div#logo span:nth-child(n+3) {
    display: none;
  }

  body.is-scrolled > header:has( + main > header aside.settings button[aria-expanded="true"]) div#logo span:nth-child(n+3) {
    display: block !important;
  }

  body.is-scrolled > main > header:not(:has(button[aria-expanded="true"])) {
    inset-block-start: 8.9ch;
  }
}

body > :is(header, footer) ul {
  list-style-type: none;
}

body > main {
  padding-block-end: 5rem;
  container: main / inline-size;
}

body > main > section:first-child {
  margin-block-start: 4.25rem;
}

body > footer {
  border-block-start: 1px solid var(--front);
  margin-block-start: 5rem;
  padding-block-start: 1rem;
  font-size: .85rem;
}

@media screen and (width >= 920px) {
  body > main {
    flex-direction: column;
    grid-area: main;
    grid-template-columns: 12ch minmax(0, 1fr);
    grid-template-areas: "header"
                         "events";
    gap: 1rem;
    display: flex;
  }

  body > main > header {
    background: var(--back);
    z-index: 666;
    flex-direction: column;
    gap: 1rem;
    padding-block-start: 0;
    display: flex;
    position: sticky;
    inset-block-start: 4rem;
  }

  body > main > header > nav {
    gap: 1rem;
    inline-size: 100%;
    padding-block-end: 0;
    display: flex;
  }

  body > footer {
    border-block-start: none;
    position: fixed;
    inset: auto;
    inset-block-end: 1rem;
    inset-inline-start: 1rem;
  }

  @container main-header (inline-size < 60ch) {
    fieldset.color-theme-toggle {
      inline-size: 100%;
      position: fixed;
      inset: auto;
      inset-block-end: 6.5rem;
      inset-inline-start: 1rem;
    }
  }
}

@media screen and (width >= 600px) {
  @container main-header (inline-size > 35ch) {
    body > header nav button#btn-nav-main {
      display: none;
    }

    body > header nav ul {
      background: var(--back);
      gap: 1.5rem;
      padding-block-end: 1rem;
      display: block;
    }

    body > header nav ul li {
      -webkit-hyphens: none;
      hyphens: none;
      white-space: nowrap;
    }
  }
}

:root {
  --focus-outline-color: currentColor;
  --focus-outline-offset: .1rem;
  --focus-outline-style: solid;
  --focus-outline-width: .1rem;
}

:focus-visible {
  outline-color: var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  outline-style: var(--focus-outline-style);
  outline-width: var(--focus-outline-width);
  text-decoration: none;
  display: inline-block;
}

.visually-hidden:not(:focus):not(:active):not(.mobile) {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

@media screen and (width >= 600px) {
  .visually-hidden:not(:focus):not(:active).mobile {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }
}

body > header {
  background-color: var(--back);
  z-index: 666;
  border-block-end: 1px solid var(--front);
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 1fr);
  grid-template-areas: "logo nav color-toggle";
  padding-block: 1rem;
  position: sticky;
  inset-block-start: 0;
  container: main-header / inline-size;
}

@media screen and (width >= 480px) {
  body > header {
    border-block-end: none;
  }
}

body > header nav {
  flex-direction: column;
  grid-area: nav;
  justify-content: space-between;
  font-size: 1.75rem;
  display: flex;
}

body > header nav a {
  font-size: 1.5rem;
  line-height: 1;
}

body > header nav a[aria-current] {
  font-size: 2rem;
  font-weight: 800;
}

@media screen and (width <= 599px) {
  body:has(button:is(.filter, .search, #btn-nav-main)[aria-expanded="true"]) > header {
    z-index: 666;
    background-color: var(--back);
    flex-direction: column;
    justify-content: space-between;
    block-size: 100lvh;
    inline-size: 100lvw;
    padding: 1rem;
    padding-block-end: 12ch;
    display: flex;
    position: fixed;
    inset: 0;
  }

  body:has(button:is(.filter, .search, #btn-nav-main)[aria-expanded="true"]) > header nav {
    margin-block: auto;
  }

  body:has(button:is(.search, #btn-nav-main)[aria-expanded="true"]) > footer {
    z-index: 999;
    border-block-start: none;
    position: fixed;
    inset: auto;
    inset-block-end: 1rem;
  }
}

button#btn-nav-main {
  position: fixed;
  inset: auto;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

button#btn-nav-main svg {
  block-size: 1.75rem;
  inline-size: 1.75rem;
}

button#btn-nav-main[aria-expanded="false"] svg:last-of-type, button#btn-nav-main[aria-expanded="true"] svg:first-of-type {
  display: none;
}

@media screen and (width >= 480px) {
  body > header {
    display: grid;
  }
}

@media screen and (width >= 920px) {
  body {
    padding-block-start: 1rem;
  }

  body > header {
    z-index: 666;
    grid-area: header;
    block-size: 2rem;
    padding-block-start: 0;
    position: sticky;
    inset-block-start: 1rem;
    container: main-header / inline-size;
  }

  body > header a#home {
    position: fixed;
    inset: 1rem auto auto 1rem;
  }

  body > header nav {
    inline-size: 100%;
  }

  body > header:after {
    content: "";
    background-color: var(--back);
    z-index: -1;
    position: absolute;
    inset: 0;
    inset-block-start: -2rem;
  }

  body > header nav {
    grid-column: logo / color-toggle;
  }

  body > header nav ul {
    gap: 1.5rem;
    padding-block-end: 1rem;
    padding-inline-end: 12.5ch;
    display: flex;
  }
}

ul.social {
  margin-block-end: 1rem;
}

ul.social a {
  align-items: center;
  gap: .5rem;
  display: flex;
}

ul.social svg {
  block-size: 1.5em;
  inline-size: 1.5em;
}

main > header > nav {
  grid-template-columns: calc(8ch + 1rem) minmax(0, 1fr);
  grid-template-areas: "year months";
  padding-block-end: .5rem;
  display: grid;
  container: months / inline-size;
}

ul.months {
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: .25rem;
  inline-size: 100%;
  list-style-type: none;
  display: flex;
  position: sticky;
  inset-block-start: 1rem;
}

ul.months li {
  flex-basis: 15%;
}

ul.months li a {
  white-space: none;
  font-feature-settings: "tnum" 1;
}

ul.months li a span {
  display: none;
}

ul.months li a:focus span.short {
  display: inline-block;
}

ul.months li a[aria-disabled="true"] {
  color: hsl(from var(--front) h s calc(l - 30));
}

ul.months li a[aria-current] {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

ul.months li a[aria-current] span {
  display: none;
}

ul.months li a[aria-current] span.short {
  display: inline-block;
}

ul.months li a[aria-current] span.year {
  font-weight: 400;
}

ul.months li a:not(:is([aria-current], :hover, :focus-visible)) span.year {
  display: none;
}

@container months (inline-size > 38.5ch) {
  ul.months li:has(a[aria-current]):first-child {
    transform: none;
  }

  ul.months li span.one-digit {
    display: inline-block;
  }
}

@container months (inline-size > 48ch) {
  ul.months {
    flex-wrap: nowrap;
  }

  ul.months li {
    flex: 0 auto;
  }

  ul.months li a[aria-current] {
    font-size: 1.75rem;
  }
}

@container months (inline-size > 60ch) {
  ul.months {
    flex-wrap: nowrap;
  }

  ul.months li a[aria-current] span.short {
    display: none;
  }

  ul.months li a[aria-current] span.full {
    display: inline-block;
  }
}

@container months (inline-size > 65ch) {
  ul.months li a[aria-current] {
    font-size: 1.75rem;
  }

  ul.months li:has(a[aria-current]) {
    transform: none;
  }

  ul.months li a span:is(.one-digit, .two-digits) {
    display: none;
  }

  ul.months li a span.short {
    display: inline-block;
  }

  ul.months li a[aria-current] span.short {
    display: none;
  }
}

@container months (inline-size > 90ch) {
  ul.months li a span.short {
    display: none;
  }

  ul.months span.full {
    display: inline-block;
  }
}

a#home {
  grid-area: logo;
  inline-size: fit-content;
  display: block;
}

a#home:is(:hover, :focus-visible) {
  text-decoration: none;
}

a.skip-link {
  inline-size: 16ch;
  position: fixed;
  inset: calc(16ch + 1rem) auto auto 1rem;
}

div#logo {
  text-align: justify;
  text-align-last: justify;
  flex-direction: column;
  align-content: stretch;
  align-items: flex-start;
  inline-size: 9ch;
  font-size: 1.75rem;
  line-height: 1.1;
  display: flex;
}

div#logo span {
  letter-spacing: .02em;
  white-space: nowrap;
  inline-size: 100%;
  display: block;
  position: relative;
}

div#logo span:is([data-logo-part="aktions"], [data-logo-part="kalender"]) {
  text-transform: uppercase;
  letter-spacing: .067em;
  text-align: justify;
  white-space: wrap;
  font-weight: 900;
}

div#logo span[data-logo-part="aktions"]:after {
  content: "__" / "";
  letter-spacing: -.1em;
}

div#logo span[data-logo-part="me-cfs"] {
  text-align: end;
  text-align-last: end;
  align-self: flex-end;
}

div#logo span[data-logo-part="me-cfs"]:before {
  content: "____" / "";
  letter-spacing: -.02em;
}

div#logo span[data-logo-part="post-vac"]:after {
  content: "__" / "";
  letter-spacing: -.02em;
}

aside.settings {
  z-index: 667;
  border-block-start: none;
  min-block-size: 1.75rem;
  min-inline-size: 1.75rem;
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-end: 3.5rem;
}

button.icon {
  grid-template-areas: "icon text"
                       "icon text";
  column-gap: .25rem;
  display: grid;
}

@media screen and (width <= 599px) {
  button.icon:not(:first-of-type) {
    margin-block-start: .5rem;
  }
}

button.icon svg {
  grid-area: span 2 / icon;
  block-size: 1.75rem;
  inline-size: 1.75rem;
}

button.icon span:only-of-type {
  align-self: center;
}

button.icon span {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

a.remove-filter-all {
  border: 1px solid var(--front);
  background-color: rgba(0, 0, 0, 0);
  border-radius: 1rem;
  align-items: center;
  gap: .5rem;
  inline-size: fit-content;
  margin-block: 1rem;
  margin-inline: auto;
  padding: .25em;
  display: flex;
}

a.remove-filter-all svg {
  block-size: 1.5rem;
  inline-size: 1.5rem;
}

@media screen and (width >= 600px) {
  aside.settings {
    border-block-start: 1px solid var(--front);
    grid-area: filter;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "view view filter search"
                         "location online types type"
                         "form form form form";
    justify-content: space-between;
    column-gap: 1rem;
    min-block-size: auto;
    min-inline-size: auto;
    padding-block: .75rem;
    display: grid;
    position: relative;
    inset-block-start: auto;
    inset-inline-end: auto;
    container: settings / inline-size;
  }

  aside.settings:has(button.filter[aria-expanded="true"]) {
    padding-block-end: 1rem;
  }

  aside.settings a.remove-filter-all {
    inline-size: fit-content;
    margin-block: 0;
    position: absolute;
    inset: auto;
    inset-inline-end: 0;
  }

  button.icon span {
    text-align: start;
    clip: initial;
    clip-path: initial;
    height: initial;
    overflow: initial;
    position: initial;
    white-space: initial;
    width: initial;
    grid-area: text;
    align-self: flex-start;
    font-size: .75rem;
    display: inline-block;
  }

  button.icon span:not(:first-of-type) {
    grid-row: 2;
  }
}

button[aria-pressed="false"] svg:not(:first-of-type), button[aria-pressed="true"] svg:first-of-type {
  display: none;
}

button[aria-pressed="true"] svg:not(:first-of-type) {
  display: true;
}

button[aria-pressed="false"] span:first-of-type, button[aria-pressed="true"] span:not(:first-of-type) {
  font-weight: 700;
}

fieldset.event-view-toggle {
  grid-area: view;
  display: none;
}

@media screen and (width >= 600px) {
  fieldset.event-view-toggle {
    display: block;
  }
}

button:is(.filter, .search) {
  inline-size: fit-content;
}

button.filter {
  grid-area: view;
  display: flex;
}

button.filter span {
  font-size: 1rem;
}

button:is(.filter, .search)[aria-expanded="true"] {
  font-weight: 800;
  position: relative;
}

button:is(.filter, .search)[aria-expanded="true"] span {
  color: currentColor;
}

button:is(.filter, .search)[aria-expanded="true"] svg > :not(rect) {
  stroke: currentColor;
}

button:is(.filter, .search)[aria-expanded="true"] + :is(div.event_filters, form.event_search) {
  z-index: -1;
  border-block-start: initial;
  margin-block: initial;
  margin-block-start: 11.5rem;
  padding: 1rem;
  position: fixed;
  inset: 0;
  overflow: hidden scroll;
}

@media screen and (width >= 600px) {
  button:is(.filter, .search)[aria-expanded="true"] + :is(div.event_filters, form.event_search) {
    border-block-start: 1px solid var(--front);
    position: initial;
    inset: initial;
    margin-block: .75rem 0;
    padding-block: .75rem 0;
    padding-inline-start: 0;
    display: grid;
  }
}

button:is(.filter, .search)[aria-expanded="true"] + form.event_search {
  justify-content: center;
  margin-block-end: 6rem;
  display: flex;
}

@media screen and (width <= 599px) {
  button:is(.filter, .search)[aria-expanded="true"] + form.event_search input[type="search"] {
    inline-size: calc(100% - 1rem);
  }
}

button.filter svg.filters-applied {
  display: none;
}

button.filter:has( + div.event_filters .remove-filter-all) svg {
  display: none;
}

button.filter:has( + div.event_filters .remove-filter-all) svg.filters-applied {
  display: block;
}

@media screen and (width >= 600px) {
  div.event_filters {
    block-size: 10rem;
  }

  div.event_filters:is(:hover, :focus-within) {
    block-size: auto;
  }

  button:is(.filter, .search)[aria-expanded="true"] {
    color: var(--back);
  }

  button:is(.filter, .search)[aria-expanded="true"]:after {
    content: "";
    background-color: var(--front);
    border-inline-start: 1px solid var(--front);
    border-inline: 1px solid var(--front);
    z-index: -1;
    position: absolute;
    inset: -.75rem;
  }

  button.filter {
    grid-area: filter;
  }

  button.search[aria-expanded="true"] + form.event_search {
    justify-content: center;
    inline-size: 100%;
    margin-block-end: 0;
    padding-block-end: 0;
    display: flex;
  }
}

div.event_filters {
  grid-template-areas: "location online types types";
  grid-template-columns: inherit;
  gap: inherit;
  grid-column: span 4;
}

div.event_filters > div {
  grid-template-rows: subgrid;
  grid-row: span 2 / span 2;
  row-gap: .5rem;
  display: grid;
}

div.event_filters > div.location {
  grid-template-areas: "location online"
                       "cities cities";
}

div.event_filters > div.location h3 {
  grid-area: location;
}

div.event_filters > div.location h3.filter_online {
  grid-area: online;
}

div.event_filters > div.location div:has(ul.event_locations) {
  grid-area: cities;
}

@media screen and (width >= 600px) {
  div.event_filters > div :not(h3) {
    font-size: .75rem;
  }
}

div.event_filters > div h3 {
  font-weight: 400;
}

@media screen and (width >= 600px) {
  div.event_filters > div h3 {
    align-self: flex-end;
  }
}

div.event_filters > div h3 button.remove-filter {
  vertical-align: middle;
  block-size: 1.2rem;
  inline-size: 1.2rem;
  display: none;
  position: relative;
}

div.event_filters > div h3 button.remove-filter svg {
  block-size: 100%;
  inline-size: 100%;
  position: absolute;
  inset: 0;
}

div.event_filters > div:has(button[aria-pressed="true"]) h3 {
  font-weight: 800;
}

div.event_filters > div:has(button[aria-pressed="true"]) h3:not(.filter_online) button.remove-filter {
  display: inline-block;
}

div.event_filters > div button {
  padding: 2px 8px;
  font-size: 1em;
}

div.event_filters > div button:is(:hover, :focus-visible, [aria-pressed="true"]) {
  background: var(--front);
  color: var(--back);
}

div.event_filters > div button[aria-pressed="true"]:after {
  content: url("../svg/x.svg");
  block-size: 1em;
  inline-size: 1em;
  margin-inline-start: .25em;
  display: inline-block;
  transform: translateY(10%);
}

div.event_filters > div ul {
  flex-wrap: wrap;
  align-content: flex-start;
  list-style-type: none;
  display: flex;
}

div.event_filters > div ul.event_locations {
  row-gap: .25rem;
}

div.event_filters > div ul.event_locations li:not(:last-of-type):after {
  content: "/";
}

div.event_filters > div ul.event_locations li:has(button.load-more) {
  order: 1;
}

div.event_filters > div ul.event_locations li:has(button[aria-pressed="true"]) {
  order: -1;
}

div.event_filters > div ul.event_locations button:is(:hover, :focus-visible, [aria-pressed="true"]) {
  margin-inline: .25rem;
}

div.event_filters > div ul.event_types {
  gap: .5rem;
}

div.event_filters > div ul.event_types li:has(button[aria-pressed="true"]) {
  order: -1;
}

div.event_filters > div ul.event_types button {
  border: 1px solid var(--front);
}

button.search {
  grid-area: search;
  justify-self: flex-end;
  display: flex;
}

button.search span {
  font-size: 1rem;
}

div.event_filters div.location {
  grid-area: span 2 / location / span 2 / online;
}

div.event_filters div.types {
  grid-area: span 2 / types / span 2;
}

@media screen and (width <= 599px) {
  div.event_filters div.types {
    margin-block-start: 2rem;
  }
}

div.events {
  grid-area: events;
  margin-block-end: 10rem;
  container: events / inline-size;
}

div.events article.event {
  display: grid;
}

div.events-nan {
  margin-block-start: 1rem;
  font-size: 1.75rem;
}

div.events-nan svg {
  vertical-align: text-bottom;
}

div.events article {
  text-wrap: balance;
  border-block-start: 1px solid var(--front, white);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "date time"
                       "title title"
                       "location location";
  row-gap: 1rem;
  padding-block: 1rem;
  position: relative;
}

div.events article:is(:hover, :focus-within) {
  --front: var(--hover);
  color: var(--front);
}

div.events section:first-of-type article:first-of-type {
  border-block-start: none;
}

@container events (inline-size > 42.5ch) {
  div.events[data-view="list"] article {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "date time title title"
                         "organizer organizer title title"
                         "location location description description";
    min-block-size: 15ch;
  }

  div.events[data-view="list"] article :is(.time, .location) {
    padding-inline-end: 1rem;
  }
}

article.event header {
  grid-area: title;
}

article.event h3 {
  font-size: 1.5rem;
  line-height: 1.125;
}

article.event h3 a {
  position: static;
}

article.event h3 a:after {
  content: "";
  z-index: 0;
  position: absolute;
  inset: 0;
}

article.event ul.event_types {
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-start: .75rem;
  display: flex;
}

article.event ul.event_types .event_type {
  border: 1px solid var(--front);
  pointer-events: none;
  padding: 3px 6px;
  font-size: .85rem;
  display: inline-block;
  position: relative;
}

article.event ul.event_types .event_type a {
  z-index: 1;
}

article.event ul.event_types .event_type a.event_type:is(:hover, :focus-visible) {
  background-color: var(--front);
  color: var(--back);
  text-decoration: none;
}

article.event .date {
  grid-area: date;
  font-size: 2.35rem;
  line-height: .9;
}

article.event .date time {
  font-weight: 700;
}

article.event .date time :is(.month, .year) {
  font-weight: 400;
}

article.event .date .weekday {
  font-size: .75rem;
  line-height: 1;
}

article.event .time {
  text-align: end;
  grid-area: time;
  font-size: 1.5rem;
  line-height: 1;
}

body.event article.event .time {
  text-align: start;
}

@media screen and (width >= 600px) {
  div.events[data-view="list"] article {
    padding-inline: 0;
  }

  div.events[data-view="list"] article .time {
    text-align: start;
  }

  div.events[data-view="grid"] section {
    flex-wrap: wrap;
    gap: 2.5vw;
    padding-block-start: 2.5vw;
    display: flex;
  }

  div.events[data-view="grid"] section:not(:first-of-type) {
    padding-block-start: 2.5vw;
  }

  div.events[data-view="grid"] section:first-of-type article:first-of-type {
    border-block-start: 1px solid var(--front);
  }

  div.events[data-view="grid"] article {
    border: 1px solid var(--front);
    aspect-ratio: .8;
    block-size: 125cqi;
    inline-size: 100cqi;
    padding: 1rem;
    overflow-y: scroll;
  }

  @container events (inline-size > 23.5ch) {
    div.events[data-view="grid"] article {
      block-size: 34.375ch;
      inline-size: 27.5ch;
    }
  }
}

article.event .location {
  text-wrap: balance;
  grid-area: location;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "location_on-site location_online"
                       "location_text location_text";
  align-self: flex-end;
  font-size: .85rem;
  display: grid;
}

article.event .location .location_on-site {
  pointer-events: none;
  grid-column: location_on-site / location_online;
  position: relative;
}

article.event .location .location_on-site:has( ~ .location_online) {
  grid-column-end: location_on-site;
}

article.event .location .location_on-site a {
  font-size: 1.25rem;
}

article.event .location .location_on-site ~ .location_online {
  grid-column-start: location_online;
}

article.event .location .location_online {
  grid-area: location_online / location_on-site / location_online / location_online;
}

article.event .location .location_online svg {
  transform: scale(1.2);
}

article.event .location .location_text {
  grid-area: location_text;
  max-inline-size: 45ch;
  font-size: .85rem;
}

article.event .location .location_text a {
  position: relative;
}

body:not(.event) article:not(.full) :is(main, aside, div.flyer) {
  display: none;
}

body.event > main article {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "date time"
                       "title title"
                       "location location"
                       "image image"
                       "main main"
                       "aside aside";
  gap: 2.5vw;
  margin-block-start: 2rem;
  display: grid;
  container: event / inline-size;
}

body.event > main article header {
  grid-area: title;
}

body.event > main article div.flyer {
  grid-area: image;
  place-items: center;
  display: grid;
  container: flyer / inline-size;
}

body.event > main article div.flyer:has([data-privacy-status="off"]) {
  place-items: center;
  display: grid;
}

body.event > main article div.flyer:has(img) {
  border: none;
}

body.event > main article div.flyer div:has(img) {
  inline-size: 100cqw;
  position: relative;
}

body.event > main article div.flyer div:has(img):after {
  content: "";
  background-color: var(--back);
  mix-blend-mode: color;
  position: absolute;
  inset: 0;
}

body.event > main article div.flyer div:has(img) img {
  filter: brightness(.75) grayscale();
}

body.event > main article div.flyer img {
  object-fit: contain;
  block-size: 100%;
  inline-size: 100%;
}

body.event > main article div.flyer [data-privacy-status="on"] > .privacy-gate-footer {
  z-index: 666;
  inset-block-end: 0;
  inset-inline-end: 0;
}

body.event > main article main {
  grid-area: main;
}

body.event > main article main p {
  max-inline-size: 50ch;
  line-height: 1.35;
}

body.event > main article main p:not(:first-child) {
  margin-block-start: 1rem;
}

body.event > main article aside {
  text-wrap: balance;
  grid-area: aside;
  font-size: .85rem;
}

body.event > main article aside a:has( > svg) {
  display: initial;
}

body.event > main article aside > a {
  margin-block-start: 1rem;
  display: inline-block;
}

@container main (inline-size <= 50ch) {
  article div.flyer {
    margin-block: 1rem;
  }
}

@container main (inline-size > 50ch) {
  body.event > main article {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "space space image image"
                         "date time image image"
                         "title title image image"
                         "location location image image"
                         "main main main aside";
  }

  body.event > main article div.flyer {
    block-size: 35cqw;
  }

  body.event > main article div.flyer:has(img) {
    block-size: 50cqw;
  }

  body.event > main article div.flyer div:has(img) {
    block-size: 100cqw;
  }
}

dl dt {
  font-weight: 800;
}

dl dt:not(:first-child) {
  margin-block-start: 1rem;
}

dl dd svg {
  vertical-align: text-bottom;
  block-size: 1rem;
  inline-size: 1rem;
  margin-inline-end: .25rem;
}

div.disclaimer {
  margin-block-start: 1rem;
}

div.disclaimer svg {
  vertical-align: text-bottom;
  block-size: 1rem;
  inline-size: 1rem;
  margin-inline-end: .25rem;
}

div.disclaimer svg + p {
  display: inline;
}

aside dl:not(:has( > *)) + div.disclaimer {
  margin-block-start: 0;
}

@layer components.dreamform {
  div.dreamform__field {
    margin-block-start: 1rem;
  }

  div.dreamform__field > :is(label, input) {
    display: block;
  }

  div.dreamform__field input {
    border: 1px solid var(--front);
    background-color: rgba(0, 0, 0, 0);
    padding: .25em;
    font-size: 1rem;
  }

  div.dreamform__field input::placeholder {
    color: hsl(from var(--front) h s calc(l - 30));
  }

  div.dreamform__field > div:has(input[type="checkbox"]) {
    display: inline-block;
  }
}