/* =========================================
   BERGWERK FRAMEWORK 1.1
   ========================================= */
/* 1) Root font size: 62.5% => 1rem ≈ 10px */
html {
    font-size: 62.5%;
}

a {
    text-decoration: none;
}

/* -----------------------------------------
   2) FONTS – TEMPLATE
   Hier kannst du deine eigenen @font-face
   Einträge ergänzen.
   ----------------------------------------- */
/* Design-Token für Fonts */
:root {
    --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: var(--font-primary);

    /* Primary Farbpalette */
    --primary-ulight: #C2CDE0;
    --primary-light: #B3BED2;
    --primary-med: #66748A;
    --primary: #2A3851;
    --primary-dark: #212D41;
    --primary-udark: #192231;

    /* Action Farbpalette */
    --action-ulight: #B8EAF2;

    /* sehr helle Variante */
    --action-light: #77D8E8;

    /* hellere Variante */
    --action-med: #2FAFC7;

    /* mittlere Abstufung */
    --action: #44BBD5;

    /* deine angegebene Action-Farbe */
    --action-dark: #2A8A96;

    /* dunklere Variante */
    --action-udark: #1F6C77;

    /* sehr dunkle Variante */
    /* Action Farbpalette */
    --white: #fff;
    --black: #000;
    --grey: #f4f4f4;
}

/* -----------------------------------------
   3) DESIGN TOKENS
   Typografie, Spacing, Container, Grid, Radius
   ----------------------------------------- */
