/**** ------------------------------------------------------ STYLEGUIDE - © Code reseved by Nick ------------------------------------ ****/


/*****************************************************************************************************************************

This code is reseved by Nick Helfenbein (© Code von Nick)
If you copy this code I will take legal actions! (Please don't do it - respect the arts of others)
Thanks!

Dieser Code ist urheberrechtlich geschützt von Nick Helfenbein (© Code von Nick)
Wenn du dieses Code kopierst werde ich rechtliche Schritte einleiten (also tu es bitte nicht - respektiere die Werke anderer.)
Danke!

© Code von Nick, 2025

*****************************************************************************************************************************/


/**** -------------------------------------------- Fonts -------------------------- ****/

@font-face {
    font-family: 'Eurostile';
    src: url('../fonts/eurostile-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Eurostile';
    src: url('../fonts/eurostile-semibold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Eurostile';
    src: url('../fonts/eurostile-black.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


/**** -------------------------------------------- Lenis -------------------------- ****/

html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
    height: 100vh;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
[data-lenis-prevent]::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
[data-lenis-prevent],
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/**** -------------------------------------------- Viewportheight -------------------------- ****/

:root {
    --vh-in-px: 8px;
    --vh: var(--vh-in-px);
}

@media (hover: hover) {

    :root {
        --vh: 1vh;
    }

    @supports (height: 1svh) {
        :root {
            --vh: 1svh;
        }
    }
}

/**** -------------------------------------------- Variables -------------------------- ****/

:root {

    --color-primary-rgb: 58, 98, 160;
    --color-primary: rgba(var(--color-primary-rgb), 1);

    --color-primary-dark-rgb: 0, 0, 100;
    --color-primary-dark: rgba(var(--color-primary-dark-rgb), 1);

    --color-primary-dark-bg-rgb: 0, 0, 50;
    --color-primary-dark-bg: rgba(var(--color-primary-dark-bg-rgb), 1);

    --color-secondary-dark-bg-rgb: 0, 50, 0;
    --color-secondary-dark-bg: rgba(var(--color-secondary-dark-bg-rgb), 1);

    --color-primary-gradient: linear-gradient(to bottom right, var(--color-primary-dark), var(--color-primary));

    --color-secondary-rgb: 34, 118, 208;
    --color-secondary: rgba(var(--color-secondary-rgb), 1);

    --color-secondary-dark-rgb: 0, 45, 85;
    --color-secondary-dark: rgba(var(--color-secondary-dark-rgb), 1);

    --color-secondary-gradient: linear-gradient(to bottom right, var(--color-secondary-dark), var(--color-secondary));

    --color-waterrescue-rgb: 0, 140, 205;
    --color-waterrescue: rgba(var(--color-waterrescue-rgb), 1);

    --color-black-100-rgb: 0, 0, 0;
    --color-black-100: rgba(var(--color-black-100-rgb), 1);

    --color-black-80-rgb: 51, 51, 51;
    --color-black-80: rgba(var(--color-black-80-rgb), 1);

    --color-black-60-rgb: 102, 102, 102;
    --color-black-60: rgba(var(--color-black-60-rgb), 1);

    --color-black-40-rgb: 153, 153, 153;
    --color-black-40: rgba(var(--color-black-40-rgb), 1);

    --color-black-20-rgb: 203, 203, 203;
    --color-black-20: rgba(var(--color-black-20-rgb), 1);

    --color-black-05-rgb: 242, 242, 242;
    --color-black-05: rgba(var(--color-black-05-rgb), 1);

    --color-white-rgb: 255, 255, 255;
    --color-white: rgba(var(--color-white-rgb), 1);
    --color-white-80: rgba(var(--color-white-rgb), 0.8);
    --color-white-60: rgba(var(--color-white-rgb), 0.6);
    --color-white-20: rgba(var(--color-white-rgb), 0.2);
    --color-white-05: rgba(var(--color-white-rgb), 0.05);

    --color-background: var(--color-white);
    --color-text: var(--color-black-80);
    --color-text-highlight: var(--color-secondary);
    --color-text-shaded: var(--color-black-60);

    --color-button-border: var(--color-secondary);
    --color-button-background: var(--color-secondary-gradient);
    --color-button-background-primary: var(--color-primary-gradient);
    --color-button-text: var(--color-white);

    --color-link: var(--color-secondary);
    --color-link-underline: var(--color-secondary);
    --color-link-hover: var(--color-secondary);

    --color-headline: var(--color-primary);
    --color-headline-news: var(--color-black-100);
    --color-blockquote: var(--color-primary);

    --color-input-label: var(--color-black-80);
    --color-input-placeholder: var(--color-black-60);
    --color-input-border: var(--color-black-20);

    --color-radio-button: var(--color-secondary);
    --color-radio-button-border: var(--color-black-20);

    --color-error-bg-rgb: 235, 150, 150;
    --color-error-bg: rgba(var(--color-error-bg-rgb), 1);

    --color-error-rgb: 235, 45, 45;
    --color-error: rgba(var(--color-error-rgb), 1);

    --color-success-bg-rgb: 115, 235, 112;
    --color-success-bg: rgba(var(--color-success-bg-rgb), 1);

    --color-success-rgb: 45, 235, 45;
    --color-success: rgba(var(--color-success-rgb), 1);

    --color-border: rgba(var(--color-black-40-rgb), .225);

    --line-height-main: 1.1;

    --size-main-min: 1.13rem;
    --size-main-max: 1.25rem;
    --size-main-fluid: clamp(var(--size-main-min), calc(0.98rem + 0.61vw), var(--size-main-max));

    --size-lead-min: 1.35rem;
    --size-lead-max: 1.56rem;
    --size-lead-fluid: clamp(var(--size-lead-min), calc(1.09rem + 1.07vw), var(--size-lead-max));

    --size-small-min: 0.94rem;
    --size-small-max: 1rem;
    --size-small-fluid: clamp(var(--size-small-min), calc(0.87rem + 0.31vw), var(--size-small-max));

    --size-blockquote-min: 1.35rem;
    --size-blockquote-max: 1.56rem;
    --size-blockquote-fluid: clamp(var(--size-blockquote-min), calc(1.09rem + 1.07vw), var(--size-blockquote-max));

    --line-height-headings: 1.1;

    --size-title: clamp(5em, 7.5vw, 7.5em);

    --size-h1-min: 2.33rem;
    --size-h1-max: 3.05rem;
    --size-h1-fluid: clamp(var(--size-h1-min), calc(1.44rem + 3.67vw), var(--size-h1-max));
    --size-h1-big-fluid: calc(clamp(var(--size-h1-min), calc(1.44rem + 3.67vw), var(--size-h1-max)) * 1.75);

    --size-h2-fluid: var(--size-h1-fluid);

    --size-h3-min: 1.94rem;
    --size-h3-max: 2.44rem;
    --size-h3-fluid: clamp(var(--size-h3-min), calc(1.32rem + 2.55vw), var(--size-h3-max));

    --size-h4-min: 1.62rem;
    --size-h4-max: 1.95rem;
    --size-h4-fluid: clamp(var(--size-h4-min), calc(1.21rem + 1.68vw), var(--size-h4-max));

    --animation-menu-button-duration: 0.4s;
    --animation-menu-button-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1);
    --animation-menu-button: var(--animation-menu-button-duration) var(--animation-menu-button-timing-function);

    --animation-primary-ease-in-duration: 0.8s;
    --animation-primary-ease-in-timing-function: cubic-bezier(0.25, 1, 0.1, 1);
    --animation-primary-ease-in: var(--animation-primary-ease-in-duration) var(--animation-primary-ease-in-timing-function);

    --animation-primary-expo-duration: 0.8s;
    --animation-primary-expo-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
    --animation-primary-expo: var(--animation-primary-expo-duration) var(--animation-primary-expo-timing-function);

    --animation-smooth-duration: 0.75s;
    --animation-smooth-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    --animation-smooth: var(--animation-smooth-duration) var(--animation-smooth-timing-function);

    --animation-nav-primary-duration: 0.2s;
    --animation-nav-primary-timing-function: ease;
    --animation-nav-primary: var(--animation-nav-primary-duration) var(--animation-nav-primary-timing-function);

    --animation-cursor-duration: 0.4s;
    --animation-cursor-timing-function: cubic-bezier(0.5, 0, 0.25, 1);
    --animation-cursor: var(--animation-cursor-duration) var(--animation-cursor-timing-function);

    --animation-fade-duration: 0.1s;
    --animation-fade-timing-function: linear;
    --animation-fade: var(--animation-fade-duration) var(--animation-fade-timing-function);

    --animation-fast-duration: 0.35s;
    --animation-fast-timing-function: cubic-bezier(0.62, 0.05, 0.01, 0.99);
    --animation-fast: var(--animation-fast-duration) var(--animation-fast-timing-function);

    --animation-primary-duration: 0.735s;
    --animation-primary-timing-function: cubic-bezier(0.62, 0.05, 0.01, 0.99);
    --animation-primary: var(--animation-primary-duration) var(--animation-primary-timing-function);

    --section-padding: calc(var(--size-title) * 1.2);
    --section-padding-small: calc(var(--size-title) * 0.8);
    --container-padding: calc(var(--gap-column) * 1.5);

    --gap: calc(var(--size-title) * 0.2);
    --gap-row: var(--gap);
    --gap-column: var(--gap);
}

@media screen and (max-width: 1024px) {
    :root {
        --container-padding: var(--gap);
    }
}

@media screen and (max-width: 540px) {
    :root {
        --container-padding: clamp(10px, 4vw, 2.5em);
    }
}

/**** -------------------------------------------- Hide Scrollbar -------------------------- ****/

body::-webkit-scrollbar {
    display: none;
}

/* Chrome, Safari, Opera */
body {
    -ms-overflow-style: none;
}

/* IE & Edge */
html {
    scrollbar-width: none;
}

/* Firefox */


/**** -------------------------------------------- Basic and Body -------------------------- ****/

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    scroll-behavior: initial;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: 'Eurostile', sans-serif;
    line-height: var(--line-height-main);
    font-weight: 400;
    font-style: normal;
    font-size: var(--size-main-fluid);
    background-color: var(--color-background);
    overscroll-behavior-y: none;
}

html,
body {
    width: 100%;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    position: relative;
    max-width: 100vw;
    overflow-x: clip;
}

main {
    width: 100vw;
    box-sizing: border-box;
}

.site-wrap {
    will-change: transform;
    box-sizing: border-box;
}

/* Selection */
::selection {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-shadow: none;
}

::-moz-selection {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-shadow: none;
}

/* General */
canvas,
img,
video,
picture,
figure {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    display: block;
}

svg {
    max-width: none;
    height: auto;
    box-sizing: border-box;
}

audio,
canvas,
iframe,
img,
svg,
video,
picture,
figure {
    vertical-align: middle;
}

/**** -------------------------------------------- Typography -------------------------- ****/

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
ul,
ol,
span,
strong,
em,
figcaption {
    padding: 0;
    margin: 0;
    font-style: normal;
    letter-spacing: normal;
    font-weight: unset;
    line-height: unset;
}

li,
ul,
figure {
    padding: 0;
    margin: 0;
    list-style: none;
}

/*h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Eurostile', sans-serif;
    font-weight: 700;
    font-size: calc(var(--size-title) * 1);
    line-height: 1.1;
    color: var(--color-black-100);
    hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
}*/

h1.sans.strong,
h2.sans.strong,
h3.sans.strong,
h4.sans.strong {
    font-weight: 700;
}

h1 {
    font-family: 'Eurostile', sans-serif;
    font-weight: 700;
    font-size: var(--size-h1-fluid);
    line-height: 1.1;
    color: var(--color-black-100);
    hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
}

h1.big {
    font-size: var(--size-h1-big-fluid);
}

h2 {
    font-family: 'Eurostile', sans-serif;
    font-weight: 700;
    font-size: var(--size-h2-fluid);
    line-height: 1.1;
    color: var(--color-black-100);
    hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
}

h3 {
    font-family: 'Eurostile', sans-serif;
    font-weight: 700;
    font-size: var(--size-h3-fluid);
    line-height: 1.1;
    color: var(--color-black-100);
    hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
}

h4 {
    font-family: 'Eurostile', sans-serif;
    font-weight: 700;
    font-size: var(--size-h4-fluid);
    line-height: 1.1;
    color: var(--color-black-100);
    hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
}

h5 {
    font-family: 'Eurostile', sans-serif;
    font-weight: 700;
    font-size: var(--size-h5-fluid);
    line-height: 1.1;
    color: var(--color-black-100);
    hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
}

h6 {
    font-family: 'Eurostile', sans-serif;
    font-weight: 700;
    font-size: var(--size-h6-fluid);
    line-height: 1.1;
    color: var(--color-black-100);
    hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
}

[data-theme-section="dark"] :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-white);
}

