/* === CSS: a-reset.css [root] === */
@font-face {
  font-family: "K2D";
  src: url("/fonts/k2d/K2D-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "K2D";
  src: url("/fonts/k2d/K2D-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "K2D";
  src: url("/fonts/k2d/K2D-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "K2D";
  src: url("/fonts/k2d/K2D-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "K2D";
  src: url("/fonts/k2d/K2D-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "K2D";
  src: url("/fonts/k2d/K2D-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

/* css clean up */

* {
  /* font-family: 'Baloo2', sans-serif; font-weight: 300; */
  font-family: "K2D", sans-serif;
  font-weight: 400;

  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;

  /* user-select: none; */
  /* -webkit-user-select: none; */
  /* -ms-user-select: none; */

  -webkit-user-drag: none;

  word-wrap: break-word;

  /*border: 1px solid red;*/
  color: var(--color-dark-200);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  cursor: default;
}

.no-arrows::-webkit-outer-spin-button,
.no-arrows::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.no-arrows {
  -moz-appearance: textfield; /* Firefox */
}

.inpextra {
  position: fixed;
  left: -500vw;
  right: -500vw;
  opacity: 0;
  pointer-events: none;
}
a,
a:hover *,
button,
button *,
input[type="submit"] {
  cursor: pointer;
}
fieldset {
  border: unset;
}

/* === CSS: b-page-form.css [root] === */
fieldset {
  /* width: 100%; */
  /* display: grid; */
  /* grid-auto-flow: column; */
  /* grid-template: 1fr / 2fr; */
  /* gap: 1rem; */
  margin-top: 1rem;
  margin-bottom: 1rem;
  position: relative;
}
.account-details fieldset {
  margin-top: 0;
}
label {
  text-align: left;
  white-space: nowrap;
  color: var(--dark-500);
}
label i {
  color: var(--dark-100);
}
input,
select,
textfield,
textarea,
.input-style {
  width: 14rem;
}
textarea.wider {
  width: 100%;
}
textarea.higher {
  min-height: 4rem;
}
textarea.height {
  min-height: 8rem;
}
.vertical {
  grid-auto-flow: row;
}
.input-space {
  width: 100%;
  text-align: left;
}




/* switch */

.switch {
  display: inline-flex;
  margin: 0 5px 0 5px;
}
.switch input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}
.switch input[type="checkbox"]:checked + label {
  background: var(--color-bg-500);
}
.switch input[type="checkbox"]:checked + label::after {
  left: calc(100% - 4px);
  transform: translateX(-100%);
  background: var(--color-800);
}

.switch input[type="radio"] {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}
.switch input[type="radio"]:checked + label {
  background: #66aa66;
}
.switch input[type="radio"]:checked + label::after {
  left: calc(100% - 4px);
  transform: translateX(-100%);
}

.switch label {
  cursor: pointer;
  width: 48px;
  height: 24px;
  background: var(--dark-bg-100);
  display: block;
  border-radius: 24px;
  position: relative;

  box-shadow: inset 1px 1px 2px var(--dark-900),
    inset -1px -1px 2px var(--white-100);
}
.switch label::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background: var(--white-500);
  border-radius: 16px;
  transition: 0.2s;
  box-shadow: 1px 1px 2px var(--dark-900), -1px -1px 2px var(--white-100);
}


.switch.radio label {
  width: 32px;
  height: 32px;
}
.switch.radio input[type="radio"] + label::after {
  left: 8px;
  top: 8px;
}
.switch.radio input[type="radio"]:checked + label::after {
  left: 8px;
  transform: none;
}

.match-dropdown {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.match-dropdown option {
  background-color: inherit;
  color: inherit;
}

/* mobile */

button {
  transition: opacity 0.3s ease;
}
button[disabled] {
  opacity: 0.3;
}

.inpextra {
  position: absolute;
  top: 9999vh;
  left: 9999vw;
}

.inputGrow {
  resize: vertical;
  field-sizing: content;
  min-height: 8rem;
  max-height: 20rem;
}

.position-relative {
  position: relative;
}
a.passwordEye {
  position: absolute;
  right: 0.7rem;
  display: inline-block;
  width: 1.7rem;
  height: 1.7rem;
  opacity: 0.4;
  transition: opacity 0.2s ease-in-out;
  background-size: 70%;
  background-position: center 60%;
  background-repeat: no-repeat;
  background-image: url(/images/icons/eye-hide.svg);
  bottom: 0.35rem;
}
/* === CSS: b-page-login.css [root] === */
.login {
  width: 100%;
}
.login-flex {
  margin: auto;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
.login-wrap {
  width: min(40rem, 90%);
}
.login-lock {
  height: 7rem;
  aspect-ratio: 152.5 / 236.1;
}

.input-space:has(> .strength-meter) {
  padding: 0 0.2rem;
  margin-top: -0.2rem;
}
.strength-meter {
  height: 10px;
  width: 100%;
  background-color: #e0e0e033;
  border-radius: 0.2rem;
  overflow: hidden;
}
.strength-meter-fill {
  height: 100%;
  width: 0;
  background-color: red;
  transition: width 0.3s ease;
}
.strength-meter-fill.weak {
  background-color: red;
}
.strength-meter-fill.medium {
  background-color: orange;
}
.strength-meter-fill.strong {
  background-color: rgb(15, 167, 15);
}
.strength-text {
  margin-top: 5px;
  font-size: 0.9em;
  color: var(--akzent);
}
.border-shadow-100:has(> .password) {
  padding: 0 2rem 0 0;
  border-radius: 0.5rem;
  transition-property: outline, opacity, border, background-color, color;
  transition-duration: 0.2s;
}
.password {
  border: none;
  outline: none;
}
.border-shadow-100:has(> .password:focus) {
  outline: 1px solid hsl(from var(--color-accent) h calc(s * 1.2) calc(l * 0.8));
  border-color: hsl(from var(--color-accent) h calc(s * 1.2) calc(l * 0.8));
}
.border-shadow-100:has(> .password:user-invalid:focus) {
  outline: 1px solid red;
  border-color: red;
  color: red;
  background-color: #FFE4E3;
}
.border-shadow-100:has(> .password:user-invalid) {
  border-color: red;
  color: red;
  background-color: #FFE4E3;
}

/* === CSS: b-root.css [root] === */
body,
html {
  height: 100%;
  margin: 0;
}
:root {
  --z-base: 0;
  --z-cms: 10;
  --z-nav: 50;
  --z-cms-controls: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-max: 9999;
}

/* === CSS: c-sizing.css [root] === */
:root {
  --size-25: 0.25rem;
  --size-50: 0.50rem;
  --size-75: 0.75rem;
  --size-100: 1.00rem;
  --size-125: 1.25rem;
  --size-150: 1.50rem;
  --size-175: 1.75rem;
  --size-200: 2.00rem;
  --size-225: 2.25rem;
  --size-250: 2.50rem;
  --size-275: 2.75rem;
  --size-300: 3.00rem;
  --size-325: 3.25rem;
  --size-350: 3.50rem;
  --size-375: 3.75rem;
  --size-400: 4.00rem;
  --size-425: 4.25rem;
  --size-450: 4.50rem;
  --size-475: 4.75rem;
  --size-500: 5.00rem;
  --size-525: 5.25rem;
  --size-550: 5.50rem;
  --size-575: 5.75rem;
  --size-600: 6.00rem;
  --size-625: 6.25rem;
  --size-650: 6.50rem;
  --size-675: 6.75rem;
  --size-700: 7.00rem;
  --size-725: 7.25rem;
  --size-750: 7.50rem;
  --size-775: 7.75rem;
  --size-800: 8.00rem;
  --size-825: 8.25rem;
  --size-850: 8.50rem;
  --size-875: 8.75rem;
  --size-900: 9.00rem;
  --size-925: 9.25rem;
  --size-950: 9.50rem;
  --size-975: 9.75rem;
  --size-1000: 10.00rem;
  --size-1500: 15.00rem;
  --size-2000: 20.00rem;
}

.height-25   { height: var(--size-25); }
.height-50   { height: var(--size-50); }
.height-75   { height: var(--size-75); }
.height-100  { height: var(--size-100); }
.height-125  { height: var(--size-125); }
.height-150  { height: var(--size-150); }
.height-175  { height: var(--size-175); }
.height-200  { height: var(--size-200); }
.height-225  { height: var(--size-225); }
.height-250  { height: var(--size-250); }
.height-275  { height: var(--size-275); }
.height-300  { height: var(--size-300); }
.height-325  { height: var(--size-325); }
.height-350  { height: var(--size-350); }
.height-375  { height: var(--size-375); }
.height-400  { height: var(--size-400); }
.height-425  { height: var(--size-425); }
.height-450  { height: var(--size-450); }
.height-475  { height: var(--size-475); }
.height-500  { height: var(--size-500); }
.height-525  { height: var(--size-525); }
.height-550  { height: var(--size-550); }
.height-575  { height: var(--size-575); }
.height-600  { height: var(--size-600); }
.height-625  { height: var(--size-625); }
.height-650  { height: var(--size-650); }
.height-675  { height: var(--size-675); }
.height-700  { height: var(--size-700); }
.height-725  { height: var(--size-725); }
.height-750  { height: var(--size-750); }
.height-775  { height: var(--size-775); }
.height-800  { height: var(--size-800); }
.height-825  { height: var(--size-825); }
.height-850  { height: var(--size-850); }
.height-875  { height: var(--size-875); }
.height-900  { height: var(--size-900); }
.height-925  { height: var(--size-925); }
.height-950  { height: var(--size-950); }
.height-975  { height: var(--size-975); }
.height-1000 { height: var(--size-1000); }
.height-1500 { height: var(--size-1500); }
.height-2000 { height: var(--size-2000); }


.width-25   { width: var(--size-25); }
.width-50   { width: var(--size-50); }
.width-75   { width: var(--size-75); }
.width-100  { width: var(--size-100); }
.width-125  { width: var(--size-125); }
.width-150  { width: var(--size-150); }
.width-175  { width: var(--size-175); }
.width-200  { width: var(--size-200); }
.width-225  { width: var(--size-225); }
.width-250  { width: var(--size-250); }
.width-275  { width: var(--size-275); }
.width-300  { width: var(--size-300); }
.width-325  { width: var(--size-325); }
.width-350  { width: var(--size-350); }
.width-375  { width: var(--size-375); }
.width-400  { width: var(--size-400); }
.width-425  { width: var(--size-425); }
.width-450  { width: var(--size-450); }
.width-475  { width: var(--size-475); }
.width-500  { width: var(--size-500); }
.width-525  { width: var(--size-525); }
.width-550  { width: var(--size-550); }
.width-575  { width: var(--size-575); }
.width-600  { width: var(--size-600); }
.width-625  { width: var(--size-625); }
.width-650  { width: var(--size-650); }
.width-675  { width: var(--size-675); }
.width-700  { width: var(--size-700); }
.width-725  { width: var(--size-725); }
.width-750  { width: var(--size-750); }
.width-775  { width: var(--size-775); }
.width-800  { width: var(--size-800); }
.width-825  { width: var(--size-825); }
.width-850  { width: var(--size-850); }
.width-875  { width: var(--size-875); }
.width-900  { width: var(--size-900); }
.width-925  { width: var(--size-925); }
.width-950  { width: var(--size-950); }
.width-975  { width: var(--size-975); }
.width-1000 { width: var(--size-1000); }
.width-1500 { width: var(--size-1500); }
.width-2000 { width: var(--size-2000); }


.min-width-25   { min-width: var(--size-25); }
.min-width-50   { min-width: var(--size-50); }
.min-width-75   { min-width: var(--size-75); }
.min-width-100  { min-width: var(--size-100); }
.min-width-125  { min-width: var(--size-125); }
.min-width-150  { min-width: var(--size-150); }
.min-width-175  { min-width: var(--size-175); }
.min-width-200  { min-width: var(--size-200); }
.min-width-225  { min-width: var(--size-225); }
.min-width-250  { min-width: var(--size-250); }
.min-width-275  { min-width: var(--size-275); }
.min-width-300  { min-width: var(--size-300); }
.min-width-325  { min-width: var(--size-325); }
.min-width-350  { min-width: var(--size-350); }
.min-width-375  { min-width: var(--size-375); }
.min-width-400  { min-width: var(--size-400); }
.min-width-425  { min-width: var(--size-425); }
.min-width-450  { min-width: var(--size-450); }
.min-width-475  { min-width: var(--size-475); }
.min-width-500  { min-width: var(--size-500); }
.min-width-525  { min-width: var(--size-525); }
.min-width-550  { min-width: var(--size-550); }
.min-width-575  { min-width: var(--size-575); }
.min-width-600  { min-width: var(--size-600); }
.min-width-625  { min-width: var(--size-625); }
.min-width-650  { min-width: var(--size-650); }
.min-width-675  { min-width: var(--size-675); }
.min-width-700  { min-width: var(--size-700); }
.min-width-725  { min-width: var(--size-725); }
.min-width-750  { min-width: var(--size-750); }
.min-width-775  { min-width: var(--size-775); }
.min-width-800  { min-width: var(--size-800); }
.min-width-825  { min-width: var(--size-825); }
.min-width-850  { min-width: var(--size-850); }
.min-width-875  { min-width: var(--size-875); }
.min-width-900  { min-width: var(--size-900); }
.min-width-925  { min-width: var(--size-925); }
.min-width-950  { min-width: var(--size-950); }
.min-width-975  { min-width: var(--size-975); }
.min-width-1000 { min-width: var(--size-1000); }
.min-width-1500 { min-width: var(--size-1500); }
.min-width-2000 { min-width: var(--size-2000); }


.marg-25 { margin: var(--size-25); }
.marg-top-25 { margin-top: var(--size-25); }
.marg-bottom-25 { margin-bottom: var(--size-25); }
.marg-left-25 { margin-left: var(--size-25); }
.marg-right-25 { margin-right: var(--size-25); }
.marg-x-25 { margin-left: var(--size-25); margin-right: var(--size-25); }
.marg-y-25 { margin-top: var(--size-25); margin-bottom: var(--size-25); }
.marg-50 { margin: var(--size-50); }
.marg-top-50 { margin-top: var(--size-50); }
.marg-bottom-50 { margin-bottom: var(--size-50); }
.marg-left-50 { margin-left: var(--size-50); }
.marg-right-50 { margin-right: var(--size-50); }
.marg-x-50 { margin-left: var(--size-50); margin-right: var(--size-50); }
.marg-y-50 { margin-top: var(--size-50); margin-bottom: var(--size-50); }
.marg-75 { margin: var(--size-75); }
.marg-top-75 { margin-top: var(--size-75); }
.marg-bottom-75 { margin-bottom: var(--size-75); }
.marg-left-75 { margin-left: var(--size-75); }
.marg-right-75 { margin-right: var(--size-75); }
.marg-x-75 { margin-left: var(--size-75); margin-right: var(--size-75); }
.marg-y-75 { margin-top: var(--size-75); margin-bottom: var(--size-75); }
.marg-100 { margin: var(--size-100); }
.marg-top-100 { margin-top: var(--size-100); }
.marg-bottom-100 { margin-bottom: var(--size-100); }
.marg-left-100 { margin-left: var(--size-100); }
.marg-right-100 { margin-right: var(--size-100); }
.marg-x-100 { margin-left: var(--size-100); margin-right: var(--size-100); }
.marg-y-100 { margin-top: var(--size-100); margin-bottom: var(--size-100); }
.marg-125 { margin: var(--size-125); }
.marg-top-125 { margin-top: var(--size-125); }
.marg-bottom-125 { margin-bottom: var(--size-125); }
.marg-left-125 { margin-left: var(--size-125); }
.marg-right-125 { margin-right: var(--size-125); }
.marg-x-125 { margin-left: var(--size-125); margin-right: var(--size-125); }
.marg-y-125 { margin-top: var(--size-125); margin-bottom: var(--size-125); }
.marg-150 { margin: var(--size-150); }
.marg-top-150 { margin-top: var(--size-150); }
.marg-bottom-150 { margin-bottom: var(--size-150); }
.marg-left-150 { margin-left: var(--size-150); }
.marg-right-150 { margin-right: var(--size-150); }
.marg-x-150 { margin-left: var(--size-150); margin-right: var(--size-150); }
.marg-y-150 { margin-top: var(--size-150); margin-bottom: var(--size-150); }
.marg-175 { margin: var(--size-175); }
.marg-top-175 { margin-top: var(--size-175); }
.marg-bottom-175 { margin-bottom: var(--size-175); }
.marg-left-175 { margin-left: var(--size-175); }
.marg-right-175 { margin-right: var(--size-175); }
.marg-x-175 { margin-left: var(--size-175); margin-right: var(--size-175); }
.marg-y-175 { margin-top: var(--size-175); margin-bottom: var(--size-175); }
.marg-200 { margin: var(--size-200); }
.marg-top-200 { margin-top: var(--size-200); }
.marg-bottom-200 { margin-bottom: var(--size-200); }
.marg-left-200 { margin-left: var(--size-200); }
.marg-right-200 { margin-right: var(--size-200); }
.marg-x-200 { margin-left: var(--size-200); margin-right: var(--size-200); }
.marg-y-200 { margin-top: var(--size-200); margin-bottom: var(--size-200); }
.marg-225 { margin: var(--size-225); }
.marg-top-225 { margin-top: var(--size-225); }
.marg-bottom-225 { margin-bottom: var(--size-225); }
.marg-left-225 { margin-left: var(--size-225); }
.marg-right-225 { margin-right: var(--size-225); }
.marg-x-225 { margin-left: var(--size-225); margin-right: var(--size-225); }
.marg-y-225 { margin-top: var(--size-225); margin-bottom: var(--size-225); }
.marg-250 { margin: var(--size-250); }
.marg-top-250 { margin-top: var(--size-250); }
.marg-bottom-250 { margin-bottom: var(--size-250); }
.marg-left-250 { margin-left: var(--size-250); }
.marg-right-250 { margin-right: var(--size-250); }
.marg-x-250 { margin-left: var(--size-250); margin-right: var(--size-250); }
.marg-y-250 { margin-top: var(--size-250); margin-bottom: var(--size-250); }
.marg-275 { margin: var(--size-275); }
.marg-top-275 { margin-top: var(--size-275); }
.marg-bottom-275 { margin-bottom: var(--size-275); }
.marg-left-275 { margin-left: var(--size-275); }
.marg-right-275 { margin-right: var(--size-275); }
.marg-x-275 { margin-left: var(--size-275); margin-right: var(--size-275); }
.marg-y-275 { margin-top: var(--size-275); margin-bottom: var(--size-275); }
.marg-300 { margin: var(--size-300); }
.marg-top-300 { margin-top: var(--size-300); }
.marg-bottom-300 { margin-bottom: var(--size-300); }
.marg-left-300 { margin-left: var(--size-300); }
.marg-right-300 { margin-right: var(--size-300); }
.marg-x-300 { margin-left: var(--size-300); margin-right: var(--size-300); }
.marg-y-300 { margin-top: var(--size-300); margin-bottom: var(--size-300); }
.marg-325 { margin: var(--size-325); }
.marg-top-325 { margin-top: var(--size-325); }
.marg-bottom-325 { margin-bottom: var(--size-325); }
.marg-left-325 { margin-left: var(--size-325); }
.marg-right-325 { margin-right: var(--size-325); }
.marg-x-325 { margin-left: var(--size-325); margin-right: var(--size-325); }
.marg-y-325 { margin-top: var(--size-325); margin-bottom: var(--size-325); }
.marg-350 { margin: var(--size-350); }
.marg-top-350 { margin-top: var(--size-350); }
.marg-bottom-350 { margin-bottom: var(--size-350); }
.marg-left-350 { margin-left: var(--size-350); }
.marg-right-350 { margin-right: var(--size-350); }
.marg-x-350 { margin-left: var(--size-350); margin-right: var(--size-350); }
.marg-y-350 { margin-top: var(--size-350); margin-bottom: var(--size-350); }
.marg-375 { margin: var(--size-375); }
.marg-top-375 { margin-top: var(--size-375); }
.marg-bottom-375 { margin-bottom: var(--size-375); }
.marg-left-375 { margin-left: var(--size-375); }
.marg-right-375 { margin-right: var(--size-375); }
.marg-x-375 { margin-left: var(--size-375); margin-right: var(--size-375); }
.marg-y-375 { margin-top: var(--size-375); margin-bottom: var(--size-375); }
.marg-400 { margin: var(--size-400); }
.marg-top-400 { margin-top: var(--size-400); }
.marg-bottom-400 { margin-bottom: var(--size-400); }
.marg-left-400 { margin-left: var(--size-400); }
.marg-right-400 { margin-right: var(--size-400); }
.marg-x-400 { margin-left: var(--size-400); margin-right: var(--size-400); }
.marg-y-400 { margin-top: var(--size-400); margin-bottom: var(--size-400); }
.marg-425 { margin: var(--size-425); }
.marg-top-425 { margin-top: var(--size-425); }
.marg-bottom-425 { margin-bottom: var(--size-425); }
.marg-left-425 { margin-left: var(--size-425); }
.marg-right-425 { margin-right: var(--size-425); }
.marg-x-425 { margin-left: var(--size-425); margin-right: var(--size-425); }
.marg-y-425 { margin-top: var(--size-425); margin-bottom: var(--size-425); }
.marg-450 { margin: var(--size-450); }
.marg-top-450 { margin-top: var(--size-450); }
.marg-bottom-450 { margin-bottom: var(--size-450); }
.marg-left-450 { margin-left: var(--size-450); }
.marg-right-450 { margin-right: var(--size-450); }
.marg-x-450 { margin-left: var(--size-450); margin-right: var(--size-450); }
.marg-y-450 { margin-top: var(--size-450); margin-bottom: var(--size-450); }
.marg-475 { margin: var(--size-475); }
.marg-top-475 { margin-top: var(--size-475); }
.marg-bottom-475 { margin-bottom: var(--size-475); }
.marg-left-475 { margin-left: var(--size-475); }
.marg-right-475 { margin-right: var(--size-475); }
.marg-x-475 { margin-left: var(--size-475); margin-right: var(--size-475); }
.marg-y-475 { margin-top: var(--size-475); margin-bottom: var(--size-475); }
.marg-500 { margin: var(--size-500); }
.marg-top-500 { margin-top: var(--size-500); }
.marg-bottom-500 { margin-bottom: var(--size-500); }
.marg-left-500 { margin-left: var(--size-500); }
.marg-right-500 { margin-right: var(--size-500); }
.marg-x-500 { margin-left: var(--size-500); margin-right: var(--size-500); }
.marg-y-500 { margin-top: var(--size-500); margin-bottom: var(--size-500); }
.marg-525 { margin: var(--size-525); }
.marg-top-525 { margin-top: var(--size-525); }
.marg-bottom-525 { margin-bottom: var(--size-525); }
.marg-left-525 { margin-left: var(--size-525); }
.marg-right-525 { margin-right: var(--size-525); }
.marg-x-525 { margin-left: var(--size-525); margin-right: var(--size-525); }
.marg-y-525 { margin-top: var(--size-525); margin-bottom: var(--size-525); }
.marg-550 { margin: var(--size-550); }
.marg-top-550 { margin-top: var(--size-550); }
.marg-bottom-550 { margin-bottom: var(--size-550); }
.marg-left-550 { margin-left: var(--size-550); }
.marg-right-550 { margin-right: var(--size-550); }
.marg-x-550 { margin-left: var(--size-550); margin-right: var(--size-550); }
.marg-y-550 { margin-top: var(--size-550); margin-bottom: var(--size-550); }
.marg-575 { margin: var(--size-575); }
.marg-top-575 { margin-top: var(--size-575); }
.marg-bottom-575 { margin-bottom: var(--size-575); }
.marg-left-575 { margin-left: var(--size-575); }
.marg-right-575 { margin-right: var(--size-575); }
.marg-x-575 { margin-left: var(--size-575); margin-right: var(--size-575); }
.marg-y-575 { margin-top: var(--size-575); margin-bottom: var(--size-575); }
.marg-600 { margin: var(--size-600); }
.marg-top-600 { margin-top: var(--size-600); }
.marg-bottom-600 { margin-bottom: var(--size-600); }
.marg-left-600 { margin-left: var(--size-600); }
.marg-right-600 { margin-right: var(--size-600); }
.marg-x-600 { margin-left: var(--size-600); margin-right: var(--size-600); }
.marg-y-600 { margin-top: var(--size-600); margin-bottom: var(--size-600); }
.marg-625 { margin: var(--size-625); }
.marg-top-625 { margin-top: var(--size-625); }
.marg-bottom-625 { margin-bottom: var(--size-625); }
.marg-left-625 { margin-left: var(--size-625); }
.marg-right-625 { margin-right: var(--size-625); }
.marg-x-625 { margin-left: var(--size-625); margin-right: var(--size-625); }
.marg-y-625 { margin-top: var(--size-625); margin-bottom: var(--size-625); }
.marg-650 { margin: var(--size-650); }
.marg-top-650 { margin-top: var(--size-650); }
.marg-bottom-650 { margin-bottom: var(--size-650); }
.marg-left-650 { margin-left: var(--size-650); }
.marg-right-650 { margin-right: var(--size-650); }
.marg-x-650 { margin-left: var(--size-650); margin-right: var(--size-650); }
.marg-y-650 { margin-top: var(--size-650); margin-bottom: var(--size-650); }
.marg-675 { margin: var(--size-675); }
.marg-top-675 { margin-top: var(--size-675); }
.marg-bottom-675 { margin-bottom: var(--size-675); }
.marg-left-675 { margin-left: var(--size-675); }
.marg-right-675 { margin-right: var(--size-675); }
.marg-x-675 { margin-left: var(--size-675); margin-right: var(--size-675); }
.marg-y-675 { margin-top: var(--size-675); margin-bottom: var(--size-675); }
.marg-700 { margin: var(--size-700); }
.marg-top-700 { margin-top: var(--size-700); }
.marg-bottom-700 { margin-bottom: var(--size-700); }
.marg-left-700 { margin-left: var(--size-700); }
.marg-right-700 { margin-right: var(--size-700); }
.marg-x-700 { margin-left: var(--size-700); margin-right: var(--size-700); }
.marg-y-700 { margin-top: var(--size-700); margin-bottom: var(--size-700); }
.marg-725 { margin: var(--size-725); }
.marg-top-725 { margin-top: var(--size-725); }
.marg-bottom-725 { margin-bottom: var(--size-725); }
.marg-left-725 { margin-left: var(--size-725); }
.marg-right-725 { margin-right: var(--size-725); }
.marg-x-725 { margin-left: var(--size-725); margin-right: var(--size-725); }
.marg-y-725 { margin-top: var(--size-725); margin-bottom: var(--size-725); }
.marg-750 { margin: var(--size-750); }
.marg-top-750 { margin-top: var(--size-750); }
.marg-bottom-750 { margin-bottom: var(--size-750); }
.marg-left-750 { margin-left: var(--size-750); }
.marg-right-750 { margin-right: var(--size-750); }
.marg-x-750 { margin-left: var(--size-750); margin-right: var(--size-750); }
.marg-y-750 { margin-top: var(--size-750); margin-bottom: var(--size-750); }
.marg-775 { margin: var(--size-775); }
.marg-top-775 { margin-top: var(--size-775); }
.marg-bottom-775 { margin-bottom: var(--size-775); }
.marg-left-775 { margin-left: var(--size-775); }
.marg-right-775 { margin-right: var(--size-775); }
.marg-x-775 { margin-left: var(--size-775); margin-right: var(--size-775); }
.marg-y-775 { margin-top: var(--size-775); margin-bottom: var(--size-775); }
.marg-800 { margin: var(--size-800); }
.marg-top-800 { margin-top: var(--size-800); }
.marg-bottom-800 { margin-bottom: var(--size-800); }
.marg-left-800 { margin-left: var(--size-800); }
.marg-right-800 { margin-right: var(--size-800); }
.marg-x-800 { margin-left: var(--size-800); margin-right: var(--size-800); }
.marg-y-800 { margin-top: var(--size-800); margin-bottom: var(--size-800); }
.marg-825 { margin: var(--size-825); }
.marg-top-825 { margin-top: var(--size-825); }
.marg-bottom-825 { margin-bottom: var(--size-825); }
.marg-left-825 { margin-left: var(--size-825); }
.marg-right-825 { margin-right: var(--size-825); }
.marg-x-825 { margin-left: var(--size-825); margin-right: var(--size-825); }
.marg-y-825 { margin-top: var(--size-825); margin-bottom: var(--size-825); }
.marg-850 { margin: var(--size-850); }
.marg-top-850 { margin-top: var(--size-850); }
.marg-bottom-850 { margin-bottom: var(--size-850); }
.marg-left-850 { margin-left: var(--size-850); }
.marg-right-850 { margin-right: var(--size-850); }
.marg-x-850 { margin-left: var(--size-850); margin-right: var(--size-850); }
.marg-y-850 { margin-top: var(--size-850); margin-bottom: var(--size-850); }
.marg-875 { margin: var(--size-875); }
.marg-top-875 { margin-top: var(--size-875); }
.marg-bottom-875 { margin-bottom: var(--size-875); }
.marg-left-875 { margin-left: var(--size-875); }
.marg-right-875 { margin-right: var(--size-875); }
.marg-x-875 { margin-left: var(--size-875); margin-right: var(--size-875); }
.marg-y-875 { margin-top: var(--size-875); margin-bottom: var(--size-875); }
.marg-900 { margin: var(--size-900); }
.marg-top-900 { margin-top: var(--size-900); }
.marg-bottom-900 { margin-bottom: var(--size-900); }
.marg-left-900 { margin-left: var(--size-900); }
.marg-right-900 { margin-right: var(--size-900); }
.marg-x-900 { margin-left: var(--size-900); margin-right: var(--size-900); }
.marg-y-900 { margin-top: var(--size-900); margin-bottom: var(--size-900); }
.marg-925 { margin: var(--size-925); }
.marg-top-925 { margin-top: var(--size-925); }
.marg-bottom-925 { margin-bottom: var(--size-925); }
.marg-left-925 { margin-left: var(--size-925); }
.marg-right-925 { margin-right: var(--size-925); }
.marg-x-925 { margin-left: var(--size-925); margin-right: var(--size-925); }
.marg-y-925 { margin-top: var(--size-925); margin-bottom: var(--size-925); }
.marg-950 { margin: var(--size-950); }
.marg-top-950 { margin-top: var(--size-950); }
.marg-bottom-950 { margin-bottom: var(--size-950); }
.marg-left-950 { margin-left: var(--size-950); }
.marg-right-950 { margin-right: var(--size-950); }
.marg-x-950 { margin-left: var(--size-950); margin-right: var(--size-950); }
.marg-y-950 { margin-top: var(--size-950); margin-bottom: var(--size-950); }
.marg-975 { margin: var(--size-975); }
.marg-top-975 { margin-top: var(--size-975); }
.marg-bottom-975 { margin-bottom: var(--size-975); }
.marg-left-975 { margin-left: var(--size-975); }
.marg-right-975 { margin-right: var(--size-975); }
.marg-x-975 { margin-left: var(--size-975); margin-right: var(--size-975); }
.marg-y-975 { margin-top: var(--size-975); margin-bottom: var(--size-975); }
.marg-1000 { margin: var(--size-1000); }
.marg-top-1000 { margin-top: var(--size-1000); }
.marg-bottom-1000 { margin-bottom: var(--size-1000); }
.marg-left-1000 { margin-left: var(--size-1000); }
.marg-right-1000 { margin-right: var(--size-1000); }
.marg-x-1000 { margin-left: var(--size-1000); margin-right: var(--size-1000); }
.marg-y-1000 { margin-top: var(--size-1000); margin-bottom: var(--size-1000); }
.pad-25 { padding: var(--size-25); }
.pad-top-25 { padding-top: var(--size-25); }
.pad-bottom-25 { padding-bottom: var(--size-25); }
.pad-left-25 { padding-left: var(--size-25); }
.pad-right-25 { padding-right: var(--size-25); }
.pad-x-25 { padding-left: var(--size-25); padding-right: var(--size-25); }
.pad-y-25 { padding-top: var(--size-25); padding-bottom: var(--size-25); }
.pad-50 { padding: var(--size-50); }
.pad-top-50 { padding-top: var(--size-50); }
.pad-bottom-50 { padding-bottom: var(--size-50); }
.pad-left-50 { padding-left: var(--size-50); }
.pad-right-50 { padding-right: var(--size-50); }
.pad-x-50 { padding-left: var(--size-50); padding-right: var(--size-50); }
.pad-y-50 { padding-top: var(--size-50); padding-bottom: var(--size-50); }
.pad-75 { padding: var(--size-75); }
.pad-top-75 { padding-top: var(--size-75); }
.pad-bottom-75 { padding-bottom: var(--size-75); }
.pad-left-75 { padding-left: var(--size-75); }
.pad-right-75 { padding-right: var(--size-75); }
.pad-x-75 { padding-left: var(--size-75); padding-right: var(--size-75); }
.pad-y-75 { padding-top: var(--size-75); padding-bottom: var(--size-75); }
.pad-100 { padding: var(--size-100); }
.pad-top-100 { padding-top: var(--size-100); }
.pad-bottom-100 { padding-bottom: var(--size-100); }
.pad-left-100 { padding-left: var(--size-100); }
.pad-right-100 { padding-right: var(--size-100); }
.pad-x-100 { padding-left: var(--size-100); padding-right: var(--size-100); }
.pad-y-100 { padding-top: var(--size-100); padding-bottom: var(--size-100); }
.pad-125 { padding: var(--size-125); }
.pad-top-125 { padding-top: var(--size-125); }
.pad-bottom-125 { padding-bottom: var(--size-125); }
.pad-left-125 { padding-left: var(--size-125); }
.pad-right-125 { padding-right: var(--size-125); }
.pad-x-125 { padding-left: var(--size-125); padding-right: var(--size-125); }
.pad-y-125 { padding-top: var(--size-125); padding-bottom: var(--size-125); }
.pad-150 { padding: var(--size-150); }
.pad-top-150 { padding-top: var(--size-150); }
.pad-bottom-150 { padding-bottom: var(--size-150); }
.pad-left-150 { padding-left: var(--size-150); }
.pad-right-150 { padding-right: var(--size-150); }
.pad-x-150 { padding-left: var(--size-150); padding-right: var(--size-150); }
.pad-y-150 { padding-top: var(--size-150); padding-bottom: var(--size-150); }
.pad-175 { padding: var(--size-175); }
.pad-top-175 { padding-top: var(--size-175); }
.pad-bottom-175 { padding-bottom: var(--size-175); }
.pad-left-175 { padding-left: var(--size-175); }
.pad-right-175 { padding-right: var(--size-175); }
.pad-x-175 { padding-left: var(--size-175); padding-right: var(--size-175); }
.pad-y-175 { padding-top: var(--size-175); padding-bottom: var(--size-175); }
.pad-200 { padding: var(--size-200); }
.pad-top-200 { padding-top: var(--size-200); }
.pad-bottom-200 { padding-bottom: var(--size-200); }
.pad-left-200 { padding-left: var(--size-200); }
.pad-right-200 { padding-right: var(--size-200); }
.pad-x-200 { padding-left: var(--size-200); padding-right: var(--size-200); }
.pad-y-200 { padding-top: var(--size-200); padding-bottom: var(--size-200); }
.pad-225 { padding: var(--size-225); }
.pad-top-225 { padding-top: var(--size-225); }
.pad-bottom-225 { padding-bottom: var(--size-225); }
.pad-left-225 { padding-left: var(--size-225); }
.pad-right-225 { padding-right: var(--size-225); }
.pad-x-225 { padding-left: var(--size-225); padding-right: var(--size-225); }
.pad-y-225 { padding-top: var(--size-225); padding-bottom: var(--size-225); }
.pad-250 { padding: var(--size-250); }
.pad-top-250 { padding-top: var(--size-250); }
.pad-bottom-250 { padding-bottom: var(--size-250); }
.pad-left-250 { padding-left: var(--size-250); }
.pad-right-250 { padding-right: var(--size-250); }
.pad-x-250 { padding-left: var(--size-250); padding-right: var(--size-250); }
.pad-y-250 { padding-top: var(--size-250); padding-bottom: var(--size-250); }
.pad-275 { padding: var(--size-275); }
.pad-top-275 { padding-top: var(--size-275); }
.pad-bottom-275 { padding-bottom: var(--size-275); }
.pad-left-275 { padding-left: var(--size-275); }
.pad-right-275 { padding-right: var(--size-275); }
.pad-x-275 { padding-left: var(--size-275); padding-right: var(--size-275); }
.pad-y-275 { padding-top: var(--size-275); padding-bottom: var(--size-275); }
.pad-300 { padding: var(--size-300); }
.pad-top-300 { padding-top: var(--size-300); }
.pad-bottom-300 { padding-bottom: var(--size-300); }
.pad-left-300 { padding-left: var(--size-300); }
.pad-right-300 { padding-right: var(--size-300); }
.pad-x-300 { padding-left: var(--size-300); padding-right: var(--size-300); }
.pad-y-300 { padding-top: var(--size-300); padding-bottom: var(--size-300); }
.pad-325 { padding: var(--size-325); }
.pad-top-325 { padding-top: var(--size-325); }
.pad-bottom-325 { padding-bottom: var(--size-325); }
.pad-left-325 { padding-left: var(--size-325); }
.pad-right-325 { padding-right: var(--size-325); }
.pad-x-325 { padding-left: var(--size-325); padding-right: var(--size-325); }
.pad-y-325 { padding-top: var(--size-325); padding-bottom: var(--size-325); }
.pad-350 { padding: var(--size-350); }
.pad-top-350 { padding-top: var(--size-350); }
.pad-bottom-350 { padding-bottom: var(--size-350); }
.pad-left-350 { padding-left: var(--size-350); }
.pad-right-350 { padding-right: var(--size-350); }
.pad-x-350 { padding-left: var(--size-350); padding-right: var(--size-350); }
.pad-y-350 { padding-top: var(--size-350); padding-bottom: var(--size-350); }
.pad-375 { padding: var(--size-375); }
.pad-top-375 { padding-top: var(--size-375); }
.pad-bottom-375 { padding-bottom: var(--size-375); }
.pad-left-375 { padding-left: var(--size-375); }
.pad-right-375 { padding-right: var(--size-375); }
.pad-x-375 { padding-left: var(--size-375); padding-right: var(--size-375); }
.pad-y-375 { padding-top: var(--size-375); padding-bottom: var(--size-375); }
.pad-400 { padding: var(--size-400); }
.pad-top-400 { padding-top: var(--size-400); }
.pad-bottom-400 { padding-bottom: var(--size-400); }
.pad-left-400 { padding-left: var(--size-400); }
.pad-right-400 { padding-right: var(--size-400); }
.pad-x-400 { padding-left: var(--size-400); padding-right: var(--size-400); }
.pad-y-400 { padding-top: var(--size-400); padding-bottom: var(--size-400); }
.pad-425 { padding: var(--size-425); }
.pad-top-425 { padding-top: var(--size-425); }
.pad-bottom-425 { padding-bottom: var(--size-425); }
.pad-left-425 { padding-left: var(--size-425); }
.pad-right-425 { padding-right: var(--size-425); }
.pad-x-425 { padding-left: var(--size-425); padding-right: var(--size-425); }
.pad-y-425 { padding-top: var(--size-425); padding-bottom: var(--size-425); }
.pad-450 { padding: var(--size-450); }
.pad-top-450 { padding-top: var(--size-450); }
.pad-bottom-450 { padding-bottom: var(--size-450); }
.pad-left-450 { padding-left: var(--size-450); }
.pad-right-450 { padding-right: var(--size-450); }
.pad-x-450 { padding-left: var(--size-450); padding-right: var(--size-450); }
.pad-y-450 { padding-top: var(--size-450); padding-bottom: var(--size-450); }
.pad-475 { padding: var(--size-475); }
.pad-top-475 { padding-top: var(--size-475); }
.pad-bottom-475 { padding-bottom: var(--size-475); }
.pad-left-475 { padding-left: var(--size-475); }
.pad-right-475 { padding-right: var(--size-475); }
.pad-x-475 { padding-left: var(--size-475); padding-right: var(--size-475); }
.pad-y-475 { padding-top: var(--size-475); padding-bottom: var(--size-475); }
.pad-500 { padding: var(--size-500); }
.pad-top-500 { padding-top: var(--size-500); }
.pad-bottom-500 { padding-bottom: var(--size-500); }
.pad-left-500 { padding-left: var(--size-500); }
.pad-right-500 { padding-right: var(--size-500); }
.pad-x-500 { padding-left: var(--size-500); padding-right: var(--size-500); }
.pad-y-500 { padding-top: var(--size-500); padding-bottom: var(--size-500); }
.pad-525 { padding: var(--size-525); }
.pad-top-525 { padding-top: var(--size-525); }
.pad-bottom-525 { padding-bottom: var(--size-525); }
.pad-left-525 { padding-left: var(--size-525); }
.pad-right-525 { padding-right: var(--size-525); }
.pad-x-525 { padding-left: var(--size-525); padding-right: var(--size-525); }
.pad-y-525 { padding-top: var(--size-525); padding-bottom: var(--size-525); }
.pad-550 { padding: var(--size-550); }
.pad-top-550 { padding-top: var(--size-550); }
.pad-bottom-550 { padding-bottom: var(--size-550); }
.pad-left-550 { padding-left: var(--size-550); }
.pad-right-550 { padding-right: var(--size-550); }
.pad-x-550 { padding-left: var(--size-550); padding-right: var(--size-550); }
.pad-y-550 { padding-top: var(--size-550); padding-bottom: var(--size-550); }
.pad-575 { padding: var(--size-575); }
.pad-top-575 { padding-top: var(--size-575); }
.pad-bottom-575 { padding-bottom: var(--size-575); }
.pad-left-575 { padding-left: var(--size-575); }
.pad-right-575 { padding-right: var(--size-575); }
.pad-x-575 { padding-left: var(--size-575); padding-right: var(--size-575); }
.pad-y-575 { padding-top: var(--size-575); padding-bottom: var(--size-575); }
.pad-600 { padding: var(--size-600); }
.pad-top-600 { padding-top: var(--size-600); }
.pad-bottom-600 { padding-bottom: var(--size-600); }
.pad-left-600 { padding-left: var(--size-600); }
.pad-right-600 { padding-right: var(--size-600); }
.pad-x-600 { padding-left: var(--size-600); padding-right: var(--size-600); }
.pad-y-600 { padding-top: var(--size-600); padding-bottom: var(--size-600); }
.pad-625 { padding: var(--size-625); }
.pad-top-625 { padding-top: var(--size-625); }
.pad-bottom-625 { padding-bottom: var(--size-625); }
.pad-left-625 { padding-left: var(--size-625); }
.pad-right-625 { padding-right: var(--size-625); }
.pad-x-625 { padding-left: var(--size-625); padding-right: var(--size-625); }
.pad-y-625 { padding-top: var(--size-625); padding-bottom: var(--size-625); }
.pad-650 { padding: var(--size-650); }
.pad-top-650 { padding-top: var(--size-650); }
.pad-bottom-650 { padding-bottom: var(--size-650); }
.pad-left-650 { padding-left: var(--size-650); }
.pad-right-650 { padding-right: var(--size-650); }
.pad-x-650 { padding-left: var(--size-650); padding-right: var(--size-650); }
.pad-y-650 { padding-top: var(--size-650); padding-bottom: var(--size-650); }
.pad-675 { padding: var(--size-675); }
.pad-top-675 { padding-top: var(--size-675); }
.pad-bottom-675 { padding-bottom: var(--size-675); }
.pad-left-675 { padding-left: var(--size-675); }
.pad-right-675 { padding-right: var(--size-675); }
.pad-x-675 { padding-left: var(--size-675); padding-right: var(--size-675); }
.pad-y-675 { padding-top: var(--size-675); padding-bottom: var(--size-675); }
.pad-700 { padding: var(--size-700); }
.pad-top-700 { padding-top: var(--size-700); }
.pad-bottom-700 { padding-bottom: var(--size-700); }
.pad-left-700 { padding-left: var(--size-700); }
.pad-right-700 { padding-right: var(--size-700); }
.pad-x-700 { padding-left: var(--size-700); padding-right: var(--size-700); }
.pad-y-700 { padding-top: var(--size-700); padding-bottom: var(--size-700); }
.pad-725 { padding: var(--size-725); }
.pad-top-725 { padding-top: var(--size-725); }
.pad-bottom-725 { padding-bottom: var(--size-725); }
.pad-left-725 { padding-left: var(--size-725); }
.pad-right-725 { padding-right: var(--size-725); }
.pad-x-725 { padding-left: var(--size-725); padding-right: var(--size-725); }
.pad-y-725 { padding-top: var(--size-725); padding-bottom: var(--size-725); }
.pad-750 { padding: var(--size-750); }
.pad-top-750 { padding-top: var(--size-750); }
.pad-bottom-750 { padding-bottom: var(--size-750); }
.pad-left-750 { padding-left: var(--size-750); }
.pad-right-750 { padding-right: var(--size-750); }
.pad-x-750 { padding-left: var(--size-750); padding-right: var(--size-750); }
.pad-y-750 { padding-top: var(--size-750); padding-bottom: var(--size-750); }
.pad-775 { padding: var(--size-775); }
.pad-top-775 { padding-top: var(--size-775); }
.pad-bottom-775 { padding-bottom: var(--size-775); }
.pad-left-775 { padding-left: var(--size-775); }
.pad-right-775 { padding-right: var(--size-775); }
.pad-x-775 { padding-left: var(--size-775); padding-right: var(--size-775); }
.pad-y-775 { padding-top: var(--size-775); padding-bottom: var(--size-775); }
.pad-800 { padding: var(--size-800); }
.pad-top-800 { padding-top: var(--size-800); }
.pad-bottom-800 { padding-bottom: var(--size-800); }
.pad-left-800 { padding-left: var(--size-800); }
.pad-right-800 { padding-right: var(--size-800); }
.pad-x-800 { padding-left: var(--size-800); padding-right: var(--size-800); }
.pad-y-800 { padding-top: var(--size-800); padding-bottom: var(--size-800); }
.pad-825 { padding: var(--size-825); }
.pad-top-825 { padding-top: var(--size-825); }
.pad-bottom-825 { padding-bottom: var(--size-825); }
.pad-left-825 { padding-left: var(--size-825); }
.pad-right-825 { padding-right: var(--size-825); }
.pad-x-825 { padding-left: var(--size-825); padding-right: var(--size-825); }
.pad-y-825 { padding-top: var(--size-825); padding-bottom: var(--size-825); }
.pad-850 { padding: var(--size-850); }
.pad-top-850 { padding-top: var(--size-850); }
.pad-bottom-850 { padding-bottom: var(--size-850); }
.pad-left-850 { padding-left: var(--size-850); }
.pad-right-850 { padding-right: var(--size-850); }
.pad-x-850 { padding-left: var(--size-850); padding-right: var(--size-850); }
.pad-y-850 { padding-top: var(--size-850); padding-bottom: var(--size-850); }
.pad-875 { padding: var(--size-875); }
.pad-top-875 { padding-top: var(--size-875); }
.pad-bottom-875 { padding-bottom: var(--size-875); }
.pad-left-875 { padding-left: var(--size-875); }
.pad-right-875 { padding-right: var(--size-875); }
.pad-x-875 { padding-left: var(--size-875); padding-right: var(--size-875); }
.pad-y-875 { padding-top: var(--size-875); padding-bottom: var(--size-875); }
.pad-900 { padding: var(--size-900); }
.pad-top-900 { padding-top: var(--size-900); }
.pad-bottom-900 { padding-bottom: var(--size-900); }
.pad-left-900 { padding-left: var(--size-900); }
.pad-right-900 { padding-right: var(--size-900); }
.pad-x-900 { padding-left: var(--size-900); padding-right: var(--size-900); }
.pad-y-900 { padding-top: var(--size-900); padding-bottom: var(--size-900); }
.pad-925 { padding: var(--size-925); }
.pad-top-925 { padding-top: var(--size-925); }
.pad-bottom-925 { padding-bottom: var(--size-925); }
.pad-left-925 { padding-left: var(--size-925); }
.pad-right-925 { padding-right: var(--size-925); }
.pad-x-925 { padding-left: var(--size-925); padding-right: var(--size-925); }
.pad-y-925 { padding-top: var(--size-925); padding-bottom: var(--size-925); }
.pad-950 { padding: var(--size-950); }
.pad-top-950 { padding-top: var(--size-950); }
.pad-bottom-950 { padding-bottom: var(--size-950); }
.pad-left-950 { padding-left: var(--size-950); }
.pad-right-950 { padding-right: var(--size-950); }
.pad-x-950 { padding-left: var(--size-950); padding-right: var(--size-950); }
.pad-y-950 { padding-top: var(--size-950); padding-bottom: var(--size-950); }
.pad-975 { padding: var(--size-975); }
.pad-top-975 { padding-top: var(--size-975); }
.pad-bottom-975 { padding-bottom: var(--size-975); }
.pad-left-975 { padding-left: var(--size-975); }
.pad-right-975 { padding-right: var(--size-975); }
.pad-x-975 { padding-left: var(--size-975); padding-right: var(--size-975); }
.pad-y-975 { padding-top: var(--size-975); padding-bottom: var(--size-975); }
.pad-1000 { padding: var(--size-1000); }
.pad-top-1000 { padding-top: var(--size-1000); }
.pad-bottom-1000 { padding-bottom: var(--size-1000); }
.pad-left-1000 { padding-left: var(--size-1000); }
.pad-right-1000 { padding-right: var(--size-1000); }
.pad-x-1000 { padding-left: var(--size-1000); padding-right: var(--size-1000); }
.pad-y-1000 { padding-top: var(--size-1000); padding-bottom: var(--size-1000); }


/* Gap */
.gap-25   { gap: var(--size-25); }
.gap-50   { gap: var(--size-50); }
.gap-75   { gap: var(--size-75); }
.gap-100  { gap: var(--size-100); }
.gap-125  { gap: var(--size-125); }
.gap-150  { gap: var(--size-150); }
.gap-175  { gap: var(--size-175); }
.gap-200  { gap: var(--size-200); }
.gap-225  { gap: var(--size-225); }
.gap-250  { gap: var(--size-250); }
.gap-275  { gap: var(--size-275); }
.gap-300  { gap: var(--size-300); }
.gap-325  { gap: var(--size-325); }
.gap-350  { gap: var(--size-350); }
.gap-375  { gap: var(--size-375); }
.gap-400  { gap: var(--size-400); }
.gap-425  { gap: var(--size-425); }
.gap-450  { gap: var(--size-450); }
.gap-475  { gap: var(--size-475); }
.gap-500  { gap: var(--size-500); }
.gap-525  { gap: var(--size-525); }
.gap-550  { gap: var(--size-550); }
.gap-575  { gap: var(--size-575); }
.gap-600  { gap: var(--size-600); }
.gap-625  { gap: var(--size-625); }
.gap-650  { gap: var(--size-650); }
.gap-675  { gap: var(--size-675); }
.gap-700  { gap: var(--size-700); }
.gap-725  { gap: var(--size-725); }
.gap-750  { gap: var(--size-750); }
.gap-775  { gap: var(--size-775); }
.gap-800  { gap: var(--size-800); }
.gap-825  { gap: var(--size-825); }
.gap-850  { gap: var(--size-850); }
.gap-875  { gap: var(--size-875); }
.gap-900  { gap: var(--size-900); }
.gap-925  { gap: var(--size-925); }
.gap-950  { gap: var(--size-950); }
.gap-975  { gap: var(--size-975); }
.gap-1000 { gap: var(--size-1000); }
.gap-1500 { gap: var(--size-1500); }
.gap-2000 { gap: var(--size-2000); }

/* Row Gap */
.row-gap-25   { row-gap: var(--size-25); }
.row-gap-50   { row-gap: var(--size-50); }
.row-gap-75   { row-gap: var(--size-75); }
.row-gap-100  { row-gap: var(--size-100); }
.row-gap-125  { row-gap: var(--size-125); }
.row-gap-150  { row-gap: var(--size-150); }
.row-gap-175  { row-gap: var(--size-175); }
.row-gap-200  { row-gap: var(--size-200); }
.row-gap-225  { row-gap: var(--size-225); }
.row-gap-250  { row-gap: var(--size-250); }
.row-gap-275  { row-gap: var(--size-275); }
.row-gap-300  { row-gap: var(--size-300); }
.row-gap-325  { row-gap: var(--size-325); }
.row-gap-350  { row-gap: var(--size-350); }
.row-gap-375  { row-gap: var(--size-375); }
.row-gap-400  { row-gap: var(--size-400); }
.row-gap-425  { row-gap: var(--size-425); }
.row-gap-450  { row-gap: var(--size-450); }
.row-gap-475  { row-gap: var(--size-475); }
.row-gap-500  { row-gap: var(--size-500); }
.row-gap-525  { row-gap: var(--size-525); }
.row-gap-550  { row-gap: var(--size-550); }
.row-gap-575  { row-gap: var(--size-575); }
.row-gap-600  { row-gap: var(--size-600); }
.row-gap-625  { row-gap: var(--size-625); }
.row-gap-650  { row-gap: var(--size-650); }
.row-gap-675  { row-gap: var(--size-675); }
.row-gap-700  { row-gap: var(--size-700); }
.row-gap-725  { row-gap: var(--size-725); }
.row-gap-750  { row-gap: var(--size-750); }
.row-gap-775  { row-gap: var(--size-775); }
.row-gap-800  { row-gap: var(--size-800); }
.row-gap-825  { row-gap: var(--size-825); }
.row-gap-850  { row-gap: var(--size-850); }
.row-gap-875  { row-gap: var(--size-875); }
.row-gap-900  { row-gap: var(--size-900); }
.row-gap-925  { row-gap: var(--size-925); }
.row-gap-950  { row-gap: var(--size-950); }
.row-gap-975  { row-gap: var(--size-975); }
.row-gap-1000 { row-gap: var(--size-1000); }
.row-gap-1500 { row-gap: var(--size-1500); }
.row-gap-2000 { row-gap: var(--size-2000); }

/* Column Gap */
.column-gap-25   { column-gap: var(--size-25); }
.column-gap-50   { column-gap: var(--size-50); }
.column-gap-75   { column-gap: var(--size-75); }
.column-gap-100  { column-gap: var(--size-100); }
.column-gap-125  { column-gap: var(--size-125); }
.column-gap-150  { column-gap: var(--size-150); }
.column-gap-175  { column-gap: var(--size-175); }
.column-gap-200  { column-gap: var(--size-200); }
.column-gap-225  { column-gap: var(--size-225); }
.column-gap-250  { column-gap: var(--size-250); }
.column-gap-275  { column-gap: var(--size-275); }
.column-gap-300  { column-gap: var(--size-300); }
.column-gap-325  { column-gap: var(--size-325); }
.column-gap-350  { column-gap: var(--size-350); }
.column-gap-375  { column-gap: var(--size-375); }
.column-gap-400  { column-gap: var(--size-400); }
.column-gap-425  { column-gap: var(--size-425); }
.column-gap-450  { column-gap: var(--size-450); }
.column-gap-475  { column-gap: var(--size-475); }
.column-gap-500  { column-gap: var(--size-500); }
.column-gap-525  { column-gap: var(--size-525); }
.column-gap-550  { column-gap: var(--size-550); }
.column-gap-575  { column-gap: var(--size-575); }
.column-gap-600  { column-gap: var(--size-600); }
.column-gap-625  { column-gap: var(--size-625); }
.column-gap-650  { column-gap: var(--size-650); }
.column-gap-675  { column-gap: var(--size-675); }
.column-gap-700  { column-gap: var(--size-700); }
.column-gap-725  { column-gap: var(--size-725); }
.column-gap-750  { column-gap: var(--size-750); }
.column-gap-775  { column-gap: var(--size-775); }
.column-gap-800  { column-gap: var(--size-800); }
.column-gap-825  { column-gap: var(--size-825); }
.column-gap-850  { column-gap: var(--size-850); }
.column-gap-875  { column-gap: var(--size-875); }
.column-gap-900  { column-gap: var(--size-900); }
.column-gap-925  { column-gap: var(--size-925); }
.column-gap-950  { column-gap: var(--size-950); }
.column-gap-975  { column-gap: var(--size-975); }
.column-gap-1000 { column-gap: var(--size-1000); }
.column-gap-1500 { column-gap: var(--size-1500); }
.column-gap-2000 { column-gap: var(--size-2000); }


.radius-main { border-radius: .5rem; }


.radius-25 { border-radius: var(--size-25); }
.radius-50 { border-radius: var(--size-50); }
.radius-75 { border-radius: var(--size-75); }
.radius-100 { border-radius: var(--size-100); }
.radius-125 { border-radius: var(--size-125); }
.radius-150 { border-radius: var(--size-150); }
.radius-175 { border-radius: var(--size-175); }
.radius-200 { border-radius: var(--size-200); }
.radius-225 { border-radius: var(--size-225); }
.radius-250 { border-radius: var(--size-250); }
.radius-275 { border-radius: var(--size-275); }
.radius-300 { border-radius: var(--size-300); }
.radius-325 { border-radius: var(--size-325); }
.radius-350 { border-radius: var(--size-350); }
.radius-375 { border-radius: var(--size-375); }
.radius-400 { border-radius: var(--size-400); }
.radius-425 { border-radius: var(--size-425); }
.radius-450 { border-radius: var(--size-450); }
.radius-475 { border-radius: var(--size-475); }
.radius-500 { border-radius: var(--size-500); }
.radius-525 { border-radius: var(--size-525); }
.radius-550 { border-radius: var(--size-550); }
.radius-575 { border-radius: var(--size-575); }
.radius-600 { border-radius: var(--size-600); }
.radius-625 { border-radius: var(--size-625); }
.radius-650 { border-radius: var(--size-650); }
.radius-675 { border-radius: var(--size-675); }
.radius-700 { border-radius: var(--size-700); }
.radius-725 { border-radius: var(--size-725); }
.radius-750 { border-radius: var(--size-750); }
.radius-775 { border-radius: var(--size-775); }
.radius-800 { border-radius: var(--size-800); }
.radius-825 { border-radius: var(--size-825); }
.radius-850 { border-radius: var(--size-850); }
.radius-875 { border-radius: var(--size-875); }
.radius-900 { border-radius: var(--size-900); }
.radius-925 { border-radius: var(--size-925); }
.radius-950 { border-radius: var(--size-950); }
.radius-975 { border-radius: var(--size-975); }
.radius-1000 { border-radius: var(--size-1000); }
.radius-1500 { border-radius: var(--size-1500); }
.radius-2000 { border-radius: var(--size-2000); }


.radius-top-left-25 { border-top-left-radius: var(--size-25); }
.radius-top-left-50 { border-top-left-radius: var(--size-50); }
.radius-top-left-75 { border-top-left-radius: var(--size-75); }
.radius-top-left-100 { border-top-left-radius: var(--size-100); }
.radius-top-left-125 { border-top-left-radius: var(--size-125); }
.radius-top-left-150 { border-top-left-radius: var(--size-150); }
.radius-top-left-175 { border-top-left-radius: var(--size-175); }
.radius-top-left-200 { border-top-left-radius: var(--size-200); }
.radius-top-left-225 { border-top-left-radius: var(--size-225); }
.radius-top-left-250 { border-top-left-radius: var(--size-250); }
.radius-top-left-275 { border-top-left-radius: var(--size-275); }
.radius-top-left-300 { border-top-left-radius: var(--size-300); }
.radius-top-left-325 { border-top-left-radius: var(--size-325); }
.radius-top-left-350 { border-top-left-radius: var(--size-350); }
.radius-top-left-375 { border-top-left-radius: var(--size-375); }
.radius-top-left-400 { border-top-left-radius: var(--size-400); }
.radius-top-left-425 { border-top-left-radius: var(--size-425); }
.radius-top-left-450 { border-top-left-radius: var(--size-450); }
.radius-top-left-475 { border-top-left-radius: var(--size-475); }
.radius-top-left-500 { border-top-left-radius: var(--size-500); }
.radius-top-left-525 { border-top-left-radius: var(--size-525); }
.radius-top-left-550 { border-top-left-radius: var(--size-550); }
.radius-top-left-575 { border-top-left-radius: var(--size-575); }
.radius-top-left-600 { border-top-left-radius: var(--size-600); }
.radius-top-left-625 { border-top-left-radius: var(--size-625); }
.radius-top-left-650 { border-top-left-radius: var(--size-650); }
.radius-top-left-675 { border-top-left-radius: var(--size-675); }
.radius-top-left-700 { border-top-left-radius: var(--size-700); }
.radius-top-left-725 { border-top-left-radius: var(--size-725); }
.radius-top-left-750 { border-top-left-radius: var(--size-750); }
.radius-top-left-775 { border-top-left-radius: var(--size-775); }
.radius-top-left-800 { border-top-left-radius: var(--size-800); }
.radius-top-left-825 { border-top-left-radius: var(--size-825); }
.radius-top-left-850 { border-top-left-radius: var(--size-850); }
.radius-top-left-875 { border-top-left-radius: var(--size-875); }
.radius-top-left-900 { border-top-left-radius: var(--size-900); }
.radius-top-left-925 { border-top-left-radius: var(--size-925); }
.radius-top-left-950 { border-top-left-radius: var(--size-950); }
.radius-top-left-975 { border-top-left-radius: var(--size-975); }
.radius-top-left-1000 { border-top-left-radius: var(--size-1000); }
.radius-top-left-1500 { border-top-left-radius: var(--size-1500); }
.radius-top-left-2000 { border-top-left-radius: var(--size-2000); }

.radius-top-right-25 { border-top-right-radius: var(--size-25); }
.radius-top-right-50 { border-top-right-radius: var(--size-50); }
.radius-top-right-75 { border-top-right-radius: var(--size-75); }
.radius-top-right-100 { border-top-right-radius: var(--size-100); }
.radius-top-right-125 { border-top-right-radius: var(--size-125); }
.radius-top-right-150 { border-top-right-radius: var(--size-150); }
.radius-top-right-175 { border-top-right-radius: var(--size-175); }
.radius-top-right-200 { border-top-right-radius: var(--size-200); }
.radius-top-right-225 { border-top-right-radius: var(--size-225); }
.radius-top-right-250 { border-top-right-radius: var(--size-250); }
.radius-top-right-275 { border-top-right-radius: var(--size-275); }
.radius-top-right-300 { border-top-right-radius: var(--size-300); }
.radius-top-right-325 { border-top-right-radius: var(--size-325); }
.radius-top-right-350 { border-top-right-radius: var(--size-350); }
.radius-top-right-375 { border-top-right-radius: var(--size-375); }
.radius-top-right-400 { border-top-right-radius: var(--size-400); }
.radius-top-right-425 { border-top-right-radius: var(--size-425); }
.radius-top-right-450 { border-top-right-radius: var(--size-450); }
.radius-top-right-475 { border-top-right-radius: var(--size-475); }
.radius-top-right-500 { border-top-right-radius: var(--size-500); }
.radius-top-right-525 { border-top-right-radius: var(--size-525); }
.radius-top-right-550 { border-top-right-radius: var(--size-550); }
.radius-top-right-575 { border-top-right-radius: var(--size-575); }
.radius-top-right-600 { border-top-right-radius: var(--size-600); }
.radius-top-right-625 { border-top-right-radius: var(--size-625); }
.radius-top-right-650 { border-top-right-radius: var(--size-650); }
.radius-top-right-675 { border-top-right-radius: var(--size-675); }
.radius-top-right-700 { border-top-right-radius: var(--size-700); }
.radius-top-right-725 { border-top-right-radius: var(--size-725); }
.radius-top-right-750 { border-top-right-radius: var(--size-750); }
.radius-top-right-775 { border-top-right-radius: var(--size-775); }
.radius-top-right-800 { border-top-right-radius: var(--size-800); }
.radius-top-right-825 { border-top-right-radius: var(--size-825); }
.radius-top-right-850 { border-top-right-radius: var(--size-850); }
.radius-top-right-875 { border-top-right-radius: var(--size-875); }
.radius-top-right-900 { border-top-right-radius: var(--size-900); }
.radius-top-right-925 { border-top-right-radius: var(--size-925); }
.radius-top-right-950 { border-top-right-radius: var(--size-950); }
.radius-top-right-975 { border-top-right-radius: var(--size-975); }
.radius-top-right-1000 { border-top-right-radius: var(--size-1000); }
.radius-top-right-1500 { border-top-right-radius: var(--size-1500); }
.radius-top-right-2000 { border-top-right-radius: var(--size-2000); }

.radius-bottom-left-0 { border-bottom-left-radius: 0; }
.radius-bottom-left-25 { border-bottom-left-radius: var(--size-25); }
.radius-bottom-left-50 { border-bottom-left-radius: var(--size-50); }
.radius-bottom-left-75 { border-bottom-left-radius: var(--size-75); }
.radius-bottom-left-100 { border-bottom-left-radius: var(--size-100); }
.radius-bottom-left-125 { border-bottom-left-radius: var(--size-125); }
.radius-bottom-left-150 { border-bottom-left-radius: var(--size-150); }
.radius-bottom-left-175 { border-bottom-left-radius: var(--size-175); }
.radius-bottom-left-200 { border-bottom-left-radius: var(--size-200); }
.radius-bottom-left-225 { border-bottom-left-radius: var(--size-225); }
.radius-bottom-left-250 { border-bottom-left-radius: var(--size-250); }
.radius-bottom-left-275 { border-bottom-left-radius: var(--size-275); }
.radius-bottom-left-300 { border-bottom-left-radius: var(--size-300); }
.radius-bottom-left-325 { border-bottom-left-radius: var(--size-325); }
.radius-bottom-left-350 { border-bottom-left-radius: var(--size-350); }
.radius-bottom-left-375 { border-bottom-left-radius: var(--size-375); }
.radius-bottom-left-400 { border-bottom-left-radius: var(--size-400); }
.radius-bottom-left-425 { border-bottom-left-radius: var(--size-425); }
.radius-bottom-left-450 { border-bottom-left-radius: var(--size-450); }
.radius-bottom-left-475 { border-bottom-left-radius: var(--size-475); }
.radius-bottom-left-500 { border-bottom-left-radius: var(--size-500); }
.radius-bottom-left-525 { border-bottom-left-radius: var(--size-525); }
.radius-bottom-left-550 { border-bottom-left-radius: var(--size-550); }
.radius-bottom-left-575 { border-bottom-left-radius: var(--size-575); }
.radius-bottom-left-600 { border-bottom-left-radius: var(--size-600); }
.radius-bottom-left-625 { border-bottom-left-radius: var(--size-625); }
.radius-bottom-left-650 { border-bottom-left-radius: var(--size-650); }
.radius-bottom-left-675 { border-bottom-left-radius: var(--size-675); }
.radius-bottom-left-700 { border-bottom-left-radius: var(--size-700); }
.radius-bottom-left-725 { border-bottom-left-radius: var(--size-725); }
.radius-bottom-left-750 { border-bottom-left-radius: var(--size-750); }
.radius-bottom-left-775 { border-bottom-left-radius: var(--size-775); }
.radius-bottom-left-800 { border-bottom-left-radius: var(--size-800); }
.radius-bottom-left-825 { border-bottom-left-radius: var(--size-825); }
.radius-bottom-left-850 { border-bottom-left-radius: var(--size-850); }
.radius-bottom-left-875 { border-bottom-left-radius: var(--size-875); }
.radius-bottom-left-900 { border-bottom-left-radius: var(--size-900); }
.radius-bottom-left-925 { border-bottom-left-radius: var(--size-925); }
.radius-bottom-left-950 { border-bottom-left-radius: var(--size-950); }
.radius-bottom-left-975 { border-bottom-left-radius: var(--size-975); }
.radius-bottom-left-1000 { border-bottom-left-radius: var(--size-1000); }
.radius-bottom-left-1500 { border-bottom-left-radius: var(--size-1500); }
.radius-bottom-left-2000 { border-bottom-left-radius: var(--size-2000); }

.radius-bottom-right-25 { border-bottom-right-radius: var(--size-25); }
.radius-bottom-right-50 { border-bottom-right-radius: var(--size-50); }
.radius-bottom-right-75 { border-bottom-right-radius: var(--size-75); }
.radius-bottom-right-100 { border-bottom-right-radius: var(--size-100); }
.radius-bottom-right-125 { border-bottom-right-radius: var(--size-125); }
.radius-bottom-right-150 { border-bottom-right-radius: var(--size-150); }
.radius-bottom-right-175 { border-bottom-right-radius: var(--size-175); }
.radius-bottom-right-200 { border-bottom-right-radius: var(--size-200); }
.radius-bottom-right-225 { border-bottom-right-radius: var(--size-225); }
.radius-bottom-right-250 { border-bottom-right-radius: var(--size-250); }
.radius-bottom-right-275 { border-bottom-right-radius: var(--size-275); }
.radius-bottom-right-300 { border-bottom-right-radius: var(--size-300); }
.radius-bottom-right-325 { border-bottom-right-radius: var(--size-325); }
.radius-bottom-right-350 { border-bottom-right-radius: var(--size-350); }
.radius-bottom-right-375 { border-bottom-right-radius: var(--size-375); }
.radius-bottom-right-400 { border-bottom-right-radius: var(--size-400); }
.radius-bottom-right-425 { border-bottom-right-radius: var(--size-425); }
.radius-bottom-right-450 { border-bottom-right-radius: var(--size-450); }
.radius-bottom-right-475 { border-bottom-right-radius: var(--size-475); }
.radius-bottom-right-500 { border-bottom-right-radius: var(--size-500); }
.radius-bottom-right-525 { border-bottom-right-radius: var(--size-525); }
.radius-bottom-right-550 { border-bottom-right-radius: var(--size-550); }
.radius-bottom-right-575 { border-bottom-right-radius: var(--size-575); }
.radius-bottom-right-600 { border-bottom-right-radius: var(--size-600); }
.radius-bottom-right-625 { border-bottom-right-radius: var(--size-625); }
.radius-bottom-right-650 { border-bottom-right-radius: var(--size-650); }
.radius-bottom-right-675 { border-bottom-right-radius: var(--size-675); }
.radius-bottom-right-700 { border-bottom-right-radius: var(--size-700); }
.radius-bottom-right-725 { border-bottom-right-radius: var(--size-725); }
.radius-bottom-right-750 { border-bottom-right-radius: var(--size-750); }
.radius-bottom-right-775 { border-bottom-right-radius: var(--size-775); }
.radius-bottom-right-800 { border-bottom-right-radius: var(--size-800); }
.radius-bottom-right-825 { border-bottom-right-radius: var(--size-825); }
.radius-bottom-right-850 { border-bottom-right-radius: var(--size-850); }
.radius-bottom-right-875 { border-bottom-right-radius: var(--size-875); }
.radius-bottom-right-900 { border-bottom-right-radius: var(--size-900); }
.radius-bottom-right-925 { border-bottom-right-radius: var(--size-925); }
.radius-bottom-right-950 { border-bottom-right-radius: var(--size-950); }
.radius-bottom-right-975 { border-bottom-right-radius: var(--size-975); }
.radius-bottom-right-1000 { border-bottom-right-radius: var(--size-1000); }
.radius-bottom-right-1500 { border-bottom-right-radius: var(--size-1500); }
.radius-bottom-right-2000 { border-bottom-right-radius: var(--size-2000); }

.font-size-25 { font-size: var(--size-25); }
.font-size-50 { font-size: var(--size-50); }
.font-size-75 { font-size: var(--size-75); }
.font-size-100 { font-size: var(--size-100); }
.font-size-125 { font-size: var(--size-125); }
.font-size-150 { font-size: var(--size-150); }
.font-size-175 { font-size: var(--size-175); }
.font-size-200 { font-size: var(--size-200); }
.font-size-225 { font-size: var(--size-225); }
.font-size-250 { font-size: var(--size-250); }
.font-size-275 { font-size: var(--size-275); }
.font-size-300 { font-size: var(--size-300); }
.font-size-325 { font-size: var(--size-325); }
.font-size-350 { font-size: var(--size-350); }
.font-size-375 { font-size: var(--size-375); }
.font-size-400 { font-size: var(--size-400); }
.font-size-425 { font-size: var(--size-425); }
.font-size-450 { font-size: var(--size-450); }
.font-size-475 { font-size: var(--size-475); }
.font-size-500 { font-size: var(--size-500); }
.font-size-525 { font-size: var(--size-525); }
.font-size-550 { font-size: var(--size-550); }
.font-size-575 { font-size: var(--size-575); }
.font-size-600 { font-size: var(--size-600); }
.font-size-625 { font-size: var(--size-625); }
.font-size-650 { font-size: var(--size-650); }
.font-size-675 { font-size: var(--size-675); }
.font-size-700 { font-size: var(--size-700); }
.font-size-725 { font-size: var(--size-725); }
.font-size-750 { font-size: var(--size-750); }
.font-size-775 { font-size: var(--size-775); }
.font-size-800 { font-size: var(--size-800); }
.font-size-825 { font-size: var(--size-825); }
.font-size-850 { font-size: var(--size-850); }
.font-size-875 { font-size: var(--size-875); }
.font-size-900 { font-size: var(--size-900); }
.font-size-925 { font-size: var(--size-925); }
.font-size-950 { font-size: var(--size-950); }
.font-size-975 { font-size: var(--size-975); }
.font-size-1000 { font-size: var(--size-1000); }
.font-size-1500 { font-size: var(--size-1500); }
.font-size-2000 { font-size: var(--size-2000); }


.line-height-25 { line-height: var(--size-25); }
.line-height-50 { line-height: var(--size-50); }
.line-height-75 { line-height: var(--size-75); }
.line-height-100 { line-height: var(--size-100); }
.line-height-125 { line-height: var(--size-125); }
.line-height-150 { line-height: var(--size-150); }
.line-height-175 { line-height: var(--size-175); }
.line-height-200 { line-height: var(--size-200); }
.line-height-225 { line-height: var(--size-225); }
.line-height-250 { line-height: var(--size-250); }
.line-height-275 { line-height: var(--size-275); }
.line-height-300 { line-height: var(--size-300); }
.line-height-325 { line-height: var(--size-325); }
.line-height-350 { line-height: var(--size-350); }
.line-height-375 { line-height: var(--size-375); }
.line-height-400 { line-height: var(--size-400); }
.line-height-425 { line-height: var(--size-425); }
.line-height-450 { line-height: var(--size-450); }
.line-height-475 { line-height: var(--size-475); }
.line-height-500 { line-height: var(--size-500); }
.line-height-525 { line-height: var(--size-525); }
.line-height-550 { line-height: var(--size-550); }
.line-height-575 { line-height: var(--size-575); }
.line-height-600 { line-height: var(--size-600); }
.line-height-625 { line-height: var(--size-625); }
.line-height-650 { line-height: var(--size-650); }
.line-height-675 { line-height: var(--size-675); }
.line-height-700 { line-height: var(--size-700); }
.line-height-725 { line-height: var(--size-725); }
.line-height-750 { line-height: var(--size-750); }
.line-height-775 { line-height: var(--size-775); }
.line-height-800 { line-height: var(--size-800); }
.line-height-825 { line-height: var(--size-825); }
.line-height-850 { line-height: var(--size-850); }
.line-height-875 { line-height: var(--size-875); }
.line-height-900 { line-height: var(--size-900); }
.line-height-925 { line-height: var(--size-925); }
.line-height-950 { line-height: var(--size-950); }
.line-height-975 { line-height: var(--size-975); }
.line-height-1000 { line-height: var(--size-1000); }
.line-height-1500 { line-height: var(--size-1500); }
.line-height-2000 { line-height: var(--size-2000); }



/* ─── TOP ─────────────────────────────────────────── */
.top-25   { top: var(--size-25); }
.top-50   { top: var(--size-50); }
.top-75   { top: var(--size-75); }
.top-100  { top: var(--size-100); }
.top-125  { top: var(--size-125); }
.top-150  { top: var(--size-150); }
.top-175  { top: var(--size-175); }
.top-200  { top: var(--size-200); }
.top-225  { top: var(--size-225); }
.top-250  { top: var(--size-250); }
.top-275  { top: var(--size-275); }
.top-300  { top: var(--size-300); }
.top-325  { top: var(--size-325); }
.top-350  { top: var(--size-350); }
.top-375  { top: var(--size-375); }
.top-400  { top: var(--size-400); }
.top-425  { top: var(--size-425); }
.top-450  { top: var(--size-450); }
.top-475  { top: var(--size-475); }
.top-500  { top: var(--size-500); }
.top-525  { top: var(--size-525); }
.top-550  { top: var(--size-550); }
.top-575  { top: var(--size-575); }
.top-600  { top: var(--size-600); }
.top-625  { top: var(--size-625); }
.top-650  { top: var(--size-650); }
.top-675  { top: var(--size-675); }
.top-700  { top: var(--size-700); }
.top-725  { top: var(--size-725); }
.top-750  { top: var(--size-750); }
.top-775  { top: var(--size-775); }
.top-800  { top: var(--size-800); }
.top-825  { top: var(--size-825); }
.top-850  { top: var(--size-850); }
.top-875  { top: var(--size-875); }
.top-900  { top: var(--size-900); }
.top-925  { top: var(--size-925); }
.top-950  { top: var(--size-950); }
.top-975  { top: var(--size-975); }
.top-1000 { top: var(--size-1000); }
.top-1500 { top: var(--size-1500); }
.top-2000 { top: var(--size-2000); }

/* ─── LEFT ────────────────────────────────────────── */
.left-25   { left: var(--size-25); }
.left-50   { left: var(--size-50); }
.left-75   { left: var(--size-75); }
.left-100  { left: var(--size-100); }
.left-125  { left: var(--size-125); }
.left-150  { left: var(--size-150); }
.left-175  { left: var(--size-175); }
.left-200  { left: var(--size-200); }
.left-225  { left: var(--size-225); }
.left-250  { left: var(--size-250); }
.left-275  { left: var(--size-275); }
.left-300  { left: var(--size-300); }
.left-325  { left: var(--size-325); }
.left-350  { left: var(--size-350); }
.left-375  { left: var(--size-375); }
.left-400  { left: var(--size-400); }
.left-425  { left: var(--size-425); }
.left-450  { left: var(--size-450); }
.left-475  { left: var(--size-475); }
.left-500  { left: var(--size-500); }
.left-525  { left: var(--size-525); }
.left-550  { left: var(--size-550); }
.left-575  { left: var(--size-575); }
.left-600  { left: var(--size-600); }
.left-625  { left: var(--size-625); }
.left-650  { left: var(--size-650); }
.left-675  { left: var(--size-675); }
.left-700  { left: var(--size-700); }
.left-725  { left: var(--size-725); }
.left-750  { left: var(--size-750); }
.left-775  { left: var(--size-775); }
.left-800  { left: var(--size-800); }
.left-825  { left: var(--size-825); }
.left-850  { left: var(--size-850); }
.left-875  { left: var(--size-875); }
.left-900  { left: var(--size-900); }
.left-925  { left: var(--size-925); }
.left-950  { left: var(--size-950); }
.left-975  { left: var(--size-975); }
.left-1000 { left: var(--size-1000); }
.left-1500 { left: var(--size-1500); }
.left-2000 { left: var(--size-2000); }

/* ─── RIGHT ───────────────────────────────────────── */
.right-25   { right: var(--size-25); }
.right-50   { right: var(--size-50); }
.right-75   { right: var(--size-75); }
.right-100  { right: var(--size-100); }
.right-125  { right: var(--size-125); }
.right-150  { right: var(--size-150); }
.right-175  { right: var(--size-175); }
.right-200  { right: var(--size-200); }
.right-225  { right: var(--size-225); }
.right-250  { right: var(--size-250); }
.right-275  { right: var(--size-275); }
.right-300  { right: var(--size-300); }
.right-325  { right: var(--size-325); }
.right-350  { right: var(--size-350); }
.right-375  { right: var(--size-375); }
.right-400  { right: var(--size-400); }
.right-425  { right: var(--size-425); }
.right-450  { right: var(--size-450); }
.right-475  { right: var(--size-475); }
.right-500  { right: var(--size-500); }
.right-525  { right: var(--size-525); }
.right-550  { right: var(--size-550); }
.right-575  { right: var(--size-575); }
.right-600  { right: var(--size-600); }
.right-625  { right: var(--size-625); }
.right-650  { right: var(--size-650); }
.right-675  { right: var(--size-675); }
.right-700  { right: var(--size-700); }
.right-725  { right: var(--size-725); }
.right-750  { right: var(--size-750); }
.right-775  { right: var(--size-775); }
.right-800  { right: var(--size-800); }
.right-825  { right: var(--size-825); }
.right-850  { right: var(--size-850); }
.right-875  { right: var(--size-875); }
.right-900  { right: var(--size-900); }
.right-925  { right: var(--size-925); }
.right-950  { right: var(--size-950); }
.right-975  { right: var(--size-975); }
.right-1000 { right: var(--size-1000); }
.right-1500 { right: var(--size-1500); }
.right-2000 { right: var(--size-2000); }

/* ─── BOTTOM ──────────────────────────────────────── */
.bottom-25   { bottom: var(--size-25); }
.bottom-50   { bottom: var(--size-50); }
.bottom-75   { bottom: var(--size-75); }
.bottom-100  { bottom: var(--size-100); }
.bottom-125  { bottom: var(--size-125); }
.bottom-150  { bottom: var(--size-150); }
.bottom-175  { bottom: var(--size-175); }
.bottom-200  { bottom: var(--size-200); }
.bottom-225  { bottom: var(--size-225); }
.bottom-250  { bottom: var(--size-250); }
.bottom-275  { bottom: var(--size-275); }
.bottom-300  { bottom: var(--size-300); }
.bottom-325  { bottom: var(--size-325); }
.bottom-350  { bottom: var(--size-350); }
.bottom-375  { bottom: var(--size-375); }
.bottom-400  { bottom: var(--size-400); }
.bottom-425  { bottom: var(--size-425); }
.bottom-450  { bottom: var(--size-450); }
.bottom-475  { bottom: var(--size-475); }
.bottom-500  { bottom: var(--size-500); }
.bottom-525  { bottom: var(--size-525); }
.bottom-550  { bottom: var(--size-550); }
.bottom-575  { bottom: var(--size-575); }
.bottom-600  { bottom: var(--size-600); }
.bottom-625  { bottom: var(--size-625); }
.bottom-650  { bottom: var(--size-650); }
.bottom-675  { bottom: var(--size-675); }
.bottom-700  { bottom: var(--size-700); }
.bottom-725  { bottom: var(--size-725); }
.bottom-750  { bottom: var(--size-750); }
.bottom-775  { bottom: var(--size-775); }
.bottom-800  { bottom: var(--size-800); }
.bottom-825  { bottom: var(--size-825); }
.bottom-850  { bottom: var(--size-850); }
.bottom-875  { bottom: var(--size-875); }
.bottom-900  { bottom: var(--size-900); }
.bottom-925  { bottom: var(--size-925); }
.bottom-950  { bottom: var(--size-950); }
.bottom-975  { bottom: var(--size-975); }
.bottom-1000 { bottom: var(--size-1000); }
.bottom-1500 { bottom: var(--size-1500); }
.bottom-2000 { bottom: var(--size-2000); }


.radius-full { border-radius: 50%; }
.radius-pill { border-radius: 9999px; }

.width-full {
  width: 100%;
}
.width-max {
  width: max-content;
}
.width-fit {
  width: fit-content;
}

.min-fit {
  min-width: fit-content;
}

.aspect-1 {
  aspect-ratio: 1;
}

.height-max {
  height: max-content;
}
.height-full {
  height: 100%;
}
/* === CSS: calendar.css [root] === */
#calendar {
  width: max-content;
  min-width: 100%;
}

/* Horizontaler Scroll (nur X) */
.cal-scroller-x {
  overflow-x: auto;
  overflow-y: visible;
  height: 100%;
}

/* Vertikaler Scroll (Y) -> Sticky wirkt innerhalb davon) */
.cal-viewport {
  height: 100%;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: visible;
  /* Platz für die untersten Linien, auch wenn die Scrollbar erscheint */
  scrollbar-gutter: stable both-edges;
}

/* Grab-Cursor beim Hovern über die scrollbare Region */
.cal-scroller-x {
  overflow-x: auto;
  overflow-y: visible;
  height: 100%;
  cursor: default; /* Normale Hand vermeiden, Scroll bleibt möglich */
}

/* Grabbing-Cursor während des Ziehens */
.cal-scroller-x.is-dragging {
  cursor: grabbing; /* Zeigt "Hand geschlossen" beim Ziehen */
  user-select: none; /* Verhindert Text-Selektion während des Ziehens */
}

.calendar-steuerung {
  padding: calc(0.5rem + 2px) calc(0.5rem + 2px) 0.2rem calc(0.5rem + 2px);
  height: 3rem;
}
.calendar-steuerung .control-button{
  position: relative;
  z-index: 5;
}
.cal-wrap {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #222;
  height: calc(100% - 3rem);
  background: radial-gradient(
  circle at 100% 80%,
  var(--color-accent-soft) 0,
  #ffffff 100%
  );
}

.calendar-bg{
  background: radial-gradient(
  circle at 100% 80%,
  var(--color-accent-soft) 0,
  #ffffff 100%
  );
}

.control-button {
  border: 1px solid var(--color-accent-border);
  padding: 0 0.8rem;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  height: 100%;
}
.control-button.side {
  aspect-ratio: 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.control-button.back {
  background-image: url(/images/icons/back.svg);
}
.control-button.forwards {
  background-image: url(/images/icons/forwards.svg);
}
.control-button:hover {
  background-color: var(--color-accent-shadow);
}

/* Grid-Rahmen */
.cal-row {
  display: grid;
  border: 0 solid #e5e7eb;
  border-top-color: #eee;
}
.cal-col {
  display: flex;
  flex-direction: column;
}
.cal-grid {
  border-top: 0 solid #eee;
}

/* Sticky Header */
.cal-head {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #ffffffee;
  border-bottom: 2px solid #d1d5db;
}
.cal-plz-head {
  height: 0.5rem;
}
.cal-head-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0.5rem;
}
.cal-date {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ───────── Tages-Trennlinien (2px) als Overlay pro Tages-Spalte ───────── */
.cal-day {
  position: relative;
}
.cal-day::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px; /* -1px, damit sie nicht von res-Borders verdeckt wird */
  width: 2px;
  background: #9ca3af;
}
.cal-day-today::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 3px;
  background: #dc2626;
}
.cal-day:last-child::after {
  display: none;
} /* rechts außen keine Linie */
.cal-day-focus .cal-head-inner,
.cal-day-focus .cal-res-head {
  background-color: rgba(214, 230, 250, 0.3);
}
.cal-day-focus .cal-res-col {
  background-color: rgba(214, 230, 250, 0.2);
}
.cal-focus-slot {
  position: relative;
  outline: 1px solid #f97316;
  outline-offset: -1px;
  border-radius: 6px;
  z-index: 2;
}
.cal-focus-slot.resv {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.8);
}
.cal-focus-slot.cal-slot {
  background-color: rgba(249, 115, 22, 0.12);
}
.cal-res-col.cal-focus-slot{
  outline: none;
}

/* Zeitspalte links */
.cal-times .cal-head {
  border-bottom-color: #d1d5db;
}
.cal-time-label {
  position: absolute;
  top: -0.6rem;
  right: 0.5rem;
  font-size: 0.75rem;
  color: #6b7280;
  background: #fff;
  padding: 0 0.25rem;
}

/* Ressourcen-Header und -Body */
.cal-res-head {
  display: grid;
  gap: 0;
}
.cal-res-head .cal-res-name {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  color: #374151;
  border-right: 1px solid #d1d5db;
}
.cal-res-head .cal-res-name:last-child {
  border-right: none;
}

.cal-day-body {
  display: grid;
  gap: 0;
}

/* Ressourcenspalten-Trenner (1px) */
.cal-res-col {
  border-right: 1px solid #d1d5db;
  position: relative;
}
.cal-res-col:last-child {
  border-right: none;
}

/* Slots – Standard (Basis = 15min)  | exakt: 1px pro Minute */
.cal-slot {
  position: relative;
  height: auto; /* Höhe wird inline gesetzt */
  border-bottom: 1px dashed #e5e7eb;
  box-sizing: border-box; /* Border zählt in die Slot-Höhe -> keine kumulative Verschiebung */
  cursor: default;
}
.cal-slot:last-child {
  border-bottom: none;
}

/* ───────── Window (45min): bläuliche Fläche + dunklere Hauptlinie ───────── */
.cal-slot.window {
  border-bottom: 1px dashed #94a3b8;
  background: rgba(59, 130, 246, 0.06);
  box-sizing: border-box; /* sicherheitshalber auch hier */
}
.cal-slot.window.border-next-window {
  border-bottom: 1px solid rgba(221, 27, 76, 0.5);
}

/* Sub-Linien bei 1/3 & 2/3 NUR bei vollen 45er-Slots (keine bei partial) */
.cal-slot.window:not(.partial)::before,
.cal-slot.window:not(.partial)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #e5e7eb;
}
.cal-slot.window:not(.partial)::before {
  top: calc(33.333% - 0.5px);
}
.cal-slot.window:not(.partial)::after {
  top: calc(66.666% - 0.5px);
}

/* Akzent */
.cal-accent {
  color: #ef4444;
}

/* ==== RESERVATIONS ===================================================== */
.resv {
  position: absolute;
  left: 2px;
  right: 2px;
  border: 2px solid #ef4444;
  background: #fff;
  border-radius: 0 var(--res-border-radius) var(--res-border-radius)
    var(--res-border-radius);
  border-bottom: none 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  user-select: none;
  cursor: grab;
  overflow: visible;
}
.resv.dragging {
  opacity: 0.9;
  cursor: grabbing !important;
}
.resv.invalid {
  outline: 2px dashed #ef4444;
  background: #fee2e2;
}

/* Header (Titel + X) */
.resv .resv-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.25rem 0.1rem 0 0.1rem;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
}
.resv .resv-title{
  display: inline-block;
  overflow: hidden;
  width: 100%;
}

/* kleines X oben rechts */
.resv .resv-close {
  position: absolute;
  right: 0.1rem;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: #ef4444;
  background: #fff;
  border: 1px solid rgba(239, 68, 68, 0.35);
  cursor: pointer;
  flex: 0 0 18px;
  z-index: 5;
}
.resv .resv-close:hover {
  background: #ffe5e6;
}

/* Meta: erst von–bis, dann Dauer */
.resv .resv-meta {
  padding: 0 0.1rem 0 0.1rem;
  display: flex;
  flex-direction: column;
  gap: 0rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resv .resv-time {
  font-size: 0.78rem;
  color: #111827;
} /* 10:15 – 11:00 */
.resv .resv-dur {
  font-size: 0.72rem;
  color: #374151;
  position: absolute;
  top: -13px;
  background: white;
  border: 2px solid #ef4444;
  border-radius: 6px 6px 0 0px;
  left: -2px;
  z-index: 80;
  border-bottom: none;
  line-height: 9px;
  padding: 2px 3px 0 3px;
} /* 45m oder 1h 30m */
.resv-dur.resv-dur-off {
  position: static;
  text-align: center;
  padding: 0 0.1rem;
  background: transparent;
  border: none;
  border-radius: 0;
}
/* Resize-Griff unten */
.resv .resv-resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: rgba(239, 68, 68, 0.12);
  cursor: ns-resize;
  border: 2px solid rgba(239, 68, 68, 1);
  border-top: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 0 0 var(--res-border-radius) var(--res-border-radius);
  margin: 0 -2px 0 -2px;
}

/* visuelles „snap“-Feedback beim Aufziehen */
.cal-slot.hl {
  background: rgba(59, 130, 246, 0.1);
}

.cal-time-col {
  position: sticky;
  left: 0;
  z-index: 100;
  background: #ffffffab;
}

/* --- Ghost beim Erstellen (Desktop-Drag) --- */
.resv-ghost {
  position: absolute;
  left: 2px;
  right: 2px;
  background: rgba(107, 114, 128, 0.2);
  border: 1px dashed rgba(107, 114, 128, 0.8);
  border-radius: 4px;
  pointer-events: none;
  z-index: 50;
}

/* --- Gesperrte (bestehende) Einträge --- */
.resv.locked {
  border: 1px solid #c7cdd6;
  background: #f5f7fa;
  color: #374151;
  cursor: default;
}
.resv.locked .resv-head {
  font-weight: 600;
}
.resv.locked .resv-resize {
  display: none;
}

/* Meine Einträge (dezent hervorheben) */
.resv.mine:not(.locked) {
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.35); /* cyan-Outline */
}
.resv.locked.mine {
  border-color: #60a5fa; /* bläulicher Rand bei bestätigten eigenen */
}
/* edit */
.calendar-edit-now {
  z-index: 0;
  position: relative;
  padding: 0.4rem 0.6rem;
  background: rgb(255, 236, 236);
  border: 1px solid #d76e6e;
  color: #ae0e0e;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-weight: 600;
  text-align: center;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 30px 0px #ff000024;
  animation-name: pulse-glow;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.cal-edit-close {
  margin-left: 0.6rem;
  color: #b40909;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  border: 1px solid #b40909;
  border-radius: 5px;
  padding: 0 0.4rem 0.15rem 0.4rem;
  position: relative;
  z-index: 99;
}
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 16px 1px #ff000028;
    background: rgb(255, 236, 236);
    animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1); /* smooth up */
  }

  /* soft peak */
  55% {
    box-shadow: 0 0 25px 4px #ff000042;
    background: rgb(255, 191, 191);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); /* start easing out */
  }

  /* mirrored decline */
  100% {
    box-shadow: 0 0 16px 1px #ff000028;
    background: rgb(255, 236, 236);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
}

