@layer base, components, utilities;

/* src/css/_base/root.css */
@layer base {
  :root {
    --wrapper-size: 90rem;
    --color-black: #000;
    --color-white: #fff;
    --color-lightgrey: #efefef;
    --color-red: #e60003;
    --color-text: var(--color-black);
    --color-link: var(--color-red);
    --color-background: var(--color-white);
    --color-card: var(--color-lightgrey);
    --color-info: #0077d9;
    --color-info-light: #e6f3fd;
    --color-warning: #cfa200;
    --color-warning-light: #fef8e5;
    --border-radius-0: 0;
    --border-radius-sm: 0.5rem;
    --border-radius-md: 1rem;
    --border-radius-lg: 1.5rem;
    --border-radius-full: 9999rem;
    --border-weight-sm: 0.0625rem;
    --border-weight-md: 0.1rem;
    --border-weight-lg: 0.25rem;
    --font-sans: system-ui, sans-serif;
    --font-serif: serif;
    --font-code: ui-monospace, monospace;
    --size-2xs: clamp(0.7813rem, 0.753rem + 0.1411vw, 0.88rem);
    --size-xs: clamp(0.9375rem, 0.8911rem + 0.2321vw, 1.1rem);
    --size-sm: clamp(1.125rem, 1.0536rem + 0.3571vw, 1.375rem);
    --size-md: clamp(1.35rem, 1.2446rem + 0.5268vw, 1.7188rem);
    --size-lg: clamp(1.62rem, 1.469rem + 0.7549vw, 2.1484rem);
    --size-xl: clamp(1.944rem, 1.7321rem + 1.0594vw, 2.6855rem);
    --size-2xl: clamp(2.3328rem, 2.0402rem + 1.463vw, 3.3569rem);
    --size-3xl: clamp(2.7994rem, 2.4003rem + 1.9954vw, 4.1962rem);
    --regular: 400;
    --bold: 700;
    --black: 900;
    --leading-base: 1.5;
    --leading-scale: 1.25;
    --leading-sm: calc(var(--leading-base) / var(--leading-scale));
    --leading-md: var(--leading-base);
    --leading-lg: calc(var(--leading-md) * var(--leading-scale));
    --tracking-sm: -0.025em;
    --tracking-md: 0;
    --tracking-lg: 0.1em;
    --tracking-xl: 0.3em;
    --space-3xs: clamp(0.3125rem, 0.2946rem + 0.0893vw, 0.375rem);
    --space-2xs: clamp(0.5625rem, 0.5268rem + 0.1786vw, 0.6875rem);
    --space-xs: clamp(0.875rem, 0.8214rem + 0.2679vw, 1.0625rem);
    --space-sm: clamp(1.125rem, 1.0536rem + 0.3571vw, 1.375rem);
    --space-md: clamp(1.6875rem, 1.5804rem + 0.5357vw, 2.0625rem);
    --space-lg: clamp(2.25rem, 2.1071rem + 0.7143vw, 2.75rem);
    --space-xl: clamp(3.375rem, 3.1607rem + 1.0714vw, 4.125rem);
    --space-2xl: clamp(4.5rem, 4.2143rem + 1.4286vw, 5.5rem);
    --space-3xl: clamp(6.75rem, 6.3214rem + 2.1429vw, 8.25rem);
    --space-3xs-2xs: clamp(0.3125rem, 0.2054rem + 0.5357vw, 0.6875rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4196rem + 0.7143vw, 1.0625rem);
    --space-xs-sm: clamp(0.875rem, 0.7321rem + 0.7143vw, 1.375rem);
    --space-sm-md: clamp(1.125rem, 0.8571rem + 1.3393vw, 2.0625rem);
    --space-md-lg: clamp(1.6875rem, 1.3839rem + 1.5179vw, 2.75rem);
    --space-lg-xl: clamp(2.25rem, 1.7143rem + 2.6786vw, 4.125rem);
    --space-xl-2xl: clamp(3.375rem, 2.7679rem + 3.0357vw, 5.5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.4286rem + 5.3571vw, 8.25rem);
    --space-sm-xl: clamp(1.125rem, 0.2679rem + 4.2857vw, 4.125rem);
    --space-sm-lg: clamp(1.125rem, 0.6607rem + 2.3214vw, 2.75rem);
    --space-md-xl: clamp(1.6875rem, 0.9911rem + 3.4821vw, 4.125rem);
    --space-lg-3xl: clamp(2.25rem, 0.5357rem + 8.5714vw, 8.25rem);
    --grid-12-col: repeat(12, 1fr);
    --grid-compound: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr;
    --grid-column-gap: var(--space-sm-md);
    --grid-row-gap: var(--space-sm-md);
    --grid-max: var(--wrapper-size);
  }
}