p.xl {
    font-size: 1.5em;
}

p.l {
    font-size: 1.25em;
}

p {
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    line-height: 1.3;
    color: var(--color-text);
}

p.s {
    font-size: .875em;
}

p.xs {
    font-size: 0.75em;
}

span {
    font-weight: inherit;
    color: inherit;
}

strong {
    font-weight: 700;
    color: var(--color-black-100);
}

[data-theme-section="dark"] strong {
    color: var(--color-light);
}

em {
    font-style: italic;
}

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

p a {
    text-decoration: underline;
}

.eyebrow.s {
    font-size: .75em;
}

.eyebrow {
    font-family: 'Eurostile', sans-serif;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.1;
    color: var(--color-black-40);
    text-transform: uppercase;
    letter-spacing: 0.0125em;
    margin-bottom: 1em;
}

.eyebrow.l {
    font-size: 1.25em;
}

.eyebrow.xl {
    font-size: 1.5em;
}

.eyebrow.inactive {
    color: var(--color-gray);
    opacity: 0.5;
}

@media screen and (max-width: 540px) {
    .eyebrow.xl {
        font-size: 1.25em;
    }
}

[data-theme-section="dark"] .eyebrow,
[data-theme-nav="dark"] .eyebrow {
    color: var(--color-white-60);
}

