:root {
    --content-width: 1280px;
    --contact-button-min-width: calc(var(--content-width) + 150);
    --column-gap: 4vw;
    --nav-toggle-width: 200px;
    --nav-toggle-width-hover: 230px;
    --section-padding-top: max(6rem, 4vw);
    --section-padding-bottom: max(6rem, 4vw);

    --cta-circle-size: 200px;

    --color-beige: #e8ccc0;
    --color-brown: #a49171;
    --color-blue: #acc0d2;
    --color-dark-blue: #496277;
    --color-black: #111111;
    --color-white: #ffffff;

    --button-color: var(--color-blue);
    --button-hover: var(--color-beige);

    /* typographic steps */
    --step--1: clamp(0.94rem, calc(0.92rem + 0.09vw), 1rem);
    --step-0: clamp(1.13rem, calc(1.09rem + 0.18vw), 1.25rem);
    --step-1: clamp(1.35rem, calc(1.29rem + 0.3vw), 1.56rem);
    --step-2: clamp(1.62rem, calc(1.52rem + 0.48vw), 1.95rem);
    --step-3: clamp(1.94rem, calc(1.8rem + 0.71vw), 2.44rem);
    --step-4: clamp(2.33rem, calc(2.13rem + 1.03vw), 3.05rem);
    --step-5: clamp(2.8rem, calc(2.51rem + 1.45vw), 3.82rem);
}

@font-face {
    font-family: "Hertine";
    src:
        url("/assets/fonts/hertine/Hertine.ttf") format("truetype"),
        url("/assets/fonts/hertine/Hertine.woff") format("woff"),
        url("/assets/fonts/hertine/Hertine.otf") format("opentype");
}

@font-face {
    font-family: "UnicaOne";
    font-weight: normal;
    src: url("/assets/fonts/Unica_One/UnicaOne-Regular.ttf");
}

@font-face {
    font-family: "Roboto";
    font-weight: 100;
    src: url("/assets/fonts/Roboto/Roboto-Thin.ttf");
}

@font-face {
    font-family: "Roboto";
    font-weight: 100;
    font-style: italic;
    src: url("/assets/fonts/Roboto/Roboto-ThinItalic.ttf");
}

@font-face {
    font-family: "Roboto";
    font-weight: 300;
    src: url("/assets/fonts/Roboto/Roboto-Light.ttf");
}

@font-face {
    font-family: "Roboto";
    font-weight: 300;
    font-style: italic;
    src: url("/assets/fonts/Roboto/Roboto-LightItalic.ttf");
}

@font-face {
    font-family: "Roboto";
    font-weight: 400;
    src: url("/assets/fonts/Roboto/Roboto-Regular.ttf");
}

@font-face {
    font-family: "Roboto";
    font-weight: 400;
    font-style: italic;
    src: url("/assets/fonts/Roboto/Roboto-Italic.ttf");
}

@font-face {
    font-family: "Roboto";
    font-weight: 700;
    font-style: italic;
    src: url("/assets/fonts/Roboto/Roboto-BoldItalic.ttf");
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: var(--step-0);
}

body:not(.has_intro) main {
    padding-top: 10rem;
}

a {
    color: var(--color-black);
}

.button,
button.submit,
.formblock__submit input[type="submit"] {
    border: 2px solid var(--color-black);
    border-radius: 300px;
    padding: 1rem 2rem;
    display: inline-block;
    background-color: transparent;
    text-decoration: none;
    /* font-family: "UnicaOne";
  text-transform: uppercase; */

    background: none;
    border: 2px solid;
    font: inherit;
    line-height: 1;
    margin: 0.5em;
    padding: 1em 2em;
}

.form-card .button {
    --button-color: var(--color-white);
    --button-hover: var(--color-white);
}

.background-olive .button,
.background-ocean .formblock__submit input[type="submit"] {
    --button-color: #958467;
    --button-hover: #958467;
}

.background-blue .button,
.background-ocean .formblock__submit input[type="submit"] {
    --button-color: #c5d2dc;
    --button-hover: #c5d2dc;
}

.background-rose .button,
.background-ocean .formblock__submit input[type="submit"] {
    --button-color: #ebdbd3;
    --button-hover: #ebdbd3;
}

.background-ocean .button,
.background-ocean .formblock__submit input[type="submit"] {
    --button-color: #697e8e;
    --button-hover: #697e8e;
}

.button,
.formblock__submit input[type="submit"] {
    box-shadow:
        0em 0em 0 0 var(--button-color),
        inset 0em 0em 0 0 var(--button-color);
}

.button:hover,
.button:focus,
button.submit:hover,
button.submit:focus,
.formblock__submit input[type="submit"]:hover,
.formblock__submit input[type="submit"]:focus {
    box-shadow:
        0 0 0 0 var(--button-hover),
        inset 6em 3.5em 0 0 var(--button-hover);
    cursor: pointer;
}

.button,
.formblock__submit input[type="submit"] {
    color: var(--button-color);
    transition: 0.25s;
    color: var(--color-black);
}

.button:hover,
.button:focus,
.formblock__submit input[type="submit"]:hover,
.formblock__submit input[type="submit"]:focus {
    border-color: var(--button-hover);
}

.button:active,
.formblock__submit input[type="submit"]:active {
    transform: translateX(0.2em) translateY(0.2em);
}

