@layer framework {

  body, .bg-grain {
    position: relative;
    isolation: isolate;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url('/images/grain.png') repeat;
      background-size: 150px 150px;
      opacity: 0.02;
      pointer-events: none;
      z-index: -999;
    }
  }
  /* CSS Reset & general Settings */
  *,
  ::after,
  ::before {
    box-sizing: border-box;
    outline: none;
    padding: unset;
    margin: unset;
    /*outline: 1px solid red;*/
  }

  *:focus-visible {
    outline: var(--outline);
    outline-offset: var(--outline-offset-m);
  }

  img,
  svg {
    display: block;
    object-fit: cover;
    max-width: 100%;
    height: auto;
    display: block;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  p, a, small, b, span, i, li, figcaption, dt, dd, *::before, *::after {
    text-wrap: pretty;
    text-box: trim-both cap alphabetic;
  }

  p, small, b, span, i, li {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  h1, h2, h3, h4, h5 {
    text-wrap: balance;
    text-box: trim-both cap alphabetic;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  a,
  button,
  fieldset {
    color: var(--primary);
    text-decoration: none;
  }

  button {
    cursor: pointer;
    background-color: transparent;
    border: none;
  }

  li {
    list-style-type: none;
  }

  html {
    scrollbar-gutter: stable;
  }

  body {
    -webkit-font-smoothing: antialiased;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    font-size: inherit;
  }
  /* CSS Reset & general Settings END */

  /* Custom Properties */
  :root {
    --content-width: clamp(280px, calc(93cqw - 60px), 1800px);
    --outer-margin: calc((100cqw - var(--content-width)) / 2);
    --outer-margin-wg: calc(var(--outer-margin) - var(--gap));
    --header-height: clamp(90px, 85.3846px + 1.2821vw, 110px);
    --hero-height: calc(100svh - var(--header-height));
    --section-padding: var(--space-3xl);
    --gap-faq: var(--space-xs);
    --card-padding: var(--space-s);
    --card-outer-radius: var(--radius-m);
    --card-inner-radius: calc(var(--card-outer-radius) - var(--card-padding));
    --toggle-size: 70px;

    @media (min-aspect-ratio: 2) {
      --header-height: clamp(100px, 96px + 1.25vw, 120px);
      --toggle-size: 50px;
    }

    /* Font Sizes */
    --step--2: clamp(0.8681rem, 0.8632rem + 0.0217vw, 0.88rem);
    --step--1: clamp(1.0417rem, 1.0178rem + 0.1061vw, 1.1rem);
    --step-0: clamp(1.25rem, 1.1989rem + 0.2273vw, 1.375rem);
    --step-1: clamp(1.5rem, 1.4105rem + 0.3977vw, 1.7188rem);
    --step-2: clamp(1.8rem, 1.6575rem + 0.6335vw, 2.1484rem);
    --step-3: clamp(2.16rem, 1.945rem + 0.9555vw, 2.6855rem);
    --step-4: clamp(2.592rem, 2.2791rem + 1.3908vw, 3.3569rem);
    --step-5: clamp(3.1104rem, 2.6662rem + 1.9741vw, 4.1962rem);
    --step-6: clamp(3.7325rem, 3.1136rem + 2.7504vw, 5.2452rem);
    --step-7: clamp(4.479rem, 3.6291rem + 3.7773vw, 6.5565rem);
    --step-8: clamp(5.3748rem, 4.2208rem + 5.1288vw, 8.1956rem);

    /* Adaptive line height */
    --line-height-s: calc(.9em + 0.5rem);
    --line-height-m: calc(1.2em + 0.7rem);
    --line-height-l: calc(1.4em + 0.9rem);

    /* Spaces */
    --space-3xs: clamp(0.3125rem, 0.2869rem + 0.1136vw, 0.375rem);
    --space-2xs: clamp(0.625rem, 0.5994rem + 0.1136vw, 0.6875rem);
    --space-xs: clamp(0.9375rem, 0.8864rem + 0.2273vw, 1.0625rem);
    --space-s: clamp(1.25rem, 1.1989rem + 0.2273vw, 1.375rem);
    --space-m: clamp(1.875rem, 1.7983rem + 0.3409vw, 2.0625rem);
    --space-l: clamp(2.5rem, 2.3977rem + 0.4545vw, 2.75rem);
    --space-xl: clamp(3.75rem, 3.5966rem + 0.6818vw, 4.125rem);
    --space-2xl: clamp(5rem, 4.7955rem + 0.9091vw, 5.5rem);
    --space-3xl: clamp(7.5rem, 7.1932rem + 1.3636vw, 8.25rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.3125rem, 0.1591rem + 0.6818vw, 0.6875rem);
    --space-2xs-xs: clamp(0.625rem, 0.446rem + 0.7955vw, 1.0625rem);
    --space-xs-s: clamp(0.9375rem, 0.7585rem + 0.7955vw, 1.375rem);
    --space-s-m: clamp(1.25rem, 0.9176rem + 1.4773vw, 2.0625rem);
    --space-m-l: clamp(1.875rem, 1.517rem + 1.5909vw, 2.75rem);
    --space-l-xl: clamp(2.5rem, 1.8352rem + 2.9545vw, 4.125rem);
    --space-xl-2xl: clamp(3.75rem, 3.0341rem + 3.1818vw, 5.5rem);
    --space-2xl-3xl: clamp(5rem, 3.6705rem + 5.9091vw, 8.25rem);

    /* Radius */
    --radius-s: clamp(4px, 3.3043px + 0.2174vw, 6px);
    --radius-m: clamp(15px, 12.5652px + 0.7609vw, 22px);
    --radius-l: clamp(37px, 32.4783px + 1.413vw, 50px);

    /* Border & Outline */
    --border-width-s: 2px;
    --border-width-m: 3px;
    --border-width-l: 4px;
    --border-light: 1px solid var(--primary-faded-strong);
    --border-s: var(--border-width-s) solid var(--primary);
    --border-m: var(--border-width-m) solid var(--primary);
    --border-l: var(--border-width-m) solid var(--primary);
    --outline: var(--border-width-m) dotted var(--primary);
    --outline-offset-s: var(--border-width-m);
    --outline-offset-m: calc(var(--border-width-m) * 2);
    --outline-offset-l: calc(var(--border-width-m) * 5);

    /* Miscellaneous */
    --shadow-m: 15px 15px 30px hsla(0, 0%, 0%, 0.1);
    --shadow-s: 5px 5px 10px hsla(0, 0%, 0%, 0.2);
    --golden-ratio: 1.6180/1;
  }
  /* Custom Properties END */

  /* Layout Settings */
  body {
    min-height: 100svh;
    overflow-x: clip;

    section, .section {
      container: section / inline-size;
      margin-inline: auto;
      padding-block: var(--section-padding);
      display: grid;
      gap: var(--space-xl);
    }

    @media (width >=2100px) {
      section:not(.full) {
        max-width: 2000px;
      }
    }

    .container {
      width: var(--content-width);
      display: flex;
      gap: var(--space-xl);
      margin-inline: auto;
    }
  }
  /* Layout Settings END */

  /* Font Styles */
  /* use --font-limit in cqw to limit font size */
  .button,
  .navigation,
  .arrow-button {
    font: 400 var(--step-1) / 1em "Borna";
    text-transform: lowercase;
  }

  body, h1, h2, h3, h4, h5, h6 {
    font: 400 min(var(--step-0), var(--font-limit, 100cqw)) / var(--line-height-l) "Basier Circle";
  }

  .title-1 {
    font: 400 min(var(--t-size, var(--step-2)), var(--font-limit, 100cqw)) / var(--line-height-m) "Basier Circle";
  }

  .title-2 {
    font: 600 min(var(--t-size, var(--step-2)), var(--font-limit, 100cqw)) / var(--line-height-m) "Borna";
  }

  .title-1, .title-2 {
    &.xl {
      --t-size: var(--step-8);
      line-height: var(--line-height-s);
    };
    &.l {
      --t-size: var(--step-7);
      line-height: var(--line-height-s);
    };
    &.m {--t-size: var(--step-5)};
    &.s {--t-size: var(--step-3)};
    &.xs {--t-size: var(--step-1)};
  }

  .subtitle-1 {
    font: 400 min(var(--s-size, var(--step-1)), var(--font-limit, 100cqw)) / var(--line-height-m) "Calendas Plus";
    color: var(--secondary);
  }

  .subtitle-2 {
    font: 400 min(var(--s-size, var(--step-1)), var(--font-limit, 100cqw)) / var(--line-height-m) "Calendas Plus";
    font-style: italic;
    color: var(--secondary);
  }

  .subtitle-1, .subtitle-2 {
    &.xl {--s-size: var(--step-5)};
    &.l {--s-size: var(--step-5)};
    &.m {--s-size: var(--step-4)};
    &.s {--s-size: var(--step-3)};
  }

  .overline-1 {
    font: 400 min(var(--o-size, var(--step-1)), var(--font-limit, 100cqw)) / var(--line-height-m) var(--font-1);
    text-transform: none;
    order: -1;
  }

  .overline-1, .overline-2 {
    &.l {--o-size: var(--step-5)};
    &.m {--o-size: var(--step-4)};
    &.s {--o-size: var(--step-3)};
    &.xs {--o-size: var(--step-2)};
  }

  .small, small {
    font: 400 var(--step--1) / var(--line-height-m) "Rouna";
  }
  /* Font Styles END */

  /* +++ Colors & Settings +++ */
  :root {
    color-scheme: light;

    &:has(:is(#theme-toggle-header, #theme-toggle-popover):checked) {
      color-scheme: dark;
    }

    --primary: light-dark(var(--black), var(--white));
    --secondary: light-dark(var(--white), var(--black));
    --bg-default: light-dark(hsl(0 0% 77%), hsl(0 0% 10%));
    --bg-accent: light-dark(hsl(0 0% 85%), hsl(0 0% 5%));
    --font-default: var(--primary);
    --font-accent: color-mix(in hsl, var(--font-default), white 10%);
    --black: hsl(40 0% 5%);
    --white: hsl(40 0% 95%);
    --primary-faded-strong: color-mix(in hsl, var(--primary) 20%, white);
    --primary-faded-light: color-mix(in hsl, var(--primary) 50%, white);
    --success: rgb(42, 123, 111);
    --warning: rgb(212, 119, 44);
    --danger: rgb(150, 74, 80);
    --primary-gradient: linear-gradient(
      35deg,
      var(--primary) 60%,
      color-mix(in hsl, var(--primary) 80%, transparent)
    );
    --secondary-gradient: linear-gradient(
      35deg,
      var(--secondary) 60%,
      color-mix(in hsl, var(--primary) 80%, transparent)
    );
  }

  body {
    color: var(--font-default);
    background-color: var(--bg-default);
  }

  * {
    scrollbar-color: var(--primary) transparent;
    accent-color: var(--primary);
  }

  ::selection {
    color: var(--bg-default);
    background: var(--font-default);
  }
  /* +++ Color Settings END +++ */

  /* +++ Utility Classes +++ */
  .visually-hidden {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  .overlay {
    border-image: linear-gradient(hsl(0 0% 0% / .1), hsl(0 0% 0% / .3)) fill 0;
  }

  .break-out {
    border-image: conic-gradient(var(--bg-accent)) fill 0//0 100vw;
  }

  .break-out {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 100vw;
      transform: translateX(-50%);
      background: var(--bg-accent);
      opacity: .2;
      mix-blend-mode: multiply;
      pointer-events: none;
      z-index: -1;
    }
  }
  /* +++ Utility Classes END +++ */

  /* Motion and Animation */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }

    :root {
      interpolate-size: allow-keywords;
    }

    @view-transition {
      navigation: auto;
    }
  }

  /* Custom Cursor */
  :root {
    --auto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28px' height='32px' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke='hsl(0,0%,85%)' stroke-width='4' d='m6.4 4.6 15.8 14.7-9.9-.5-6.6 7.3z'/%3E%3Cpath stroke='hsl(0,0%,10%)' stroke-width='2' d='m6.4 4.6 15.8 14.7-9.9-.5-6.6 7.3z'/%3E%3C/g%3E%3C/svg%3E") 6 4, auto;
    --pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29px' height='32px' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke='hsl(0,0%,85%)' stroke-width='4' d='m7.4 4.6 15.8 14.7-9.9-.5-6.6 7.3z'/%3E%3Cpath fill='hsl(0,0%,10%)' stroke='hsl(0,0%,10%)' stroke-width='2' d='m7.4 4.6 15.8 14.7-9.9-.5-6.6 7.3z'/%3E%3C/g%3E%3C/svg%3E") 6 4, pointer;
    --text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11px' height='32px' %3E%3Cg fill='none' fill-rule='evenodd' stroke-linecap='square'%3E%3Cpath stroke='hsl(0,0%,85%)' stroke-width='4' d='M2.5 2h6M2.5 30h6M5.5 28.7V1.3'/%3E%3Cpath stroke='hsl(0,0%,10%)' stroke-width='2' d='M5.5 28.7V2.3M2.5 2h6M2.5 30h6'/%3E%3C/g%3E%3C/svg%3E")5 16, text;
    --zoom-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32px' height='32px' %3E%3Cg fill='none' fill-rule='evenodd' transform='translate(2 2)'%3E%3Ccircle cx='14' cy='14' r='14' stroke='hsl(0,0%,85%)' stroke-width='4'/%3E%3Ccircle cx='14' cy='14' r='14' stroke='hsl(0,0%,10%)' stroke-width='2'/%3E%3Cpath stroke='hsl(0,0%,85%)' stroke-linecap='square' stroke-width='4' d='m26.3 26.3 1.5 1.5'/%3E%3Cpath stroke='hsl(0,0%,10%)' stroke-linecap='square' stroke-width='2' d='M24.3 24.3 28 28'/%3E%3Cpath stroke='hsl(0,0%,85%)' stroke-linecap='square' stroke-width='4' d='M14 7v14M7 14h14'/%3E%3Cpath stroke='hsl(0,0%,10%)' stroke-linecap='square' stroke-width='2' d='M7 14h14M14 7v14'/%3E%3C/g%3E%3C/svg%3E") 16 16, zoom-in;
    --zoom-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32px' height='32px' %3E%3Cg fill='none' fill-rule='evenodd' transform='translate(2 2)'%3E%3Ccircle cx='14' cy='14' r='14' stroke='hsl(0,0%,85%)' stroke-width='4'/%3E%3Ccircle cx='14' cy='14' r='14' stroke='hsl(0,0%,10%)' stroke-width='2'/%3E%3Cpath stroke='hsl(0,0%,85%)' stroke-linecap='square' stroke-width='4' d='m26.3 26.3 1.5 1.5'/%3E%3Cpath stroke='hsl(0,0%,10%)' stroke-linecap='square' stroke-width='2' d='M24.3 24.3 28 28'/%3E%3Cpath stroke='hsl(0,0%,85%)' stroke-linecap='square' stroke-width='4' d='M7 14h14'/%3E%3Cpath stroke='hsl(0,0%,10%)' stroke-linecap='square' stroke-width='2' d='M7 14h14'/%3E%3C/g%3E%3C/svg%3E") 16 16, zoom-out;
  }

  body {
    cursor: var(--auto);
  }

  a,
  button,
  input[type="checkbox"],
  input[type="submit"],
  input[type="checkbox"] + label,
  label:has(input),
  label:has([type="checkbox"]),
  fieldset,
  details,
  .embla__viewport.is-dragging {
    cursor: var(--pointer) !important;
  }

  input, textarea {
    cursor: var(--text);
  }

  [data-lightbox], #lightbox img {
    cursor: var(--zoom-in) !important;
  }
  #lightbox .zoom {
    cursor: var(--zoom-out) !important;
  }
  /* Custom Cursor END */

  /* Components */
  /* Button */
  .button {
    border-radius: 99px;
    border: var(--border-l);
    transition: color var(--anim-duration, 0.4s);
    padding: .4em 3em;
    display: grid;
    place-content: center;
    width: max-content;
    overflow: hidden;
    isolation: isolate;
    position: relative;
    height: max-content;

    > * {
      pointer-events: none;
    }

    &::before {
      content: "";
      position: absolute;
      top: var(--mouse-y);
      left: var(--mouse-x);
      width: 100%;
      aspect-ratio: 1;
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0);
      will-change: transform;
      z-index: -1;
      transition: transform var(--anim-duration, 0.4s) linear;
    }

    &:is(:hover, :focus-visible)::before {
      transform: translate(-50%, -50%) scale(2.1);
    }

    &, &.primary {
      &::before {
        background: var(--secondary);
      }
      &:is(:focus-visible, :hover) {
        color: var(--white);
      }
    }

    &.secondary {
      color: var(--white);
      background: var(--secondary);

      &::before {
        background: var(--bg-default);
      }

      &:is(:focus-visible, :hover){
        color: var(--primary);
      }

      &.accent::before {
        background: var(--bg-accent);
      }
    }
    &.full {
      width: 100%;
    }
  }
  /* Button END */
  /* Arrow Button */
  .arrow-button {
    font-weight: 400;
    border-radius: 99px;
    outline-color: var(--secondary);
    outline-offset: var(--outline-offset-l);
    width: max-content;
    text-box: trim-both cap alphabetic;
    letter-spacing: 0.08em;

    &::after {
      content: " →";
      position: relative;
      transition: all 0.3s;
      left: 0em;
    }

    &:is(:hover, :focus-visible)::after {
      left: 0.6em;
    }
  }
  /* Arrow Button END */
  /* Popover */
  .popover {
    border: var(--border-m);
    border-color: var(--primary);
    border-radius: var(--radius-l);
    margin: auto;
    background-color: color-mix(in hsl, var(--bg-default) 40%, transparent);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    align-content: center;
    box-shadow: var(--shadow-m);
    opacity: 0;
    transition: scale 0.5s, opacity 0.5s, display 0.5s allow-discrete;
    padding: var(--space-s-m);
    padding-top: var(--space-m);
    scrollbar-width: none;
    max-height: 90dvh;
  }

  [popover] {
    &::backdrop {
      background-color: color-mix(in hsl, var(--bg-default) 20%, transparent);
      -webkit-backdrop-filter: grayscale(0.7);
      backdrop-filter: grayscale(0.7);
      transition: all 0.5s;
      opacity: 0;
    }

    &:popover-open {
      opacity: 1;
      pointer-events: auto;

      @starting-style {
        opacity: 0;
      }

      &::backdrop {
        opacity: 1;

        @starting-style {
          opacity: 0;
        }
      }
      body:has(&) {
        overflow: clip;
        pointer-events: none;
      }
    }
  }
  /* Popover END */
  /* Close Toggle */
  .close-toggle {
    width: var(--toggle-size);
    aspect-ratio: 1;
    position: relative;
    align-self: end;
    margin-left: auto;
    transition: all 0.3s;
    border-radius: 50%;
    background: unset;

    &::before,
    &::after {
      content: "";
      height: var(--border-width-s);
      width: 90%;
      background: var(--primary);
      position: absolute;
      top: 50%;
      right: 50%;
      translate: 50% -50%;
      rotate: -45deg;
      transition: all 0.3s;
    }

    &::after {
      rotate: 45deg;
    }

    &:hover,
    &:focus-visible {
      background: var(--primary);

      &::before,
      &::after {
        background: var(--bg-default);
      }
    }
  }
  /* Close Toggle END */
  /* Link */
  .link,
  :is(.blog-post, .legal-text) a {
    display: inline;
    letter-spacing: 0.05em;
    background: linear-gradient(var(--primary), var(--primary)) 0 100%/100% var(--border-width-s) no-repeat;
    padding: 0.25em 0.2em;
    transition: all 0.3s;
    line-height: 1.4;
    letter-spacing: 0.05em;

    &:hover,
    &:focus-visible {
      color: var(--bg-default);
      background-size: 100% 100%;
      outline: unset;
    }
  }
  /* End Link */
  /* SwapHover Link */
  .swaphover {
    display: block;
    overflow-y: clip;
    border-radius: 0.3em;
    padding-block: 0.05em;
    width: max-content;
    text-box: trim-both text text;

    > * {
      display: inline-block;
      text-shadow: 0 1.1lh 0 currentColor;
      transition: translate 0.4s;
    }

    &:is(:hover, :focus-visible) > * {
      translate: 0 -1.1lh;
    }
  }
  /* SwapHover Link END */
  /* Line Link */
  .link-line {
    position: relative;
    line-height: 1;

    &::before {
      content: '';
      position: absolute;
      bottom: -0.2em;
      right: 0;
      width: 0;
      height: 1.5px;
      border-radius: 0.75px;
      transition: width 0.3s linear;
      background: currentColor;
    }

    &:is(:hover, :focus-visible)::before {
      right: unset;
      left: 0;
      width: 100%;
    }
  }
  /* Line Link END */
  /* External Links */
  a[href^="http"]:not([href*="fotografist.de"], :has(svg))::after {
    content: '';
    display: inline-block;
    width: 0.7em;
    aspect-ratio: 1;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='%230D0D0D' fill-rule='nonzero' d='M8 0v2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2v-4h2v4a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h4Zm10 0v8h-2V3.4L9.5 10 8.1 8.5 14.6 2H10V0h8Z'/%3E%3C/svg%3E") center / contain no-repeat;
    margin-left: .2em;
  }
  /* External Links END */
  /* Ckeckbox */
  [type="checkbox"] {
    appearance: none;
    display: inline-grid;
    place-content: center;
    border: var(--border-width-m) solid currentcolor;
    border-radius: var(--radius-s);
    width: 1.2em;
    height: 1.2em;
    margin-right: var(--space-xs);
    transition: all 0.3s;

    &:is(:hover, :focus-visible) {
      color: var(--secondary);
    }

    &:checked {
      color: var(--success);
    }

    &::before {
      content: "";
      width: 0.7em;
      aspect-ratio: 1;
      background: var(--bg-default);
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      scale: 0;
      transition: all 0.2s;
    }

    &:checked {
      background: currentcolor;

      &:before {
        scale: 1;
      }
    }
  }
  /* Forms */
  /* Layout */
  form {
    display: grid;
    gap: var(--space-m);
  }

  /* Layout END */
  /* Input Styling */
  label:not(:has([type='checkbox'])) {
    position: relative;

    input,
    textarea {
      width: 100%;
      border-radius: var(--radius-m);
      background: var(--bg-accent);
      outline: unset;
      padding-inline: var(--space-2xs) var(--space-l);
      border: var(--border-width-m) solid transparent;
      resize: none;
      background-position: top 0.4em right 0.4em;
      //background-size: 1.5rem auto;
      background-repeat: no-repeat;

      &:focus-visible {
        border-color: var(--secondary);
      }
    }

    span {
      position: absolute;
      z-index: 1;
      line-height: 1;
      pointer-events: none;
      left: 50%;
      top: 0.6em;
      translate: -50% 0%;
      background: var(--bg-accent);
      border-radius: 20px;
      padding: 0.2em 0.6em;
      transition: all 0.3s;
    }
  }

  label:not(:has([type='checkbox'])):focus-within,
  label:has(:is(input:not([type='checkbox']), textarea):not(:placeholder-shown)) {
    span {
      top: -0.5em;
      font-size: 0.8em;
      color: hsl(from var(--primary) h s l / 0.5);
    }
  }

  /* Input Styling END */

  /* Form Validation */
