@import url("font.css");
@import url("footer.css");
@import url("header.css");
@import url("blocks/hero.css");
@import url("blocks/layout.css");
@import url("blocks/text-bild.css");
@import url("blocks/text-cards.css");
@import url("blocks/kunden.css");
@import url("blocks/kundenmeinungen.css");
@import url("blocks/referenzen-slider.css");
@import url("blocks/lines.css");
@import url("blocks/faq.css");
@import url("blocks/cta.css");
@import url("blocks/partnerschaften.css");
@import url("blocks/text-text.css");
@import url("blocks/kontaktformular.css");
@import url("blocks/bild.css");
@import url("blocks/error.css");
@import url("blocks/leistungen.css");
@import url("blocks/danke.css");
@import url("blocks/standort.css");
@import url("blocks/referenzen.css");
@import url("blocks/referenzen-single.css");
@import url("blocks/cpt-block-text.css");
@import url("blocks/cpt-block-bild.css");
@import url("blocks/fade.css");

:root {
    --white: #ffffff;
    --black: #000000;
    --color-primary: #00F4A7;
    --color-button-click: #01ca8a;
    --color-primary-muted: #002f22;
    --color-border: #3F3F46;
    --bg-primary: #09090B;
    --bg-purple: #A23DEF;

    --font-family: 'Onest', sans-serif;

    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 800;

    --line-height-normal: clamp(1.65rem, 1.6vw, 2.25rem); 
    --line-height-small: 1.25rem;                         
    --line-height-106: clamp(2.75rem, 6vw, 6.6rem); 
    --line-height-96: clamp(2.7rem, 6vw, 6rem); 
    --line-height-76: clamp(2.4rem, 4vw, 4.75rem);
    --line-height-57: clamp(2.1rem, 3.5vw, 3.75rem);
    --line-height-48: clamp(1.75rem, 3vw, 3rem);
    --line-height-36: clamp(1.65rem, 1.6vw, 2.25rem);
    --line-height-28: 1.75rem;
    --line-height-24: 1.5rem;

    --font-size-sm: .875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: clamp(1.25rem, 1.3vw, 1.375rem);
    --font-size-2xl: clamp(1.25rem, 1.5vw, 1.5rem);
    --font-size-3xl: clamp(1.75rem, 2.5vw, 2.5rem);
    --font-size-4xl: clamp(2rem, 4vw, 4rem);
    --font-size-5xl: clamp(2.25rem, 5vw, 5rem);
    --font-size-6xl: clamp(2.5rem, 6vw, 6rem);
    --font-size-12xl: clamp(6rem, 10vw, 12rem);
}

body {
    font-weight: var(--font-weight-normal);
    font-size: var( --font-size-base);
    line-height: 1.5rem;
    letter-spacing: 0;
}

.color-primary {
    color: var(--color-primary);
}

p {
    font-size: var(--font-size-lg);
    margin-top: 0;
    line-height: 150%;
}

a {
    text-decoration: none;
    white-space: nowrap;
    color: white
}

a:hover {
    color: var(--color-primary);
    cursor: pointer;
}

.btn-primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    font-weight: var(--font-weight-normal);
    background-color: var(--color-primary);
    color: var(--black);
    border-radius: 3.5rem;
    border: 2px solid var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: .1s ease-out;
    cursor: pointer;
}

.btn-primary:hover {
    color: var(--black)!important;
    box-shadow: 0px 0px 10px 0px var(--color-primary),
     0px 0px 5px 0px var(--color-primary),
     0px 0px 5px 0px var(--color-primary);
     border: 2px solid var(--color-primary);
     transition: .1s ease-in;
}

.btn-primary:active {
    background-color: var(--color-button-click);
    box-shadow: 0px 0px 10px 0px var(--color-button-click),
    0px 0px 5px 0px var(--color-button-click),
    0px 0px 5px 0px var(--color-button-click);
    border: 2px solid var(--color-button-click);
}


.z_index{
    z-index: 1;
}