/* button.button {
  padding: 4px 14px;
} */

hgroup span {
    text-transform: uppercase;
}

h1,
.looks-like-h1,
h2,
.looks-like-h2,
h3,
.looks-like-h3,
h4,
.looks-like-h4,
h5,
.looks-like-h5,
h6,
.looks-like-h6 {
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    line-height: 1.2;
}

h1,
.looks-like-h1 {
    font-size: var(--step-4);
}

h2,
.looks-like-h2 {
    font-size: var(--step-3);
}

h3,
.looks-like-h3 {
    font-size: var(--step-2);
}

h4,
.looks-like-h4 {
    font-size: var(--step-1);
}

h5,
.looks-like-h5 {
    font-size: var(--step-0);
}

h6,
.looks-like-h6 {
    font-size: var(--step-0);
}

section {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    position: relative;
}

@media screen and (max-width: 768px) {
  section {
    padding-top: calc(var(--section-padding-top)/2);
    padding-bottom: calc(var(--section-padding-bottom)/2);
    position: relative;
}

}

section.section-no-padding {
    padding-left: 0px;
    padding-right: 0px;
}

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

.background-ocean {
    background-color: var(--color-dark-blue);
}

.background-ocean * {
    color: var(--color-white);
}

.background-olive {
    background-color: var(--color-brown);
}

.background-rose {
    background-color: var(--color-beige);
}

.content-container {
    max-width: var(--content-width);
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    gap: var(--column-gap);
    width: 100%;
    padding: 0 2rem;
    flex-wrap: wrap;
}

.content-container.full-width-container {
    max-width: 100%;
    padding: 0;
}


@media screen and (min-width: 769px) {
	.content-container.reverse_col_order {
    flex-direction: row-reverse;
  }
}

section .content-container + .content-container {
    margin-top: 4rem;
}

@media (max-width: 1024px) {
    .content-container {
        flex-direction: column;
    }
}

.content-container.align-center {
    align-items: center;
}

.column {
    position: relative;
    width: 100%;
    container-type: inline-size;
    flex: 1;
}

.column-12 {
    flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
}

.column > * + * {
    margin-top: 2rem;
}

.deko-headline {
    font-family: "UnicaOne";
    font-size: var(--step-5);
    /* mix-blend-mode: color-dodge; */
    line-height: 1;
    text-transform: uppercase;
    overflow-wrap: initial;
}

.deko-headline strong {
    font-family: "Hertine";
    display: block;
    line-height: 1;
    text-transform: none;
    font-weight: normal;
    text-transform: lowercase;
}

.logo-small {
    /* position: fixed;
  width: 600px;
  aspect-ratio: 1;
  top: -505px;
  left: 20px;
  left: calc(50vw - 300px);
  z-index: 996;
  background: var(--color-black);
  padding: var(--step--1);
  border-radius: 50%;
  transform: translateY(-150%);
  transition: all 340ms ease-in-out;
  display: flex;
  align-items: flex-end;
  justify-content: center; */

    position: fixed;
    width: 150px;
    aspect-ratio: 1;
    top: 20px;
    left: 20px;
    z-index: 996;
    background: var(--color-blue);
    padding: var(--step--1);
    border-radius: 50%;
    transform: translateY(-150%);
    transition: all 340ms ease-in-out;
    display: flex;
    justify-content: center;
    opacity: 0.9;
}

.logo-small .logo-mobile {
    display: none;
}

.logo-small .logo-desktop {
    display: block;
    max-width: 100px;
}

@media (max-width: 768px) {
    .logo-small {
        width: 100px;
    }

    .logo-small .logo-mobile {
        display: block;
        max-width: 40px;
    }

    .logo-small .logo-desktop {
        display: none;
    }
}

.logo-small a {
    width: 80%;
    max-width: 120px;
    padding: 0px 0px 10px 0px;
    display: block;
}

.logo-small svg path {
    fill: var(--color-black);
}

body:not(.has_intro) #SmallLogo {
    transform: translateY(0%);
}

#SmallLogo.visible {
    transform: translateY(0%);
}

#SmallLogo:hover {
    transform: translateY(10px);
}

.logo-wrapper {
    width: 100%;
    top: 20vh;
    /* position: fixed; */
    position: absolute;
    /*
  left: calc(50vw - 8vw);
  */
    z-index: 3;
}

.logo {
    height: 100%;
    max-width: 250px;
    display: block;
    border-radius: 100vh;
    /* transition: all 240ms ease-in-out; */
    /* background-color: white; */
    aspect-ratio: 1/1;
    margin: 0 auto;
}

.logo svg {
    fill: white;
    width: 100%;
    height: 100%;
}

/* .logo:hover {
  background-color: black;
} */

.logo:hover svg {
    fill: white;
}

.intro {
    height: 80vh;
    width: 100%;
    background-image: url("intro.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    position: relative;
}

#intro-video {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    z-index: 1;
    width: 100vw;
    height: 80vh;
    object-fit: cover;
}

.hidden,
.fade_out_intro_video {
    transition:
        visibility 0s 2s,
        opacity 2s linear;
    visibility: hidden;
    opacity: 0;
}

input#checkbox_toggle {
    display: none;
}

body:has(#menu-toggle:checked){
  overflow-y:hidden;
}
body:has(#menu-toggle:checked) main{
  overflow-y:hidden;
}

#menu-toggle {
  display: none;
}