[data-theme-section="light"] .eyebrow.inactive {
    color: rgba(var(--color-black-100-rgb), 0.33);
    opacity: 1;
}


/**** -------------------------------------------- Styled Content -------------------------- ****/

.styled-content .heading {
    font-family: "Eurostile", sans-serif;
    font-weight: 700;
    font-size: calc(var(--size-h1-fluid) * 1.25);
    color: var(--color-primary);
    margin-bottom: .5em;
}

.home-header .styled-content .heading {
    color: var(--color-white);
}

.styled-content .subheading {
    font-family: "Eurostile", sans-serif;
    font-weight: 300;
    font-size: calc(var(--size-h4-fluid) * .75);
    line-height: 1.25;
    color: var(--color-primary);
}

.styled-content .heading.bold,
.styled-content .subheading.bold {
    font-weight: 700 !important;
}


/**** -------------------------------------------- Main Elements -------------------------- ****/

/* Section */

.section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    position: relative;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: visible;
}

.section.small {
    padding-top: calc(var(--section-padding) * .666);
    padding-bottom: calc(var(--section-padding) * .666);
}

.section-wrap {
    position: relative;
}

.section.full-height {
    padding-top: 0;
    padding-bottom: 0;
}

.section.no-padding-top {
    padding-top: 0;
}