:root {
    /* CONTENT WIDTH / CONTAINER */
    /* 128rem = 1280px – modernen Wert bei 10px/rem */
    --content-width: 128rem;
    --gutter: clamp(1.6rem, 0.8rem + 2vw, 6rem);
    --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));

    /* Section Padding X wie in Automatic.css */
    --section-padding-x: var(--gutter);

    /* TEXT SCALE (fluid, rem-basiert) */
    --text-xs: clamp(1.3rem, 1.2rem + 0.2vw, 1.4rem);
    --text-s: clamp(1.4rem, 1.3rem + 0.3vw, 1.6rem);
    --text-m: clamp(1.6rem, 1.4rem + 0.5vw, 1.8rem);

    /* Base */
    --text-l: clamp(1.8rem, 1.5rem + 0.8vw, 2.2rem);
    --text-xl: clamp(2.2rem, 1.8rem + 1.1vw, 2.8rem);
    --text-xxl: clamp(2.6rem, 2.0rem + 1.5vw, 3.6rem);

    /* HEADING SCALE (an deinem ACSS-Auszug orientiert) */
    --h6: clamp(1.3rem, 1.2rem + 0.2vw, 1.4rem);
    --h5: clamp(1.4rem, 1.3rem + 0.3vw, 1.6rem);
    --h4: clamp(1.9rem, 1.6rem + 0.7vw, 2.6rem);
    --h3: clamp(2.3rem, 1.9rem + 1.1vw, 3.4rem);
    --h2: clamp(2.7rem, 2.2rem + 1.6vw, 4.6rem);
    --h1: clamp(3.5rem, 3.346vw + 2.429rem, 7rem);
    --base-text-lh: calc(6px + 2ex);
    --heading-line-height: calc(4px + 2ex);

    /* FLUID SPACING SCALE (an ACSS angelehnt) */
    --space-xs: clamp(1.35rem, 1.36rem + (-0.02vw), 1.33rem);
    --space-s: clamp(1.8rem, 1.74rem + 0.18vw, 2rem);
    --space-m: clamp(2.4rem, 2.22rem + 0.56vw, 3rem);
    --space-l: clamp(3.2rem, 2.81rem + 1.20vw, 4.5rem);
    --space-xl: clamp(4.26rem, 3.53rem + 2.30vw, 6.75rem);
    --space-xxl: clamp(5.68rem, 4.37rem + 4.11vw, 10.125rem);

    /* SECTION SPACING (vertikal) */
    --section-space-xs: clamp(2.70rem, 1.92rem + 2.44vw, 5.33rem);
    --section-space-s: clamp(3.60rem, 2.30rem + 4.07vw, 8rem);
    --section-space-m: clamp(4.80rem, 2.67rem + 6.67vw, 12rem);

    /* Default */
    --section-space-l: clamp(6.40rem, 2.96rem + 10.74vw, 18rem);
    --section-space-xl: clamp(8.53rem, 3.06rem + 17.10vw, 27rem);
    --section-space-xxl: clamp(11.37rem,2.74rem + 26.97vw, 40.5rem);

    /* RADIUS */
    --radius-none: 0;
    --radius-xs: 0.44rem;
    --radius-s: 0.67rem;
    --radius-m: 1rem;
    --radius-l: 1.5rem;
    --radius-xl: 2.25rem;
    --radius-xxl: 3.375rem;
    --radius-pill: 999rem;
    --radius-circle: 50%;

    /* GRID TEMPLATES (Basis) */
    --grid-1: repeat(1, minmax(0, 1fr));
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-6: repeat(6, minmax(0, 1fr));
    --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
    --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
    --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
    --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
    --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
    --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);

    /* GAPS */
    --gap-xs: var(--space-xs);
    --gap-s: var(--space-s);
    --gap-m: var(--space-m);
    --gap-l: var(--space-l);
    --gap-xl: var(--space-xl);
    --gap-xxl: var(--space-xxl);
    --grid-gap: var(--space-m);

    /* BREAKOUT LEFT */
    @media (min-width: 769px) {
        .breakout-left {
            display: block;
            margin-left: calc(var(--section-padding-x) * -1);
            width: calc(100% + var(--section-padding-x));
        }
    }

    @media (max-width: 768px) {
        .breakout-left {
            display: block;
            margin-left: 0;
            width: 100%;
        }
    }

    /* BREAKOUT RIGHT */
    @media (min-width: 769px) {
        .breakout-right {
            display: block;
            margin-right: calc(var(--section-padding-x) * -1);
            margin-left: auto;
            width: calc(100% + var(--section-padding-x));
        }
    }

    @media (max-width: 768px) {
        .breakout-right {
            display: block;
            margin-right: 0;
            width: 100%;
        }
    }

    /* BEIDE SEITEN */
    .breakout {
        display: block;
        margin-left: calc(var(--section-padding-x) * -1);
        margin-right: calc(var(--section-padding-x) * -1);
        width: calc(100% + var(--section-padding-x) * 2);
    }

    /* -----------------------------------------
   4) BASE STYLES
   ----------------------------------------- */
    body {
        margin: 0;
        font-family: var(--font-primary);
        font-size: var(--text-m);
        line-height: var(--base-text-lh);
        color: var(--color-text);
        background-color: var(--color-bg);
    }

    /* Headings */
    h1,
    .h1 {
        font-size: var(--h1);
        line-height: var(--heading-line-height);
        font-family: var(--font-heading);
    }

    h2,
    .h2 {
        font-size: var(--h2);
        line-height: var(--heading-line-height);
        font-family: var(--font-heading);
    }

    h3,
    .h3 {
        font-size: var(--h3);
        line-height: var(--heading-line-height);
        font-family: var(--font-heading);
    }

    h4,
    .h4 {
        font-size: var(--h4);
        line-height: var(--heading-line-height);
        font-family: var(--font-heading);
    }

    h5,
    .h5 {
        font-size: var(--h5);
        line-height: var(--heading-line-height);
        font-family: var(--font-heading);
    }

    h6,
    .h6 {
        font-size: var(--h6);
        line-height: var(--heading-line-height);
        font-family: var(--font-heading);
    }

    /* Text sizes */
    .text-xs {
        font-size: var(--text-xs);
    }

    .text-s {
        font-size: var(--text-s);
    }

    .text-m {
        font-size: var(--text-m);
    }

    .text-l {
        font-size: var(--text-l);
    }

    .text-xl {
        font-size: var(--text-xl);
    }

    .text-xxl {
        font-size: var(--text-xxl);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span {
        margin: 0;
        padding: 0;
        word-break: break-word;
    }

    /* -----------------------------------------
   5) CONTAINER & SECTION
   ----------------------------------------- */
    /* Zentrierter Container mit safe width */
    .container {
        width: 100%;
        max-width: var(--content-width-safe);
        margin-inline: auto;
        padding-inline: var(--section-padding-x);
    }

    /* Standard Section – hat immer vertikales & horizontales Padding */
    section {
        padding-block: var(--section-space-m);
        padding-inline: var(--section-padding-x);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .section--none {
        padding: 0 !important;
    }

    /* Varianten für mehr/weniger Section-Abstand */
    .section--xs {
        padding-block: var(--section-space-xs);
    }

    .section--s {
        padding-block: var(--section-space-s);
    }

    .section--m {
        padding-block: var(--section-space-m);
    }

    .section--l {
        padding-block: var(--section-space-l);
    }

    .section--xl {
        padding-block: var(--section-space-xl);
    }

    .section--xxl {
        padding-block: var(--section-space-xxl);
    }

    .section--none {
        padding-block: 0;
    }

    /* -----------------------------------------
   6) SPACING UTILITIES (Gap, Stack)
   ----------------------------------------- */
    /* Gaps */
    .gap-xs {
        gap: var(--gap-xs);
    }

    .gap-s {
        gap: var(--gap-s);
    }

    .gap-m {
        gap: var(--gap-m);
    }

    .gap-l {
        gap: var(--gap-l);
    }

    .gap-xl {
        gap: var(--gap-xl);
    }

    .gap-xxl {
        gap: var(--gap-xxl);
    }

    .row-gap-xs {
        row-gap: var(--gap-xs);
    }

    .row-gap-s {
        row-gap: var(--gap-s);
    }

    .row-gap-m {
        row-gap: var(--gap-m);
    }

    .row-gap-l {
        row-gap: var(--gap-l);
    }

    .row-gap-xl {
        row-gap: var(--gap-xl);
    }

    .row-gap-xxl {
        row-gap: var(--gap-xxl);
    }

    .col-gap-xs {
        column-gap: var(--gap-xs);
    }

    .col-gap-s {
        column-gap: var(--gap-s);
    }

    .col-gap-m {
        column-gap: var(--gap-m);
    }

    .col-gap-l {
        column-gap: var(--gap-l);
    }

    .col-gap-xl {
        column-gap: var(--gap-xl);
    }

    .col-gap-xxl {
        column-gap: var(--gap-xxl);
    }

    /* Stack – vertikale Layouts */
    .stack-xs {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .stack-s {
        display: flex;
        flex-direction: column;
        gap: var(--space-s);
    }

    .stack-m {
        display: flex;
        flex-direction: column;
        gap: var(--space-m);
    }

    .stack-l {
        display: flex;
        flex-direction: column;
        gap: var(--space-l);
    }

    .stack-xl {
        display: flex;
        flex-direction: column;
        gap: var(--space-xl);
    }

    /* -----------------------------------------
   7) RADIUS UTILITIES
   ----------------------------------------- */
    .radius-none {
        border-radius: var(--radius-none);
    }

    .radius-xs {
        border-radius: var(--radius-xs);
    }

    .radius-s {
        border-radius: var(--radius-s);
    }

    .radius-m {
        border-radius: var(--radius-m);
    }

    .radius-l {
        border-radius: var(--radius-l);
    }

    .radius-xl {
        border-radius: var(--radius-xl);
    }

    .radius-xxl {
        border-radius: var(--radius-xxl);
    }

    .radius-pill {
        border-radius: var(--radius-pill);
    }

    .radius-circle {
        border-radius: var(--radius-circle);
    }

    /* -----------------------------------------
   8) GRID SYSTEM
   ----------------------------------------- */
    .grid {
        display: grid;
        gap: var(--gap-xl) !important;
    }

    /* Feste Spaltenanzahl */
    .grid--1 {
        grid-template-columns: var(--grid-1);
    }

    .grid--2 {
        grid-template-columns: var(--grid-2);
    }

    .grid--3 {
        grid-template-columns: var(--grid-3);
    }

    .grid--4 {
        grid-template-columns: var(--grid-4);
    }

    .grid--6 {
        grid-template-columns: var(--grid-6);
    }

    /* Verhältnis-Layouts */
    .grid--1-2 {
        grid-template-columns: var(--grid-1-2);
    }

    .grid--1-3 {
        grid-template-columns: var(--grid-1-3);
    }

    .grid--2-1 {
        grid-template-columns: var(--grid-2-1);
    }

    .grid--2-3 {
        grid-template-columns: var(--grid-2-3);
    }

    .grid--3-1 {
        grid-template-columns: var(--grid-3-1);
    }

    .grid--3-2 {
        grid-template-columns: var(--grid-3-2);
    }

    /* Auto-fit Grid (responsive Cards) */
    .grid--auto {
        --min: 22rem;

        /* ~220px */
        display: grid;
        gap: var(--gap-m);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
    }

    /* -----------------------------------------
   9) CLICKABLE PARENT
   ----------------------------------------- */
    /* Pattern:
   <article class="click-parent">
     ... Inhalt ...
     <a href="..." class="click-parent__link" aria-label="..."></a>
   </article> */
    .click-parent {
        position: relative;
    }

    .click-parent__link {
        position: absolute;
        inset: 0;
        z-index: 1;
        text-indent: -9999px;
        overflow: hidden;
        white-space: nowrap;
    }

    .click-parent__link:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 4px;
    }

    /* Sicherstellen, dass Inhalt oben liegt */
    .click-parent > *:not(.click-parent__link) {
        position: relative;
        z-index: 2;
    }

    /* -----------------------------------------
   10) HELFER-KLASSEN
   ----------------------------------------- */
    button {
        border: 0px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--primary);
    }

    .bg-surface {
        background-color: var(--color-surface);
    }

    .text-muted {
        color: var(--color-muted);
    }

    .flex {
        display: flex;
    }

    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .flex-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .center-inline {
        margin-inline: auto;
    }

    eyebrow__line {
        color: #2a3851;
    }

    .eyebrow__line {
    }

    .rs__eyebrow {
        text-align: left;
        color: var(--white);
        font-size: 12px;
        background: #2A3851;
        padding-left: .5rem;
        padding-right: .5rem;
        width: fit-content;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .hero__content {
        color: primary;
        display: flex;
        flex-direction: var(--space-m);
        flex-wrap: nowrap;
        gap: var(--space-xs);
    }

    .rs_heading {
        color: #2a3851;
        text-align: left;
        text-transform: uppercase;
    }

    .btn-action {
        background-color: var(--action);
        color: var(--white);
        width: fit-content;
        min-width: 220px;
        border: 2px var(--action);
        border-radius: var(--radius-xs);
        padding: 1em 2em;
        font-family: 'Akatab', sans-serif;
        font-size: var(--text-s);
        font-weight: 600;
    }

    intro-left-wrapper {
    }

    @media (max-width:480px) {
        .intro-left-wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
    }

    .btn-arrow {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        font-weight: 600;
        font-size: var(--text-m);
        color: var(--primary);
        background: transparent;
        border: none;
        padding: var(--space-xs) var(--space-s) var(--space-xs) 0;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    /* Pfeil VOR dem Text */
    .btn-arrow::before {
        content: "";
        display: inline-block;
        width: 1.25em;
        height: 1.25em;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z'/%3E%3C/svg%3E")
        no-repeat center / contain;
        background-color: currentColor;

        /* übernimmt Textfarbe */
        transition: transform 0.3s ease;
    }

    /* Hover: Farbe + Pfeil leicht nach rechts schieben */
    .btn-arrow:hover {
        color: var(--primary-udark);
    }

    .btn-arrow:hover::before {
        transform: translateX(4px);
    }

    .divider-gradient {
        width: 130%;
        height: 2rem;
        background: linear-gradient(to right,   #C2CDE0 0%,   #C2CDE0 10%,   #B3BED2 10%,  #B3BED2 20%,   #A5B0C4 20%,  #A5B0C4 30%,   #96A1B6 30%,  #96A1B6 40%,   #8893A8 40%,  #8893A8 50%,   #7A859A 50%,  #7A859A 60%,   #6C788C 60%,  #6C788C 70%,   #5E6A7E 70%,  #5E6A7E 80%,   #4A5264 80%,  #4A5264 90%,   #2A3851 90%,  #2A3851 100% );
    }
}

@media (max-width:480px) {
    .services-wrapper {
        gap: 0;
        display: flex;
        flex-direction: column;
    }
}

.services-eyebrow {
    font-size: var(--text-s);
    max-width: 55ch;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.services-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.service-card-wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: var(--grid-1);
    gap: var(--space-xl);
}

@media (min-width: 769px) {
    .service-card-wrapper {
        display: grid;
        grid-template-columns: var(--grid-3);
        gap: var(--space-l);
    }
}

@media (min-width: 1025px) {
    .service-card-wrapper {
        gap: var(--space-xl);
    }
}

.about-fact {
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 500;
}

.facts__item {
    padding: var(--space-l) var(--space-s) !important;
    height: 14rem;
    font-family: 'Alegreya Sans', sans-serif;
    color: var(--primary);
}

.section-description-wrapper {
    position: absolute;
    top: 0;
    right: var(--space-xxl);
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
    width: fit-content;
}

@media (max-width:480px) {
    .section-description-wrapper {
        display: none;
    }
}

@media (max-width:1024px) {
    .section-description-wrapper {
        right: var(--space-xs);
        top: 0;
    }
}

.section-description-text {
    writing-mode: vertical-lr;
    color: var(--white);
    direction: ltr;
    text-transform: uppercase;
    transform: rotate(180deg);
    font-weight: 600;
}

.arrow-down {
    max-height: 12rem;
}

.image-with-steps {
    max-width: 38rem;
    aspect-ratio: 3/4;
    object-fit: cover;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

@media (max-width:480px) {
    .image-with-steps {
        max-width: 28rem;
    }
}

intro-container {
}

.intro-container {
    display: grid;
    grid-template-columns: var(--grid-1) !important;
}

@media (min-width: 481px) {
}

.intro-container {
    display: grid;

    /* grid-template-columns: var(--grid-2) !important */
}

@media (min-width: 769px) {
    .intro-container {
        display: grid;
        grid-template-columns: var(--grid-2-3) !important;
    }
}

@media (min-width: 769px) {
    .intro-left-wrapper {
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.service-content-wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: var(--grid-2);
    gap: var(--space-xl);
}

@media (max-width:768px) {
    .service-content-wrapper {
        display: flex;
        flex-direction: column;
    }

    .service-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start;
    }

    .service-content-1 {
        order: -1;
    }
}

.about-grid {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: var(--grid-2-3);
    gap: var(--space-xxl);
}

@media (max-width:480px) {
    .about-grid {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: var(--grid-1) !important;
    }
}

@media (max-width:768px) {
    .about-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
}

.about-facts-wrapper {
    justify-content: flex-end;
    padding-top: var(--space-xxl);
    position: relative;
    display: flex;
}

@media (max-width:480px) {
    .about-facts-wrapper {
        transform: scale(70%, 70%);
    }
}

@media (max-width:768px) {
    .about-facts-wrapper {
        display: flex;
        justify-content: center;
        padding-top: var(--space-m);
    }
}

facts-01 {
    position: absolute;
    z-index: 2;
    padding-left: 0;
}

.about-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

@media (max-width:768px) {
    .about-content-wrapper {
        order: -1;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width:480px) {
}

@media (max-width:768px) {
}

service-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    width: 53rem;
}

.service-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.adress-wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: var(--grid-2-3);
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-top: 1px none #ffffff;
    border-bottom: 1px solid #ffffff;
}

.footer {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: var(--grid-3);
}

@media (max-width:768px) {
    .footer {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: var(--grid-1);
    }
}

@media (min-width: 769px) {
    .footer {
    }
}

.footer-link {
    color: var(--primary-dark);
    text-decoration: none;
    font-size: var(--text-xs);
}

footer-field {
}

.footer-field {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
}

contact-grid {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: var(--grid-2);
    gap: var(--space-xl);
    max-width: 1200px;
    color: var(--white);
}

.contact-grid {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: var(--grid-2);
    gap: var(--space-xl);
    max-width: 1200px;
    color: var(--white);
}

@media (max-width:480px) {
    .contact-grid {
        display: flex;
        flex-direction: column;
    }
}

.contact-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-m);
}

@media (max-width:480px) {
}

.header-logo {
    max-width: 22rem;
}

@media (max-width:480px) {
    .header-logo {
        max-width: 15rem;
    }
}

.nav-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.phone-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    cursor: pointer;
    color: #2A3851;
    border-radius: var(--radius-s);
    background-color: transparent;
    border: 2px none #2a3851;
    outline: 2px solid #2a3851;
    order: -;
}