.menu {
  display: block;
  overflow-y:scroll;
  overflow-x: hidden;
  opacity:0;
  height:0;
  transition: opacity 200ms ease-in-out;
  transition-delay:200ms;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.menu::-webkit-scrollbar {
  display: none;
}

.menu-icon:has(#menu-toggle:checked) + .menu {
  opacity:1;
  position: fixed;
  z-index:8888;
  top:0px;
  padding-top: 80px;
  right:0;
  width: 69vw;
  margin-right:60px;
  height: 100%;
  max-width: 1024px;
  padding-bottom:80px;
}

.menu-icon {
  font-size: 3rem;
  cursor: pointer;
  position:fixed;
  z-index:999;
  top: 0px;
  right: 0px;
  border: 1px solid green;
  height: 70px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-icon:after {
  width: 200px;
  border-radius: 100%;
  height: 200px;
  content: "";
  background: var(--color-blue);
  position: fixed;
  top:0;
  right:0;
  z-index: 9999;
  transition-property: transform, width, height;
  transition-duration: 240ms;
  transition-timing-function: ease-out;
  transform: translateX(100px) translateY(-100px);
}

.menu-icon:hover:after {
  width: 230px;
  height: 230px;
  transform: translateX(115px) translateY(-115px);
}

.menu-icon:has(#menu-toggle:checked):after {
  width: 200vmax;
  height: 200vmax;
  transform: translateX(calc(100vmax + 10vw)) translateY(calc(-1 * 100vmax + 50vh));
}

.menu-icon .hamburger {
  z-index:999999999;
}

.hamburger {
  display: block;
  position: fixed;
  top: 30px;
  right: 25px;
  height: 27px;
  width: 27px;
  z-index: 999;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.line {
  position: absolute;
  display: block;
  background: black;
  width: 28px;
  height: 0.15rem;
  border-radius: 0.2rem;
  left: 0;
  transition: all 0.6s cubic-bezier(0.5, 0.1, 0, 1.2);
}

.line-1 {
  top: 0;
}

.line-2 {
  top: 7px;
  width: 24px;
  transform: translateX(2px);
  -webkit-transform: translateX(2px);
}

.line-3 {
  top: 14px;
}


.menu-icon:has(#menu-toggle:checked) .line-1 {
  top: 0px;
  width: 28px;
  transform: translateX(-11px) rotate(-45deg) translateY(12px);
}

.menu-icon:has(#menu-toggle:checked) .line-2 {
  opacity: 0;
}

.menu-icon:has(#menu-toggle:checked) .line-3 {
  top: 14px;
  width: 28px;
  transform: translateX(-8px) rotate(45deg) translateY(-8px);
}

.menu ul,
.menu .meta {
  min-width:310px;
  float:left;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 3vw;
    break-inside: avoid-column;

}

.menu ul li {
    margin-bottom: 5px;
}

.menu a {
    text-decoration: none;
    /*
  border-bottom: 2px solid black;
  */
    transition: ease-in-out 240ms all;
}

.menu a:hover {
    background: black;
    color: white;
}


.menu .languages a,
.menu .socials a {
    border: 0;
}

.socials {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.socials a:hover {
  background: transparent;
}

.socials a img {
    width: 30px;
}

.menu ul span {
    text-transform: uppercase;
    font-size: 80%;
}

.menu ul li {
    font-size: var(--step-1);
    font-weight: bold;
}

.menu ul.meta li {
    font-size: var(--step-0);
    font-weight: normal;
}

#checkbox_toggle:checked ~ .menu-slide {
    opacity: 1;
    transform: translateX(0%);
}

.languages {
    display: inline-flex;
    padding: 5px 8px;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.9);
}

.languages svg {
    width: 24px;
    height: 24px;
}

.languages a {
    text-decoration: none;
    text-transform: uppercase;
}

.languages a:hover {
  background-color:transparent;
  color: currentColor;
}

.languages a.active {
  font-weight:bold;
}

.languages a + a:before {
  content: "|";
  margin-left: 6px;
  font-weight: normal;
}

/*  hamburger  */

/* .hamburger {
    display: block;
    position: fixed;
    top: 30px;
    right: 25px;
    height: 27px;
    width: 27px;
    z-index: 999;
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.line {
    position: absolute;
    display: block;
    background: black;
    width: 28px;
    height: 0.15rem;
    border-radius: 0.2rem;
    left: 0;
    transition: all 0.6s cubic-bezier(0.5, 0.1, 0, 1.2);
}

.line-1 {
    top: 0;
}

.line-2 {
    top: 7px;
    width: 24px;
    transform: translateX(2px);
    -webkit-transform: translateX(2px);
}

.line-3 {
    top: 14px;
}

#checkbox_toggle:checked ~ label .line-1 {
    top: 0px;
    width: 28px;
    transform: translateX(-11px) rotate(-45deg) translateY(12px);
}

#checkbox_toggle:checked ~ label .line-2 {
    opacity: 0;
}

#checkbox_toggle:checked ~ label .line-3 {
    top: 14px;
    width: 28px;
    transform: translateX(-8px) rotate(45deg) translateY(-8px);
} */

.warp__placeholder {
    position: absolute;
    color: transparent;
    font-size: 0.1px;
}

header .contact-button {
    position: fixed;
    background-color: var(--color-brown);
    width: calc(1.5 * var(--nav-toggle-width));
    height: calc(1.5 * var(--nav-toggle-width));
    border-radius: var(--nav-toggle-width);
    z-index: 998;
    display: block;
    cursor: pointer;
    top: calc(-1 * (var(--nav-toggle-width) * 1.5) / 2);
    right: calc(-1 * (var(--nav-toggle-width) * 1.5) / 2);
    transition: all 240ms;
    /* transition-delay: 250ms; */
}

header .contact-button:hover {
    width: calc(1.8 * var(--nav-toggle-width));
    height: calc(1.8 * var(--nav-toggle-width));
    border-radius: calc(1.8 * var(--nav-toggle-width));

    top: calc(-1 * calc(1.8 * var(--nav-toggle-width)) / 2);
    right: calc(-1 * calc(1.8 * var(--nav-toggle-width)) / 2);
}

/* .contact-circle {
    background-color: var(--color-white);
    position: fixed;
    top: -150px;
    right: -150px;
    width: 300px;
    height: 300px;
    border-radius: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transform: rotate(42deg);
    transform-origin: 50% 50%;
    font-size: 20px;
    transition: all 240ms ease-in-out;
    transition-delay: 50ms;
    z-index: 997;
    box-shadow: 0px 0px 5px #999999;
} */

/* magic number for now because vars cant be used inside media queries
  this should in a perfect world be var(--content-width) + width of contact-button */
/* @media (min-width: 1440px) {
    .contact-circle {
        background-color: rgba(255, 255, 255, 0.5);
    }
} */

/* .contact-circle:hover {
    top: -175px;
    right: -175px;
    width: 350px;
    height: 350px;
    cursor: pointer;
}

#CircleText {
    letter-spacing: -2px;
    transform: rotate(3.7deg) translateX(1px) translateY(-10px);
}

*/

.contact-circle {
  width: 300px;
  height: 300px;
  display: inline-block;
  position:fixed;
  z-index:7;
  right: -150px;
  top: -150px;
  border-radius: 100%;
  background-color:rgba(255,255,255,0.5);
  transition: transform 240ms;
  backdrop-filter: blur(5px);
}

.contact-circle:hover {
  transform:scale(1.2);
}

.contact-circle-text {
  height: 150px;
  text-transform:uppercase;
  display:flex;
  align-items:flex-end;
  transform-origin: top center;
  right:150px;
  top:150px;
  transform: rotate(83deg);
  position: absolute;
  z-index:99;
}

.contact-circle-text .char {
  height: 138px;
  width:20px;
  display:flex;
  align-items:flex-end;
  flex-direction:row;
  transform-origin: top center;
  position: absolute;
  padding-bottom:10px;
}

.contact-circle-text .char1 { transform: rotate(0deg); }
.contact-circle-text .char2 { transform: rotate(-12.8deg); }
.contact-circle-text .char3 { transform: rotate(-25.6deg); }
.contact-circle-text .char4 { transform: rotate(-38.4deg); }
.contact-circle-text .char5 { transform: rotate(-51.2deg); }
.contact-circle-text .char6 { transform: rotate(-64deg); }
.contact-circle-text .char7 { transform: rotate(-76.8deg); }

header .contact-button svg {
    position: relative;
    top: 10px;
    left: -13px;
}

#slogan-animation {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    bottom: 10vh;
    z-index: 9;
}

#slogan-animation svg path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 0.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

#slogan-animation svg .culinary {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: dash 10s linear forwards;
}