.section.no-padding-bottom {
    padding-bottom: 0;
}

.section.no-padding {
    padding-top: 0;
    padding-bottom: 0;
}

.section.full-height .container>.row {
    min-height: calc(var(--vh) * 100);
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

.section.full-height .container>.row.menu-padding {
    padding-bottom: calc(var(--section-padding-small) + var(--btn-height) + var(--row-gap));
}


/* Section Colors */

[data-theme-section="dark"] {
    background-color: var(--color-black-100);
}

[data-theme-section="gray"] {
    background-color: var(--color-gray);
}

/* Header (floating bar at the top) */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 400;
    pointer-events: none;
}

/* Floating Elements */

.floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 300;
    pointer-events: none;
}

/* Container */

.container {
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    max-width: calc(var(--size-title) * 12);
}

.container.double-padding {
    padding-left: calc(var(--container-padding) * 2);
    padding-right: calc(var(--container-padding) * 2);
}

.container.long {
    padding-left: calc(var(--container-padding) * .666);
    padding-right: calc(var(--container-padding) * .666);
}

.container.medium {
    max-width: calc(var(--size-title) * 10);
}

.container.small {
    max-width: calc(var(--size-title) * 8);
}

.container.tiny {
    max-width: calc(var(--size-title) * 6);
}

