@import url(https://fonts.googleapis.com/css2?family=Rubik:ital@0;1&display=swap);
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: 'Rubik', ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-white: #fff;
    --spacing: 0.25rem;
    --text-sm: 27px;
    --text-sm--line-height: 33px;
    --text-base: 24px;
    --text-base--line-height: 28px;
    --text-lg: 54px;
    --text-lg--line-height: 64px;
    --text-xl: 84px;
    --text-xl--line-height: 100px;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-brown: #6a1300;
    --color-home: #7984C0;
    --color-services: #4CB955;
    --color-projects: #E8702D;
    --color-clients: #FF6767;
    --color-about: #B697CC;
    --color-contact: #C2BAB7;
    --color-bee: #D3D652;
    --spacing-grid: 40px;
    --spacing-gridHalf: 20px;
    --spacing-gridDouble: 80px;
    --spacing-column: 64px;
    --spacing-contentDesktop: 34px;
    --spacing-contentMobile: 104px;
    --text-small: 18px;
    --text-small--line-height: 22px;
    --text-base2xl: 30px;
    --text-base2xl--line-height: 35px;
    --text-sm2xl: 37px;
    --text-sm2xl--line-height: 45px;
    --text-md: 34px;
    --text-md--line-height: 40px;
    --text-md2xl: 44px;
    --text-md2xl--line-height: 50px;
    --text-xl2xl: 140px;
    --text-xl2xl--line-height: 160px;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::-moz-placeholder {
    opacity: 1;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::-moz-placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .invisible {
    visibility: hidden;
  }
  .fixed {
    position: fixed;
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .z-10 {
    z-index: 10;
  }
  .container {
    width: 100%;
    @media (width >= 28.75rem) {
      max-width: 28.75rem;
    }
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 120rem) {
      max-width: 120rem;
    }
  }
  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .w-full {
    width: 100%;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .justify-between {
    justify-content: space-between;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .bg-brown {
    background-color: var(--color-brown);
  }
  .bg-clients {
    background-color: var(--color-clients);
  }
  .bg-home {
    background-color: var(--color-home);
  }
  .bg-projects {
    background-color: var(--color-projects);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }
  .pt-contentMobile {
    padding-top: var(--spacing-contentMobile);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-14 {
    padding-bottom: calc(var(--spacing) * 14);
  }
  .pb-column {
    padding-bottom: var(--spacing-column);
  }
  .pb-contentDesktop {
    padding-bottom: var(--spacing-contentDesktop);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-md {
    font-size: var(--text-md);
    line-height: var(--tw-leading, var(--text-md--line-height));
  }
  .text-small {
    font-size: var(--text-small);
    line-height: var(--tw-leading, var(--text-small--line-height));
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:text-xl {
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:w-1\/3 {
    @media (width >= 64rem) {
      width: calc(1/3 * 100%);
    }
  }
  .lg\:w-2\/3 {
    @media (width >= 64rem) {
      width: calc(2/3 * 100%);
    }
  }
  .lg\:pt-8 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 8);
    }
  }
  .lg\:pt-contentDesktop {
    @media (width >= 64rem) {
      padding-top: var(--spacing-contentDesktop);
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\32 xl\:w-2\/3 {
    @media (width >= 120rem) {
      width: calc(2/3 * 100%);
    }
  }
  .\32 xl\:text-xl2xl {
    @media (width >= 120rem) {
      font-size: var(--text-xl2xl);
      line-height: var(--tw-leading, var(--text-xl2xl--line-height));
    }
  }
}
html {
  width: 100%;
  overflow-x: hidden;
}
body {
  display: flex;
  min-height: 100vh;
  flex-direction: row-reverse;
  width: 100%;
  overflow-x: hidden;
  &.angebot {
    background-color: var(--color-services);
    .container-content {
      background-color: var(--color-services);
    }
  }
  &.projects, .projects {
    background-color: var(--color-projects);
    .container-content {
      background-color: var(--color-projects);
    }
  }
  &.clients, .clients {
    background-color: var(--color-clients);
    .container-content {
      background-color: var(--color-clients);
    }
  }
  &.about {
    background-color: var(--color-about);
    .container-content {
      background-color: var(--color-about);
    }
  }
  &.contact {
    background-color: var(--color-contact);
    .container-content {
      background-color: var(--color-contact);
    }
  }
  &.bee {
    background-color: var(--color-bee);
    .container-content {
      background-color: var(--color-bee);
    }
  }
}
.pt-contentDesktop {
  .max-w-content {
    .pb-column {
      &:first-child {
        h1:first-child {
          margin-top: -10px;
          border: 1px solid red;
        }
      }
    }
  }
}
.container-menu {
  padding-inline: var(--spacing-gridHalf);
  transform: translateX(-100%);
  transition: transform 0.4s ease-out;
  &.active {
    transform: translateX(0%);
    transition: transform 0.4s ease-in;
  }
  @media (min-width: 768px) {
    padding-inline: var(--spacing-grid);
  }
  @media (min-width: 1024px) {
    transform: translateX(0%);
    transition: transform 0s;
  }
}
.container-content {
  padding-inline: var(--spacing-gridHalf);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  @media (min-width: 768px) {
    padding-inline: var(--spacing-grid);
  }
  @media (min-width: 1024px) {
    width: calc(2/3 * 100%);
  }
  @media (min-width: 1920px) {
    padding-inline: var(--spacing-gridDouble);
  }
}
.container-full {
  width: 100%;
  padding-inline: var(--spacing-gridHalf);
  @media (min-width: 768px) {
    padding-inline: var(--spacing-grid);
  }
}
#mainnav {
  .container {
    .nav {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
      .nav-item {
        padding-bottom: calc(var(--spacing) * 2);
        color: var(--color-white);
        transition: 0.3s;
        &:hover {
          transition: 0.3s;
        }
        &:nth-child(1) {
          &.active {
            color: var(--color-services);
          }
          &:hover {
            color: var(--color-services);
          }
        }
        &:nth-child(2) {
          &.active {
            color: var(--color-projects);
          }
          &:hover {
            color: var(--color-projects);
          }
        }
        &:nth-child(3) {
          &.active {
            color: var(--color-clients);
          }
          &:hover {
            color: var(--color-clients);
          }
        }
        &:nth-child(4) {
          &.active {
            color: var(--color-about);
          }
          &:hover {
            color: var(--color-about);
          }
        }
        &:nth-child(5) {
          &.active {
            color: var(--color-contact);
          }
          &:hover {
            color: var(--color-contact);
          }
        }
        &:nth-child(6) {
          &.active {
            color: var(--color-bee);
          }
          &:hover {
            color: var(--color-bee);
          }
        }
      }
    }
  }
}
.hamburger {
  transform: translateY(-6px);
  @media (min-width: 460px) {
    transform: translateY(0px);
  }
  .line {
    background-color: var(--color-white);
    width: 35px;
    height: 2px;
    display: block;
    margin: 6px auto;
    transition: all 0.3s ease-in-out;
  }
  &.open-m {
    .line {
      &:nth-child(2) {
        opacity: 0;
      }
      &:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
      }
      &:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
      }
    }
  }
}
.hamburger:hover {
  cursor: pointer;
}
.logo-container {
  .logo {
    .logo-image {
      width: 100%;
      height: 200px;
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: contain;
      background-color: var(--color-white);
      border: 25px solid #fff;
      margin-bottom: 16px;
      border-radius: 7px;
      @media (min-width: 768px) {
        width: 250px;
        height: 150px;
      }
    }
  }
  p.text-small {
    font-size: var(--text-small);
    line-height: var(--tw-leading, var(--text-small--line-height));
    font-size: 18px;
    line-height: 22px;
  }
}
.project-item {
  &:hover {
    cursor: pointer;
  }
  img {
    max-width: 675px;
    width: 100%;
    height: auto;
  }
}
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  &::before {
    display: block;
    content: "";
  }
  .embed-responsive-item, iframe, embed, object, video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}
.embed-responsive-21by9 {
  &::before {
    padding-top: percentage(9 / 21);
  }
}
.embed-responsive-16by9 {
  &::before {
    padding-top: percentage(9 / 16);
  }
}
.embed-responsive-4by3 {
  &::before {
    padding-top: percentage(3 / 4);
  }
}
.embed-responsive-1by1 {
  &::before {
    padding-top: percentage(1 / 1);
  }
}
.eacc-widget-container {
  .jsx-24432616 {
    display: none;
  }
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  color: var(--color-brown);
  * {
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum";
    -webkit-font-smoothing: antialiased;
  }
  background-color: red !@import;
  &.preload {
    * {
      -webkit-transition: none !important;
      -moz-transition: none !important;
      -ms-transition: none !important;
      -o-transition: none !important;
    }
  }
}
h1, h2, h3, h4, h5, h6, p, li, ul, ol, span {
  color: var(--color-brown);
}
p {
  padding-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  @media (min-width: 1920px) {
    font-size: var(--text-base2xl);
    line-height: var(--tw-leading, var(--text-base2xl--line-height));
  }
}
h1, h2 {
  padding-bottom: calc(var(--spacing) * 5);
  p {
    font-size: inherit;
    line-height: inherit;
  }
}
h3, h4, h5, h6 {
  padding-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  @media (min-width: 1920px) {
    font-size: var(--text-sm2xl);
    line-height: var(--tw-leading, var(--text-sm2xl--line-height));
  }
}
ul + h1 {
  padding-top: calc(var(--spacing) * 12);
}
p + h1 {
  padding-top: calc(var(--spacing) * 12);
}
ul + h2 {
  padding-top: calc(var(--spacing) * 12);
}
p + h2 {
  padding-top: calc(var(--spacing) * 12);
}
p.mb-0 {
  margin-bottom: calc(var(--spacing) * 0);
}
p.mb-0 + h2 {
  padding-top: calc(var(--spacing) * 1);
}
ul + h3 {
  padding-top: calc(var(--spacing) * 12);
}
p + h3 {
  padding-top: calc(var(--spacing) * 12);
}
ul + h4 {
  padding-top: calc(var(--spacing) * 12);
}
p + h4 {
  padding-top: calc(var(--spacing) * 12);
}
.container-content {
  h1:not([class*="text-lg"]):not([class*="text-xl"]):not([class*="text-xl2xl"]), h2:not([class*="text-lg"]):not([class*="text-xl"]):not([class*="text-xl2xl"]) {
    padding-bottom: calc(var(--spacing) * 5);
    font-size: var(--text-md);
    line-height: var(--tw-leading, var(--text-md--line-height));
    @media (min-width: 1920px) {
      font-size: var(--text-md2xl);
      line-height: var(--tw-leading, var(--text-md2xl--line-height));
    }
  }
  ul, li {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    @screen 2xl {
      font-size: var(--text-base2xl);
      line-height: var(--tw-leading, var(--text-base2xl--line-height));
    }
  }
  ul {
    list-style-type: disc;
    padding-left: 1.4rem;
    padding-bottom: calc(var(--spacing) * 4);
  }
  a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
}
div#biene {
  background-image: url('/assets/template/img/biene.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  height: 85px;
  left: 0;
  position: absolute;
  top: 0;
  width: 85px;
  z-index: 1001;
  #speechbubble {
    display: none;
    position: absolute;
    top: 0;
    left: -110%;
    min-width: 120px;
    height: 30px;
    padding: 0px;
    background: #FFFFFF;
    border-radius: 7px;
    color: var(--color-brown);
    font-size: 12px;
    line-height: 14px;
    font-family: Rubik;
    span {
      display: none;
      padding: 7px;
      white-space: nowrap;
      &.active {
        display: block;
      }
    }
    &:after {
      content: '';
      position: absolute;
      border-style: solid;
      border-width: 8px 7px 0;
      border-color: #FFFFFF transparent;
      display: block;
      width: 0;
      z-index: 1;
      margin-left: -7px;
      bottom: -8px;
      left: 80%;
    }
    &:before {
      content: '';
      position: absolute;
      border-style: solid;
      border-width: 8px 7px 0;
      border-color: rgba(122,22,0,0.0) transparent;
      display: block;
      width: 0;
      z-index: 0;
      margin-left: -7px;
      bottom: -9px;
      left: 80%;
    }
  }
  &.flip {
    background-image: url('/assets/template/img/biene-flip.png');
    #speechbubble {
      left: 67%;
      &:after {
        left: 20%;
      }
      &:before {
        left: 20%;
      }
    }
  }
}