/* src/css/_base/fonts.css */
@layer base;

/* src/css/_base/motion.css */
@layer base;

/* src/css/_base/elements.css */
@layer base {
  body {
    background-color: var(--color-background);
    font-family: var(--font-sans);
    color: var(--color-text);
    font-size: var(--size-sm);
    line-height: var(--leading-md);
    min-height: 100svh;
    padding: var(--space-sm-xl);
    max-width: var(--wrapper-size);
    margin-inline: auto;
  }
  :where(*, *::before, *::after) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--color-text);
  }
  :where(*, *::before, *::after)::selection {
    color: var(--color-background);
    background-color: var(--color-text);
  }
  :where(*, *::before, *::after):focus-visible {
    outline: var(--border-weight-md) var(--color-text) dashed;
    outline-offset: var(--border-weight-md);
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    margin: 0;
    font-size: inherit;
    font-family: var(--font-sans);
    font-weight: inherit;
  }
  html {
    scrollbar-gutter: stable;
  }
  a {
    color: var(--color-link);
  }
  figure {
    margin: 0;
  }
  video,
  img {
    max-width: 100%;
    height: auto;
  }
  code,
  pre {
    font-family: var(--font-code);
  }
  :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
    line-height: var(--leading-sm);
  }
  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre, blockquote) {
    width: 100%;
    margin-inline: auto;
    overflow-wrap: break-word;
  }
  h1,
  .h1 {
    font-size: var(--size-3xl);
    font-weight: var(--bold);
    margin-block-end: var(--space-2xl) var(--space-md);
  }
  h2 {
    font-size: var(--size-2xl);
    font-weight: var(--bold);
    margin-block: var(--space-xl) var(--space-md);
  }
  h3 {
    font-size: var(--size-xl);
    font-weight: var(--bold);
    margin-block: var(--space-md) var(--space-sm);
  }
  h2 + h3 {
    margin-block: var(--space-md);
  }
  h4 {
    font-size: var(--size-lg);
  }
  h5 {
    font-size: var(--size-md);
  }
  h6 {
    font-size: var(--size-sm);
  }
  h4,
  h5,
  h6 {
    margin-block: var(--space-sm) 0;
    font-size: var(--size-2);
    font-weight: 600;
  }
  p,
  ul,
  ol,
  dl,
  pre,
  blockquote {
    width: 100%;
    margin-inline: auto;
    overflow-wrap: break-word;
  }
  p,
  ul,
  ol,
  dl,
  details {
    margin-block: var(--space-sm);
    margin-inline: 0;
  }
  :where(a, li, dd, strong, em, i, mark) {
    color: inherit;
  }
  :where(ul:not([class]), ol:not([class])) {
    padding-inline-start: 1.75ch;
  }
  li > ul,
  li > ol {
    margin-block: var(--space-xs) 0;
  }
  ul {
    list-style-type: disc;
  }
  ol {
    list-style-type: decimal;
  }
  li {
    position: relative;
    color: inherit;
  }
  li:where(li + li) {
    margin-block-start: 0;
  }
  li :where(ul, ol) {
    margin-block-start: 0;
  }
  li::marker {
    color: var(--color-green-dark);
  }
  b,
  strong {
    font-weight: 700;
  }
  i,
  em {
    font-style: italic;
  }
  small {
    font-size: var(--size-xs);
  }
  mark {
    color: inherit;
  }
  a {
    color: var(--color-text);
    text-decoration-thickness: var(--border-weight-md);
    text-underline-offset: 0.15rem;
    text-decoration-color: var(--color-link);
    transition: text-decoration-thickness 0.1s ease, color 0.1s ease;
  }
  a:hover {
    text-decoration-thickness: var(--border-weight-lg);
    text-decoration-skip-ink: none;
  }
  a.active {
    background: var(--color-link-active);
  }
  summary::marker {
    content: "";
  }
  nav ol,
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  section {
    margin-block: var(--space-lg-3xl);
  }
  footer nav ul {
    display: flex;
    gap: var(--space-sm);
  }
  section :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre, blockquote):first-child {
    margin-block-start: 0;
  }
}