.container.full {
    max-width: unset;
}


.no-padding {
    padding: 0;
}

.no-padding-top {
    padding-top: 0;
}

.no-padding-bottom {
    padding-bottom: 0;
}

.no-padding-left {
    padding-left: 0;
}

.no-padding-right {
    padding-right: 0;
}

[disabled="disabled"] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .4;
    transition: var(--animation-primary);
}

/* Row/Col */

.row {
    display: flex;
    width: 100%;
    position: relative;
}

.col {
    display: flex;
    flex-direction: column;
    position: relative;
}

.row.grid {
    flex-wrap: wrap;
    gap: var(--row-gap) var(--grid-gap);
    --grid-gap: var(--col-gap);
    --columns: 3;
}

.row.grid>.col {
    width: calc((99.99% / var(--columns)) - (var(--grid-gap) * ((var(--columns) - 1) / var(--columns))));
}

/* Overlay */

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.overlay.overlay-dark {
    background-color: rgba(var(--color-black-rgb), 0.5);
}

img.overlay,
video.overlay {
    object-fit: cover;
}

.overlay.overlay-no-image {
    background-color: rgba(var(--color-black-100-rgb), 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay.overlay-no-image::before {
    content: "No image found";
    font-size: 10px;
    font-weight: 400;
    opacity: 0.5;
}

[data-theme-section="dark"] .overlay.overlay-no-image,
.overlay-no-image.dark {
    background-color: rgba(var(--color-light-rgb), 0.05);
}

/* Line and Stripe */

.line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
    margin-top: var(--gap);
    margin-bottom: var(--gap);
}

.stripe {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-black-05);
}

[data-theme-section="dark"] .stripe {
    background-color: var(--color-white-05);
}

/* No select */

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/**** -------------------------------------------- Buttons -------------------------- ****/

.buttons-wrap {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.btn {
    position: relative;
    outline: 0;
    border: 0;
    background: transparent;
}

.btn .btn-wrap {
    cursor: pointer;
    position: relative;
    height: 2.5em;
    padding-inline: calc(var(--gap) * 2);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-black-100);
    /* TODO: Color change */
    color: var(--color-white);
    border-radius: .25em;
    box-shadow: 0 0 0 var(--color-black-20);
    transition: var(--animation-primary);
}

.btn .btn-wrap:hover {
    box-shadow: .25em .25em 0 var(--color-black-20);
    transform: translateY(-.25em) translateX(-.25em);
}

.btn .btn-wrap .btn-text {
    position: relative;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .025em;
    overflow: hidden; 
    height: max-content;
    transform: translateY(.1em);
}

.btn .btn-wrap .btn-text .btn-text-inner {
    position: relative;
    text-align: center;
    height: 1em;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    transition: var(--animation-primary);
}

.btn .btn-wrap .btn-text .btn-text-inner.copy {
    position: absolute;
    top: 100%;
    left: 0;
}

.btn .btn-wrap:hover .btn-text .btn-text-inner {
    transform: translateY(-100%);
}

/* Theme: Dark */

.btn-wrap[data-btn-type="dark"],
.btn-wrap[data-btn-theme="dark"] {
    background: var(--color-white);
    color: var(--color-black-100) !important;
}

.btn-wrap[data-btn-theme="dark"] svg path {
    fill: var(--color-text);
}

