/* ============================================================
   KISTENFREI
   Global Design System
   ============================================================ */

:root {
    --kf-primary: #17873f;
    --kf-primary-hover: #116e34;
    --kf-primary-soft: #eaf3ec;

    --kf-dark: #0d2a40;
    --kf-dark-green: #0a4c39;

    --kf-text: #173248;
    --kf-text-light: #5b6a76;

    --kf-white: #ffffff;

    --kf-background: #fbfbf8;
    --kf-background-warm: #f7f5ef;
    --kf-background-soft: #f4f6f3;

    --kf-border: #e5eae7;

    --kf-shadow:
        0 12px 28px
        rgba(26, 51, 57, 0.08);

    --kf-shadow-hover:
        0 18px 38px
        rgba(26, 51, 57, 0.14);

    --kf-radius-small: 10px;
    --kf-radius: 16px;
    --kf-radius-large: 24px;

    --kf-container: 1200px;
}


/* ============================================================
   BASE
   ============================================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--kf-background);
    color: var(--kf-text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
}

img {
    display: block;

    max-width: 100%;
}

a {
    color: inherit;

    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

.kf-container {
    width: min(
        calc(100% - 48px),
        var(--kf-container)
    );

    margin-inline: auto;
}


/* ============================================================
   KISTENFREI
   GLOBAL HEADER / FOOTER / CONTACT
   Passend zum aktuellen template.php
   ============================================================ */


/* ============================================================
   HEADER
   ============================================================ */