#slogan-animation svg .idot {
    stroke-dasharray: 2;
    stroke-dashoffset: 2;
    animation: dash 1s linear forwards;
    animation-delay: 4s;
}

#slogan-animation svg .experience {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: dash 10s linear forwards;
    animation-delay: 4.2s;
}

#slogan-animation svg .xstroke {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    animation: dash 1s linear forwards;
    animation-delay: 4.7s;
}

#slogan-animation svg .idot2 {
    stroke-dasharray: 2;
    stroke-dashoffset: 2;
    animation: dash 1s linear forwards;
    animation-delay: 9.5s;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

.products-section .right-image {
    position: absolute;
    top: 0;
    left: 0;

    /* the 2.5 doesnt really make sense, i dont know where this magic number comes from :D */
    left: calc(var(--content-width) / 2);
    bottom: 0;
    right: 0;
    z-index: -1;
    width: calc(50vw - 2rem);
    height: auto;
    top: calc(-1 * var(--section-padding-top));
    bottom: calc(-1 * var(--section-padding-bottom));
}

.products-section .right-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .products-section .right-image {
        display: none;
    }
}

.products-section .left-content {
    max-width: calc(var(--content-width) / 2);
    width: 100%;
    column-count: 2;
}

.product-list {
    margin: 0 0 1rem 0;
    padding: 0;
    list-style: none;
    break-inside: avoid-column;
}

.product-list span {
    font-weight: bold;
    text-transform: uppercase;
}

.product-list li a {
    text-decoration: none;
    padding: 2px 0;
}

.product-list li a:hover {
    text-decoration: underline;
}

.floating-image.image-float-right {
}

.floating-color-block {
    --block-margin-top: 40px;
    --block-margin-right: 0;
    --block-margin-bottom: 0;
    --block-margin-left: 40px;

    position: absolute;
    height: 100%;

    display: block;
    top: calc(-1 * var(--block-margin-top));
    left: calc(-1 * var(--block-margin-left));
    bottom: calc(-1 * var(--block-margin-bottom));
    right: calc(-1 * var(--block-margin-right));
    width: 100%;
    z-index: -1;
}