.btn-wrap[data-btn-theme="dark"] svg line {
    stroke: var(--color-text) !important;
}

.btn-wrap[data-btn-theme="dark"] svg polyline {
    stroke: var(--color-text) !important;
}

/* Theme: Arrow */

.btn-wrap[data-btn-type="arrow"] {
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: var(--animation-primary);
}

.btn-wrap[data-btn-type="arrow"] .btn-text {
    transform: translateY(0);
}

.btn-wrap[data-btn-type="arrow"] .btn-text .btn-text-inner {
    height: 1.5em;
}

.btn-wrap[data-btn-type="arrow"] svg {
    width: 1.5em;
    height: 1.5em;
    display: block;
}

.btn-wrap[data-btn-type="arrow"][data-btn-direction="next"] .btn-text svg {
    transform: rotate(-45deg);
}

.btn-wrap[data-btn-type="arrow"][data-btn-direction="prev"] .btn-text svg {
    transform: rotate(135deg);
}

.btn-wrap[data-btn-type="arrow"] svg polyline,
.btn-wrap[data-btn-type="arrow"] svg line {
    stroke: var(--color-white);
}


/**** -------------------------------------------- Links -------------------------- ****/

.col-links-wrap,
.links-wrap,
.social-media-icons-list {
    display: flex;
    align-items: center;
    gap: calc(var(--gap) * .5);
}

.link {
    position: relative;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    display: flex;
}

.link-wrap {
    position: relative;
    padding-inline: .1em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text);
    font-size: .875em;
    transition: all var(--animation-primary);
}

.link-wrap:hover {
    cursor: pointer;
}

.link-wrap::before {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 1.5px;
    background: var(--color-primary);
    display: block;
    transition: all var(--animation-primary);
}

.link-wrap:hover::before,
[data-link-status="active"] .link-wrap::before {
    left: 0;
    width: 100%;
}

.link-wrap .link-text {
    position: relative;
    overflow: hidden;
}

.link-wrap .link-text svg {
    width: 1em;
    height: 1em;
}

.link-wrap .link-text-inner.copy {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: .5;
    transition: 0s, opacity var(--animation-primary-duration) var(--animation-primary-timing-function);
}

.link-wrap:hover .link-text-inner.copy {
    top: 0;
    left: 0;
    opacity: 1;
    transition: var(--animation-primary);
}

.link-wrap .link-text-inner.original {
    position: relative;
    display: inline-block;
    transform: translateY(0%);
    opacity: .5;
    transition: 0s, opacity var(--animation-primary-duration) var(--animation-primary-timing-function);
}

.link-wrap:hover .link-text-inner.original {
    transform: translateY(-100%);
    opacity: 1;
    transition: var(--animation-primary);
}


/* Theme: Dark */

[data-theme-nav="dark"] .link-wrap,
[data-theme-section="dark"] .link-wrap,
[data-theme="dark"] .link-wrap {
    color: var(--color-white);
}

[data-theme-nav="dark"] .link-wrap svg path,
[data-theme-section="dark"] .link-wrap svg path,
[data-theme="dark"] .link-wrap svg path {
    fill: var(--color-white);
}

/* Theme: Nav */

.link[data-link-type="nav"] .link-wrap {
    position: relative;
}

.link[data-link-type="nav"] .link-wrap::before {
    display: none;
}

.link[data-link-type="nav"] .link-wrap .star {
    position: absolute;
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
    transform: translate(-50%, -50%);
    transition: var(--animation-primary);
}

.link[data-link-type="nav"] .link-wrap:hover .star {
    transform: translate(-50%, -50%) rotate(360deg);
}

.link[data-link-type="nav"] .link-wrap .star svg path {
    fill: var(--color-black-40);
}

.link[data-link-type="nav"] .link-wrap .link-text {
    font-size: var(--size-lead-fluid);
    font-weight: 800;
    line-height: 1.5;
    text-transform: uppercase;
}

/* Theme: Nav */

.link[data-link-type="nav-menu"] .link-wrap {
    position: relative;
}

.link[data-link-type="nav-menu"] .link-wrap::before {
    display: none;
}