.cal-checkout-empty {
  padding: 1rem;
  padding-left: 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
}
.calendar-checkout {
  min-width: 0;
  overflow: hidden;
}
.cal-checkout-warning {
  margin: 0.5rem 0.9rem 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #f3d089;
  border-radius: 0.45rem;
  background: #fff8e8;
}
.cal-checkout-warning p {
  margin: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cal-checkout-warning .text-small {
  margin-top: 0.25rem;
  font-size: 0.84rem;
}
.cal-checkout-warning ul {
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cal-checkout-warning li {
  margin: 0;
  list-style: none;
  padding: 0.24rem 0.45rem;
  background: #fff;
  border: 1px solid #f3e2c0;
  border-radius: 0.35rem;
  line-height: 1.2;
  font-size: 0.84rem;
  font-weight: 300;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.checkout-totalline {
  padding-left: 0.5rem;
}
.checkout-totalline strong {
  padding-left: 0.7rem;
  font-weight: 500;
  border-left: 1px solid #455358;
}

/* === CSS: d-buttons.css [root] === */
.button-bg {
  background-repeat: no-repeat;
  background-size: 80% 90%;
  background-position: center center;
  min-width: 2rem;
}
.button-home {
  background-image: url(/images/icons/home.svg);
}
.button-calendar {
  background-image: url(/images/icons/calendar.svg);
}
button, a {
  cursor: pointer;
}

/* === CSS: d-color.css [root] === */
:root {
    --color-light-100: #fff;
    --color-light-200: #f1f1f1;
    --color-light-300: #dddddd;
    --color-light-400: #c1c1c1;
    --color-light-500: #aaaaaa;
    --loader: #448EAB;
    --color-red-100: #BD0031;
    --color-dark-100: #000000;
    --color-dark-200: #1D1D1D;
    --color-dark-300: #252525;
    --color-dark-400: #363636;
    --color-dark-500: #3c3c3c;
    --color-dark-600: #434343;
    --color-dark-700: #414141;
    --color-dark-800: #4a4a4a;
    --color-dark-900: #626262;
}

.color-light-100 {
    color: var(--color-light-100);
}
.color-light-200 {
    color: var(--color-light-200);
}
.color-light-300 {
    color: var(--color-light-300);
}
.color-light-400 {
    color: var(--color-light-400);
}
.color-light-500 {
    color: var(--color-light-500);
}

.color-dark-100 {
    color: var(--color-dark-100);
}
.color-dark-200 {
    color: var(--color-dark-200);
}
.color-dark-300 {
    color: var(--color-dark-300);
}
.color-dark-400 {
    color: var(--color-dark-400);
}
.color-dark-500 {
    color: var(--color-dark-500);
}
.color-dark-600 {
    color: var(--color-dark-600);
}
.color-dark-700 {
    color: var(--color-dark-700);
}
.color-dark-800 {
    color: var(--color-dark-800);
}
.color-dark-900 {
    color: var(--color-dark-900);
}

.color-red-100 {
    color: var(--color-red-100);
}

.bcg-dark-100 {
    background-color: var(--color-dark-100);
}
.bcg-dark-200 {
    background-color: var(--color-dark-200);
}
.bcg-dark-300 {
    background-color: var(--color-dark-300);
}
.bcg-dark-400 {
    background-color: var(--color-dark-400);
}
.bcg-dark-500 {
    background-color: var(--color-dark-500);
}
.bcg-dark-600 {
    background-color: var(--color-dark-600);
}
.bcg-dark-700 {
    background-color: var(--color-dark-700);
}

.bcg-light-100 {
    background-color: var(--color-light-100);
}
.bcg-light-200 {
    background-color: var(--color-light-200);
}
.bcg-light-300 {
    background-color: var(--color-light-300);
}
.bcg-light-400 {
    background-color: var(--color-light-400);
}
.bcg-light-500 {
    background-color: var(--color-light-500);
}
/* === CSS: e-box-alignment.css [root] === */
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.sticky {
    position: sticky;
}
.fixed {
    position: fixed;
}

.grid {
    display: grid;
}

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

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


.flex-wrap {
    flex-wrap: wrap;
}

.flex-grow {
    flex-grow: 1;
}
.flex-grow-even {
    flex: 1 1 0;
}


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

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

.block {
    display: block;
}

.grid-stack {
    display: grid;
    grid-template-areas: "stack";
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}
.area-stack {
    grid-area: stack;
}

.self-main-axis-center {
    justify-self: center;
}

.self-cross-axis-center {
    align-self: center;
}


.absolute-center-x {
    left: 50%;
    translate: -50% 0;
}
.absolute-center-y {
    top: 50%;
    translate: 0 -50%;
}
.absolute-center {
    top: 50%; left: 50%;
    translate: -50% -50%;
}

.grid-column-full {
    grid-column: 1 / -1;
}


.x-span-2 {
  grid-column: span 2;
}
.y-span-2 {
  grid-row: span 2;
}

.x-span-auto {
  grid-column: auto;
}
.y-span-auto {
  grid-row: auto;
}
/* === CSS: f-news.css [root] === */
.news {
  grid-area: news;
  background: radial-gradient(
    circle at 0 80%,
    var(--color-accent) 0,
    #ffffff 100%
  );
}
.news-page--detail .description .news-entry .font-size-110,
.news-page--detail .description .news-entry .richtext {
  line-height: 1.38;
}
.news-page--detail .description .news-entry p,
.news-page--detail .description .news-entry li {
  line-height: 1.38;
}
.news-page--overview .description .font-size-110,
.news-page--overview .description .richtext,
.news-page--overview .description :where(p, li),
.news-item .text-column-100,
.news-item .text-column-100 :where(p, li) {
  line-height: 1.3;
}
.news-section h3 {
  line-height: 1;
  font-size: 1.3rem;
  margin-bottom: .5rem;
}
.news-carousel {
  position: relative;
  overflow: hidden;
  padding-inline: 1rem;
}
.news-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 1rem;
  overflow-x: auto;
  padding: 0 0 .5rem;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.news-track::-webkit-scrollbar {
  display: none;
}
.news-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100%;
  display: flex;
  padding: 0 .5rem;
  flex-direction: column;
}
@media (min-width: 900px) {
  .news-track {
    grid-auto-columns: 100%;
  }
}
.news-arrows {
  position: absolute;
  width: 2.5rem;
  aspect-ratio: 1;
  top: 50%;
  opacity: 0;
  translate: 0 -50%;
  transform: scale(0);
  transform-origin: center;
  transition-property: transform, opacity;
  transition-duration: .2s;
  transition-timing-function: ease;
  cursor: pointer;
}
.news-arrows.right {
  right: -2.2rem;
}
.news-arrows.left {
  left: -2.2rem;
}

.news .hover-area {
  position: absolute;
  inset: -1rem -2rem;
  pointer-events: none;
  /* border: 1px solid red; */
  pointer-events: all;
}
.news:has(*:not(.news-arrows):hover) .news-arrows {
  opacity: .6;
  transform: scale(1);
  transition-duration: .4s;
  transition-timing-function: linear(0, 0.43 7.6%, 0.757 15.6%, 0.989 24.2%, 1.069 28.7%, 1.13 33.5%, 1.162 37.4%, 1.181 41.5%, 1.189 45.8%, 1.185 50.5%, 1.155 59%, 1.029 83.7%, 1.006 91.7%, 1);
}
.news-arrows:hover {
  transform: scale(1.3);
  opacity: 1;
}
.news-arrows:active {
  transform: scale(.7);
}
.news-counter {
  font-size: .8rem;
  font-weight: 500;
  position: absolute;
  bottom: .4rem; left: 50%;
  translate: -50% 0;
  font-variant: numeric;
}

/* === CSS: f-styles.css [root] === */
*[class*="bg-img-"] {
  background-repeat: no-repeat;
  background-position: center;
}
.bg-img-center {
  background-position: center;
}
.bg-img-cover {
  background-size: cover;
}
.bg-img-contain {
  background-size: contain;
}

.bg-img-120 {
  background-size: 120%;
}
.bg-img-100 {
  background-size: 100%;
}
.bg-img-90 {
  background-size: 90%;
}
.bg-img-85 {
  background-size: 85%;
}
.bg-img-80 {
  background-size: 80%;
}
.bg-img-70 {
  background-size: 70%;
}
.bg-img-60 {
  background-size: 60%;
}
.bg-img-50 {
  background-size: 50%;
}
.bg-img-40 {
  background-size: 40%;
}

.fade-out-top-100 {
  background: linear-gradient(
    0deg,
    transparent,
    #15141766,
    #1514178a,
    #151417bf
  );
}

.no-list-deco {
  list-style: none;
}

.long-logo {
  aspect-ratio: 854/213;
}
.square-logo {
  font-size: 1rem;
}

.inset-0 {
  inset: 0;
}
.inline {
  display: inline;
}

.overflow-h {
  overflow: hidden;
}

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

.overscroll-contain {
  overscroll-behavior: contain;
}
.overscroll-in-contain *,
.overscroll-in-contain {
  overscroll-behavior: contain;
}

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

.opacity-100 {
  opacity: 1;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-10 {
  opacity: 0.1;
}

.z-index--1 {
  z-index: -1;
}
.z-index-0 {
  z-index: 0;
}
.z-index-1 {
  z-index: 1;
}
.z-index-float-1 {
  z-index: 100;
}
.z-index-float-2 {
  z-index: 101;
}

.font-weight-bold {
  font-weight: 400;
}
.font-weight-thin {
  font-weight: 250;
}

.margin-auto {
  margin-left: auto;
  margin-right: auto;
}

/* === CSS: socials.css [root] === */
.social-link {
  width: 100%;
  color: #2b353a;
  color: #465358;
  padding: 0.5rem 0.8rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.337);
  display: flex;
  gap: 0.5rem;
  transition: background-color 0.2s;
}
.social-link:hover {
  background-color: rgba(255, 255, 255, 0.677);
}

.social-link .bg-img-contain {
  height: 2.3rem;
  aspect-ratio: 1;
}
.social-link h3 {
  color: #2b353a;
  color: #465358;
  line-height: 1;
}
.social-link p {
  padding-bottom: 0.1rem;
}
.social-link:has(> .qr) {
  align-items: center;
  flex-direction: column;
}
.social-link:has(> .qr) * {
  text-align: center;
  font-weight: 400;
  font-size: 1.3rem;
  padding: .1rem 0;
}
.social-link .qr {
  max-width: 17rem;
  height: unset;
  width: 100%;
}
/* === CSS: x-components.css [root] === */
.main-grid-a {
  display: grid;
  width: calc(100% - 4rem);
  height: auto;
  min-height: min(100%, 1000px);
  padding: 2rem 0;
  margin: auto;

  grid-template-areas:
    "nav nav nav"
    "image description cart"
    "image description socials"
    "booking description socials"
    "booking description news";
  grid-template-columns: 1fr 0.7fr 0.6fr;
  grid-template-rows: 50px 3rem 13rem;
  /* border: 1px solid red; */
}

.grid-width-100 {
  width: calc(100% - 4rem);
  max-width: 1300px;
}

.grid-height-100 {
  min-height: min(calc(100% - 8rem), 1000px);
}

.grid-clm-3 {
  display: grid;
  height: auto;
  margin: auto;
  /* grid-template-columns: 1fr .7fr .6fr; */
  grid-template-columns: 0.6fr 1.1fr 0.6fr;
}

.grid-content {
  display: grid;
  height: auto;
  margin: auto;

  grid-template-areas:
    "description description cart"
    "description description news"
    "description description socials"
    "description description socials";
  grid-template-columns: 0.6fr 1.1fr 0.6fr;
  grid-template-rows: 3rem auto min-content;
  /* grid-auto-rows: max-content; */
}
.grid-sports {
  display: grid;
  height: auto;
  margin: auto;

  grid-template-areas:
    "image description cart"
    "image description news"
    "booking description socials"
    "booking description socials";
  grid-template-columns: 1fr 0.7fr 0.6fr;
  grid-template-rows: 3rem 15rem auto;
  /* grid-auto-rows: max-content; */
}
.grid-calendar {
  display: grid;
  height: min(calc(100% - 8rem), 1000px);
  min-height: 40rem;
  margin: auto;

  grid-template-areas:
    "cart"
    "calendar-wrapper"
    "title-nav-spacer";
  grid-template-columns: 1fr;
  grid-template-rows: 3rem auto max-content;
}
.grid-home {
  display: grid;
  height: auto;
  margin: auto;

  grid-template-areas:
    "cart cart"
    "logo logo"
    "sport-menu sport-menu"
    "description news"
    "description socials";
  grid-template-columns: 1.7fr 0.6fr;
  grid-template-rows: 3rem 17rem auto auto auto;
}
.grid-account {
  display: grid;
  height: auto;
  margin: auto;

  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  grid-template-rows: 3.5rem max-content 4rem;
  grid-auto-rows: max-content;

  grid-auto-flow: dense;
}

.logo-wrapper {
  grid-area: logo;
}
.sport-menu {
  grid-area: sport-menu;
}

.grid-centre-100 {
  margin: -3rem auto 2rem auto;
}
/* .grid-vertical-1 {
    display: grid;
    grid-template-rows: max-content;
    grid-template-rows: min-content;
} */

.grid-account .grid-card h2 {
  text-align: center;
  padding: 0.3rem;
  align-self: center;
  font-size: 1.1;
  color: #5ba4c1;
  color: #455358;
}
.account-card-grid {
  display: grid;
  grid-template-rows: 3rem auto;
  align-items: start;
  justify-items: center;
  grid-auto-rows: min-content;
}
.account-card-grid * {
  color: #448eab;
}

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

.payment-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1rem 0;
}
.payment-summary > div,
.payment-summary__tile {
  flex: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.8rem;
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.payment-summary p,
.payment-summary__tile p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-600, #5b5b5b);
}
.payment-summary strong,
.payment-summary__tile strong {
  font-size: 1.2rem;
  margin-top: 0.2rem;
  display: block;
}
.payment-summary .payment-amount {
  /* white-space: pre-line; */
  line-height: 1.15;
  text-align: center;
}
.payment-summary--compact .payment-amount {
  text-align: center;
}
.payment-summary--detail {
  margin-inline: 0;
  align-items: flex-start;
}
.payment-summary--detail > .payment-summary__tile {
  align-self: flex-start;
}
.payment-summary__tile--volume {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.payment-summary__tile--volume p {
  font-size: 0.85rem;
  color: var(--color-600, #5b5b5b);
}
.payment-volume-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
}
.payment-volume-list div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 0.4rem;
}
.payment-volume-list div:first-child {
  border-top: none;
  padding-top: 0;
}
.payment-volume-list span {
  color: var(--color-600, #5b5b5b);
}
.payment-summary__tile--volume .payment-volume-amount {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  min-width: 5.6rem;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 0;
}
.payment-summary__tile--volume .payment-volume-amount span:last-child {
  text-align: right;
}
.payment-volume-total {
  font-weight: 600;
}

.reset-resend__link {
  margin-top: 0.5rem;
  border: none;
  background: none;
  color: var(--color-700, #1f2428);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.reset-resend__link:hover,
.reset-resend__link:focus-visible {
  color: var(--color-900, #0d1115);
}

.payment-card {
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0.8rem;
  background: #fff;
}
.payment-card__total {
  font-size: 1.2rem;
  font-weight: 700;
}
.payment-card__status {
  margin: 0;
  color: var(--color-600, #5b5b5b);
}
.payment-card__ref {
  margin: 0;
  color: var(--color-600, #5b5b5b);
  font-size: 0.85rem;
}
.payment-card__meta p,
.payment-card__bookings {
  margin: 0;
  color: var(--color-600, #5b5b5b);
}
.payment-card__tax {
  margin-top: 0.25rem;
}
.payment-card__tax-line {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--color-600, #5b5b5b);
  font-size: 0.88rem;
}
.payment-card__tax-line strong {
  color: var(--color-700, #1f2428);
  font-weight: 600;
  white-space: nowrap;
}
.payment-card__due {
  margin: 0.25rem 0 0;
  font-weight: 600;
  color: #c01e1e;
}
.payment-status--paid .payment-card__status {
  color: #1d5c32;
}
.payment-status--invoice_open .payment-card__status,
.payment-status--open .payment-card__status {
  color: #8a5200;
}

.pin-box {
  margin: 0;

}
.pin-box__code:hover {
  background-color: #448eab39;
}
.pin-box__code::after {
  content: "";
  height: 1.2rem;
  display: inline-block;
  aspect-ratio: 750 / 1000;
  background-image: url(/images/icons/copy.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 0.8rem;
  margin-top: -0.2rem;
}

.switch-board {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.switch-board a {
  min-width: 7rem;
  flex: 1 1 0;
  display: grid;
  place-items: center;
  color: #448eab;
  background-color: #e2f3fa;
  border: 1px solid #d0e9f2;
  text-align: center;
  padding: 0 1rem;
}
.switch-board a:hover {
  background-color: #d0e9f2;
}

.account-info {
  padding: 1rem;
  display: grid;
  grid-template-columns: max-content auto;
  column-gap: 2rem;
  row-gap: 0.5rem;
}
.account-info p .emlx {
  color: #455358;
  font-weight: 200;
}
body .account-info p:nth-child(2n),
body .account-info p:nth-child(2n) * {
  font-weight: 300;
}

.upper-spacer {
  position: sticky;
  top: calc(-1rem + 8px);
  top: 0;
  background: linear-gradient(rgb(255, 255, 255) 62%, rgba(255, 255, 255, 0));
  z-index: 25;
  pointer-events: none;
}

/* .main-grid-a > *, */
.border-shadow-100,
.button-100 {
  background-color: var(--color-light-100);
  box-shadow: 0 0 20px 0 var(--color-accent-shadow);
  border: 1px solid var(--color-accent-border);
}
.border-shadow-default-100 {
  background-color: var(--color-light-100);
  /* box-shadow: 0 0 20px 0 #00000019; */
  border: 1px solid #e9e9e9;
  background: radial-gradient(circle at 100% 100%, #e8e8e8 0, #ffffff 100%);
}
.blurred-layer-100 {
  /* background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(40px);
  background-color: rgb(255, 255, 255); */
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(30px);
}

/* .main-grid-a > *,  */
.grid-card.image {
  overflow: hidden;
}
.grid-card {
  position: relative;
  min-height: 3rem;
  min-width: 0;
  /* min-height: 100%; */
  border-radius: 1rem;
  /* overflow: hidden; */
}

.overlay-spacer-wrapper {
  position: sticky;
  top: calc(4rem - 1px);
  z-index: 60;
  margin-top: calc(1rem - 1px);
}
.overlay-spacer {
  height: 1px;
  width: calc(100% - 2px);
  margin-left: 1px;
}
.overlay-spacer.column-1 {
  grid-column: 1 / 2;
}
.overlay-spacer.column-3 {
  grid-column: 3 / -1;
}

.nav-wrapper {
  top: 1rem;
  position: sticky;

  z-index: 50;
  height: 3rem;
}
.cart-wrapper {
  pointer-events: none;
  top: 3rem;
  position: sticky;
  z-index: 49;
  height: 3rem;
  top: calc(4rem - 1px);
}
.cart-header{
  top: 0;
  position: sticky;
  z-index: 1;
  background-color: #fff;
}
.nav-top-inner {
  position: relative;
  z-index: 3;
  height: calc(3rem - 2px);
}
.nav {
  z-index: 52;
  height: 3rem;
  /* grid-area: nav; */
  border-radius: 0.5rem 0.5rem 0 0.5rem;
  transition-property: height, border-radius;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.78, 0, 0.22, 1);
}

#title-nav-title {
  height: 3rem;
  padding: 0px 2rem 0px 2rem;
}
#title-nav-title-text {
  font-size: 1.2rem;
  font-weight: 300;
}

body:has(#nav-checkbox:checked) .nav {
  /* height: min(40rem, calc(100vh - 10rem)); */
  height: min(calc(100vh - 2rem - 2rem), calc(1000px + 4rem));
  transition-duration: 0.25s;
  border-radius: 0.5rem;
}

.expanded-nav {
  overscroll-behavior-inline: contain;
  padding: 3rem 1.7rem 1.7rem 1.7rem;
  height: 100%;
  overflow: scroll;
  gap: 2rem;
  display: flex;
  flex-wrap: wrap;
  top: 0;
  /* mask-image: linear-gradient(#0000, #000 3rem); */
  /* mask-image: linear-gradient(#00000008 1rem, #0000003d, #000000b6, #000000ed, #000 7rem); */
  mask-image: linear-gradient(
    #00000000,
    #0000000a 1rem,
    #00000045,
    #0000009c,
    #000000e2,
    #000 7rem
  );
  z-index: 0;
  position: absolute;
  width: 100%;
  transition: opacity 0.2s, overflow 0.4s;
  transition-behavior: allow-discrete;
}
.nav-section {
  min-height: auto;
  flex: 1 1 0;
  min-width: min(15rem, 100%);
}

.nav-section h4 {
  color: #396d81;
  font-size: 1.2rem;
  padding: 0.5rem 0.4rem 0 0.4rem;
  opacity: 1;
  font-weight: 400;
  text-align: center;
}
.nav-section h3 {
  color: #4a8298;
  font-size: 1.5rem;
  padding: 1rem 0.4rem;
  opacity: 1;
  text-align: center;
}
body:has(#nav-checkbox:checked) {
  overflow: hidden;
}
body:has(#nav-checkbox:not(:checked)) .expanded-nav {
  opacity: 0;
  overflow: hidden;
}
.nav-section div:not(.sport-menu) a {
  color: #2481a5;
  position: relative;
  overflow: hidden;
  font-weight: 300;
  font-size: 1.2rem;
  padding: 0.6rem 1rem;
  text-align: start;
  border-radius: 0.2rem;
  border: 1px solid #9dc2d1;
  background: radial-gradient(
    circle at 10% 350%,
    var(--color-accent) 0,
    #ffffff 100%
  );
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: start;
}

.nav-section .sport-menu a.grid-stack {
  border-radius: 0.2rem 0.2rem 0 0;
}

.sport-action-buttons {
  display: flex;
  flex-wrap: wrap;
  border-radius: 0 0 0.2rem 0.2rem;
  overflow: hidden;
  border: 1px solid #9dc2d1;
  border-top: none;
}
.nav .sport-menu .sport-action-buttons a {
  text-align: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: max-content;
  border: none;
}
.nav .sport-menu .sport-action-buttons a,
.nav .sport-menu .sport-action-buttons a::before {
  border-radius: 0;
}

.nav-section div:not(.sport-menu) a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.2rem;
  z-index: -1;
  background: radial-gradient(
    circle at 50% 50%,
    var(--color-accent) 0,
    #ffffff 390%
  );
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.nav-section div a:hover::before {
  opacity: 1;
}

.nav-section div.sport-menu a:hover {
  background-color: var(--color-dark-600);
}
.nav-section div:not(.sport-menu) a:hover {
  color: #1b4c60;
  border-color: var(--color-accent);
  transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.nav-section h3:not(:first-child) {
  margin-top: 2rem;
}

.ext-nav-a {
  border: 1px solid var(--color-accent-border);
}

.nav .nav-top-inner a:not(#nav-logo) {
  transition: opacity 0.2s, position 0s;
  transition-behavior: allow-discrete;
}
.nav .overlay-spacer-wrapper {
  transition: opacity 0.2s;
}
body:has(#nav-checkbox:checked) .nav .nav-top-inner a:not(#nav-logo),
body:has(#nav-checkbox:checked) .overlay-spacer-wrapper {
  opacity: 0;
  pointer-events: none;
}

#cart-close {
  color: #be0030;
  opacity: 0;
  position: absolute;
  transition: opacity 0.2s;
  pointer-events: none;
  top: 0.5rem;
  right: 0.5rem;
  display: block;
  width: 2rem;
  aspect-ratio: 1;
  background: transparent;
  border: 1px solid var(--color-accent-border);
  border-radius: 0.2rem;
}
#cart.latched #cart-close {
  pointer-events: all;
  opacity: 1;
}
#cart-close:hover {
  background-color: rgba(128, 128, 128, 0.099);
}
/* Background cursor when the panel is latched open */
body.clickable-bg * {
  cursor: pointer;
}
body.clickable-bg {
  cursor: pointer;
}

#cart,
#cart *:not(#cart-close, button, a) {
  cursor: default !important;
  pointer-events: all;
}
#cart.expanded {
  transition-duration: 0.37s;
  height: min(calc(100vh - 1rem - 2rem - 2rem - 3rem), 1000px);
}
/* .cart:hover {
  transition-duration: 0.37s;
  height: min(calc(100vh - 1rem - 2rem - 2rem - 3rem), 1000px);
} */

.cart {
  overflow: hidden;
  isolation: isolate;
  z-index: 51;
  grid-column: -2 / -1;
  height: 3rem;
  min-height: 0;
  display: grid;
  grid-template-rows: 3rem minmax(0, 1fr) auto;
  border-radius: 0 0 0.5rem 0.5rem;
  transition-property: height;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.78, 0, 0.22, 1);
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(40px);
}
.image {
  grid-area: image;
  height: 20rem;
}
.booking {
  background: radial-gradient(
    circle at 0 0,
    var(--color-accent) 0,
    #ffffff 100%
  );
  grid-area: booking;
}
.description {
  background: radial-gradient(
    circle at 100% 80%,
    var(--color-accent) 0,
    #ffffff 100%
  );
  grid-area: description;
  overflow-y: auto;
  max-height: 100%;
  /* height: 50rem; */
}
.socials {
  grid-area: socials;
  background: radial-gradient(
    circle at 140% 70%,
    var(--color-accent) 0,
    #ffffff 100%
  );
}

.image-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: max-content;
  padding: 0 2.8rem 0 2.5rem;
  background-color: var(--color-light-100);
  border-radius: 0 0 0.5rem 0;
  font-size: 1.3rem;
  font-weight: 300;
}

.nav a {
  font-weight: 100;
  font-size: 1.2rem;
  padding: 0.3rem 1rem;
  border-radius: 0.2rem;
}
.nav a:hover,
.nav label:hover {
  background-color: #0000000e;
}

.card-container-gird {
  display: grid;
  grid-template-rows: 3rem auto max-content;
  overflow-y: auto;
}
.card-container-gird .card-container {
  padding: 0.65rem 0;
}
.cart-grid {
  display: grid;
  grid-template-areas:
    "icon price"
    "icon products";
  grid-auto-columns: auto max-content;
}
.cart-icon {
  grid-area: icon;
}
.cart-price {
  line-height: 0.7rem;
  grid-area: price;
  font-weight: 500;
}
.cart-products {
  padding: 0 1px;
  font-size: 0.7rem;
  line-height: 0.5rem;
  grid-area: products;
}
.checkout-info * {
  color: #465358;
}
.checkout-info .cart-tax-line {
  margin: 0.1rem 0;
  padding-top: 0.18rem;
  border-top: 1px solid rgba(70, 83, 88, 0.14);
}
.checkout-info .cart-tax-line,
.checkout-info .cart-tax-line * {
  font-size: 0.78rem;
  color: #6f7b81;
  letter-spacing: 0.01em;
}
.checkout-info .cart-tax-line + .cart-tax-line {
  border-top: 0;
  padding-top: 0;
}
.checkout-info .cart-tax-line .cart-tax-value {
  font-weight: 500;
}
.bold {
  font-weight: 500;
}
.extra-tag {
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.2rem;
  color: #465358;
  background-color: #f3f8ff;
  height: max-content;
}
.netto * {
  color: #191919;
  color: #448eab;
}
.time-span {
  color: #2b353a;
  font-size: 0.9rem;
}
.cart-item-price {
  font-weight: 500;
  text-align: end;
  color: #2b353a;
}

.main-input.number::-webkit-inner-spin-button,
.main-input.number::-webkit-outer-spin-button {
  opacity: 1;
}
.main-input.number {
  -moz-appearance: menulist;
}
.main-input.small.number {
  margin: 0.3rem 0 0 -0.2rem;
  color: #448eab;
  text-align: center;
}
.main-input.small {
  font-size: 0.9rem;
  width: fit-content;
  padding: 0.2rem 0.2rem;
  font-variant: numeric;
}

.cart-item-description {
  margin-top: -0.4rem;
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  color: #6e6e6e;
  width: min(13rem, 100%);
}

.checkout-info .extra-tag {
  margin-right: 0.3rem;
}
.cart-item .extra-tag {
  margin-left: -0.3rem;
}
.cart-pay-wrapper {
  border-top: 1px solid rgb(217, 217, 217);
  background-color: var(--color-light-100);
  position: relative;
  z-index: 1;
}
.cart-item-wrapper {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  height: auto;
  mask-image: none;
  -webkit-mask-image: none;
}
.cart-inner-item-wrapper {
  padding: 1.5rem 1rem 2.4rem 1rem;
}
.cart-pay-wrapper > label > p {
  color: #2b353a;
  color: #2b353a;
  font-weight: 200;
  line-height: 1.1;
  font-size: 0.95rem;
}
.cart-pay-wrapper > label > select {
  color: #448eab;
}

hr {
  height: 1px;
  border: none;
  background-color: currentColor;
}

.thin {
  font-weight: 200;
}

.cart-item h4 {
  color: #448eab;
  font-size: 1.3rem;
}
.cart-item {
  padding: 0 0.5rem 0.5rem 0.5rem;
}
.cart-item:not(:last-child) {
  border-bottom: 1px solid rgb(217, 217, 217);
}

.cart-calendar-link {
  color: #448eab;
  text-decoration: underline;
  font-weight: 500;
  display: inline-block;
  margin-top: 0.2rem;
}

.cart-link-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.4rem;
  border: 1px dashed #cddbea;
  background: #f6f9fd;
}

.cart-link-block--missing {
  border-color: #f4b59a;
  background: #fff6f2;
}

.cart-link-badge {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #2b6f87;
}

.cart-link-hint {
  font-size: 0.7rem;
  color: #6e6e6e;
  font-weight: 500;
}

.cart-link-list {
  font-size: 0.85rem;
}
.cart-calendar-link:hover {
  opacity: 0.85;
}

.item-trash {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1rem;
  aspect-ratio: 1;
  opacity: 0.6;
  background-image: url(/images/icons/trash.svg);
}

.cart-blink {
  animation: cartBlink 0.8s ease 2;
}

@keyframes cartBlink {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(18, 146, 181, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(18, 146, 181, 0);
  }
}

.description h1 {
  color: #7d6752;
  color: #465358;
}
.grid-card h1 {
  margin-bottom: 0.2rem;
}
.grid-card h2 {
  color: #7d6752;
  color: #465358;
  margin-bottom: 0.2rem;
}
.grid-card:not(:has(.sport-menu)) p {
  color: #2b353a;
  font-weight: 200;
  line-height: 1.3;
  font-size: 0.95rem;
}
.grid-card img {
  border-radius: 0.5rem;
  width: 100%;
  margin: 0.5rem auto;
}

.grid-card ul {
  padding-top: 0.2rem;
}
.grid-card li {
  color: #2b353a;
  margin-top: 0.4rem;
  list-style: none;
  padding: 0.5rem 0.8rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.337);
  line-height: 1.3;
  font-size: 0.92rem;
  font-weight: 300;
}

.button-100 {
  padding: 0.5rem 2rem;
  font-size: 0.9rem;
  text-align: center;
  border-radius: 0.2rem;
  background: radial-gradient(
    circle at 0 300%,
    var(--color-accent) 0,
    #ffffff 100%
  );
}
.button-100:hover {
  background: var(--color-accent);
}
.button-100.is-loading,
.button-100[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
  cursor: progress;
}

.default-inset-100 {
  width: calc(100% - 4rem);
  margin: auto;
}

.burger {
  cursor: pointer;
  position: relative;
  height: 1.7rem;
  width: 2.1rem;
  padding: 0.2rem 0.4rem;
  display: grid;
  place-items: center;
}
.burger > div {
  width: 100%;
  aspect-ratio: 150 / 100;
  position: relative;
}
.burger > div div {
  position: absolute;
  width: 100%;
  left: 0;
  cursor: pointer;
  height: 2px;
  border-radius: 100vw;
  background-color: var(--color-dark-100);
  transition: transform 0.2s ease, top 0.2s ease, bottom 0.2s ease;
}

.burger > div div:first-child {
  top: 0;
}
.burger > div div:nth-child(2) {
  transition: opacity 0.1s;
  transition-delay: 0.1s;
  top: 50%;
  transform: translateY(-50%);
}
.burger > div div:last-child {
  bottom: 0;
}

body:has(#nav-checkbox:checked) .burger > div div:first-child {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
body:has(#nav-checkbox:checked) .burger > div div:nth-child(2) {
  opacity: 0;
  transition-delay: 0s;
}
body:has(#nav-checkbox:checked) .burger > div div:last-child {
  transform: translateY(50%) rotate(-45deg);
  bottom: 50%;
}

a:has(.button-images) * {
  cursor: pointer;
}
.button-images {
  transition: background-size 0.4s, opacity 0.4s, filter 0.4s;
  filter: blur(4px);
  scale: 1.2;
}
a:hover > .button-images {
  opacity: 1;
  background-size: 160%;
  filter: blur(0);
}

.button-images + p {
  position: absolute;
  transition: font-size 0.4s, opacity 0.4s, translate 0.4s;
  font-weight: 400;
}
a:hover > .button-images + p {
  opacity: 0;
  /* font-size: 0rem; */
  font-size: 20rem;
  transition: font-size 0.8s, opacity 0.4s, translate 0.8s;
  translate: 0px -3rem;
}

.grid-full {
  grid-column: 1 / -1;
}
.grid-first {
  grid-row: 1;
}

#nav-logo {
  transition-duration: 0.2s;
  transition-property: opacity, height, width, padding;
}
#nav-items-wrapper {
  transition: padding-left 0.2s;
}

.center-wrapper {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.center-wrapper .grid-card {
  padding: 1rem 2rem 2rem 2rem;
  grid-template-rows: auto auto;
  gap: 1rem;
}
.center-wrapper .grid-card h2,
.account-details.grid-card h2 {
  color: hsl(from var(--color-accent) h calc(s * 0.6) calc(l * 0.8));
  font-size: 1.8rem;
}
.input-label > p {
  padding-left: 0.2rem;
}

.main-input {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  width: 100%;
  outline-offset: 0;
  transition-property: outline, opacity, border, background-color, color;
  transition-duration: 0.2s;
}
*::placeholder {
  transition: opacity 0.2s;
  color: #cccccc;
}
*:user-invalid::placeholder {
  color: rgb(179, 123, 123);
}

.main-input[readonly] {
  outline: none;
  color: #afafaf;
  --color-accent: rgb(238, 238, 238);
  --color-accent-border: #eaeaea;
  --color-accent-shadow: #b4b4b419;
  pointer-events: none;
}

.main-input:focus::placeholder {
  opacity: 0.6;
}
.main-input:not([readonly], .password):focus {
  outline: 1px solid hsl(from var(--color-accent) h calc(s * 1.2) calc(l * 0.8));
  border-color: hsl(from var(--color-accent) h calc(s * 1.2) calc(l * 0.8));
}

.main-input:not(.password):user-invalid:focus {
  outline: 1px solid red;
  border-color: red;
}
.main-input:not(.password):user-invalid {
  border-color: red;
}
.main-input:user-invalid {
  color: red;
  background-color: #ffe4e3;
}

.submit:hover {
  background-color: #ebf4f7;
}

#standalone-logo {
  position: fixed;
  width: min(80%, 15rem);
  aspect-ratio: 854 / 213;
  top: 3rem;
  left: 50%;
  translate: -50% 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/images/logo-long.webp);
}