@media (max-width: 1024px) {
    .floating-color-block {
        left: -40px;
        top: 20px;
        margin-left: -20px;
    }
}

@media screen and (min-width: 1024px) {
    .column figure.image {
        --image-margin-top: 0;
        --image-margin-bottom: 0;
    }

    .column figure.image img {
        margin-top: calc(-1 * var(--image-margin-top));
        margin-bottom: calc(-1 * var(--image-margin-bottom));
    }
}

.column figure.image {
    position: relative;
    line-height: 0;
    aspect-ratio: var(--aspect-ratio);
}

figure.image picture {
  aspect-ratio: var(--aspect-ratio);

}

figure.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

figure.image figcaption {
    font-size: var(--step--1);
    text-align: right;
    font-style: italic;
    margin-top: 1rem;
    line-height: 1.3;
}

footer {
    padding-top: 4rem;
    background-color: #eee;
}

footer > * {
    font-size: var(--step--1);
}

footer .column address {
    padding: 0px;
    margin: 0px;
}



.cta-circle-wrapper{
  position: absolute;
  top: var(--circle-top);
  left: var(--circle-left);
  right: var(--circle-right);
  bottom: var(--circle-bottom);
  z-index:99999999;
}

@media screen and (max-width: 768px) {
	.cta-circle-wrapper{
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index:99999999;
  }
}


.cta-circle {
  background: black;
  margin:20px;
  padding:20px 0;
  border-radius: 100px;
  justify-content: center;
  color: white;
  display:flex;
  transition: transform 240ms ease-in-out;
  text-decoration: none;

}

@media screen and (min-width: 768px) {
  .cta-circle {
    border-radius: 999999px;
    margin:0;
    padding:0;
    aspect-ratio: 1;
    width: var(--cta-circle-size);
  }
  .cta-circle:hover {
    transform:rotate(220deg) scale(1.1);
    cursor:pointer;
  }
}

.cta-text {
  display:flex;
}

.cta-text .char {
  width: 1ch;
  font-family: UnicaOne;
  text-transform: uppercase;
  justify-content: center;
  display:flex;
}
@media screen and (min-width: 768px) {
  .cta-text {
    display:flex;
    /* margin-left: calc(var(--cta-circle-size) / 2); */
  }
.cta-text .char {
  width: 0;
  line-height:0;
  font-size: 1.7rem;

  padding-top: 1rem;
  height: var(--cta-circle-size);
  color:white;
  position: absolute;

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

.cta-text .char1 { transform: rotate(0deg); }
.cta-text .char2 { transform: rotate(12deg); }
.cta-text .char3 { transform: rotate(24deg); }
.cta-text .char4 { transform: rotate(36deg); }
.cta-text .char5 { transform: rotate(48deg); }
.cta-text .char6 { transform: rotate(60deg); }
.cta-text .char7 { transform: rotate(72deg); }
.cta-text .char8 { transform: rotate(84deg); }
.cta-text .char9 { transform: rotate(96deg); }
.cta-text .char10 { transform: rotate(108deg); }
.cta-text .char11 { transform: rotate(120deg); }
.cta-text .char12 { transform: rotate(132deg); }
.cta-text .char13 { transform: rotate(144deg); }
.cta-text .char14 { transform: rotate(156deg); }
.cta-text .char15 { transform: rotate(168deg); }
.cta-text .char16 { transform: rotate(180deg); }
.cta-text .char17 { transform: rotate(192deg); }
.cta-text .char18 { transform: rotate(204deg); }
.cta-text .char19 { transform: rotate(216deg); }
.cta-text .char20 { transform: rotate(228deg); }
.cta-text .char21 { transform: rotate(240deg); }
.cta-text .char22 { transform: rotate(252deg); }
.cta-text .char23 { transform: rotate(264deg); }
.cta-text .char24 { transform: rotate(276deg); }
.cta-text .char25 { transform: rotate(288deg); }
.cta-text .char26 { transform: rotate(300deg); }
.cta-text .char27 { transform: rotate(312deg); }
.cta-text .char28 { transform: rotate(324deg); }
.cta-text .char29 { transform: rotate(336deg); }
.cta-text .char30 { transform: rotate(348deg); }
}
footer .location-pages {
    margin-top: 4rem;
    padding-bottom: 1rem;
}

footer .location-pages ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0px;
}

footer .location-pages-element {
  display: flex;
  gap: 10px;
  margin-top:10px;
}

@media screen and (max-width: 768px) {
	footer .location-pages-element {
    flex-direction: column;
  }
}

footer .location-pages span{
  font-weight:bold;
  margin-bottom:4px;
  margin-right: 1rem;
  min-width: 80px;
}

footer .location-pages ul li {
}

footer .location-pages ul li a {
    text-decoration: none;
}

footer .location-pages ul li a:after {
  content:"|";
  padding-left: 10px;
  padding-right: 10px;
}
footer .location-pages ul li:last-child a:after {
  content:"";
}
@media screen and (max-width: 768px) {
  footer .location-pages ul {
    margin-bottom: 40px;
  }
}

.tobii-zoom__icon {
    display: none;
}