.link[data-link-type="nav-menu"] .link-wrap .menu-bars {
    position: absolute;
    top: 0;
    left: 0;
    width: 2em;
    height: .25em;
    background: var(--color-black-40);
    transform: translate(-50%, -50%);
    transition: var(--animation-primary);
}

.link[data-link-type="nav-menu"] .link-wrap .menu-bars::before,
.link[data-link-type="nav-menu"] .link-wrap .menu-bars::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2em;
    height: .25em;
    background: var(--color-black-40);
    transition: var(--animation-primary);
}

.link[data-link-type="nav-menu"] .link-wrap .menu-bars::before {
    transform: translateY(-250%);
}

.link[data-link-type="nav-menu"] .link-wrap .menu-bars::after {
    transform: translateY(250%);
}

.link[data-link-type="nav-menu"] .link-wrap:hover .menu-bars::before {
    transform: translateY(-200%);
}

.link[data-link-type="nav-menu"] .link-wrap:hover .menu-bars::after {
    transform: translateY(200%);
}

[data-navigation-status="active"] .link[data-link-type="nav-menu"] .link-wrap .menu-bars {
    background: transparent;
}

[data-navigation-status="active"] .link[data-link-type="nav-menu"] .link-wrap .menu-bars::before,
[data-navigation-status="active"] .link[data-link-type="nav-menu"] .link-wrap .menu-bars::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

[data-navigation-status="active"] .link[data-link-type="nav-menu"] .link-wrap .menu-bars::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.link[data-link-type="nav-menu"] .link-wrap .link-text {
    font-size: var(--size-lead-fluid);
    font-weight: 800;
    line-height: 1.5;
    text-transform: uppercase;
}

/* Theme: Dark - Nav & Menu */

[data-services-status="active"][data-theme-nav="dark"] .link[data-link-type="nav"] .link-wrap,
[data-navigation-status="active"][data-theme-nav="dark"] .link[data-link-type="nav-menu"] .link-wrap {
    color: var(--color-black-100);
}

/* Theme: Services */

.link[data-link-type="service"] .link-wrap {
    position: relative;
    gap: var(--gap);
    color: var(--color-black-100) !important;
}

.link[data-link-type="service"] .link-wrap::before {
    display: none;
}

.link[data-link-type="service"] .link-wrap .link-preview {
    position: relative;
    width: 5em;
    height: 5em;
    overflow: hidden;
    border-radius: .25em;
    display: block;
    flex-shrink: 0;
}

.link[data-link-type="service"] .link-wrap .link-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: var(--animation-primary);
}

.link[data-link-type="service"] .link-wrap:hover .link-preview img {
    filter: brightness(80%);
}

.link[data-link-type="service"] .link-wrap .link-text {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1em;
}

/* Type: Fixed Navigation */

.link-wrap[data-link-type="big"] {
    font-size: var(--size-lead-fluid);
    font-weight: 400;
    color: var(--color-black-100);
    line-height: 1.25;
}

.link-wrap[data-link-type="big"]::before {
    display: none;
}

.link-wrap[data-link-type="big"] .link-text::before {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    right: 0;
    width: 0;
    height: 1px;
    background: var(--color-primary);
    transition: var(--animation-primary);
}

.link-wrap[data-link-type="big"]:hover .link-text::before {
    width: 100%;
    left: 0;
}

/* Type: Fixed Navigation Icon */

.link[data-link-type="big-icon"] .link-wrap {
    font-size: var(--size-lead-fluid);
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-black-100);
    width: 100%;
    line-height: 1.25;
}

.link[data-link-type="big-icon"] .link-wrap::before {
    display: none;
}

.link[data-link-type="big-icon"] .link-wrap .link-text {
    position: relative;
}

.link[data-link-type="big-icon"] .link-wrap .link-text::before {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    right: 0;
    width: 0;
    height: 1px;
    background: var(--color-primary);
    transition: var(--animation-primary);
}

.link[data-link-type="big-icon"] .link-wrap:hover .link-text::before {
    width: 100%;
    left: 0;
}

