.svg-inline--fa {
  overflow: visible;
  box-sizing: content-box;
  display: inline-block;
  height: 1em;
  vertical-align: -0.125em;
}

/*-------------------------------------------------+
 |                                                 |
 |                      RESET                      |
 |                                                 |
 +-------------------------------------------------*/

@layer reset {
  *,
  *::after,
  *::before {
    padding: 0;
    box-sizing: border-box;
    font: inherit;
  }

  *:not(dialog) {
    margin: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    html *,
    *::before,
    *::after {
      transition: all 0.3s ease;
      scroll-behavior: smooth;
      transition-behavior: allow-discrete;
      interpolate-size: allow-keywords;
    }
  }

  body {
    min-height: 100dvh;
    background-color: #fff;
    color: #000;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  ul,
  ol {
    list-style: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  address {
    font-style: normal;
  }

  :where([hidden]) {
    display: none !important;
  }

  :where(:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}

@layer normalize {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }
  p {
    text-wrap: pretty;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  p,
  blockquote,
  pre,
  figure,
  dl,
  dd {
    margin: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

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

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

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  fieldset {
    border: 0;
    min-width: 0;
    padding: 0;
  }

  legend {
    padding: 0;
  }

  textarea {
    resize: vertical;
  }

  button,
  select {
    text-transform: none;
  }

  input[type="checkbox"],
  input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }

  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
}
/*-------------------------------------------------+
 |                                                 |
 |                      FONTS                      |
 |                                                 |
 +-------------------------------------------------*/

@layer fonts {
  html,
  body {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    font-family: Dosis, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-rendering: optimizeSpeed;
  }

  .big {
    font-size: 1.25rem;
  }
  .bigger {
    font-size: 1.75rem;
  }
  .xl {
    font-size: 2rem;
  }

  .caps {
    text-transform: capitalize;
  }
  .caps-lock,
  .uppercase {
    text-transform: uppercase;
  }
  .text-center {
    text-align: center;
  }
  .text-primary {
    color: var(--primary);
  }
  .text-secondary {
    color: var(--secondary);
  }
  .text-accent {
    color: var(--accent);
  }

  .bold,
  strong {
    font-weight: 700;
  }
  .bolder {
    font-weight: 900;
  }
}

/*-------------------------------------------------+
 |                                                 |
 |                    UTILITIES                    |
 |                                                 |
 +-------------------------------------------------*/

@layer utilities {
  .accordion {
    border: 1px solid var(--very-light-gray);
    border-radius: 6px;
    margin: 10px 0;
    background-color: #f9f9f9;
    padding: 10px 15px;
    overflow: hidden;
    @media (prefers-reduced-motion: no-preference) {
      transition: all 0.3s ease;
      transition-behavior: allow-discrete;
      interpolate-size: allow-keywords;
    }
  }

  .accordion summary {
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    outline: none;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 0.1rem;
  }

  .accordion::details-content {
    height: 0px;
    overflow: hidden;
    opacity: 0;
    @media (prefers-reduced-motion: no-preference) {
      transition:
        all 0.4s ease,
        height 0.4s ease,
        opacity 0.4s ease;
      transition-behavior: allow-discrete;
    }
  }

  .accordion:open::details-content {
    height: auto;
    opacity: 1;
    padding-inline: 1ch;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  .accordion:open summary {
    padding-block: 1rem;
  }
  .accordion:open summary::after {
    transform: rotate(0deg);
  }

  .accordion summary::after {
    content: "▼";
    margin-left: 2ch;
    transform: rotate(90deg);
    @media (prefers-reduced-motion: no-preference) {
      transition: transform 0.3s ease;
      transition-behavior: allow-discrete;
      interpolate-size: allow-keywords;
    }
  }

  .accordion summary:hover {
    color: var(--accent);
  }

  .block {
    display: block;
  }

  [class|="btn"] {
    display: inline-flex;
    align-items: center;
    gap: 1ch;
    border: none;
    background: transparent;
    color: var(--black);
    padding: 1rem 2rem;
  }
  .btn-primary {
    background: var(--primary);
  }
  .btn-secondary {
    background: var(--secondary);
  }
  .btn-accent {
    background: var(--accent);
  }
  .btn-dark {
    background: var(--gray);
    color: var(--white);
    border-radius: 5px;
    &:hover {
      background: var(--light-beige);
    }
  }
  .btn-gray {
    background: var(--very-light-gray);
    color: var(--light-gray);
    border-radius: 5px;
    &:hover {
      filter: brightness(75%);
      color: var(--black);
    }
  }

  @property --special-btn-overlay {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
  }
  .btn-special {
    border: 2px solid
      oklch(from var(--accent) calc(l + 0.025) calc(c - 0.025) h);
    color: var(--white);
    font-weight: 700;
    border-radius: 5px;
    padding: 1rem 2rem 1rem 1rem;
    background:
      linear-gradient(
        rgb(0 0 0 / var(--special-btn-overlay)),
        rgb(0 0 0 / var(--special-btn-overlay))
      ),
      /* linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 0%)), */
        linear-gradient(
          to top,
          oklch(from var(--accent) calc(l + 0.025) calc(c - 0.005) h),
          oklch(from var(--accent) calc(l + 0.075) calc(c - 0.025) h)
        );
    transition: --special-btn-overlay 0.5s ease;
    &:hover {
      --special-btn-overlay: 7%;
    }
  }

  .center {
    place-self: center;
  }

  .fit {
    width: fit-content;
  }

  .grow {
    flex-grow: 1;
  }

  .m-y-s {
    margin-block: 1rem;
  }
  .m-y {
    margin-block: 2rem;
  }
  .m-y-l {
    margin-block: 4rem;
  }
  .m-b-s {
    margin-bottom: 1rem;
  }
  .m-b {
    margin-bottom: 2rem;
  }
  .m-b-l {
    margin-bottom: 4rem;
  }

  .color-card {
    background-color: var(--bg-color);
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-areas: "icon heading" ". text" ". button";
    color: #fff;
    font-weight: 500;
    row-gap: 1rem;
    column-gap: 1rem;
    > i {
      grid-area: icon;
      place-self: center;
      font-size: 2.25rem;
    }
    > h2 {
      grid-area: heading;
      text-transform: uppercase;
      font-size: 1.5rem;
      font-weight: 700;
      align-self: center;
    }
    > p {
      grid-area: text;
      display: grid;
      row-gap: 1rem;
      font-size: 1.1rem;
      font-weight: 600;
      line-height: 1.5em;
    }
    > button,
    > a {
      margin-top: 2.75rem;
      grid-area: button;
      color: inherit;
      text-decoration: none;
      width: fit-content;
      padding: 1rem 1.25rem;
      border: 2px solid white;
      align-self: end;
      font-weight: 600;
      transition: all 0.4s ease-in-out;
      place-self: end;
      display: flex;
      gap: 1rem;
      justify-content: space-between;
      align-items: center;
      &:hover {
        color: #000;
        background-color: #fff;
      }
    }
  }
  .color-card.subgrid {
    grid-column: span 2;
    grid-row: span 3;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }
  .color-card.subgrid-y {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }

  .content {
    margin-inline: auto;
    max-width: min(calc(100dvw - 4ch), var(--max-content));
  }
  .content-small {
    max-width: min(calc(100dvw - 4ch), var(--max-small-content));
  }

  .link {
    text-decoration: underline;
    color: var(--primary);
  }

  .list {
    list-style: disc;
    padding-left: 4ch;
  }

  [class|="sep"] {
    border: 1px solid var(--light-beige);
    border-radius: max(100vh, 100vw);
    opacity: 75%;
  }
  .sep-hor {
    width: 100%;
    height: 1px;
  }
  .sep-ver {
    width: 1px;
    height: 100%;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }

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

  .w-full {
    width: 100%;
  }
  .h-full {
    height: 100%;
  }
}

/*-------------------------------------------------+
 |                                                 |
 |                     RootVars                    |
 |                                                 |
 +-------------------------------------------------*/
:root {
  --white: #ffffff;
  --very-light-gray: #eee;
  --light-gray: #999999;
  --gray: #666666;
  --dark-gray: #151515;
  --black: #000000;
  --primary: #ec754c;
  --secondary: #de7f59;
  --accent: #ff9900;
  --light-beige: #e2c38c;
  --dark-beige: #c0b599;

  --sheen: #b2c5d533;

  --max-content: 70rem;
  --max-small-content: 40rem;

  interpolate-size: allow-keywords;
}

/*-------------------------------------------------+
 |                                                 |
 |                      Header                     |
 |                                                 |
 +-------------------------------------------------*/
header {
  position: sticky;
  z-index: 1000;
  top: 0;
  width: 100%;
  background-color: var(--white);
  padding: 1rem 3rem;
}
header nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  text-transform: uppercase;
  img {
    justify-self: start;
    max-height: 10rem;
    height: 100%;
    max-width: max(15dvw, 15rem);
  }
  div ul {
    justify-self: start;
    display: flex;
    flex-wrap: wrap;

    a {
      font-size: 0.85rem;
      height: 100%;
      position: relative;
      color: var(--gray);
      font-weight: 700;
      letter-spacing: 2px;
      padding: 3ch 1.5rem;
      transition:
        text-decoration 0s ease,
        color 1.5s ease,
        opacity 1.5s ease;
      &,
      & * {
        transition-duration: 1.5s;
      }
      &::after {
        content: "";
        width: 0px;
        height: 0;
        border: 2px solid;
        position: absolute;
        top: 50%;
        margin-top: 20px;
        left: 50%;
        margin-left: -2px;
        opacity: 0;
        transition:
          text-decoration 0s ease,
          color 1.5s ease,
          opacity 1.5s ease;
      }
      &:hover,
      &[data-active] {
        color: var(--primary);
        text-decoration: underline;
        &::after {
          opacity: 1;
        }
      }
    }
  }
}

#kontakt-link {
  anchor-name: --kontakt-link;
}
#kontakt-submenu {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  position-anchor: --kontakt-link;
  top: anchor(bottom);
  left: anchor(left);
  right: anchor(right);
  height: auto;
  opacity: 0;

  @media (prefers-reduced-motion: no-preference) {
    transition:
      opacity 1s ease,
      text-decoration 0s ease,
      visibility 0s ease;
  }
}
header nav:has(#kontakt-link:hover) #kontakt-submenu,
#kontakt-submenu:hover {
  visibility: visible;
  pointer-events: all;
  opacity: 1;
}

@media (max-width: 975px) {
  header > nav {
    display: flex;
    flex-direction: column;
    place-items: center;
    > div > ul {
      height: 0;
      width: 0;
      overflow: hidden;
      flex-direction: column;
    }
  }
  div:has(> [for="isNavOpen"]) {
    align-self: start;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  [for="isNavOpen"] {
    align-self: end;
    &::before {
      content: "≡";
    }
  }
  header:has(#isNavOpen:checked) {
    [for="isNavOpen"] {
      &::before {
        content: "✖";
      }
    }
    > nav > div > ul {
      height: auto;
      width: auto;
      gap: 2rem;
      ::after {
        display: none;
      }
    }
    #kontakt-submenu {
      position: relative;
      display: flex;
      visibility: visible !important;
      opacity: 1;
      pointer-events: all;
      flex-direction: column;
      align-self: start;
      margin-block: 2rem;
      a {
        height: 100%;
        position: relative;
        color: var(--light-gray);
        font-weight: 700;
        letter-spacing: 2px;
        padding: 3ch 2rem;
        &,
        & * {
          transition-duration: 0s;
        }
        &:hover {
          color: var(--primary);
          text-decoration: underline;
        }
      }
    }
  }
}
#kontakt-submenu {
  display: none !important;
}