.imagegrid {
    --gridgap: var(--column-gap);

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: var(--gridgap);
}

@media (max-width: 768px) {
    .imagegrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.imagegrid-cover figure,
.imagegrid-contain figure {
    position: relative;
    line-height: 0;
    height: 100%;
    aspect-ratio: 1;
    display: flex;
    justify-items: center;
    align-items: center;
    overflow: hidden;
}

.imagegrid img {
    opacity: 1;
    transition:
        opacity 0.5s,
        transform 0.5s;
    transform: scale(1);
}

.imagegrid-cover img {
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
}

.imagegrid.imagegrid-masonry {
    display: block;
    columns: 4;
    column-gap: var(--gridgap);
}

@media (max-width: 1440px) {
    .imagegrid.imagegrid-masonry {
        columns: 3;
    }
}

@media (max-width: 900px) {
    .imagegrid.imagegrid-masonry {
        columns: 2;
    }
}

.imagegrid.imagegrid-masonry figure {
    margin-bottom: var(--gridgap);
}

/* .imagegrid img.active {
  opacity: 1;
  transform: scale(1);
} */

figure.quote {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

figure.quote.quote-left {
    margin-left: 0;
}

figure.quote.quote-right {
    margin-right: 0;
}

figure.quote blockquote,
figure.quote figcaption {
    z-index: 3;
    position: relative;
    padding-left: var(--step-2);
}

/*figure.quote:before {
  content: "»";
  position: absolute;
  color: var(--color-beige);
  font-size: calc(2 * var(--step-5));
  left: -5%;
  top: 3%;
  display: inline-block;
  line-height: 0.3;
  font-weight: 100;
  z-index: 2;
}*/

figure.quote .left_arrow {
    position: absolute;
    color: var(--color-beige);
    font-size: calc(2 * var(--step-5));
    left: -5%;
    top: 3%;
    display: inline-block;
    line-height: 0.3;
    font-weight: 100;
    z-index: 2;
}

/*figure.quote:after {
  content: "«";
  position: absolute;
  font-size: calc(2 * var(--step-5));
  right: 0%;
  color: var(--color-beige);
  bottom: 10%;
  display: inline-block;
  line-height: 0.3;
  font-weight: 100;
  z-index: 2;
}*/

figure.quote .right_arrow {
    position: absolute;
    font-size: calc(2 * var(--step-5));
    right: 0%;
    color: var(--color-beige);
    bottom: 10%;
    display: inline-block;
    line-height: 0.3;
    font-weight: 100;
    z-index: 2;
}

figure.quote figcaption {
    font-family: "Hertine";
    text-transform: lowercase;

}

figure.quote figcaption cite {
    font-family: "Hertine";
    text-transform: lowercase;
}

/*  forms  */

.form {
    display: flex;
    flex-direction: column;
    /*grid-template-areas:
    "firma"
    "anrede"
    "titel"
    "vorname"
    "nachname"
    "adresse"
    "postleitzahl"
    "ort"
    "email"
    "telefon"
    "datum"
    "beginn"
    "ende"
    "nachricht"
    "personen"
    "anlass"
    "nachricht"
    "submit";*/
}

.form.with-background {
    margin: -2vw;
    padding: 2vw;
    border-radius: 6px;
}

.form > .control {
    display: flex;
    gap: 10px;
    flex-direction: column;
    width: 100%;
}

.form > .control label {
    width: 100%;
    padding-top: 8px;
    color: #111;
    font-size: var(--step--1);
}

.form > .control input,
.form > .control textarea,
.form > .control select {
    flex-grow: 1;
    border-radius: 6px;
    border: 1px solid #333;
    padding: 4px 7px;
    max-width: 100%;
    width: 100%;
    font-size: 1rem;
    height: 2.1rem;
    color: #111;
    /* background-color:transparent;
  box-shadow: 0.3em 0.3em 0 0 var(--button-color), inset 0.3em 0.3em 0 0 var(--button-color); */
}

.background-ocean option {
  color: #111;
}

.form .honeypot {
    position: absolute;
    left: -9999px;
}

@container (min-width: 500px) {
    .form > .control {
        flex-direction: row;
    }

    .form > .control label {
        width: 200px;
        text-align: right;
    }
}

@container (min-width: 768px) {
    .form {
        display: grid;
        gap: 25px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .form-private-anfrage {
        grid-template-areas:
            "anrede titel vorname vorname nachname nachname"
            "adresse adresse adresse postleitzahl ort ort"
            "email email email telefon telefon telefon"
            "datum beginn ende nachricht nachricht nachricht"
            "personen anlass anlass nachricht nachricht nachricht"
            "datenschutz datenschutz datenschutz datenschutz datenschutz datenschutz"
            "submit submit submit submit submit submit";
    }

    .form-geschaeftliche-anfrage,
    .form-geschaftliche-anfrage {
        grid-template-areas:
            "firma1 firma1 firma1 firma1 firma1 firma1"
            "firma2 firma2 firma2 firma2 firma2 firma2"
            "firma3 firma3 firma3 firma3 firma3 firma3"
            "anrede titel vorname vorname nachname nachname"
            "adresse adresse adresse postleitzahl ort ort"
            "email email email telefon telefon telefon"
            "datum beginn ende nachricht nachricht nachricht"
            "personen anlass anlass nachricht nachricht nachricht"
            "datenschutz datenschutz datenschutz datenschutz datenschutz datenschutz"
            "submit submit submit submit submit submit";
    }

    .form > .control {
        flex-direction: column;
        gap: 0px;
    }

    .form > .control label {
        width: 100%;
        text-align: left;
    }
}

.control.formfield__container {
    /*
  grid-column: 3fr;
  */
}

.control.formfield__container[data-id="firma101"],
.control.formfield__container[data-id="firma102"] {
    grid-area: firma1;
}

.control.formfield__container[data-id="firma201"],
.control.formfield__container[data-id="firma202"] {
    grid-area: firma2;
}

.control.formfield__container[data-id="firma301"],
.control.formfield__container[data-id="firma302"] {
    grid-area: firma3;
}

.control.formfield__container[data-id="firma201"] label,
.control.formfield__container[data-id="firma301"] label,
.control.formfield__container[data-id="firma202"] label,
.control.formfield__container[data-id="firma302"] label {
    display: none;
}

.control.formfield__container[data-id="anrede01"],
.control.formfield__container[data-id="anrede02"] {
    grid-area: anrede;
}

.control.formfield__container[data-id="titel01"],
.control.formfield__container[data-id="titel02"] {
    grid-area: titel;
}

.control.formfield__container[data-id="vorname01"],
.control.formfield__container[data-id="vorname02"] {
    grid-area: vorname;
}

.control.formfield__container[data-id="nachname01"],
.control.formfield__container[data-id="nachname02"] {
    grid-area: nachname;
}

.control.formfield__container[data-id="adresse01"],
.control.formfield__container[data-id="adresse02"] {
    grid-area: adresse;
}

.control.formfield__container[data-id="postleitzahl01"],
.control.formfield__container[data-id="postleitzahl02"] {
    grid-area: postleitzahl;
}

.control.formfield__container[data-id="ort01"],
.control.formfield__container[data-id="ort02"] {
    grid-area: ort;
}

.control.formfield__container[data-id="email01"],
.control.formfield__container[data-id="email"],
.control.formfield__container[data-id="email02"] {
    grid-area: email;
}

.control.formfield__container[data-id="telefon01"],
.control.formfield__container[data-id="telefon02"] {
    grid-area: telefon;
}

.control.formfield__container[data-id="datum01"],
.control.formfield__container[data-id="datum02"] {
    grid-area: datum;
}

.control.formfield__container[data-id="beginn01"],
.control.formfield__container[data-id="beginn02"] {
    grid-area: beginn;
}

.control.formfield__container[data-id="ende01"],
.control.formfield__container[data-id="ende02"] {
    grid-area: ende;
}

.control.formfield__container[data-id="personen01"],
.control.formfield__container[data-id="personen02"] {
    grid-area: personen;
}

.control.formfield__container[data-id="anlass01"],
.control.formfield__container[data-id="anlass02"] {
    grid-area: anlass;
}

.control.formfield__container[data-id="nachricht01"],
.control.formfield__container[data-id="nachricht02"] {
    grid-area: nachricht;
}

.control.formfield__container[data-id="datenschutzbestimmung01"],
.control.formfield__container[data-id="datenschutzbestimmung02"] {
    grid-area: datenschutz;
}

.formblock__submit {
    grid-area: submit;
}

.formblock__message--success {
  grid-row: 1 / 6;
  grid-column-start: 1;
  grid-column-end: 6;
}

.control.submit {
    justify-content: flex-end;
    display: block;
}

.control.submit button {
    float: right;
}

.control.accept {
    flex-direction: row;
}

.control.accept input {
    width: 20px;
    height: 20px;
    margin-top: 4px;
}

.control.accept label {
    width: 100%;
    text-align: left;
    padding-top: 0px;
}

.control + .control {
    /* margin-top: var(--step-2); */
}

/* The values below correspond to the values shown in grid-template-areas above, placing the items on the grid accordingly. Note that the grid-area value does NOT have to match the class name. For example, .field-message has field-msg as its grid-area. */
@media (min-width: 29.375rem) {
    .label-name {
        grid-area: label-name;
    }

    .label-email {
        grid-area: label-email;
    }

    .label-message {
        grid-area: label-msg;
    }

    .field-name {
        grid-area: field-name;
    }

    .field-email {
        grid-area: field-email;
    }

    .field-message {
        grid-area: field-msg;
    }

    .button {
        grid-area: button;
    }
}

.field {
    border: 1px solid #ccc;
    font-family: inherit;
    font-size: 1rem;
    padding: 10px;
}

@media (max-width: 29.3125rem) {
    .label-email {
        margin-top: 20px;
    }
}

.label-message {
    margin-top: 20px;
}

.control.submit {
    justify-self: start;
}

.form-card .control.submit button {
    background-color: var(--color-blue);
}

.formfield__select__wrapper {
    flex-grow: 1;
}

.formfield__select__wrapper select {
    width: 100%;
}

.date-field {
    flex-grow: 1;
}

.date-field input {
    width: 100%;
}

.formfield__container {
    flex-wrap: wrap;
}

fieldset.formblock__option__container {
    border: 0px;
}

legend[for="accept-agb"] {
    display: none;
}

.form > .control .formfield__option input {
    flex-grow: 0;
}

.formblock__option__container {
    padding: 0;
}

fieldset.formblock__option__container .formfield__option__label {
    display: flex;
    width: 100%;
    align-items: center;
}

fieldset.formblock__option__container input.formfield__checkbox {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

fieldset.formblock__option__container .formfield__option__label {
    text-align: left;
}

.formblock__message--hidden {
    display: none;
}

.formblock__submit {
    text-align: right;
}

.formfield__container[data-valid="false"] {
    border-radius: 3px;
    padding: 3px;
    background: #fa8184;
}

.formfield__container .formblock__message--error {
    width: 100%;
    display: none;
}

.formfield__container ul.formblock__message__list {
    list-style: none;
    color: red;
    text-align: right;
    width: 100%;
}

.formfield__container .formblock__message__list__item {
    width: 100%;
}

/*

888888888888  88                             ad88888ba   88  88           88
     88       ""                            d8"     "8b  88  ""           88
     88                                     Y8,          88               88
     88       88  8b,dPPYba,   8b       d8  `Y8aaaaa,    88  88   ,adPPYb,88   ,adPPYba,  8b,dPPYba,
     88       88  88P'   `"8a  `8b     d8'    `"""""8b,  88  88  a8"    `Y88  a8P_____88  88P'   "Y8
     88       88  88       88   `8b   d8'           `8b  88  88  8b       88  8PP"""""""  88
     88       88  88       88    `8b,d8'    Y8a     a8P  88  88  "8a,   ,d88  "8b,   ,aa  88
     88       88  88       88      Y88'      "Y88888P"   88  88   `"8bbdP"Y8   `"Ybbd8"'  88
                                   d8'
                                  d8'
*/

/* ~ff this interferes with the cta circle when pushed out of the section */
section {
  overflow: hidden;
}

.keen-slider__slide,
.keen-slider {
    overflow: visible !important;
}

.keen-slider-wrapper {
    margin: 0 2rem;
}

.keen-slider {
    overflow-y: hidden;
    width: 90%;
    max-width: calc(var(--content-width) - 4rem) !important;
    margin-bottom: 4rem;
    margin: 0 auto;
}

@media (min-width: 1280px) {
    .keen-slider__slide:first-child {
    }
}

.keen-slider__slide figure img {
    transition: all 0.3s ease-in-out;
}

.keen-slider__slide figure:hover img {
    transform: scale(1.02);
}

.keen-slider__slide figure {
    position: relative;
    overflow: visible;
    aspect-ratio: 2/3;
}

.keen-slider__slide figure img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.dots {
    display: flex;
    padding: 10px 0;
    justify-content: center;
    margin-top: 50px;
}

.dot {
    border: none;
    width: 10px;
    height: 10px;
    background: #c5c5c5;
    border-radius: 50%;
    margin: 0 5px;
    padding: 5px;
    cursor: pointer;
}

.dot:focus {
    outline: none;
}

.dot--active {
    background: #000;
}

.arrow_wrapper {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 100vh;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    position: absolute;
    top: 50%;
}

.arrow_wrapper--left {
    left: calc(52% - var(--content-width) / 2);
}

.arrow_wrapper--right {
    right: calc(52% - var(--content-width) / 2);
    left: auto;
}

.arrow {
    fill: #fff;
    cursor: pointer;
    width: 30px;
    height: 30px;
    margin: 20px;
}

.arrow--left {
    fill: "#fff";
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z' %3E%3C/path%3E%3C/svg%3E");
}

.arrow--right {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' %3E%3Cpath d='M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z'%3E%3C/path%3E%3C/svg%3E");
}

.arrow--disabled.arrow--left {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='grey' viewBox='0 0 24 24' %3E%3Cpath d='M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z' %3E%3C/path%3E%3C/svg%3E");
}

.arrow--disabled.arrow--right {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='grey' viewBox='0 0 24 24' %3E%3Cpath d='M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z'%3E%3C/path%3E%3C/svg%3E");
}

/* tabs block */
/* https://codepen.io/MPDoctor/pen/mpJdYe */
.tabbed {
    overflow-x: hidden; /* so we could easily hide the radio inputs */
    margin: 32px 0;
}

.tabbed #tab1,
.tabbed #tab2 {
    /* hiding the inputs */
    display: none;
}

.tabs {
    display: flex;
    align-items: stretch;
    list-style: none;
    padding: 0;
    border-bottom: 1px solid #ccc;
}

.tab > label {
    display: block;
    margin-bottom: -1px;
    padding: 12px 15px;
    /*
  background-color: #eee;
  */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 18px;
    /*
  font-weight: 600;
  */
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    font-family: "UnicaOne";
}

.tab:hover label {
    color: #333;
}

.tab-content {
    display: none;
    padding: 12px 15px;
}

/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
.tabbed
    [type="radio"]:nth-of-type(5):checked
    ~ .tabs
    .tab:nth-of-type(5)
    label {
    /*
  background: #fff;
  */
}

.tab label.background-ocean {
    color: white;
}

.tab-content.background-ocean .formfield__option__label {
  color:white;
}

/*
.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label {
  background-color: var(--color-blue);
}

.tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label {
  background-color: var(--color-beige);
}
*/

.tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3),
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4) {
    display: block;
}

/*
.tab-content:nth-of-type(1) {
  background-color: var(--color-blue);
  color: #111;
}

.tab-content:nth-of-type(2) {
  background-color: var(--color-beige);
  color: #111;
}
*/