.reset-text {
  font-weight: 300;
  text-align: center;
}
.reset-text .countdown {
  font-variant: numeric;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  cursor: pointer;
  z-index: 40;
}
#nav-checkbox:checked ~ .nav-backdrop {
  display: block;
}

.main-input.standalone {
  width: fit-content;
}

.grid-account .grid-card .main-confirm {
  /* bottom: 1rem; */
  margin: 1rem 0;
}

.account-reservationen {
  gap: 1rem;
}
.reservation-overview {
  padding: 0.5rem 0.5rem;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 1rem;
}
.reservation-overview h4 {
  font-size: 1rem;
}
.reservation-overview .extra-tag {
  justify-self: center;
}
.reservation-overview .time-span {
  justify-self: end;
  font-size: 1rem;
}

.account-reservationen.account-widget-content {
  max-height: none;
  overflow: auto;
  max-height: 20rem;
  overflow-y: scroll;
}

.reservation-card {
  padding: 1rem 1.25rem;
  border-radius: .5rem;
  background-color: #fff;
}
.reservation-card .extra-tag {
  font-size: 0.85rem;
  /* text-transform: uppercase; */
  letter-spacing: 0.08em;
  color: var(--color-600, #5b5b5b);
}
.reservation-card h4 {
  font-size: 1.1rem;
  margin: 0;
}
.reservation-card p {
  margin: 0;
}
.reservation-head {
  border-bottom: 1px solid var(--color-accent-border, #e3ecee);
  padding-bottom: 0.75rem;
}
.reservation-timing {
  text-align: right;
}
.reservation-meta {
  font-size: 0.95rem;
  color: var(--color-700, #4a4a4a);
}
.reservation-payment {
  font-weight: 500;
  font-size: 0.95rem;
}
.reservation-policy {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background-color: #f3f8f9;
  border: 1px solid var(--color-accent-border, #dfe8ea);
}
.reservation-policy.policy-free {
  background-color: #ecfbf4;
  border-color: #b3e5c8;
}
.reservation-policy.policy-fee {
  background-color: #fff6ec;
  border-color: #ffd8b5;
}
.reservation-policy.policy-locked {
  background-color: #f7f7f7;
  border-color: #e1e1e1;
}
.reservation-note,
.reservation-action-note {
  font-size: 0.85rem;
  color: var(--color-600, #5b5b5b);
}
.reservation-actions {
  align-items: center;
}
.reservation-actions .reservation-cancel[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.account-widget-content {
  height: auto;
  max-height: 14rem;
  overflow: scroll;
  padding-bottom: 1rem;
}

.account-details {
  width: 100%;
  padding: 1rem 2rem 2rem 2rem;
}


.prices-grid {
  display: grid;
  gap: .5rem;
  grid-template-columns: .5fr 1fr 1fr .7fr;
  margin-bottom: 1.5rem;
}
.prices-grid .prices-sub {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.prices-grid .prices-sub .price-item {
  width: 100%;
  height: 100%;
  font-weight: 300;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: .2rem .4rem;
  font-size: .9rem;
  border-radius: .2rem;
  background-color: rgba(255, 255, 255, 0.476);
}
.prices-grid .prices-sub .price-item:first-child {
  font-weight: 400;
  /* text-align: start; */
  /* justify-content: start; */
}
.prices-grid .prices-sub .price-item:last-child {
  font-weight: 400;
  /* text-align: end; */
  /* justify-content: end; */
}

.calendar-preview {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 0;
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;
}
.calendar-preview__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  width: 100%;
  min-width: 0;
}
.calendar-preview__inner {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
}
.calendar-preview__body {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  --calendar-preview-height: 17.5rem;
}
.calendar-preview__grid {
  position: relative;
  display: flex;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #dde3e4;
  border-radius: 1rem 1rem 0 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}
.calendar-preview__grid::after {
  content: '';
  position: absolute;
  inset: 0.5rem;
  background: repeating-linear-gradient(
    180deg,
    rgba(60, 60, 60, 0.08) 0,
    rgba(60, 60, 60, 0.08) 1px,
    transparent 1px,
    transparent 18px
  );
  pointer-events: none;
}
.calendar-preview__grid > * {
  position: relative;
  z-index: 1;
}
.calendar-preview__time-col {
  flex: 0 0 48px;
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  color: var(--color-600, #667);
  padding: 0.5rem 0 0.5rem 0.75rem;
}
.calendar-preview__time-col .calendar-preview__time {
  text-transform: uppercase;
}
.calendar-preview__time-head {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 0.35rem;
  font-size: 0.7rem;
  color: var(--color-red-300, #d94440);
}
.calendar-preview__time-scale {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: var(--calendar-preview-height);
  max-height: var(--calendar-preview-height);
}
.calendar-preview__time {
  font-variant-numeric: tabular-nums;
  display: block;
  font-weight: 500;
  color: var(--color-600, #64707a);
}
.calendar-preview__time--major {
  color: var(--color-700, #3f4d56);
  font-weight: 600;
}
.calendar-preview__time--minor {
  color: var(--color-500, #8a969f);
}
.calendar-preview__time--muted {
  color: rgba(80, 96, 108, 0.2);
}
.calendar-preview__days {
  flex: 1 1 auto;
  display: flex;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.calendar-preview__day {
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e2e7eb;
  padding-left: 0.5rem;
  margin-left: 0.25rem;
}
.calendar-preview__day.is-today {
  color: var(--color-red-200, #d6404c);
}
.calendar-preview__day-head {
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  font-size: 0.8rem;
  gap: 0.1rem;
  margin-bottom: 0.35rem;
}
.calendar-preview__weekday {
  font-weight: 600;
  color: var(--color-700, #425159);
}
.calendar-preview__date {
  font-weight: 500;
  color: var(--color-600, #687078);
  font-size: 0.78rem;
}
.calendar-preview__lanes {
  display: grid;
  grid-template-columns: repeat(var(--lane-count, 1), minmax(32px, 1fr));
  gap: 0.35rem;
}
.calendar-preview__lane {
  position: relative;
  height: var(--calendar-preview-height);
  max-height: var(--calendar-preview-height);
  border-radius: 0.35rem;
  background: transparent;
  overflow: hidden;
}
.calendar-preview__slot {
  position: absolute;
  left: 2px;
  right: 4px;
  background: rgba(65, 120, 215, 0.78);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(28, 58, 120, 0.2);
}
.calendar-preview__cta {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 11rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 0.5rem 0 0 0;
  background-color: #fff;
  z-index: 1;
}
.calendar-preview__empty {
  margin: 0;
  color: var(--color-600, #6b6b6b);
}

.calendar-prices {
  background: transparent;
}
.calendar-prices h2 {
  margin: 0;
}
.calendar-prices__headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.calendar-prices__unit {
  font-size: 1rem;
  color: var(--color-600, #6b6b6b);
  white-space: nowrap;
}
.calendar-prices__unit:empty {
  display: none;
}
.prices-table {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.prices-row {
  display: grid;
  grid-template-columns: minmax(90px, 1.5fr) minmax(120px, 2fr) minmax(120px, 1.4fr) minmax(90px, 1fr);
  gap: 0.25rem;
}
.price-item {
  padding: 0.4rem 0.65rem;
  border-radius: 0.2rem;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.476);
  color: var(--color-700, #3f4d56);
  display: flex;
  align-items: center;
}
.price-item--title {
  font-weight: 600;
  align-items: flex-start;
}
.price-item--days {
  font-weight: 500;
  align-items: flex-start;
}
.price-item--time {
  justify-content: center;
}
.price-item--amount {
  font-weight: 600;
  justify-content: flex-end;
  padding-right: 0.8rem;
  position: relative;
}
.price-item--amount::before {
  content: 'CHF';
  position: absolute;
  left: 0.65rem;
  color: var(--color-600, #5d6a70);
  font-weight: 500;
}

@media (max-width: 900px) {
  .calendar-preview__body {
    --calendar-preview-height: 11.5rem;
  }
  .calendar-preview__grid {
    gap: 0.35rem;
    padding: 0.4rem;
  }
  .calendar-preview__time-col {
    flex: 0 0 32px;
    padding: 0.25rem;
    font-size: 0.65rem;
    letter-spacing: 0;
    align-items: flex-start;
  }
  .calendar-preview__time-head {
    font-size: 0.6rem;
    margin-bottom: 0.15rem;
  }
  .calendar-preview__time-scale {
    gap: 0.25rem;
  }
  .calendar-preview__days {
    gap: 0.25rem;
  }
  .calendar-preview__day {
    flex: 0 0 34px;
    padding-left: 0.25rem;
    margin-left: 0;
  }
  .calendar-preview__day-head {
    font-size: 0.65rem;
    margin-bottom: 0.2rem;
  }
  .calendar-preview__weekday {
    font-size: 0.6rem;
  }
  .calendar-preview__date {
    font-size: 0.62rem;
  }
  .calendar-preview__lanes {
    gap: 0.2rem;
    grid-template-columns: repeat(var(--lane-count, 1), minmax(20px, 1fr));
  }
  .calendar-preview__lane {
    border-radius: 0.25rem;
  }
  .calendar-preview__cta {
    min-width: 9rem;
    font-size: 0.85rem;
  }
  .calendar-prices {
    padding: 0.75rem;
  }
  .prices-table {
    gap: 0.5rem;
  }
  .prices-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .price-item {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
  }
  .price-item--title,
  .price-item--days {
    grid-column: span 2;
  }
  .price-item--time,
  .price-item--amount {
    grid-column: span 1;
  }
}
.pad-0 {
  padding: 0 !important;
}
.pad-x-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.pad-y-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.marg-bottom-0 {
  margin-bottom: 0 !important;
}

.cart-contact [data-voucher-recipient-wrap] > label {
  white-space: normal;
  align-items: center;
}

.cart-contact [data-voucher-recipient-wrap] input[type="radio"] {
  width: auto;
  min-width: auto;
  flex: 0 0 auto;
}

.cart-voucher-list .cart-voucher-label {
  display: block;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-voucher-item .item-trash {
  flex-shrink: 0;
}

.shop-item-card {
  border: 1px solid #dfe5ea;
  border-radius: 20px;
  padding: 32px;
  background: #fff;
  box-shadow: 0 10px 35px rgba(25, 52, 71, 0.08);
  margin: 40px 0;
  position: relative;
  overflow: hidden;
}

.shop-item-card--error {
  border-color: #f5b7b1;
  background: #fff6f5;
  color: #c0392b;
}

.shop-item-card--soldout {
  opacity: 0.9;
}

.shop-item-ribbon {
  position: absolute;
  top: 35%;
  left: -35%;
  right: -35%;
  padding: 0.4rem 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #c62828, #ef5350);
  transform: rotate(-32deg);
  box-shadow: 0 18px 30px rgba(198, 40, 40, 0.35);
  pointer-events: none;
}

.shop-item-header {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.shop-item-type {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7e8b96;
  margin-bottom: 4px;
}

.shop-item-price {
  text-align: right;
}

.shop-item-price strong {
  display: block;
  font-size: 1.6rem;
  color: #0f3c54;
}

.shop-item-price small {
  color: #7e8b96;
}

.shop-item-stock-hint {
  margin: 12px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f3c54;
}

.shop-item-card--soldout .shop-item-stock-hint {
  color: #7a1f1f;
}

.shop-item-subtitle {
  color: #5b6871;
}

.shop-item-body {
  margin: 24px 0;
  color: #3b4850;
}

.shop-item-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.shop-item-form--disabled {
  opacity: 0.55;
}

.shop-item-form--disabled button {
  cursor: not-allowed;
}

.shop-item-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  color: #28313b;
}

.shop-item-field select,
.shop-item-field input[type="number"] {
  border: 1px solid #ccd4da;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 1rem;
}

.shop-item-field--checkbox {
  border: 1px solid #e2e7ec;
  border-radius: 14px;
  padding: 14px;
}

.shop-item-field--checkbox legend {
  font-weight: 600;
  margin-bottom: 8px;
}

.shop-item-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.shop-item-checkbox:last-child {
  margin-bottom: 0;
}

.shop-item-message {
  font-size: 0.85rem;
  color: #0f3c54;
  min-height: 1.2em;
  margin: 0;
}

.shop-item-message.is-error {
  color: #c62828;
}

/* === CSS: xx-cms.css [root] === */
.cms-tool-bar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.cms-tool {
  display: block;
  width: 2rem;
  aspect-ratio: 1;
  backdrop-filter: blur(5px);
  background-color: rgba(63, 63, 63, 0.055);
  border-radius: 100vw;
  opacity: 0.7;

  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;

  transition-property: scale, opacity;
  transition-duration: 0.2s;
  transition-timing-function: linear(
    0,
    0.386 8%,
    0.688 16.5%,
    0.905 25.5%,
    0.985 30.3%,
    1.046 35.3%,
    1.082 39.6%,
    1.106 44.1%,
    1.119 48.9%,
    1.12 54%,
    1.101 63.3%,
    1.017 86.8%,
    1
  );
}
.cms-tool:hover {
  scale: 1.1;
  opacity: 1;
  transition-duration: 0.3s;
  transition-timing-function: linear(
    0,
    0.488 6.5%,
    0.856 13.5%,
    1.107 21.1%,
    1.191 25.2%,
    1.248 29.5%,
    1.272 32.6%,
    1.285 35.8%,
    1.287 39.3%,
    1.279 43%,
    1.24 50.2%,
    1.101 68.1%,
    1.044 77.4%,
    1.009 87.8%,
    1
  );
}

.cms-center-tool {
  width: 4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.cms-edit {
  background-image: url(/images/icons/edit.svg);
}
.cms-delete {
  background-image: url(/images/icons/delete.svg);
}
.cms-add {
  background-image: url(/images/icons/add.svg);
}

.cms-page-content {
  position: relative;
}

.cms-page-content::after {
  content: "";
  display: block;
  clear: both;
}

.cms-page-content p {
  line-height: 1.35!important;
}

.cms-page-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.cms-page-content img{
  height: auto;
  max-width: 100%;
}

.cms-page-content img.left,
.cms-page-content img.right {
  display: block;
  max-width: min(45%, 20rem);
  width: 100%;
  height: auto;
}

.cms-page-content img.left {
  float: left;
  margin: 0 1rem 1rem 0;
}

.cms-page-content img.right {
  float: right;
  margin: 0 0 1rem 1rem;
}

@media (max-width: 720px) {
  .cms-page-content img.left,
  .cms-page-content img.right {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem 0;
  }
}

.cms-page-content .cms-flex-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1.25rem 0;
}

.cms-page-content .cms-flex-row > *,
.cms-page-content .cms-flex-item {
  flex: 1 1 clamp(10rem, calc((100% - 2rem) / 3), 16rem);
  max-width: clamp(10rem, calc((100% - 2rem) / 3), 18rem);
}

.cms-page-content .cms-flex-row img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 720px) {
  .cms-page-content .cms-flex-row {
    gap: 0.75rem;
  }
  .cms-page-content .cms-flex-row > *,
  .cms-page-content .cms-flex-item {
    flex-basis: min(16rem, 100%);
    max-width: 100%;
  }
}

/* === CSS: y-media-sizes.css [root] === */
/* media-thin */

@media only screen and (min-width: 1270px) {
}

/* media-phone */
@media only screen and (max-width: 770px) {
  .nav .nav-top-inner a:not(#nav-logo) {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.2s, position .6s;
    transition-behavior: allow-discrete;
  }
}

@media only screen and (min-width: 671px) {
}
@media only screen and (max-width: 600px) {
.login-lock {
  display: none;
}
}

/* media-thin-phone */


@media (prefers-reduced-motion: reduce) {
  * {
    transition: none;
  }
}

/* === CSS: z-htmx-confirm.css [root] === */
.confirm-modal[hidden]{ display:none; }
  .confirm-modal{ position:fixed; inset:0; z-index:9999; }
  .confirm-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
  .confirm-modal__panel{
position: relative;
margin: auto;
top: 30vh;
max-width: 520px;
width: calc(100% - 2rem);
background: #d7d3d3;
color: #fff;
border-radius: 12px;
padding: 1.25rem;
box-shadow: 0 10px 40px rgba(60, 60, 60, 0.4);
  }
  .confirm-modal__title{ margin:0 0 .5rem; font-size:1.125rem; }
  .confirm-modal__text{ margin:0 0 1rem; opacity:.9; white-space:pre-wrap; }
  .confirm-modal__actions{ display:flex; gap:.5rem; justify-content:flex-end; }
  .btn{ padding:.6rem .9rem; border-radius:.6rem; border:0; cursor:pointer; }
  .btn--ghost{ background:transparent; color:#505050; outline:1px solid rgba(31, 0, 236, 0.25); }
  .btn--danger{ background:#ce2727; color:#fff; }

/* === CSS: z-mobile-optimize.css [root] === */
@media only screen and (max-width: 1050px) {
  .main-grid-a {
    grid-template-areas:
      "nav nav nav"
      "image cart"
      "image socials"
      "description socials"
      "booking news";
    grid-template-columns: 1fr 0.7fr;
  }
  .grid-sports {
    grid-template-areas:
      "image cart"
      "image socials"
      "description socials"
      "booking news";
    grid-template-columns: 1fr 0.7fr;
  }

  .grid-clm-3 {
    grid-template-columns: 1fr 0.7fr;
  }
  .grid-home {
    grid-template-columns: 1fr 0.7fr;
  }
  .footer-wrapper {
    flex-direction: column;
  }
  .grid-content {
    grid-template-areas:
    "description cart"
    "description socials"
    "description socials"
    "description news";
    grid-template-columns: 1fr 0.7fr;
    grid-template-rows: 3rem min-content auto;
  }
}

@media only screen and (max-width: 750px) {
  .main-grid-a {
    grid-template-areas:
      "nav"
      "cart"
      "image"
      "description"
      "booking"
      "news"
      "socials";
    grid-template-columns: 1fr;
    grid-template-rows: 3rem max-content auto;
  }
  .grid-sports {
    grid-template-areas:
      "cart"
      "image"
      "description"
      "booking"
      "news"
      "socials";
    grid-template-columns: 1fr;
    grid-template-rows: 3rem max-content auto;
  }

  .grid-clm-3 {
    grid-template-columns: 1fr;
  }
  .cart {
    grid-column: 1;
  }
  body #title-nav-title {
    display: none;
  }

  .grid-home {
    grid-template-areas:
      "cart"
      "logo"
      "sport-menu"
      "news"
      "description"
      "socials";
    grid-template-columns: 1fr;
    grid-template-rows: auto 13rem auto auto auto auto;
  }
  .logo-wrapper {
    background-size: contain;
  }
  .sport-menu > a {
    min-width: min(15rem, 100%);
  }
  .footer-location {
    flex-direction: column;
  }
  .nav {
    border-radius: 0.5rem 0.5rem 0 0;
  }

  .grid-calendar {
    grid-template-rows: 3rem auto max-content;
  }
  .checkout-totalline {
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .checkout-list {
    gap: 1.2rem;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
  }
  .grid-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cart"
      "description"
      "news"
      "socials";
  }

  [data-socials-list] .social-link {
    display: none !important;
  }
  [data-socials-list] .social-link[data-socials-fallback],
  [data-socials-list] .social-link[data-socials-qr] {
    display: flex !important;
  }
}

@media only screen and (max-width: 586px) {
  .x-span-2 {
    grid-column: span 1;
  }
  .grid-account {
    grid-template-columns: 1fr;
    grid-template-rows: 3.5rem max-content max-content;
  }
  .switch-board a {
    padding: 0.5rem 1rem;
  }
  .button-images + p {
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 530px) {
  .account-info {
    grid-template-columns: 1fr;
  }
}

/* === CSS: z-nsb-box.css [root] === */
/* =======================================================================
   NSB Box – Lightbox / Overlay
   Alle Variablen können später im :root überschrieben werden
   ======================================================================= */
:root {
  /* Overlay & Filter */
  --nsb-bg-overlay:   rgba(40,40,40,0.85);
  --nsb-bg-filter:    blur(4px);

  /* Content Container */
  --nsb-content-size: 90%;
  --nsb-border-type:  none;
  --nsb-border-radius: 5px;
  --nsb-shadow-type:  0 0 40px -10px #101010;

  /* Controls */
  --nsb-close-size:    2.4rem;
  --nsb-close-pos:     2rem;
  --nsb-close-shadow:  0 0 10px 0 #101010;

  --nsb-arrow-size:    2.8rem;
  --nsb-arrow-bg:      rgba(0,0,0,.35);
}

/* ==================== Grundlayout ==================== */
#nsbbox {
  position: fixed;
  inset: 0;
  display: flex;                 /* nur Flex */
  justify-content: center;
  align-items: center;
  z-index: 9999;

  background: var(--nsb-bg-overlay);
  backdrop-filter: var(--nsb-bg-filter);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
#nsbbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease;
}

/* ==================== Media Wrapper ==================== */
/* ==================== Media Wrapper ==================== */
#nsbbox .nsb-media {
  max-width:  var(--nsb-content-size);
  max-height: var(--nsb-content-size);
  border:     var(--nsb-border-type);
  border-radius: var(--nsb-border-radius);
  box-shadow: var(--nsb-shadow-type);
  background: #000;

  /* NEU: echtes Flex-Centering */
  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: transform .30s cubic-bezier(.22,.61,.36,1),
              opacity  .30s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
#nsbbox.open .nsb-media {
  opacity: 1;
  transform: none;
}
#nsbbox.fade-out .nsb-media {
  opacity: 0;
  transform: translateX(var(--dir, 0));
}

/* ==================== Media Content ==================== */
#nsbbox .nsb-media > img,
#nsbbox .nsb-media > iframe {
  display: block;
  /* Neu: Bild streng auf Viewport begrenzen */
  max-width:  90vw;   /* statt 80vw – mehr Platz, aber nicht zu nah an Pfeilen */
  margin: auto !important;       /* sichert horizontales + vertikales Zentrieren */
  border-radius: inherit;
  border: none;
  object-fit: contain;
  box-sizing: border-box;
  position: relative !important;
  left: auto !important;
  top: auto !important;
}

#nsbbox .nsb-media > img {
  max-height: 90vh;
}

#nsbbox .nsb-media > iframe {
  max-height: none;
}

/* ==================== Caption ==================== */
#nsbbox .nsb-caption {
  color: #fff;
  text-align: center;
  margin-top: 1rem;
  font-size: 1rem;
  max-width: 90%;
}

/* ==================== Buttons ==================== */
#nsbbox button {
  position: absolute;
  border: none;
  background: var(--nsb-arrow-bg);
  color: #fff;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  box-shadow: var(--nsb-close-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

#nsbbox .nsb-close {
  top: var(--nsb-close-pos);
  right: var(--nsb-close-pos);
  width: var(--nsb-close-size);
  height: var(--nsb-close-size);
  font-size: calc(var(--nsb-close-size) * 0.6);
}

#nsbbox .nsb-prev,
#nsbbox .nsb-next {
  top: 50%;
  transform: translateY(-50%);
  width: var(--nsb-arrow-size);
  height: var(--nsb-arrow-size);
  font-size: calc(var(--nsb-arrow-size) * 0.6);
}
#nsbbox .nsb-prev { left:  clamp(1rem, 3vw, 3rem); }
#nsbbox .nsb-next { right: clamp(1rem, 3vw, 3rem); }

#nsbbox.nsbbox--iframe .nsb-prev,
#nsbbox.nsbbox--iframe .nsb-next {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #nsbbox,
  #nsbbox .nsb-media {
    transition: none !important;
  }
}

/* === CSS: z-overwrites.css [root] === */
.hover, .hover-reverse {
  transition: opacity 0.2s;
}
.hover:hover {
  opacity: 0.6;
}
.hover-reverse:hover {
  opacity: 1;
}

.hover-scale {
  transition: scale 0.2s, opacity 0.2s;
}
.hover-scale:hover {
  opacity: 0.6;
  scale: 0.93;
}
.selectable::selection {
  color: #f23317;
}

.selectable {
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;

  cursor: text;
}

.debug {
  border: 1px solid red;
}

.no-display {
  display: none;
}

.force-radius-pill {
  border-radius: 9999px !important;
}
/* === CSS: zz-anim-preview.css [core] === */
#slow-anim * {
  transition-duration: 2.5s !important;
}

/* === CSS: zz-nsb-box.css [root] === */
:root {
  --nsb-bg-overlay:   rgba(40,40,40,0.85);
  --nsb-bg-filter:    blur(4px);
  --nsb-content-size: 90%;
  --nsb-border-type:  none;
  --nsb-border-radius: 5px;
  --nsb-shadow-type:  0 0 40px -10px #101010;
  --nsb-close-size:    2.4rem;
  --nsb-close-pos:     2rem;
  --nsb-close-shadow:  0 0 10px 0 #101010;
  --nsb-arrow-size:    2.8rem;
  --nsb-arrow-bg:      rgba(0,0,0,.35);
}

#nsbbox {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  background: var(--nsb-bg-overlay);
  backdrop-filter: var(--nsb-bg-filter);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
#nsbbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease;
}

#nsbbox .nsb-media {
  max-width:  var(--nsb-content-size);
  max-height: var(--nsb-content-size);
  border:     var(--nsb-border-type);
  border-radius: var(--nsb-border-radius);
  box-shadow: var(--nsb-shadow-type);
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: transform .30s cubic-bezier(.22,.61,.36,1),
              opacity  .30s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
  margin: auto;
}
#nsbbox.open .nsb-media {
  opacity: 1;
  transform: none;
}
#nsbbox.fade-out .nsb-media {
  opacity: 0;
  transform: translateX(var(--dir, 0));
}

#nsbbox .nsb-media > img,
#nsbbox .nsb-media > iframe {
  display: block;
  max-width:  90vw;
  margin: auto !important;
  border-radius: inherit;
  border: none;
  object-fit: contain;
  box-sizing: border-box;
  position: relative !important;
  left: auto !important;
  top: auto !important;
}

#nsbbox .nsb-media > img {
  max-height: 90vh;
}

#nsbbox .nsb-media > iframe {
  max-height: none;
}

#nsbbox .nsb-caption {
  color: #fff;
  text-align: center;
  margin-top: 1rem;
  font-size: 1rem;
  max-width: 90%;
}

#nsbbox button {
  position: absolute;
  border: none;
  background: var(--nsb-arrow-bg);
  color: #fff;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  box-shadow: var(--nsb-close-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}
#nsbbox .nsb-close {
  top: var(--nsb-close-pos);
  right: var(--nsb-close-pos);
  width: var(--nsb-close-size);
  height: var(--nsb-close-size);
  font-size: calc(var(--nsb-close-size) * 0.6);
}
#nsbbox .nsb-prev,
#nsbbox .nsb-next {
  top: 50%;
  transform: translateY(-50%);
  width: var(--nsb-arrow-size);
  height: var(--nsb-arrow-size);
  font-size: calc(var(--nsb-arrow-size) * 0.6);
}
#nsbbox .nsb-prev { left:  clamp(1rem, 3vw, 3rem); }
#nsbbox .nsb-next { right: clamp(1rem, 3vw, 3rem); }
#nsbbox.nsbbox--iframe .nsb-prev,
#nsbbox.nsbbox--iframe .nsb-next {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #nsbbox,
  #nsbbox .nsb-media {
    transition: none !important;
  }
}

/* === CSS: zzz-loader.css [root] === */
/* HX-Indikator versteckt, erst nach kurzer Verzögerung sichtbar */
.htmx-indicator {
  display: none;
}
.htmx-request {
  display: block;
}
#loader.htmx-indicator {
  display: none;
}
#loader {
  pointer-events: none;
  display: block;
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  margin: 0;
  width: 100%;
  background: var(--loader);
  height: 5px;
  opacity: 0;
}
#loader.htmx-request {
  display: block;
  opacity: 0;
  animation:
    loaderfade 0s linear 0.3s forwards,
    load 12s cubic-bezier(0.45, 0, 0.25, 1) 1;
}
@keyframes load {
  0% {
    width: 0;
  }
  5% {
    width: 0;
  }
  6% {
    width: 10%;
  }
  100% {
    width: 100%;
  }
}
@keyframes loaderfade {
  to { opacity: 1; }
}