/* src/css/_base/_base.css */
@layer base;

/* src/css/_components/downloads.css */
@layer components {
  .rsc-download-container {
    container: download / inline-size;
  }
  .rsc-download {
    border-radius: var(--border-radius-lg);
    background: var(--color-card);
    padding: var(--space-md);
    padding-right: 2.5rem;
    position: relative;
    overflow: hidden;
  }
  .rsc-download:before {
    content: "";
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    background-image: url(../../assets/images/pattern-green.svg);
    background-repeat: repeat-x;
    width: 2rem;
  }
  .rsc-download .filetype {
    flex-shrink: none;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--color-purple);
  }
  .rsc-download .icon {
    width: 3rem;
    height: 3rem;
  }
  .rsc-download .description {
    font-size: var(--size-xs);
  }
  .rsc-download ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .rsc-download li {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }
  .rsc-download li a {
    overflow-wrap: break-all;
    word-break: break-word;
  }
  @container download (min-width: 400px) {
    .rsc-download {
      padding-right: 6rem;
    }
    .rsc-download:before {
      width: 6.5rem;
    }
  }
  @container download (min-width: 600px) {
    .rsc-download ul {
      grid-template-columns: 1fr 1fr;
    }
  }
}

/* src/css/_components/callout.css */
@layer components {
  .rsc-callout {
    border-radius: var(--border-radius-lg);
    border: 1px solid;
  }
  .rsc-callout :last-child {
    margin-block-end: 0;
  }
  .rsc-callout__header {
    padding-inline: var(--size-sm);
    padding-block: var(--size-2xs);
    font-weight: bold;
    border-radius: var(--border-radius-lg);
  }
  .rsc-callout__content {
    padding-inline: var(--size-sm);
    padding-block: var(--size-sm);
  }
  .rsc-callout__content :last-child {
    margin: 0;
  }
  .rsc-callout--neutral {
    background: light-dark(lightgrey, darkgrey);
  }
  .rsc-callout--info {
    border-color: var(--color-info);
  }
  .rsc-callout--info .rsc-callout__header {
    color: var(--color-info);
    background-color: var(--color-info-light);
  }
  .rsc-callout--warning {
    border-color: var(--color-warning);
  }
  .rsc-callout--warning .rsc-callout__header {
    color: var(--color-warning);
    background-color: var(--color-warning-light);
  }
}

/* src/css/_components/card.css */
@layer components {
  .card {
    background: var(--color-card);
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    outline: 0 solid light-dark(var(--color-green-dark), var(--color-green-light));
    transition: all 0.1s ease-out;
  }
  .card:hover {
    transform: scale(1.0125);
    outline-width: var(--border-weight-lg);
  }
  .card--reorder .card__image {
    order: -1;
  }
  .card__content {
    padding: var(--space-sm-md);
  }
  .card__content :first-child {
    margin-block-start: 0;
  }
  .card__content :last-child {
    margin-block-end: 0;
  }
  .card a {
    color: inherit;
    text-decoration: none;
  }
  .card a:hover {
    text-decoration: underline;
    text-decoration-color: light-dark(var(--color-green), var(--color-green-light));
    text-decoration-skip-ink: none;
    text-decoration-thickness: var(--border-weight-lg);
  }
  .card a[href]::after,
  .card button::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .card__image {
    display: inline-flex;
  }
  .card__image img {
    width: 100%;
  }
}

/* src/css/_components/container.css */
@layer components {
  .container {
    container: container / inline-size;
  }
}

/* src/css/_components/footer.css */
@layer components {
  footer {
    display: grid;
    gap: var(--space-md);
  }
}