/* Remove autofill styling in Safari and Chrome */
input::-webkit-contacts-auto-fill-button {
  display: none !important;
  pointer-events: none;
  visibility: hidden;
}
input:-webkit-autofill, input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
}
/* Remove autofill styling in Safari and Chrome END */

input {
  background-position: top .25rem right 0rem;
  background-size: 1.5rem auto;
  background-repeat: no-repeat;
}

label:has(:is(input:not([type='checkbox']), textarea):not(:placeholder-shown, :focus):invalid) {
  input,
  textarea {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  }
  span {
    color: var(--danger) !important;
  }
}
label:has(:is(input:not([type='checkbox']), textarea):not(:placeholder-shown):focus:invalid) {
  span {
    color: var(--warning) !important;
  }
}
label:has(:is(input:not([type='checkbox']), textarea):not(:placeholder-shown):valid) {
  input,
  textarea {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  }
  span {
    color: var(--success) !important;
  }
}
#form-status {
  display: none;
  border: var(--border-s);
  border-left-width: calc(var(--border-width-l) * 2);
  border-radius: 0 99px 99px 0;
  padding: var(--space-xs) var(--space-m);
  max-width: unset;
  grid-column: span 2;
  text-align: start;
  height: 0;
  transition: all 0.5s allow-discrete;
  overflow: clip;

  &:is(.success, .error) {
    display: block;
    height: unset;

    @starting-style {
      height: 0;
      opacity: 0;
    }
  }

  &.success {
    color: var(--success);
    border-color: var(--success);
  }

  &.error {
    color: var(--danger);
    border-color: var(--danger);
  }
}
/* Form Validation END */
}
/* Forms END */
/* Details / FAQ */
details {
  border: var(--border-m);
  border-color: transparent;
  border-radius: var(--radius-m);
  transition: all 0.3s;
  background: var(--bg-accent);

  @supports (interpolate-size: allow-keywords) {
    &::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: all 0.5s allow-discrete;
    }
  }

  summary {
    list-style: none; /* remove icon Chrome */
    position: relative;
    padding: var(--space-xs) var(--space-s);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-xs-s);
    align-items: center;

    /* remove icon Safari */
    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: "+";
      font-size: var(--step-2);
      right: var(--card-padding);
      transition: all 0.3s;
      text-box: trim-both cap alphabetic;
    }
  }

  p {
    padding: var(--space-xs);
    color: var(--primary);
  }

  &:hover,
  &[open],
  &:has(:focus-visible) {
    border-color: var(--secondary);
    box-shadow: var(--shadow);
  }

  &[open] {
    &::details-content {
      block-size: auto;
    }
    summary::after {
      rotate: 45deg;
    }
  }
}
/* Details / FAQ END */
/* Card */
.card {
  background: var(--bg-accent);
  border-radius: var(--card-outer-radius);
  padding: var(--space-m) var(--space-s);
  overflow: clip;
}
/* Card END */
/* Divider */
hr {
  border: unset;
  border-top: var(--border-m);
}
/* Divider END */
/* Components END */
}
/* Layer Framework END */