.link[data-link-type="big-icon"] .link-wrap .link-icon {
    position: relative;
    width: 1.25em;
    height: 1.25em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.link[data-link-type="big-icon"] .link-wrap .link-icon svg {
    position: absolute;
    top: 0;
    right: 0;
    width: 1.25em;
    height: 1.25em;
    transform: rotate(-135deg);
    opacity: .5;
    transition: 0s, opacity var(--animation-primary-duration) var(--animation-primary-timing-function);
}

.link[data-link-type="big-icon"] .link-wrap:hover .link-icon svg.original {
    width: 0;
    height: 0;
    opacity: 1;
    transition: var(--animation-primary);
}

.link[data-link-type="big-icon"] .link-wrap .link-icon svg.duplicate {
    position: absolute;
    right: unset;
    top: unset;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
}

.link[data-link-type="big-icon"] .link-wrap:hover .link-icon svg.duplicate {
    width: 1.25em;
    height: 1.25em;
    opacity: 1;
    transition: var(--animation-primary);
}


/**** -------------------------------------------- Styleguide-Page -------------------------- ****/

.styleguide-col {
    display: grid;
    gap: var(--gap);
    margin-bottom: calc(var(--gap) * 2);
}

.styleguide-col h1,
.styleguide-col h2 .styleguide-col h3 .styleguide-col h4 .styleguide-col h5 .styleguide-col h6 {
    line-height: 1;
    margin-top: .5em;
}

.styleguide-col .col-color {
    padding: var(--gap);
    justify-content: center;
    align-items: center;
    height: calc(var(--size-title) * 1.25);
    background: transparent;
    border: 1px solid var(--color-black-05);
}

.styleguide-col .col-color[data-color="dark"] {
    background-color: var(--color-black-100);
    border: 1px solid var(--color-border-light);
    color: var(--color-white);
}

.styleguide-col .col-color[data-color="primary"] {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.styleguide-col .col-color[data-color="primary-dark"] {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}

.styleguide-col .col-color[data-color="secondary"] {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.styleguide-col .col-color[data-color="secondary-dark"] {
    background-color: var(--color-secondary-dark);
    color: var(--color-white);
}

.styleguide-col .col-color[data-color="white"] {
    background-color: var(--color-white);
}

.styleguide-col .col-color[data-color="gray"] {
    background-color: var(--color-gray);
}

.styleguide-col .col-color[data-color="gray-country"] {
    background-color: var(--color-gray-);
}


/**** -------------------------------------------- Form -------------------------- ****/

.form-errors {
    padding: calc(var(--gap) * 1.5);
    border-radius: 1em 1em 0 0;
    background: var(--color-error-bg);
}

.error {
    color: var(--color-error) !important;
}

.error.error-header {
    font-weight: 700;
    margin-bottom: .5em;
}

.form {
    width: 100%;
    display: grid;
    gap: var(--gap);
    background: var(--color-primary-dark-bg);
    border-radius: 1em;
    padding: calc(var(--gap) * 1.5);
}

.form.has-errors {
    border-radius: 0 0 1em 1em;
}

input,
textarea {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-progress-appearance: none;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-white);
    resize: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    padding: .75em 0;
    border-bottom: 1px solid rgba(var(--color-white-rgb), .666);
    width: 100%;
    transition: var(--animation-primary);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-white);
    -webkit-box-shadow: 0 0 0px 1000px var(--color-black-100) inset;
    box-shadow: 0 0 0px 1000px var(--color-black-100) inset;
    transition: background-color 5000s ease-in-out 0s;
}

input[type=radio] {
    -webkit-appearance: none;
}

textarea {
    min-height: 5em;
}

.input-col label {
    font-weight: 700;
    color: var(--color-white);
    opacity: .666;
    transition: var(--animation-primary);
}


.input-col:has(input:focus) input,
.input-col:has(textarea:focus) textarea {
    border-bottom: 1px solid rgba(var(--color-white-rgb), 1);
}

.input-col:has(input:focus) label,
.input-col:has(textarea:focus) label {
    opacity: 1;
}