@charset "UTF-8";
:root {
  --clr-dark: hsl(0, 100%, 1%);
  --clr-light-blue: hsl(191, 94%, 69%);
  --clr-pale-red: hsl(351, 100%, 69%);
  --clr-pale-green: hsl(162, 25%, 90%);
  --clr-white: white;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

body {
  font-family: "komet", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  color: hsl(0, 100%, 1%);
  background-color: hsl(0, 100%, 1%);
  line-height: 1.2;
}

a {
  color: hsl(0, 100%, 1%);
}

a:is(:hover, :focus) {
  color: hsl(0, 100%, 1%);
}

.text-dark {
  color: var(--clr-dark);
}

.bg-dark {
  background-color: var(--clr-dark);
}

.text-light-blue {
  color: var(--clr-light-blue);
}

.bg-light-blue {
  background-color: var(--clr-light-blue);
}

.text-pale-red {
  color: var(--clr-pale-red);
}

.bg-pale-red {
  background-color: var(--clr-pale-red);
}

.text-pale-green {
  color: var(--clr-pale-green);
}

.bg-pale-green {
  background-color: var(--clr-pale-green);
}

.text-white {
  color: var(--clr-white);
}

.bg-white {
  background-color: var(--clr-white);
}

.p-1 {
  padding: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.p-2 {
  padding: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.p-3 {
  padding: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.p-4 {
  padding: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.p-5 {
  padding: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.p-6 {
  padding: clamp(0.675rem, 1.25vw, 1.5rem);
}

.p-7 {
  padding: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.p-8 {
  padding: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.p-9 {
  padding: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.p-10 {
  padding: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.p-11 {
  padding: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.p-12 {
  padding: clamp(3.375rem, 6.25vw, 7.5rem);
}

.p-13 {
  padding: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.px-1 {
  padding-left: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
  padding-right: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.px-2 {
  padding-left: clamp(0.225rem, 0.4166666667vw, 0.5rem);
  padding-right: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.px-3 {
  padding-left: clamp(0.3375rem, 0.625vw, 0.75rem);
  padding-right: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.px-4 {
  padding-left: clamp(0.45rem, 0.8333333333vw, 1rem);
  padding-right: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.px-5 {
  padding-left: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
  padding-right: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.px-6 {
  padding-left: clamp(0.675rem, 1.25vw, 1.5rem);
  padding-right: clamp(0.675rem, 1.25vw, 1.5rem);
}

.px-7 {
  padding-left: clamp(0.9rem, 1.6666666667vw, 2rem);
  padding-right: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.px-8 {
  padding-left: clamp(1.125rem, 2.0833333333vw, 2.5rem);
  padding-right: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.px-9 {
  padding-left: clamp(1.6875rem, 3.125vw, 3.75rem);
  padding-right: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.px-10 {
  padding-left: clamp(2.25rem, 4.1666666667vw, 5rem);
  padding-right: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.px-11 {
  padding-left: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
  padding-right: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.px-12 {
  padding-left: clamp(3.375rem, 6.25vw, 7.5rem);
  padding-right: clamp(3.375rem, 6.25vw, 7.5rem);
}

.px-13 {
  padding-left: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
  padding-right: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.py-1 {
  padding-top: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
  padding-bottom: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.py-2 {
  padding-top: clamp(0.225rem, 0.4166666667vw, 0.5rem);
  padding-bottom: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.py-3 {
  padding-top: clamp(0.3375rem, 0.625vw, 0.75rem);
  padding-bottom: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.py-4 {
  padding-top: clamp(0.45rem, 0.8333333333vw, 1rem);
  padding-bottom: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.py-5 {
  padding-top: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
  padding-bottom: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.py-6 {
  padding-top: clamp(0.675rem, 1.25vw, 1.5rem);
  padding-bottom: clamp(0.675rem, 1.25vw, 1.5rem);
}

.py-7 {
  padding-top: clamp(0.9rem, 1.6666666667vw, 2rem);
  padding-bottom: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.py-8 {
  padding-top: clamp(1.125rem, 2.0833333333vw, 2.5rem);
  padding-bottom: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.py-9 {
  padding-top: clamp(1.6875rem, 3.125vw, 3.75rem);
  padding-bottom: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.py-10 {
  padding-top: clamp(2.25rem, 4.1666666667vw, 5rem);
  padding-bottom: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.py-11 {
  padding-top: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
  padding-bottom: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.py-12 {
  padding-top: clamp(3.375rem, 6.25vw, 7.5rem);
  padding-bottom: clamp(3.375rem, 6.25vw, 7.5rem);
}

.py-13 {
  padding-top: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
  padding-bottom: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.pt-1 {
  padding-top: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.pt-2 {
  padding-top: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.pt-3 {
  padding-top: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.pt-4 {
  padding-top: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.pt-5 {
  padding-top: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.pt-6 {
  padding-top: clamp(0.675rem, 1.25vw, 1.5rem);
}

.pt-7 {
  padding-top: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.pt-8 {
  padding-top: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.pt-9 {
  padding-top: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.pt-10 {
  padding-top: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.pt-11 {
  padding-top: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.pt-12 {
  padding-top: clamp(3.375rem, 6.25vw, 7.5rem);
}

.pt-13 {
  padding-top: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.pr-1 {
  padding-right: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.pr-2 {
  padding-right: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.pr-3 {
  padding-right: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.pr-4 {
  padding-right: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.pr-5 {
  padding-right: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.pr-6 {
  padding-right: clamp(0.675rem, 1.25vw, 1.5rem);
}

.pr-7 {
  padding-right: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.pr-8 {
  padding-right: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.pr-9 {
  padding-right: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.pr-10 {
  padding-right: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.pr-11 {
  padding-right: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.pr-12 {
  padding-right: clamp(3.375rem, 6.25vw, 7.5rem);
}

.pr-13 {
  padding-right: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.pb-1 {
  padding-bottom: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.pb-2 {
  padding-bottom: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.pb-3 {
  padding-bottom: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.pb-4 {
  padding-bottom: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.pb-5 {
  padding-bottom: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.pb-6 {
  padding-bottom: clamp(0.675rem, 1.25vw, 1.5rem);
}

.pb-7 {
  padding-bottom: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.pb-8 {
  padding-bottom: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.pb-9 {
  padding-bottom: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.pb-10 {
  padding-bottom: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.pb-11 {
  padding-bottom: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.pb-12 {
  padding-bottom: clamp(3.375rem, 6.25vw, 7.5rem);
}

.pb-13 {
  padding-bottom: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.pl-1 {
  padding-left: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.pl-2 {
  padding-left: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.pl-3 {
  padding-left: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.pl-4 {
  padding-left: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.pl-5 {
  padding-left: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.pl-6 {
  padding-left: clamp(0.675rem, 1.25vw, 1.5rem);
}

.pl-7 {
  padding-left: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.pl-8 {
  padding-left: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.pl-9 {
  padding-left: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.pl-10 {
  padding-left: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.pl-11 {
  padding-left: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.pl-12 {
  padding-left: clamp(3.375rem, 6.25vw, 7.5rem);
}

.pl-13 {
  padding-left: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.m-1 {
  margin: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.m-2 {
  margin: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.m-3 {
  margin: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.m-4 {
  margin: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.m-5 {
  margin: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.m-6 {
  margin: clamp(0.675rem, 1.25vw, 1.5rem);
}

.m-7 {
  margin: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.m-8 {
  margin: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.m-9 {
  margin: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.m-10 {
  margin: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.m-11 {
  margin: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.m-12 {
  margin: clamp(3.375rem, 6.25vw, 7.5rem);
}

.m-13 {
  margin: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.mx-1 {
  margin-left: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
  margin-right: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.mx-2 {
  margin-left: clamp(0.225rem, 0.4166666667vw, 0.5rem);
  margin-right: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.mx-3 {
  margin-left: clamp(0.3375rem, 0.625vw, 0.75rem);
  margin-right: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.mx-4 {
  margin-left: clamp(0.45rem, 0.8333333333vw, 1rem);
  margin-right: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.mx-5 {
  margin-left: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
  margin-right: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.mx-6 {
  margin-left: clamp(0.675rem, 1.25vw, 1.5rem);
  margin-right: clamp(0.675rem, 1.25vw, 1.5rem);
}

.mx-7 {
  margin-left: clamp(0.9rem, 1.6666666667vw, 2rem);
  margin-right: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.mx-8 {
  margin-left: clamp(1.125rem, 2.0833333333vw, 2.5rem);
  margin-right: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.mx-9 {
  margin-left: clamp(1.6875rem, 3.125vw, 3.75rem);
  margin-right: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.mx-10 {
  margin-left: clamp(2.25rem, 4.1666666667vw, 5rem);
  margin-right: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.mx-11 {
  margin-left: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
  margin-right: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.mx-12 {
  margin-left: clamp(3.375rem, 6.25vw, 7.5rem);
  margin-right: clamp(3.375rem, 6.25vw, 7.5rem);
}

.mx-13 {
  margin-left: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
  margin-right: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.my-1 {
  margin-top: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
  margin-bottom: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.my-2 {
  margin-top: clamp(0.225rem, 0.4166666667vw, 0.5rem);
  margin-bottom: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.my-3 {
  margin-top: clamp(0.3375rem, 0.625vw, 0.75rem);
  margin-bottom: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.my-4 {
  margin-top: clamp(0.45rem, 0.8333333333vw, 1rem);
  margin-bottom: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.my-5 {
  margin-top: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
  margin-bottom: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.my-6 {
  margin-top: clamp(0.675rem, 1.25vw, 1.5rem);
  margin-bottom: clamp(0.675rem, 1.25vw, 1.5rem);
}

.my-7 {
  margin-top: clamp(0.9rem, 1.6666666667vw, 2rem);
  margin-bottom: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.my-8 {
  margin-top: clamp(1.125rem, 2.0833333333vw, 2.5rem);
  margin-bottom: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.my-9 {
  margin-top: clamp(1.6875rem, 3.125vw, 3.75rem);
  margin-bottom: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.my-10 {
  margin-top: clamp(2.25rem, 4.1666666667vw, 5rem);
  margin-bottom: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.my-11 {
  margin-top: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
  margin-bottom: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.my-12 {
  margin-top: clamp(3.375rem, 6.25vw, 7.5rem);
  margin-bottom: clamp(3.375rem, 6.25vw, 7.5rem);
}

.my-13 {
  margin-top: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
  margin-bottom: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.mt-1 {
  margin-top: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.mt-2 {
  margin-top: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.mt-3 {
  margin-top: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.mt-4 {
  margin-top: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.mt-5 {
  margin-top: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.mt-6 {
  margin-top: clamp(0.675rem, 1.25vw, 1.5rem);
}

.mt-7 {
  margin-top: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.mt-8 {
  margin-top: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.mt-9 {
  margin-top: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.mt-10 {
  margin-top: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.mt-11 {
  margin-top: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.mt-12 {
  margin-top: clamp(3.375rem, 6.25vw, 7.5rem);
}

.mt-13 {
  margin-top: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.mr-1 {
  margin-right: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.mr-2 {
  margin-right: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.mr-3 {
  margin-right: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.mr-4 {
  margin-right: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.mr-5 {
  margin-right: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.mr-6 {
  margin-right: clamp(0.675rem, 1.25vw, 1.5rem);
}

.mr-7 {
  margin-right: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.mr-8 {
  margin-right: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.mr-9 {
  margin-right: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.mr-10 {
  margin-right: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.mr-11 {
  margin-right: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.mr-12 {
  margin-right: clamp(3.375rem, 6.25vw, 7.5rem);
}

.mr-13 {
  margin-right: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.mb-1 {
  margin-bottom: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.mb-2 {
  margin-bottom: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.mb-3 {
  margin-bottom: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.mb-4 {
  margin-bottom: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.mb-5 {
  margin-bottom: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.mb-6 {
  margin-bottom: clamp(0.675rem, 1.25vw, 1.5rem);
}

.mb-7 {
  margin-bottom: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.mb-8 {
  margin-bottom: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.mb-9 {
  margin-bottom: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.mb-10 {
  margin-bottom: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.mb-11 {
  margin-bottom: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.mb-12 {
  margin-bottom: clamp(3.375rem, 6.25vw, 7.5rem);
}

.mb-13 {
  margin-bottom: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.ml-1 {
  margin-left: clamp(0.1125rem, 0.2083333333vw, 0.25rem);
}

.ml-2 {
  margin-left: clamp(0.225rem, 0.4166666667vw, 0.5rem);
}

.ml-3 {
  margin-left: clamp(0.3375rem, 0.625vw, 0.75rem);
}

.ml-4 {
  margin-left: clamp(0.45rem, 0.8333333333vw, 1rem);
}

.ml-5 {
  margin-left: clamp(0.5625rem, 1.0416666667vw, 1.25rem);
}

.ml-6 {
  margin-left: clamp(0.675rem, 1.25vw, 1.5rem);
}

.ml-7 {
  margin-left: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.ml-8 {
  margin-left: clamp(1.125rem, 2.0833333333vw, 2.5rem);
}

.ml-9 {
  margin-left: clamp(1.6875rem, 3.125vw, 3.75rem);
}

.ml-10 {
  margin-left: clamp(2.25rem, 4.1666666667vw, 5rem);
}

.ml-11 {
  margin-left: clamp(2.8125rem, 5.2083333333vw, 6.25rem);
}

.ml-12 {
  margin-left: clamp(3.375rem, 6.25vw, 7.5rem);
}

.ml-13 {
  margin-left: clamp(3.9375rem, 7.2916666667vw, 8.75rem);
}

.container > .content {
  position: relative;
  grid-column: content;
  display: grid;
  min-height: calc(95vh - 1.25rem * 2);
  min-height: -webkit-fill-available;
}
@media screen and (min-width: 45em) {
  .container > .content {
    display: grid;
    min-height: calc(95vmin - 1.75rem * 2);
  }
}
.container > .content .black-overlay {
  background-color: hsl(191, 94%, 69%);
  width: calc(100% + 2.85rem);
  min-height: 80%;
  position: relative;
  bottom: 0;
  padding: 2rem;
  left: -2.5rem;
  color: #fff;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
  z-index: 11;
}
@media screen and (min-width: 45em) {
  .container > .content .black-overlay {
    position: absolute;
    width: 80%;
    left: 0;
    padding: 6.25rem;
    padding-bottom: 0;
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 0;
  }
}
.container > .content .black-overlay h2 {
  max-width: max(300px, 90%);
}
.container > .content .black-overlay h2 .icon-button {
  margin-top: -0.5em;
  transform: translateY(25%);
}
.container > .content .black-overlay p {
  color: hsl(0, 100%, 1%);
}
.container > .content .black-overlay .underline {
  text-decoration-color: hsl(0, 100%, 1%);
}
.container > .content .black-overlay a {
  color: hsl(0, 100%, 1%);
}

main {
  display: grid;
  grid-template-columns: [col-bleed-start] 1rem [content-start col-1-start col-2-start] 1fr [col-2-end col-1-end content-end] 1rem [col-bleed-end];
  grid-gap: 1rem;
  grid-auto-flow: column;
  align-items: end;
}

@media screen and (min-width: 992px) {
  main {
    grid-template-columns: [col-bleed-start] 5rem [content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end content-end] 5rem [col-bleed-end];
    grid-template-rows: auto;
  }
}
main > .col-1 {
  grid-column: col-1;
}

main > .col-2 {
  grid-column: col-2;
}

main > .col-span-2 {
  grid-column-start: col-1;
  grid-column-end: col-2;
}

main > .col-bleed {
  grid-column: col-bleed;
}

.container {
  --max-width: 113.75rem;
  --breakout-width: 6.25rem;
  --margin-small-screen: 1.25rem;
  --margin-large-screen: 1.75rem;
  display: grid;
  grid-template-columns: [full-bleed-start] 1fr [breakout-start] minmax(0, var(--breakout-width)) [content-start] min(100%, var(--max-width)) [content-end] minmax(0, var(--breakout-width)) [breakout-end] 1fr [full-bleed-end];
  grid-template-rows: auto;
  margin: var(--margin-small-screen);
}
@media screen and (min-width: 30em) {
  .container {
    margin: var(--margin-large-screen);
  }
}

.round {
  border-radius: 2.75rem;
}
@media screen and (min-width: 992px) {
  .round {
    order: 3.75rem;
  }
}

.flex-group {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--flex-column-gap, 1rem);
  row-gap: var(--flex-row-gap, 0.5rem);
  width: fit-content;
}

.flex-group.mx-auto {
  justify-content: center;
}

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

.logo-flex {
  flex-flow: column;
  align-items: center;
}
@media screen and (min-width: 45em) {
  .logo-flex {
    flex-flow: row;
  }
}

.logo-width {
  width: clamp(8.38125rem, 15.5208333333vw, 18.625rem);
  height: auto;
  max-width: 45%;
}

.text-uppercase {
  text-transform: uppercase;
}

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

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

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

.underline {
  text-decoration: underline;
  text-decoration-thickness: clamp(0.4875rem, 1.1458333333vw, 1.375rem);
  text-decoration-color: hsl(0, 100%, 1%);
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
}
@media screen and (min-width: 45em) {
  .underline {
    text-underline-offset: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }
}
.underline a {
  text-decoration: none;
}
.underline:hover {
  text-decoration-thickness: clamp(0.4875rem, 1.1458333333vw, 1.375rem);
}

h3.underline {
  text-decoration-thickness: clamp(0.3275rem, 0.5229166667vw, 0.6275rem);
  margin-bottom: 0.75rem;
  text-underline-offset: 0.25rem;
  padding-bottom: 0;
}
@media screen and (min-width: 45em) {
  h3.underline {
    text-underline-offset: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
  }
}
h3.underline:hover {
  text-decoration-thickness: clamp(0.3275rem, 0.5229166667vw, 0.6275rem);
}

h5.underline {
  text-decoration-thickness: clamp(0.2875rem, 0.3229166667vw, 0.3875rem);
  text-underline-offset: 0.5rem;
  margin: 0;
}
h5.underline:hover {
  text-decoration-thickness: clamp(0.2875rem, 0.3229166667vw, 0.3875rem);
}

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

small {
  font-size: 0.75em;
}

.even-columns {
  display: grid;
  gap: var(--grid-gap, 1rem);
  align-items: end;
}
@media screen and (min-width: 45em) {
  .even-columns {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.table tbody tr td {
  padding: 1rem 0.5rem 1rem 0;
  vertical-align: top;
  font-size: clamp(0.9rem, 1.6666666667vw, 2rem);
}
.table input[type=number] {
  font-size: inherit;
}

/*
 * Alkoholtest: 5 Spalten (Anzahl | Getraenk | = | Standardgetraenke | Label).
 * Unterhalb von "medium" wird jede Zeile zweizeilig umgebrochen:
 *   [Anzahl] [Getraenk]
 *            = [0.00] Standardgetraenk
 */
.alcohol-table {
  --kp-input-width: 4.5rem;
  --kp-gap: 0.5rem;
}
@media screen and (max-width: 44.99em) {
  .alcohol-table {
    display: block;
    width: 100%;
  }
  .alcohol-table tbody {
    display: block;
  }
  .alcohol-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--kp-gap);
    row-gap: 0.25rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }
  .alcohol-table tbody tr td {
    display: block;
    padding: 0;
  }
  .alcohol-table tbody tr td:nth-child(1) {
    flex: 0 0 var(--kp-input-width);
  }
  .alcohol-table tbody tr td:nth-child(2) {
    flex: 1 1 calc(100% - var(--kp-input-width) - var(--kp-gap));
  }
  .alcohol-table tbody tr td:nth-child(2) .no-wrap {
    white-space: normal;
  }
  .alcohol-table tbody tr td:nth-child(3) {
    flex: 0 0 auto;
    margin-left: calc(var(--kp-input-width) + var(--kp-gap));
  }
  .alcohol-table tbody tr td:nth-child(4) {
    flex: 0 0 auto;
  }
  .alcohol-table tbody tr td:nth-child(5) {
    flex: 1 1 auto;
    font-size: clamp(0.8rem, 1.4166666667vw, 1.7rem);
  }
  .alcohol-table input[type=number] {
    width: var(--kp-input-width);
    max-width: var(--kp-input-width);
    padding: 0.25em 0.4em;
  }
  .alcohol-table input[name="standard_count[]"] {
    width: 2.75rem;
    max-width: 2.75rem;
    text-align: left;
  }
}

.site-header {
  color: hsl(0, 100%, 1%);
  background-color: transparent;
  padding: 2rem 2rem 2rem 2rem;
  margin: 0 0 1.5rem 0;
}
@media screen and (min-width: 992px) {
  .site-header {
    padding: 5rem 6rem;
    margin: 0 0 2.5rem 0;
  }
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  line-height: 1;
}

.site-footer {
  position: relative;
  grid-column: content;
  width: 100%;
  text-align: right;
  z-index: 9999;
}
.site-footer ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  justify-content: flex-end;
}
.site-footer ul li a {
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.35rem;
}

.nav {
  --flex-column-gap: 1rem;
  list-style: none;
  font-family: "komet", sans-serif;
  font-weight: 400;
}
.nav a {
  color: hsl(0, 100%, 1%);
  text-decoration: none;
  text-transform: uppercase;
  font-size: clamp(0.9625rem, 1.4583333333vw, 1.75rem);
}
.nav a:is(:hover, :focus) {
  color: hsl(0, 100%, 1%);
}
.nav a img {
  width: clamp(1.75rem, 2.2916666667vw, 2.75rem);
}
@media screen and (min-width: 45em) {
  .nav {
    --flex-column-gap: 5rem;
  }
}

nav.main {
  display: none;
}
@media screen and (min-width: 65em) {
  nav.main {
    display: flex;
  }
}
nav.sitemap {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: hsl(162, 25%, 90%);
  flex-flow: column;
  flex-flow: column;
  padding: 5rem 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  transform: translateY(600%);
  transition: transform 220ms, opacity 200ms;
  z-index: 15;
  order: 2;
}
nav.sitemap[data-visible=false] {
  transform: translateY(600%);
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  height: 0;
}
nav.sitemap[data-visible=true] {
  opacity: 1;
  transform: translateY(100%);
}
nav.sitemap .nav {
  --flex-column-gap: 1rem;
  flex-flow: column;
}
nav.sitemap h3 {
  margin-bottom: 1rem;
}
@media screen and (min-width: 992px) {
  nav.sitemap {
    order: 1;
  }
}

nav:nth-of-type(2).side {
  position: relative;
  order: 1;
}
nav:nth-of-type(2).side .nav {
  --flex-column-gap: 0;
  background-color: white;
  border-radius: 1rem;
  padding: clamp(0.2rem, 0.4583333333vw, 0.55rem);
  flex-wrap: nowrap;
}
@media screen and (min-width: 992px) {
  nav:nth-of-type(2).side {
    order: 2;
  }
}

.quick-link {
  position: absolute;
  display: inline-flex;
  text-decoration: none;
  width: clamp(5rem, 8.90625vw, 10.6875rem);
  height: clamp(5rem, 8.90625vw, 10.6875rem);
  background-color: #000;
  border-radius: 999px;
  left: 0;
  bottom: 0;
  transform: translateY(80%) translateX(-50%) rotate(-10deg);
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 10;
  color: hsl(191, 94%, 69%);
  font-size: clamp(1rem, 1.9791666667vw, 2.375rem);
  font-weight: bold;
}
@media screen and (min-width: 45em) {
  .quick-link {
    transform: translateY(85%) translateX(-75%) rotate(-10deg);
  }
}
.quick-link:hover, .quick-link:focus, .quick-link:active {
  color: hsl(191, 94%, 69%);
}
.quick-link__inverted {
  font-size: clamp(1rem, 1.5583333333vw, 1.87rem);
  background-color: hsl(191, 94%, 69%);
  color: #000;
}
.quick-link__inverted:hover, .quick-link__inverted:focus, .quick-link__inverted:active {
  color: #000;
}

[aria-controls=sitemap] {
  --width: 3.5rem;
  position: relative;
  display: block;
  width: var(--width);
  background: transparent;
  border: none;
  cursor: pointer;
}
[aria-controls=sitemap] .hamburger__line {
  transition: y 0.25s 0.25s, transform 0.25s, opacity 0s 0.25s;
  transform-origin: center;
}
[aria-controls=sitemap][aria-expanded=true] .hamburger {
  --hamburger-color: #000;
}
[aria-controls=sitemap][aria-expanded=true] .hamburger__line {
  transition: y 0.25s, transform 0.25s 0.25s, opacity 0s 0.25s;
  transform-origin: center;
}
[aria-controls=sitemap][aria-expanded=true] .hamburger__top, [aria-controls=sitemap][aria-expanded=true] .hamburger__bottom {
  y: 45;
}
[aria-controls=sitemap][aria-expanded=true] .hamburger__top {
  transform: rotate(45deg);
}
[aria-controls=sitemap][aria-expanded=true] .hamburger__bottom {
  transform: rotate(-45deg);
}
[aria-controls=sitemap][aria-expanded=true] .hamburger__middle {
  opacity: 0;
}

[aria-controls=dashboard] {
  --width: 3.5rem;
  position: relative;
  display: block;
  width: var(--width);
  height: var(--width);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 1;
  transition: width 0.25s, opacity 0.25s;
}
[aria-controls=dashboard].hidden {
  width: 0;
  opacity: 0;
}
[aria-controls=dashboard] .dashboard {
  --hamburger-color: #000;
}
[aria-controls=dashboard] .dashboard__outline {
  fill: none;
}

.dashboard {
  background-color: #000;
  width: 85%;
  min-height: 100%;
  position: absolute;
  bottom: 0;
  padding: 2.25rem;
  padding-bottom: 0;
  right: 0;
  color: #fff;
  border-top-right-radius: 2rem;
  opacity: 0;
  transform: translateY(100%);
  transition: all 200ms;
  z-index: 12;
}
@media screen and (min-width: 45em) {
  .dashboard {
    width: 45%;
    padding: 3.25rem;
  }
}
@media screen and (min-width: 65em) {
  .dashboard {
    width: 45%;
    padding: 6.25rem;
  }
}
.dashboard [aria-controls=close] {
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.dashboard[data-visible=false] {
  opacity: 0;
  transform: translateY(100%);
  visibility: hidden;
  overflow: hidden;
  height: 0;
  width: 0;
  padding: 0;
}
.dashboard[data-visible=true] {
  opacity: 1;
  transform: translateY(0);
}
.dashboard .underline {
  text-decoration-color: white;
}
.dashboard ul {
  margin: 2rem 0;
  list-style: none;
}
.dashboard ul li {
  display: flex;
  align-items: center;
  padding: 0.35rem 0;
}
.dashboard ul li a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.6666666667vw, 2rem);
}
.dashboard ul li {
  background-image: url("../img/icon-type-times.svg"); /* Hintergrundbild für die Listenpunkte */
  background-repeat: no-repeat; /* Hintergrundbild nicht wiederholen */
  background-position: center left;
  padding-left: clamp(2rem, 3.3333333333vw, 4rem);
  background-size: clamp(1.25rem, 2.0833333333vw, 2.5rem);
}
.dashboard ul li.done {
  background-image: url("../img/icon-type-check.svg");
}

h1, .h1, h2, .h2, h3, .h3 {
  line-height: 1.15;
  width: fit-content;
}
@media screen and (min-width: 45em) {
  h1, .h1, h2, .h2, h3, .h3 {
    line-height: 0.95;
  }
}

h1, .h1 {
  font-size: clamp(2.15625rem, 7.1875vw, 8.625rem);
  font-weight: 900;
}

h2, .h2 {
  font-size: clamp(1.47rem, 4.375vw, 5.25rem);
  font-weight: 900;
}

h3, .h3 {
  font-size: clamp(1.09375rem, 2.6041666667vw, 3.125rem);
  font-weight: 900;
}

h5, .h5 {
  font-size: clamp(0.7rem, 1.6666666667vw, 2rem);
  font-weight: 700;
}

p {
  font-size: clamp(0.9rem, 1.6666666667vw, 2rem);
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

cite {
  font-size: clamp(0.7rem, 1.3333333333vw, 1.6rem);
}

[data-page] p {
  font-size: clamp(0.9rem, 1.6666666667vw, 2rem);
}

strong {
  font-weight: 500;
}

.h1-height {
  height: clamp(3.45rem, 7.1875vw, 8.625rem);
}

.icon-button {
  display: inline-block;
  vertical-align: bottom;
  width: clamp(3.71875rem, 6.1979166667vw, 7.4375rem);
}

.icon-type {
  display: inline-block;
  vertical-align: bottom;
  width: clamp(1.78125rem, 2.96875vw, 3.5625rem);
  height: clamp(1.78125rem, 2.96875vw, 3.5625rem);
  background-size: cover;
  background-image: url("../img/icon-type-empty.svg");
}
.icon-type__minus {
  background-image: url("../img/icon-type-minus.svg");
}
.icon-type__times {
  background-image: url("../img/icon-type-times.svg");
}
.icon-type__check {
  background-image: url("../img/icon-type-check.svg");
}

.interview {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.interview__inner {
  background-color: hsl(162, 25%, 90%);
  border-radius: 2rem;
  width: 80%;
  height: auto;
  padding: 3rem;
  border-style: solid;
  border-color: hsl(351, 100%, 69%);
  border-width: 10px;
}

.feedback-overlay {
  position: fixed;
  background-color: black;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 1.25rem;
  opacity: 0;
  transform: translateY(300%);
  transition: transform 200ms, opacity 300ms;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 2rem;
  z-index: 12;
}
@media screen and (min-width: 45em) {
  .feedback-overlay {
    grid-template-columns: 10fr 1fr;
    padding: 6.25rem;
  }
}
.feedback-overlay__active {
  opacity: 1;
  transform: translateY(0);
}
.feedback-overlay__question {
  grid-column: 1/-1;
  color: white;
}
.feedback-overlay__question h5 {
  color: white !important;
}
.feedback-overlay__content {
  display: grid;
  grid-row-gap: 2rem;
}
.feedback-overlay h5 {
  color: #FF6079;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  max-width: 85%;
}
@media screen and (min-width: 45em) {
  .feedback-overlay h5 {
    width: 100%;
  }
}
.feedback-overlay__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  background-color: #DEEBE7;
}
@media screen and (min-width: 45em) {
  .feedback-overlay__card {
    grid-template-columns: min-content 1fr;
  }
}
.feedback-overlay__card .fail-text {
  display: none;
}
.feedback-overlay__card_active {
  border: 12px solid #fff;
}
.feedback-overlay__card_active .fail-text {
  display: inline;
}
.feedback-overlay__correct {
  background-color: hsl(191, 94%, 69%);
}
.feedback-overlay__correct h5 {
  color: inherit;
}
.feedback-overlay__card-icon {
  font-weight: 900;
  transform: translateY(-2%);
  text-align: center;
  position: absolute;
  right: 0.35rem;
  top: 0.35rem;
}
@media screen and (min-width: 45em) {
  .feedback-overlay__card-icon {
    position: static;
    padding-inline: 2rem;
  }
}
.feedback-overlay__card-icon svg {
  width: clamp(2.975rem, 6.1979166667vw, 7.4375rem);
  max-width: unset;
  height: auto;
}
.feedback-overlay__text {
  padding-right: 1rem;
  padding-left: 1rem;
  padding-block: 1rem;
}
@media screen and (min-width: 45em) {
  .feedback-overlay__text {
    padding-right: 2rem;
    padding-left: 0;
    padding-block: 2rem;
  }
}
.feedback-overlay__action {
  align-self: end;
  text-align: right;
}
.feedback-overlay__action button {
  width: clamp(2.975rem, 6.1979166667vw, 7.4375rem);
}

.list {
  padding: 0 2rem 2rem 2rem;
}
.list li {
  padding-bottom: 0.35rem;
  font-size: clamp(0.9rem, 1.6666666667vw, 2rem);
}

.bullets {
  padding: 1rem 0 2rem 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 45em) {
  .bullets {
    grid-template-columns: 40% 40%;
  }
}
.bullets li {
  padding-bottom: 0.35rem;
  font-size: clamp(0.9rem, 1.6666666667vw, 2rem);
  padding-left: 1.65rem;
  position: relative;
}
.bullets li a {
  font-weight: 600;
}
.bullets li:before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  left: 0;
  top: 0.6em;
  transform: translateY(-50%);
  display: inline-block;
  margin-right: 0.5rem;
  border-radius: 0.65rem;
  background-color: hsl(191, 94%, 69%);
}

.partner {
  flex-wrap: nowrap;
}
.partner__logo {
  flex-grow: 1;
  width: 25%;
}
.partner__logo img {
  width: 100%;
  height: auto;
}
.partner__text {
  width: 75%;
}

.progress-nav {
  width: 100%;
  margin-top: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: nowrap;
}
@media screen and (min-width: 45em) {
  .progress-nav {
    margin-top: 2rem;
  }
}
.progress-nav__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 77%;
}
.progress-nav__steps li {
  min-width: 1rem;
}
.progress-nav__steps li a {
  display: block;
  width: 100%;
  height: clamp(0.75rem, 1.0416666667vw, 1.25rem);
  width: clamp(2.25rem, 4.5138888889vw, 5.4166666667rem);
  max-width: 100%;
  background-color: hsl(191, 94%, 69%);
}
.progress-nav__steps li.active a {
  background-color: hsl(351, 100%, 69%);
}
.progress-nav__steps li.active ~ li a {
  background-color: hsl(0, 100%, 1%);
}
.progress-nav__controls {
  justify-self: end;
}
.progress-nav__controls a svg, .progress-nav__controls button svg {
  width: clamp(3.25rem, 6.1979166667vw, 7.4375rem);
  height: clamp(3.25rem, 6.1979166667vw, 7.4375rem);
}
.progress-nav__controls a {
  order: 2;
}
@media screen and (min-width: 45em) {
  .progress-nav__controls a {
    order: 1;
  }
}
.progress-nav__controls button {
  order: 1;
}
@media screen and (min-width: 45em) {
  .progress-nav__controls button {
    order: 2;
  }
}

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

.balance-figure {
  position: relative;
  background-image: url("../img/balance-neutral.png");
  width: clamp(11.1875rem, 18.4895833333vw, 22.1875rem);
  aspect-ratio: 14/10;
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
}
.balance-figure__pro {
  background-image: url("../img/balance-pro.png");
}
.balance-figure__contra {
  background-image: url("../img/balance-contra.png");
}

.balance-count {
  position: absolute;
  display: block;
  width: 20%;
  text-align: center;
  font-size: clamp(1.25rem, 1.6666666667vw, 2rem);
}
.balance-count__pro {
  left: 10%;
  top: 28%;
}
.balance-count__pro.up {
  top: 17%;
}
.balance-count__pro.bottom {
  top: 37%;
}
.balance-count__contra {
  right: 7%;
  top: 28%;
}
.balance-count__contra.up {
  top: 17%;
  right: 10%;
}
.balance-count__contra.bottom {
  top: 37%;
  right: 10%;
}

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

.alcohol-figure {
  background-image: url("../img/alcohol-group.svg");
  width: clamp(8.1875rem, 12.65625vw, 15.1875rem);
  aspect-ratio: 17/9;
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
}

input[type=number] {
  max-width: 100px;
}

input[name="standard_count[]"] {
  all: unset;
  max-width: 8rem;
  text-align: right;
}

.radio-group {
  align-items: start;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(auto-fill, minmax(25vw, 1fr));
  width: 90%;
  grid-gap: clamp(1.25rem, 2.9166666667vw, 3.5rem);
  justify-items: center;
}
@media screen and (min-width: 45em) {
  .radio-group {
    grid-template-columns: repeat(auto-fit, minmax(9vw, max-content));
  }
}

.custom-radio {
  text-align: center;
}
.custom-radio__dot {
  width: clamp(2.75rem, 6.1979166667vw, 7.4375rem);
  height: clamp(2.75rem, 6.1979166667vw, 7.4375rem);
  border-style: solid;
  border-color: hsl(0, 100%, 1%);
  border-width: clamp(0.6175rem, 1.1458333333vw, 1.375rem);
  border-radius: 50%; /* Kreisform */
  margin-inline: auto;
}
.custom-radio__label {
  font-size: clamp(0.84rem, 1.6666666667vw, 2rem);
  margin: 0.5rem 0;
  max-width: 16rem;
}
input:checked + .custom-radio__dot {
  background-color: hsl(191, 94%, 69%);
}
.custom-radio input {
  opacity: 0;
  position: absolute;
}

.custom-radio-abc .custom-radio__dot {
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-radio-abc .custom-radio__dot:after {
  content: "A";
  font-size: clamp(0.9835rem, 2.3416666667vw, 2.81rem);
  font-weight: 900;
  transform: translateY(-2%);
}

.custom-radio-abc:nth-of-type(2) .custom-radio__dot:after {
  content: "B";
}

.custom-radio-abc:nth-of-type(3) .custom-radio__dot:after {
  content: "C";
}

.custom-radio-abc:nth-of-type(4) .custom-radio__dot:after {
  content: "D";
}

.custom-radio-abc:nth-of-type(5) .custom-radio__dot:after {
  content: "E";
}

.custom-radio-abc:nth-of-type(6) .custom-radio__dot:after {
  content: "F";
}

button[type=submit],
button[type=button] {
  appearance: none;
  padding: 0;
  line-height: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.alert {
  background-color: hsl(351, 100%, 69%);
  color: hsl(0, 100%, 1%);
  padding: 1.5rem;
  font-size: clamp(1rem, 1.6666666667vw, 2rem);
}

/* -----------------------------------------------------------------
 * Konsumfrei-Bereich (Nicht-Konsumierende)
 * -------------------------------------------------------------- */
/* Aktiver Menuepunkt in der Hauptnavigation */
body.konsumfrei nav.main .nav li.active a {
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 0.12em;
  text-decoration-color: hsl(191, 94%, 69%);
}

/* Fliesstext aus dem WYSIWYG: Listen, Zwischenueberschriften, Links */
.rich-text {
  width: 100%;
}
.rich-text h2, .rich-text h3, .rich-text h4, .rich-text h5 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  width: auto;
}
.rich-text h3 {
  font-size: clamp(1.09375rem, 2.6041666667vw, 3.125rem);
  font-weight: 900;
}
.rich-text h4, .rich-text h5 {
  font-size: clamp(0.9rem, 1.6666666667vw, 2rem);
  font-weight: 700;
}
.rich-text > :first-child {
  margin-top: 0;
}
.rich-text ul, .rich-text ol {
  margin: 0 0 1.25rem 0;
  padding: 0;
  list-style: none;
}
.rich-text ul li, .rich-text ol li {
  position: relative;
  padding-left: 1.65rem;
  padding-bottom: 0.35rem;
  font-size: clamp(0.9rem, 1.6666666667vw, 2rem);
  letter-spacing: -0.01em;
}
.rich-text ul li:before, .rich-text ol li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  transform: translateY(-50%);
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background-color: hsl(191, 94%, 69%);
}
.rich-text ol {
  counter-reset: kf-list;
}
.rich-text ol li:before {
  content: counter(kf-list) ".";
  counter-increment: kf-list;
  background: none;
  width: auto;
  height: auto;
  top: 0;
  transform: none;
  font-weight: 700;
}
.rich-text a {
  color: hsl(0, 100%, 1%);
  text-decoration: underline;
  text-decoration-color: hsl(191, 94%, 69%);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.15em;
}
.rich-text a:is(:hover, :focus) {
  text-decoration-color: hsl(0, 100%, 1%);
}
.rich-text strong, .rich-text b {
  font-weight: 700;
}

/* Teaser-Liste auf der Landingpage: wie ul.bullets auf /kokain-information/ */
.teasers {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  column-gap: 2rem;
  row-gap: 0.5rem;
}
@media screen and (min-width: 45em) {
  .teasers {
    grid-template-columns: 1fr 1fr;
    column-gap: 5rem;
  }
}
.teasers li {
  display: grid;
  align-content: start;
  padding-bottom: 1.5rem;
}

/* Abgesetzter Hinweis (z.B. Link zur Plattform fuer Konsumierende) */
.rich-text .kf-note {
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 2px solid hsl(0, 100%, 1%);
  font-size: clamp(0.8rem, 1.3333333333vw, 1.6rem);
}

.teaser__title {
  display: inline-block;
  font-weight: 600;
  color: hsl(0, 100%, 1%);
  text-decoration: none;
  line-height: 1.15;
}
.teaser__title:is(:hover, :focus) {
  color: hsl(0, 100%, 1%);
  text-decoration: underline;
  text-decoration-color: hsl(191, 94%, 69%);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.15em;
}
.teaser__text {
  display: block;
  margin-top: 0.5rem;
  font-size: clamp(0.8rem, 1.3333333333vw, 1.6rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Akkordeon */
.accordion {
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: 3.75rem;
  border-top: 2px solid hsl(0, 100%, 1%);
}
.accordion__item {
  border-bottom: 2px solid hsl(0, 100%, 1%);
}
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
}
.accordion__summary::-webkit-details-marker {
  display: none;
}
.accordion__summary:is(:hover, :focus-visible) .accordion__icon {
  background-color: hsl(0, 100%, 1%);
}
.accordion__summary:is(:hover, :focus-visible) .accordion__icon:before, .accordion__summary:is(:hover, :focus-visible) .accordion__icon:after {
  background-color: hsl(191, 94%, 69%);
}
.accordion__title {
  font-size: clamp(1rem, 2.0833333333vw, 2.5rem);
  font-weight: 900;
  line-height: 1.1;
  transition: color 0.15s ease;
}
.accordion__icon {
  flex: 0 0 auto;
  position: relative;
  width: clamp(1.75rem, 2.5vw, 3rem);
  height: clamp(1.75rem, 2.5vw, 3rem);
  border-radius: 50%;
  background-color: hsl(191, 94%, 69%);
}
.accordion__icon:before, .accordion__icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45%;
  height: 12%;
  background-color: hsl(0, 100%, 1%);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
.accordion__icon:after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.accordion__item[open] .accordion__icon:after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.accordion__item[open] .accordion__icon {
  background-color: hsl(0, 100%, 1%);
}
.accordion__item[open] .accordion__icon:before, .accordion__item[open] .accordion__icon:after {
  background-color: hsl(191, 94%, 69%);
}
.accordion__content {
  padding: 0 0 2rem 0;
}
@media screen and (min-width: 45em) {
  .accordion__content {
    padding-right: 12%;
  }
}

/* Kapitelnavigation */
.chapter-nav__back {
  margin: 0;
  align-self: center;
}
.chapter-nav__back a {
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(1rem, 1.6666666667vw, 2rem);
}
.chapter-nav__back a:is(:hover, :focus) {
  text-decoration: underline;
}
.chapter-nav .progress-nav__steps li a {
  cursor: pointer;
}

/* Quiz */
.quiz {
  width: 100%;
}
.quiz__view {
  width: 100%;
}
.quiz__notice {
  margin-top: 1.5rem;
  width: fit-content;
}
.quiz__nav .progress-nav__controls {
  align-items: center;
}
.quiz__nav [hidden] {
  display: none !important;
}
.quiz__result ul li a {
  font-weight: 700;
}

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