/*-------------------------------------------------+
 |                                                 |
 |                       Hero                      |
 |                                                 |
 +-------------------------------------------------*/
[id|="hero"] {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  color: var(--white);
  > * {
    grid-row: 1;
    grid-column: 1;
  }
  > div {
    text-align: center;
    > h1 {
      font-weight: 700;
      margin-block: 1rem;
      letter-spacing: 1px;
    }
    > p {
      font-size: 1.15rem;
      font-weight: 600;
    }
  }
  > img {
    z-index: -2;
    isolation: isolate;
    width: 100%;
    height: 100%;
  }
}
#hero-small {
  height: 10rem;
  place-items: center;
  overflow: hidden;

  > img {
    /* filter: blur(4px); */
    overflow: hidden;
  }

  > div > h1 {
    text-transform: uppercase;
    font-size: 1.5rem;
  }
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    z-index: -1;
    background-color: rgb(0 0 0 / 50%);
  }
}
#hero-big {
  height: 40rem;

  > div {
    align-self: end;
    justify-self: start;
    display: flex;
    flex-direction: column;
    place-items: start;
    text-align: start;
    margin-left: max(2ch, calc((100dvw - var(--max-content)) / 2));
    margin-bottom: 2rem;
    > h1 {
      font-size: 1.75rem;
    }

    > * {
      filter: drop-shadow(2px 4px 0.15rem rgb(from var(--black) r g b / 75%));
    }
  }
}

/*-------------------------------------------------+
 |                                                 |
 |                      Footer                     |
 |                                                 |
 +-------------------------------------------------*/
footer {
  width: 100%;
  background-color: var(--very-light-gray);
  padding-block: 3rem;
  padding-inline: 2ch;
}
footer ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
  grid-template-rows: auto auto auto;
  grid-auto-rows: auto auto auto;
  li {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    grid-row: span 3;

    > h2 {
      font-size: larger;
      font-weight: 700;
      text-transform: uppercase;
      text-align: left;
    }
    > h2 + div {
      width: 6ch;
      height: 1px;
      border-radius: 100dvw;
      border: 1px solid var(--light-beige);
      margin-block: 1rem;
    }
  }
}