/* src/css/_components/layout.css */
@layer components {
  .layout {
    max-inline-size: var(--grid-max);
    display: grid;
    gap: var(--grid-row-gap) var(--grid-column-gap);
  }
  @container container (width >= 54rem) {
    .layout {
      grid-template-columns: var(--grid-12-col);
    }
  }
  [data-layout=kassette] > div {
    grid-column: span var(--column-span);
  }
  } {
  }
}

/* src/css/_components/list.css */
@layer components {
  .list {
    list-style-type: none;
    margin: 0;
  }
  .list > li {
    margin-block-start: var(--space-md);
  }
  .list > li > * {
    margin: 0;
  }
  .list > li:first-child {
    margin-block-start: 0;
  }
  .list[data-variant=divider] {
    border-top: 1px solid rgb(0, 0, 0, 0.2);
  }
  .list[data-variant=divider] > li {
    margin: 0;
    border-bottom: 1px solid rgb(0, 0, 0, 0.2);
    padding-block: var(--space-md);
  }
}

/* src/css/_components/_components.css */
@layer components;

/* src/css/_utilities/text.css */
@layer utilities {
  .clamp {
    max-inline-size: 55ch;
    margin-inline: auto;
  }
  .columns {
    column-width: 30ch;
    gap: var(--grid-column-gap);
  }
  [data-size="3xl"],
  .size-3xl {
    font-size: var(--size-3xl);
  }
  [data-size="2xl"],
  .size-2xl {
    font-size: var(--size-2xl);
  }
  [data-size=xl],
  .size-xl {
    font-size: var(--size-xl);
  }
  [data-size=lg],
  .size-lg {
    font-size: var(--size-lg);
  }
  [data-size=md],
  .size-md {
    font-size: var(--size-md);
  }
  [data-size=sm],
  .size-sm {
    font-size: var(--size-sm);
  }
  [data-size=xs],
  .size-xs {
    font-size: var(--size-xs);
  }
  [data-size="2xs"],
  .size-2xs {
    font-size: var(--size-2xs);
  }
  [data-font=serif],
  .serif {
    font-family: var(--font-serif);
  }
  [data-font=sans],
  .sans {
    font-family: var(--font-sans);
  }
  [data-weight=regular],
  .regular {
    font-weight: var(--regular);
  }
  [data-weight=bold],
  .bold {
    font-weight: var(--bold);
  }
  [data-weight=black],
  .black {
    font-weight: var(--black);
  }
  [data-align=left] {
    text-align: start;
  }
  [data-align=right] {
    text-align: end;
  }
  [data-align=center] {
    text-align: center;
    text-wrap: balance;
    margin-inline: auto;
  }
  [data-leading=sm],
  .leading-sm {
    line-height: var(--leading-sm);
  }
  [data-leading=md],
  .leading-md {
    line-height: var(--leading-md);
  }
  [data-leading=lg],
  .leading-lg {
    line-height: var(--leading-lg);
  }
  .tracking-sm {
    letter-spacing: var(--tracking-sm);
  }
  .tracking-md {
    letter-spacing: var(--tracking-md);
  }
  .tracking-lg {
    letter-spacing: var(--tracking-lg);
  }
  .tracking-xl {
    letter-spacing: var(--tracking-xl);
  }
}

/* src/css/_utilities/position.css */
@layer utilities {
  .sticky {
    position: sticky;
    top: var(--space-sm-md);
  }
}

/* src/css/_utilities/color.css */
@layer utilities {
  [data-color=green] {
    --color-accent: var(--color-green);
    --color-accent-text: var(--color-black);
  }
  [data-color=orange] {
    --color-accent: var(--color-orange);
    --color-accent-text: var(--color-black);
  }
  [data-color=purple] {
    --color-accent: var(--color-purple);
    --color-accent-text: var(--color-black);
  }
  [data-color=yellow] {
    --color-accent: var(--color-yellow);
    --color-accent-text: var(--color-black);
  }
  [data-color] .accordion__panel:before {
    background-image: url(../images/icon-dropdown.svg);
  }
}

/* src/css/_utilities/hidden.css */
@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

/* src/css/_utilities/_utilities.css */
@layer utilities;

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