@media (max-width:480px) {
    .phone-button {
        order: -1;
    }
}

.mobile-nav {
    display: inline-block;
    padding: clamp(0.75rem, 3vw, 1.25rem) clamp(1rem, 3vw, 1.5rem);
    text-decoration: none;
    color: var(--white);
    font-weight: 500;
    font-size: var(--h3);
    text-transform: uppercase;
}

.hero-standard {
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end !important;
    background-color: var(--primary-light);
    align-items: center;
}

@media (max-width:480px) {
    .hero-standard {
        height: 30vh;
    }
}

.content-section-standard {
    background-color: #f9fafc;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-copy {
    color: var(--primary-dark);
    font-size: var(--text-s);
    max-width: 85ch;
}

.container-1200 {
    max-width: 1200px;
    width: 100%;
}

.hero-service {
    height: 75dvh;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end !important;
    color: var(--white);
    padding-bottom: var(--section-space-l) !important;
}

.service-hero-heading {
    color: var(--white) !important;
}

service-content-section {
}

.service-hero-section {
    background-color: #f9fafc;
    display: flex;
    text-align: center;
    gap: var(--space-m);
}

.service-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

-service-conten-container {
}

.service-hero-section {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.service-content-wrapper {
}

.servicepage-intro {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: var(--grid-2);
    background-color: #f8f9fb;
}

.servicepage-subline {
    font-size: var(--h2) !important;
}

.servicepage-introtext {
    color: var(--primary);
    font-size: var(--text-m) !important;
    line-height: 1.2 !important;
}

.servicepage-subhero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.servicepage-subline {
    font-size: var(--h1) !important;
    line-height: 1 !important;
    color: var(--primary) !important;
}

.servicepage-subline {
}

.servicepage-subline {
}

#kontakt {
}

#kontakt {
}

#kontakt {
    background-color: var(--primary-udark);
    display: flex;
    flex-direction: column;
    gap: var(--section-space-s);
    align-items: center;
}

#kontakt {
    background-color: var(--primary-udark);
    display: flex;
    flex-direction: column;
    gap: var(--section-space-s);
    align-items: center;
}

.btn-action {
    background-color: var(--primary-udark);
    display: flex;
    flex-direction: column;
    gap: var(--section-space-s);
    align-items: center;
    cursor: pointer;
}
}