.kf-header {
    position: sticky;
    z-index: 1000;
    top: 0;

    width: 100%;

    border-bottom: 1px solid rgba(13, 42, 64, 0.07);

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 2px 16px rgba(13, 42, 64, 0.035);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


.kf-header-inner {
    display: flex;

    min-height: 82px;

    align-items: center;

    gap: 28px;
}


/* ============================================================
   BRAND / LOGO
   ============================================================ */

.kf-brand {
    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;

    color: var(--kf-dark, #0d2a40);

    font-size: 1.72rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.05em;

    white-space: nowrap;

    text-decoration: none;
}


.kf-brand:hover {
    color: var(--kf-dark, #0d2a40);
}


.kf-brand-mark {
    display: inline-block;

    width: 10px;
    height: 10px;

    margin-right: 9px;

    border-radius: 50%;

    background: var(--kf-primary, #17873f);

    box-shadow:
        0 0 0 5px
        rgba(23, 135, 63, 0.10);
}


.kf-brand-accent {
    color: var(--kf-primary, #17873f);
}


/* ============================================================
   DESKTOP NAVIGATION
   ============================================================ */

.kf-navigation {
    display: flex;

    margin-left: auto;

    align-self: stretch;
    align-items: center;

    gap: 26px;
}


.kf-navigation a {
    position: relative;

    display: flex;

    height: 100%;

    align-items: center;

    color: var(--kf-dark, #0d2a40);

    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    transition:
        color 0.2s ease;
}


.kf-navigation a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    border-radius: 3px 3px 0 0;

    background: var(--kf-primary, #17873f);

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform 0.2s ease;
}


.kf-navigation a:hover,
.kf-navigation a.is-active {
    color: var(--kf-primary, #17873f);
}


.kf-navigation a:hover::after,
.kf-navigation a.is-active::after {
    transform: scaleX(1);
}


/* ============================================================
   HEADER ACTIONS
   ============================================================ */

.kf-header-actions {
    display: flex;

    flex: 0 0 auto;

    align-items: center;

    gap: 10px;
}


/* PHONE */

.kf-header-phone {
    display: inline-flex;

    min-height: 46px;

    align-items: center;
    justify-content: center;

    padding: 0 15px;

    border-radius: 9px;

    color: var(--kf-dark, #0d2a40);

    font-size: 0.86rem;
    font-weight: 750;

    white-space: nowrap;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


.kf-header-phone:hover {
    background: var(--kf-primary-soft, #eaf3ec);

    color: var(--kf-primary, #17873f);
}


/* PRIMARY CTA */

.kf-header-cta {
    display: inline-flex;

    min-height: 48px;

    align-items: center;
    justify-content: center;

    padding: 0 18px;

    border-radius: 9px;

    background: var(--kf-primary, #17873f);
    color: #ffffff;

    box-shadow:
        0 7px 16px
        rgba(23, 135, 63, 0.16);

    font-size: 0.84rem;
    font-weight: 750;

    white-space: nowrap;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.kf-header-cta:hover {
    background: var(--kf-primary-hover, #116e34);

    color: #ffffff;

    box-shadow:
        0 10px 22px
        rgba(23, 135, 63, 0.22);

    transform: translateY(-1px);
}


/* ============================================================
   MOBILE NAV TOGGLE
   ============================================================ */

.kf-nav-toggle {
    display: none;

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    padding: 9px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    cursor: pointer;
}


.kf-nav-toggle:hover {
    background: var(--kf-primary-soft, #eaf3ec);
}


.kf-nav-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    border-radius: 99px;

    background: var(--kf-dark, #0d2a40);

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


/* ============================================================
   FOOTER
   ============================================================ */

.kf-footer {
    padding: 76px 0 0;

    border-top: 1px solid var(--kf-border, #e5eae7);

    background: #ffffff;
}


.kf-footer-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(180px, 0.65fr)
        minmax(180px, 0.65fr);

    gap: 80px;

    padding-bottom: 58px;
}


/* ============================================================
   FOOTER BRAND
   ============================================================ */

.kf-footer-brand {
    color: var(--kf-dark, #0d2a40);

    font-size: 2rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.05em;
}


.kf-footer-brand span {
    color: var(--kf-primary, #17873f);
}


.kf-footer-copy {
    max-width: 450px;

    margin: 22px 0 0;

    color: var(--kf-text-light, #5b6a76);

    font-size: 0.91rem;
    line-height: 1.75;
}


/* ============================================================
   FOOTER COLUMNS
   ============================================================ */

.kf-footer-heading {
    margin: 0 0 20px;

    color: var(--kf-dark, #0d2a40);

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.kf-footer-grid > div:nth-child(2),
.kf-footer-grid > div:nth-child(3) {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.kf-footer-grid a {
    position: relative;

    display: inline-block;

    margin-bottom: 12px;

    color: var(--kf-text-light, #5b6a76);

    font-size: 0.89rem;
    line-height: 1.45;

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.kf-footer-grid a:hover {
    color: var(--kf-primary, #17873f);

    transform: translateX(2px);
}


/* ============================================================
   FOOTER BOTTOM
   ============================================================ */

.kf-footer-bottom {
    display: flex;

    min-height: 68px;

    align-items: center;

    border-top: 1px solid var(--kf-border, #e5eae7);

    color: #7b8992;

    font-size: 0.77rem;
    line-height: 1.5;
}


/* ============================================================
   DESKTOP CONTACT RAIL
   ============================================================ */

.kf-contact-rail {
    position: fixed;

    z-index: 900;

    top: 50%;
    right: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(13, 42, 64, 0.09);

    border-right: 0;

    border-radius: 12px 0 0 12px;

    background: #ffffff;

    box-shadow:
        -7px 8px 28px
        rgba(13, 42, 64, 0.12);

    transform: translateY(-50%);
}


.kf-contact-rail a {
    display: flex;

    width: 54px;
    height: 54px;

    align-items: center;

    overflow: hidden;

    padding-left: 54px;

    background-color: #ffffff;

    background-position: 17px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;

    color: var(--kf-dark, #0d2a40);

    font-size: 0.8rem;
    font-weight: 750;

    white-space: nowrap;

    text-decoration: none;

    transition:
        width 0.25s ease,
        padding 0.25s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}


.kf-contact-rail a + a {
    border-top:
        1px solid
        var(--kf-border, #e5eae7);
}


.kf-contact-rail a:hover {
    width: 138px;

    padding-right: 18px;

    background-color:
        var(--kf-primary, #17873f);

    color: #ffffff;
}


/* ============================================================
   CONTACT RAIL ICONS
   Icons are CSS-only so the HTML does not need to change
   ============================================================ */

.kf-contact-phone {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2317873f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}


.kf-contact-whatsapp {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2317873f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-8.9 8.5 9.5 9.5 0 0 1-4.1-.9L3 21l1.8-4.8A8.5 8.5 0 1 1 21 11.5z'/%3E%3Cpath d='M8.5 8.5c.5 3 2 4.5 5 5'/%3E%3C/svg%3E");
}


.kf-contact-phone:hover,
.kf-contact-whatsapp:hover {
    /*
     * White icon versions on green hover.
     */
    background-position: 17px center;
}


.kf-contact-phone:hover {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}


.kf-contact-whatsapp:hover {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-8.9 8.5 9.5 9.5 0 0 1-4.1-.9L3 21l1.8-4.8A8.5 8.5 0 1 1 21 11.5z'/%3E%3Cpath d='M8.5 8.5c.5 3 2 4.5 5 5'/%3E%3C/svg%3E");
}


/* ============================================================
   MOBILE CONTACT
   Hidden on desktop
   ============================================================ */

.kf-mobile-contact {
    display: none;
}


/* ============================================================
   RESPONSIVE HEADER
   ============================================================ */

@media (max-width: 1100px) {

    .kf-header-inner {
        gap: 18px;
    }


    .kf-navigation {
        gap: 18px;
    }


    .kf-navigation a {
        font-size: 0.76rem;
    }


    /*
     * At this width the separate phone number uses too much
     * horizontal space. CTA remains visible.
     */
    .kf-header-phone {
        display: none;
    }
}


/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (max-width: 900px) {

    /* --------------------------------------------------------
       HEADER
       -------------------------------------------------------- */

    .kf-header-inner {
        position: relative;

        min-height: 70px;

        gap: 14px;
    }


    .kf-brand {
        margin-right: auto;

        font-size: 1.5rem;
    }


    .kf-brand-mark {
        width: 9px;
        height: 9px;

        margin-right: 8px;
    }


    /*
     * Desktop navigation becomes dropdown.
     */
    .kf-navigation {
        position: absolute;

        top: 100%;
        right: 0;
        left: 0;

        display: none;

        margin: 0;

        padding: 10px 20px 20px;

        border-top:
            1px solid
            var(--kf-border, #e5eae7);

        border-bottom:
            1px solid
            var(--kf-border, #e5eae7);

        background:
            rgba(255, 255, 255, 0.99);

        box-shadow:
            0 15px 30px
            rgba(13, 42, 64, 0.09);

        flex-direction: column;

        align-items: stretch;

        gap: 0;
    }


    .kf-navigation.is-open {
        display: flex;
    }


    .kf-navigation a {
        display: flex;

        min-height: 52px;
        height: auto;

        align-items: center;

        padding: 0;

        border-bottom:
            1px solid
            var(--kf-border, #e5eae7);

        font-size: 0.92rem;
    }


    .kf-navigation a:last-child {
        border-bottom: 0;
    }


    .kf-navigation a::after {
        top: 50%;
        right: 0;
        bottom: auto;
        left: auto;

        width: 7px;
        height: 7px;

        border-radius: 50%;

        transform:
            translateY(-50%)
            scale(0);
    }


    .kf-navigation a.is-active::after {
        transform:
            translateY(-50%)
            scale(1);
    }


    /* HEADER ACTIONS */

    .kf-header-actions {
        margin-left: auto;
    }


    .kf-header-phone {
        display: none;
    }


    .kf-header-cta {
        min-height: 42px;

        padding: 0 13px;

        font-size: 0.76rem;
    }


    /* HAMBURGER */

    .kf-nav-toggle {
        display: block;
    }


    /*
     * Hamburger becomes X when navigation is open.
     * Your current JS only changes aria-expanded,
     * therefore we use that attribute directly.
     */

    .kf-nav-toggle[aria-expanded="true"]
    span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .kf-nav-toggle[aria-expanded="true"]
    span:nth-child(2) {
        opacity: 0;
    }


    .kf-nav-toggle[aria-expanded="true"]
    span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /* --------------------------------------------------------
       FOOTER
       -------------------------------------------------------- */

    .kf-footer {
        padding:
            65px 0 95px;
    }


    .kf-footer-grid {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(160px, 0.8fr);

        gap: 50px 55px;

        padding-bottom: 48px;
    }


    .kf-footer-grid > div:first-child {
        grid-column:
            1 / -1;
    }


    /* --------------------------------------------------------
       DESKTOP CONTACT RAIL OFF
       -------------------------------------------------------- */

    .kf-contact-rail {
        display: none;
    }


    /* --------------------------------------------------------
       MOBILE CONTACT BAR
       -------------------------------------------------------- */

    .kf-mobile-contact {
        position: fixed;

        z-index: 1100;

        right: 0;
        bottom: 0;
        left: 0;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;

        padding:
            7px
            max(
                8px,
                env(safe-area-inset-right)
            )
            calc(
                7px
                + env(safe-area-inset-bottom)
            )
            max(
                8px,
                env(safe-area-inset-left)
            );

        border-top:
            1px solid
            rgba(13, 42, 64, 0.08);

        background:
            rgba(255, 255, 255, 0.97);

        box-shadow:
            0 -8px 30px
            rgba(13, 42, 64, 0.11);

        backdrop-filter:
            blur(12px);

        -webkit-backdrop-filter:
            blur(12px);
    }


    .kf-mobile-contact a {
        display: flex;

        min-height: 49px;

        align-items: center;
        justify-content: center;

        border-radius: 9px;

        color: #ffffff;

        font-size: 0.88rem;
        font-weight: 750;

        text-decoration: none;
    }


    .kf-mobile-contact-phone {
        background:
            var(--kf-dark, #0d2a40);
    }


    .kf-mobile-contact-whatsapp {
        background:
            var(--kf-primary, #17873f);
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .kf-header-inner {
        min-height: 66px;
    }


    .kf-brand {
        font-size: 1.38rem;
    }


    /*
     * Header CTA is unnecessary on very small screens because
     * the permanent contact bar is already visible.
     */
    .kf-header-cta {
        display: none;
    }


    .kf-footer-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .kf-footer-grid > div:first-child {
        grid-column: auto;
    }


    .kf-footer-copy {
        max-width: none;
    }


    .kf-footer-bottom {
        min-height: auto;

        padding: 24px 0;

        line-height: 1.6;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {

    .kf-brand {
        font-size: 1.25rem;
    }


    .kf-brand-mark {
        display: none;
    }


    .kf-mobile-contact a {
        font-size: 0.82rem;
    }
}


/* ============================================================
   MOBILE HERO IMAGE
   ============================================================ */

@media (max-width: 620px) {

    .kf-home-hero__visual {
        display: none;
        position: relative;

        width: calc(100% + 28px);
        height: 300px;
        min-height: 0;

        margin-left: -14px;
        margin-right: -14px;

        overflow: hidden;
    }

    .kf-home-hero__visual img {
        display: none;
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;
        min-height: 0;
        max-width: 100%;

        object-fit: cover;

        /*
         * Verschiebt den sichtbaren Ausschnitt.
         * Falls die Person zu weit rechts/links sitzt,
         * kannst du nur diesen Wert ändern.
         */
        object-position: 58% center;
    }

    .kf-home-hero__visual::before {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;

        width: 100%;
        height: 65px;

        background:
            linear-gradient(
                to bottom,
                #f8f8f4 0%,
                rgba(248, 248, 244, 0.65) 35%,
                rgba(248, 248, 244, 0) 100%
            );
    }
}

/* ============================================================
   HOME
   ============================================================ */

.kf-home {
    overflow: hidden;

    background: var(--kf-background);
}


/* ============================================================
   EYEBROW
   ============================================================ */

.kf-home-eyebrow {
    position: relative;

    display: inline-block;

    margin: 0 0 20px;
    padding-top: 17px;

    color: var(--kf-dark);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    line-height: 1.3;
    text-transform: uppercase;
}

.kf-home-eyebrow::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 40px;
    height: 3px;

    border-radius: 999px;

    background: var(--kf-primary);
}


/* ============================================================
   HERO
   ============================================================ */

.kf-home-hero {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #f8f8f4 0%,
            #f8f8f4 47%,
            #eee7dc 100%
        );
}

.kf-home-hero::before {
    content: "";

    position: absolute;

    top: -180px;
    left: -120px;

    width: 640px;
    height: 640px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.95),
            rgba(255, 255, 255, 0)
        );

    pointer-events: none;
}

.kf-home-hero__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(0, 1.12fr);

    min-height: 650px;

    align-items: stretch;
}

.kf-home-hero__copy {
    position: relative;
    z-index: 3;

    padding: 86px 0 88px;
}

.kf-home-hero__title {
    max-width: 660px;

    margin: 0;

    color: var(--kf-dark);

    font-size: clamp(
        3.3rem,
        5.4vw,
        5.2rem
    );

    font-weight: 850;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.kf-home-hero__title span,
.kf-home-hero__title strong {
    display: block;
}

.kf-home-hero__title strong {
    margin-top: 8px;

    color: var(--kf-primary);

    font-weight: 850;
}

.kf-home-hero__sub {
    margin: 28px 0 0;

    color: #263e50;

    font-size: 1.28rem;
    font-weight: 500;
}

.kf-home-hero__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 26px;

    margin-top: 34px;

    align-items: center;
}


/* ============================================================
   BUTTON
   ============================================================ */

.kf-home-button {
    display: inline-flex;

    min-height: 56px;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0 22px;

    border: 0;
    border-radius: var(--kf-radius-small);

    font-size: 0.98rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.kf-home-button svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kf-home-button:hover {
    transform: translateY(-2px);
}

.kf-home-button--primary {
    background: var(--kf-primary);
    color: var(--kf-white);

    box-shadow:
        0 10px 20px
        rgba(23, 135, 63, 0.18);
}

.kf-home-button--primary:hover {
    background: var(--kf-primary-hover);

    box-shadow:
        0 14px 25px
        rgba(23, 135, 63, 0.24);
}


/* ============================================================
   HERO PHONE
   ============================================================ */

.kf-home-phone {
    display: inline-flex;

    gap: 13px;

    align-items: center;
    background: var(--kf-background-soft);
    border-radius: 10px;
    padding: 0 10px;
}

.kf-home-phone__icon {
    display: flex;

    width: 50px;
    height: 50px;

    align-items: center;
    justify-content: center;

    flex: 0 0 50px;

    border-radius: 50%;

    background: var(--kf-primary-soft);
    color: var(--kf-primary);
}

.kf-home-phone__icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kf-home-phone__text strong,
.kf-home-phone__text small {
    display: block;
}

.kf-home-phone__text strong {
    color: var(--kf-dark);

    font-size: 1.08rem;
}

.kf-home-phone__text small {
    margin-top: 2px;

    color: #6f7d87;

    font-size: 0.82rem;
}


/* ============================================================
   HERO VISUAL
   ============================================================ */

.kf-home-hero__visual {
    position: relative;
    z-index: 1;

    min-width: 0;
    min-height: 650px;

    /*
     * Das Bild wandert nach links unter die Headline.
     * Dadurch verbinden sich Text- und Bildhälfte optisch.
     */
    margin-left: 27px;

    /*
     * Wir gleichen den negativen linken Abstand aus,
     * damit rechts trotzdem genügend Breite vorhanden ist.
     */
    width: calc(100% + 135px);

    display: flex;

    align-items: flex-end;
    justify-content: flex-end;

    overflow: visible;
}

.kf-home-hero__visual::before {
    content: "";

    position: absolute;
    z-index: 2;

    top: 0;
    bottom: 0;
    left: -393px;

    width: 210px;

    background:
        linear-gradient(
            90deg,
            #f8f8f4 0%,
            rgba(248, 248, 244, 0.82) 24%,
            rgba(248, 248, 244, 0.30) 62%,
            rgba(248, 248, 244, 0) 100%
        );

    pointer-events: none;
}

.kf-home-hero__visual img {
    position: relative;
    z-index: 1;
    max-width: none;

    display: block;

    /*width: 100%; */
    height: 800px;

    /*
     * Wichtig:
     * Kein cover mehr.
     *
     * cover hat dein Bild rechts abgeschnitten.
     */
    /*object-fit: contain; */

    /*
     * Das vollständige Bild orientiert sich an
     * rechter und unterer Kante.
     */
    object-position: right bottom;
}


/* ============================================================
   FEATURES BAR
   ============================================================ */

.kf-home-features {
    padding: 46px 24px;

    background: var(--kf-white);

    border-bottom:
        1px solid
        var(--kf-border);
}

.kf-home-features__grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 40px;
}

.kf-home-feature {
    display: flex;

    align-items: flex-start;

    gap: 16px;
}

.kf-home-feature + .kf-home-feature {
    position: relative;
}

.kf-home-feature + .kf-home-feature::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: -20px;

    width: 1px;

    background: var(--kf-border);
}

.kf-home-feature__icon {
    display: flex;

    width: 48px;
    height: 48px;

    min-width: 48px;

    align-items: center;
    justify-content: center;

    color: var(--kf-primary);
}

.kf-home-feature__icon svg {
    width: 40px;
    height: 40px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kf-home-feature h2 {
    margin: 3px 0 3px;

    color: var(--kf-dark);

    font-size: 1rem;
    font-weight: 750;
}

.kf-home-feature p {
    margin: 0;

    color: var(--kf-text-light);

    font-size: 0.875rem;
}


/* ============================================================
   SERVICES
   ============================================================ */

.kf-home-services {
    padding: 110px 0 120px;

    background: var(--kf-background);
}

.kf-home-section-head {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 30px;
}

.kf-home-section-head h2 {
    margin: 0;

    color: var(--kf-dark);

    font-size: clamp(
        2.5rem,
        4vw,
        3.8rem
    );

    line-height: 1.04;
    letter-spacing: -0.045em;
}

.kf-home-services__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;

    margin-top: 48px;
}

.kf-home-service-card {
    min-width: 0;
}

.kf-home-service-card__main {
    position: relative;

    display: block;

    min-height: 420px;

    overflow: hidden;

    padding: 28px 25px 0;

    border:
        1px solid
        rgba(13, 42, 64, 0.04);

    border-radius: 14px;

    background: var(--kf-white);

    box-shadow: var(--kf-shadow);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.kf-home-service-card__main:hover {
    transform: translateY(-5px);

    box-shadow: var(--kf-shadow-hover);
}

.kf-home-service-card__icon {
    width: 46px;
    height: 46px;

    margin-bottom: 17px;

    color: var(--kf-primary);
}

.kf-home-service-card__icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kf-home-service-card h3 {
    margin: 0 0 10px;

    color: var(--kf-dark);

    font-size: 1.22rem;
    font-weight: 750;
}

.kf-home-service-card p {
    position: relative;
    z-index: 2;

    max-width: 250px;

    min-height: 65px;

    margin: 0;

    color: var(--kf-text-light);

    font-size: 0.9rem;
    line-height: 1.55;
}

.kf-home-service-card__image {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 185px;

    overflow: hidden;

    background: #ddd;
}

.kf-home-service-card__image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.06),
            rgba(13, 42, 64, 0.10)
        );
}

.kf-home-service-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.kf-home-service-card__main:hover
.kf-home-service-card__image img {
    transform: scale(1.035);
}

.kf-home-service-card__arrow {
    position: absolute;

    z-index: 3;

    left: 23px;
    bottom: 153px;

    display: flex;

    width: 46px;
    height: 46px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--kf-white);
    color: var(--kf-dark);

    box-shadow:
        0 7px 18px
        rgba(0, 0, 0, 0.14);

    font-size: 1.3rem;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.kf-home-service-card__main:hover
.kf-home-service-card__arrow {
    background: var(--kf-primary);
    color: var(--kf-white);
}


/* ============================================================
   BEFORE / AFTER
   ============================================================ */

.kf-home-result {
    padding: 20px 0 105px;

    background: var(--kf-background);
}

.kf-home-result__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(300px, 0.85fr);

    gap: 70px;

    align-items: center;
}

.kf-home-comparison {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    min-height: 340px;

    overflow: hidden;

    border-radius: 14px;

    box-shadow: var(--kf-shadow);
}

.kf-home-comparison__half {
    position: relative;

    overflow: hidden;

    min-width: 0;
}

.kf-home-comparison__half img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.kf-home-comparison__half::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(13, 42, 64, 0.22),
            transparent 50%
        );
}

.kf-home-comparison__half > span {
    position: absolute;

    z-index: 2;

    bottom: 20px;
    left: 22px;

    padding: 8px 16px;

    border-radius: 999px;

    background:
        rgba(13, 42, 64, 0.84);

    color: var(--kf-white);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kf-home-result__copy h2 {
    margin: 0;

    color: var(--kf-dark);

    font-size: clamp(
        2.7rem,
        4vw,
        4rem
    );

    line-height: 1.04;
    letter-spacing: -0.045em;
}

.kf-home-result__copy h2 strong {
    color: var(--kf-primary);
}

.kf-home-result__copy > p:not(.kf-home-eyebrow) {
    max-width: 440px;

    margin: 22px 0 0;

    color: #274357;

    font-size: 1.2rem;
    line-height: 1.5;
}

.kf-home-result__line {
    display: block;

    width: 40px;
    height: 3px;

    margin-top: 24px;

    border-radius: 99px;

    background: var(--kf-primary);
}


/* ============================================================
   PROCESS
   ============================================================ */

.kf-home-process {
    padding: 90px 24px;

    background: var(--kf-background-soft);
}

.kf-home-process__header {
    max-width: var(--kf-container);

    margin: 0 auto 48px;
}

.kf-home-process__header h2 {
    margin: 0;

    color: var(--kf-dark);

    font-size: clamp(
        2.3rem,
        3.5vw,
        3.4rem
    );

    line-height: 1.05;
    letter-spacing: -0.04em;
}

.kf-home-process__steps {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 30px;
}

.kf-home-process__steps::before {
    content: "";

    position: absolute;

    z-index: 0;

    top: 36px;
    left: 10%;
    right: 10%;

    height: 2px;

    background: var(--kf-border);
}

.kf-home-process-step {
    position: relative;
    z-index: 1;

    display: flex;

    align-items: flex-start;

    gap: 19px;
}

.kf-home-process-step__number {
    display: flex;

    width: 72px;
    height: 72px;

    min-width: 72px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--kf-primary-soft);
    color: var(--kf-primary);

    font-size: 1.35rem;
    font-weight: 800;
}

.kf-home-process-step__content {
    padding-top: 1px;
}

.kf-home-process-step__icon {
    width: 37px;
    height: 37px;

    margin-bottom: 9px;

    color: var(--kf-primary);
}

.kf-home-process-step__icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kf-home-process-step h3 {
    margin: 0 0 5px;

    color: var(--kf-dark);

    font-size: 1.05rem;
    font-weight: 750;
}

.kf-home-process-step p {
    max-width: 170px;

    margin: 0;

    color: var(--kf-text-light);

    font-size: 0.86rem;
    line-height: 1.55;
}

.kf-home-process-step__arrow {
    position: absolute;

    top: 26px;
    right: -19px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #87928f;
}

.kf-home-process-step__arrow svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   CTA
   ============================================================ */

.kf-home-cta {
    position: relative;

    overflow: hidden;

    padding: 82px 24px;

    background:
        linear-gradient(
            115deg,
            #0b3030,
            #0b4a39
        );
}

.kf-home-cta::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 18% 55%,
            rgba(255, 255, 255, 0.04),
            transparent 33%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 255, 255, 0.035),
            transparent 28%
        );

    pointer-events: none;
}

.kf-home-cta__inner {
    position: relative;
    z-index: 1;

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 50px;
}

.kf-home-cta__content > span {
    display: block;

    margin-bottom: 9px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.kf-home-cta__content h2 {
    margin: 0;

    color: var(--kf-white);

    font-size: clamp(
        2.2rem,
        4vw,
        3.5rem
    );

    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.kf-home-cta__content p {
    margin: 13px 0 0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 1.05rem;
}

.kf-home-cta__buttons {
    display: flex;

    gap: 22px;

    align-items: center;
}

.kf-home-cta__button {
    display: inline-flex;

    min-height: 54px;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 25px;

    border-radius: 10px;

    background: var(--kf-white);
    color: var(--kf-dark);

    font-size: 0.95rem;
    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.kf-home-cta__button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.22);
}

.kf-home-cta__button svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: var(--kf-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kf-home-cta__phone {
    display: flex;

    gap: 12px;

    align-items: center;
}

.kf-home-cta__phone-icon {
    display: flex;

    width: 46px;
    height: 46px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.15);
}

.kf-home-cta__phone-icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: var(--kf-white);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kf-home-cta__phone-text strong,
.kf-home-cta__phone-text span {
    display: block;
}

.kf-home-cta__phone-text strong {
    color: var(--kf-white);

    font-size: 1.05rem;
}

.kf-home-cta__phone-text span {
    margin-top: 2px;

    color:
        rgba(255, 255, 255, 0.62);

    font-size: 0.8rem;
}


/* ============================================================
   INTERACTION
   ============================================================ */

.kf-home a:focus-visible {
    outline:
        3px solid
        rgba(23, 135, 63, 0.35);

    outline-offset: 4px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {

    .kf-home-hero__grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 0.9fr);
    }

    .kf-home-services__grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .kf-home-result__grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .kf-home-process__steps {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 45px 35px;
    }

    .kf-home-process__steps::before {
        display: none;
    }

    .kf-home-process-step__arrow {
        display: none;
    }

    .kf-home-cta__inner {
        align-items: flex-start;

        flex-direction: column;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 820px) {

    .kf-home-hero__grid {
        grid-template-columns: 1fr;
    }

    .kf-home-hero__copy {
        padding: 72px 0 45px;
    }

    .kf-home-hero__visual {
        min-height: 500px;
    }

    .kf-home-hero__visual img {
        min-height: 500px;

        position: absolute;
    }

    .kf-home-hero__visual::before {
        inset: -1px 0 auto 0;

        height: 110px;

        background:
            linear-gradient(
                to bottom,
                #f8f8f4,
                rgba(248, 248, 244, 0)
            );
    }

    .kf-home-features__grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .kf-home-feature {
        padding: 22px 0;
    }

    .kf-home-feature + .kf-home-feature::before {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;

        width: auto;
        height: 1px;
    }

    .kf-home-comparison {
        min-height: 300px;
    }

    .kf-home-cta__buttons {
        flex-wrap: wrap;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

    .kf-container {
        width: min(
            calc(100% - 28px),
            var(--kf-container)
        );
    }


    /* HERO */

    .kf-home-hero__copy {
        padding: 56px 0 32px;
    }

    .kf-home-hero__title {
        font-size:
            clamp(
                3rem,
                13vw,
                4.2rem
            );
    }

    .kf-home-hero__sub {
        margin-top: 23px;

        font-size: 1.1rem;
    }

    .kf-home-hero__actions {
        align-items: flex-start;

        flex-direction: column;
    }

    .kf-home-button {
        width: 100%;
    }

    .kf-home-hero__visual {
        min-height: 390px;
        display: none;
    }

    .kf-home-hero__visual img {
        min-height: 390px;

        object-position: 58% center;
    }


    /* FEATURES */

    .kf-home-features {
        padding:
            20px
            14px;
    }


    /* SERVICES */

    .kf-home-services {
        padding: 78px 0 88px;
    }

    .kf-home-section-head h2 {
        font-size: 2.6rem;
    }

    .kf-home-services__grid {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-top: 38px;
    }

    .kf-home-service-card__main {
        min-height: 410px;
    }


    /* RESULT */

    .kf-home-result {
        padding: 0 0 80px;
    }

    .kf-home-comparison {
        grid-template-columns: 1fr;

        min-height: 500px;
    }

    .kf-home-comparison__half {
        min-height: 250px;
    }

    .kf-home-result__copy h2 {
        font-size: 2.8rem;
    }


    /* PROCESS */

    .kf-home-process {
        padding: 76px 14px;
    }

    .kf-home-process__steps {
        grid-template-columns: 1fr;

        gap: 34px;
    }

    .kf-home-process-step {
        gap: 17px;
    }

    .kf-home-process-step__number {
        width: 62px;
        height: 62px;

        min-width: 62px;

        font-size: 1.15rem;
    }


    /* CTA */

    .kf-home-cta {
        padding: 65px 14px;
    }

    .kf-home-cta__content h2 {
        font-size: 2.45rem;
    }

    .kf-home-cta__buttons {
        width: 100%;

        align-items: stretch;

        flex-direction: column;
    }

    .kf-home-cta__button {
        width: 100%;
    }

    .kf-home-cta__phone {
        justify-content: center;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 390px) {

    .kf-home-hero__title {
        font-size: 2.8rem;
    }

    .kf-home-section-head h2 {
        font-size: 2.25rem;
    }

    .kf-home-result__copy h2 {
        font-size: 2.45rem;
    }
}