/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: "Figtree", sans-serif;
    background: #0d110e;
    color: #f2f3ed;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    font: inherit;
}

button {
    border: none;
    cursor: pointer;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --green-dark: #0d110e;
    --green: #284a31;
    --green-light: #5f8b5b;

    --lime: #a6c66a;

    --hempi:  #52a466ac;
    --gold: #c9a85b;

    --white: #f2f3ed;
    --muted: #aeb5aa;

    --card: rgba(255,255,255,0.055);

    --border: rgba(255,255,255,0.12);

    --max-width: 1240px;

    --radius: 24px;
}


/* =========================================================
   GLOBAL
========================================================= */

.container {
    width: min(92%, var(--max-width));
    margin-inline: auto;
}

section {
    position: relative;
}

.section-padding {
    padding: 130px 0;
}




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

.hero {

    min-height: 100vh;

    display: flex;
    align-items: center;

    position: relative;

    overflow: hidden;

    isolation: isolate;

    background: #080d09;
}


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

.hero::before {

    content: "";

    position: absolute;

    inset: -10%;

    background:
        url("/images/hanf-hero.webp")
        center / cover no-repeat;

    z-index: 0;

    transform:
        scale(1.08);

    animation:
        heroBackgroundMove
        30s
        ease-in-out
        infinite;

    will-change:
        transform;
}


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

.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(7,12,8,0.92) 0%,
            rgba(7,12,8,0.72) 45%,
            rgba(7,12,8,0.38) 100%
        );
}


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

@keyframes heroBackgroundMove {

    0% {
        transform:
            scale(1.08)
            translate3d(-1%, -0.5%, 0);
    }

    50% {
        transform:
            scale(1.11)
            translate3d(0.5%, 0.5%, 0);
    }

    100% {
        transform:
            scale(1.08)
            translate3d(1%, -0.5%, 0);
    }
}


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

.hero-content {

    position: relative;

    z-index: 2;

    max-width: 780px;

    padding-top: 70px;
}

.hero-label {

    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

    color: var(--hempi);

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: 15px;
    font-weight: 800;
}

.hero-label::before {

    content: "";

    width: 35px;
    height: 2px;

    background:
        var(--lime);
}

.hero h1 {

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(55px, 8vw, 110px);

    line-height:
        0.91;

    letter-spacing:
        -4px;

    text-transform:
        uppercase;

    margin-bottom:
        35px;

    text-shadow:
        5px 5px 10px black;
}

.hero h1 span {
    color: var(--lime);
}

.hero-text {

    max-width: 620px;

    color: #fcfcfb;

    font-size: 2em;

    line-height: 1.7;

    margin-bottom: 40px;
}


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

.hero-buttons {

    display: flex;

    gap: 16px;

    flex-wrap: wrap;
}

.btn {

    position: relative;

    display: inline-flex;

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

    min-height: 54px;

    padding: 0 28px;

    border-radius: 100px;

    font-size: 15px;

    font-weight: 750;

    letter-spacing: 0.2px;

    overflow: hidden;

    isolation: isolate;

    cursor: pointer;

    transition:
        transform 0.35s
        cubic-bezier(.22,1,.36,1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}


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

.btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,0.22),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left 0.7s
        cubic-bezier(.22,1,.36,1);

    z-index: -1;
}


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

.btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 16px 35px
        rgba(0,0,0,0.28);
}

.btn:hover::before {
    left: 140%;
}


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

.btn-primary {

    background:
        linear-gradient(
            135deg,
            #b4d878 0%,
            var(--lime) 55%,
            #91b25b 100%
        );

    color:
        #101510;

    border:
        1px solid
        rgba(255,255,255,0.15);

    box-shadow:
        0 8px 25px
        rgba(166,198,106,0.18);
}

.btn-primary:hover {

    box-shadow:
        0 18px 40px
        rgba(166,198,106,0.28);
}


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

.btn-outline {

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

    color:
        #ffffff;

    border:
        1px solid
        rgba(255,255,255,0.24);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    box-shadow:
        0 8px 25px
        rgba(0,0,0,0.12);
}

.btn-outline:hover {

    background:
        rgba(166,198,106,0.10);

    border-color:
        rgba(166,198,106,0.55);

    color:
        var(--lime);

    box-shadow:
        0 16px 35px
        rgba(0,0,0,0.25);
}

.btn:active {

    transform:
        translateY(-1px)
        scale(0.98);

    transition-duration:
        0.1s;
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.scroll-indicator {

    position: absolute;

    bottom: 30px;
    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    color:
        #aeb5aa;

    font-size:
        10px;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}

.scroll-line {

    width: 1px;
    height: 50px;

    background:
        linear-gradient(
            to bottom,
            var(--lime),
            transparent
        );

    animation:
        scrollLine
        2s
        infinite;
}

@keyframes scrollLine {

    0%,
    100% {

        transform:
            scaleY(0.5);

        transform-origin:
            top;
    }

    50% {

        transform:
            scaleY(1);

        transform-origin:
            top;
    }
}


/* =========================================================
   INTRO / VEREIN
========================================================= */

.intro {
    background: var(--hempi);
}

.intro-grid {

    display: grid;

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

    gap: 100px;

    align-items: center;
}

.section-label {

    color:
        var(--lime);

    text-transform:
        uppercase;

    font-size:
        1em;

    font-weight:
        800;

    letter-spacing:
        3px;

    margin-bottom:
        18px;
}

.section-title {

    font-family:
        "Archivo Black",
        sans-serif;

    text-transform:
        uppercase;

    font-size:
        clamp(38px, 5vw, 80px);

    line-height:
        0.98;

    letter-spacing:
        -2px;

    margin-bottom:
        28px;

        text-shadow: 1px 1px 2px black;
}

.section-title span {
    color: var(--lime);
}

.text {

    color:
        var(--muted);

    font-size:
        1.2em;

    line-height:
        1.8;
}


/* =========================================================
   INTRO IMAGE
========================================================= */

.intro-image {

    position: relative;

    height: 580px;

    border-radius:
        var(--radius);

    overflow: hidden;

    background:
        #101610;

    box-shadow:
        0 30px 70px
        rgba(0,0,0,0.35);

    transition:
        box-shadow 0.6s ease;
}

.intro-image-photo {

    position: absolute;

    inset: 0;

   background:
    linear-gradient(
        to top,
        rgba(8,12,8,0.55),
        rgba(8,12,8,0.05)
    );

background-size: cover;
background-position: center;
background-repeat: no-repeat;

    transform:
        scale(1.01);

    transition:
        transform 1.2s
        cubic-bezier(.22,1,.36,1);
}

.intro-image:hover {

    box-shadow:
        0 40px 85px
        rgba(0,0,0,0.45);
}

.intro-image:hover .intro-image-photo {

    transform:
        scale(1.055);
}


/* =========================================================
   INTRO IMAGE LICHTREFLEX
========================================================= */

.intro-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            115deg,
            transparent 30%,
            rgba(255,255,255,0.08) 50%,
            transparent 70%
        );

    transform:
        translateX(-120%);

    transition:
        transform 1s
        cubic-bezier(.22,1,.36,1);

    pointer-events:
        none;
}

.intro-image:hover::after {

    transform:
        translateX(120%);
}

.intro .btn {
    margin-top: 10px;
}

/* =========================================================
   THEMEN / WISSEN
========================================================= */

.topics {

     position: relative;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(95,139,91,0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(166,198,106,0.08),
            transparent 30%
        ),
        rgba(69, 104, 69, 0.833);
}


/* =========================================================
   SECTION HEADING
========================================================= */

.topics .section-heading {

    max-width: 760px;

    margin-bottom: 70px;
}

.topics .section-heading .text {

    max-width: 680px;

    margin-top: 24px;

    color: var(--muted);

    line-height: 1.8;
}


/* =========================================================
   CARDS GRID
========================================================= */

.cards-grid {

    display: grid;

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

    gap: 22px;
}


/* =========================================================
   INFO CARD
========================================================= */

.info-card {

    position: relative;

    min-height: 470px;

    display: flex;

    flex-direction: column;

    padding: 30px;

    border-radius: var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.025)
        );

    border:
        1px solid
        rgba(255,255,255,0.10);

    overflow: hidden;

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

/* =========================================================
   INFO CARD LINK
========================================================= */

.info-card {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}


/* =========================================================
   CARD LINK
========================================================= */

.card-link {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 25px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.04em;

    color: var(--lime);

    transition:
        gap 0.3s ease,
        opacity 0.3s ease;
}

.card-link span {

    font-size: 16px;

    transition:
        transform 0.3s ease;
}


/* =========================================================
   HOVER
========================================================= */

.info-card:hover .card-link {

    gap: 13px;
   

}

.info-card:hover .card-link span {

    transform:
        translateX(3px);

}

/* =========================================================
   CARD GLOW
========================================================= */

.info-card::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -130px;
    bottom: -130px;

    border-radius: 50%;

    background:
        rgba(166,198,106,0.12);

    filter:
        blur(55px);

    opacity: 0.7;

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


/* =========================================================
   TOP AREA
========================================================= */

.card-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 42px;
}


/* =========================================================
   CARD ICON
========================================================= */

.card-icon {

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 17px;

    background:
        rgba(166,198,106,0.10);

    border:
        1px solid
        rgba(166,198,106,0.22);

    font-size: 25px;

    transition:
        transform 0.45s ease,
        background 0.45s ease,
        border-color 0.45s ease;
}


/* =========================================================
   CARD NUMBER
========================================================= */

.card-number {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.12em;

    color:
        rgba(255,255,255,0.35);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.card-content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    height: 100%;
}


/* =========================================================
   CATEGORY
========================================================= */

.card-category {

    display: block;

    margin-bottom: 10px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.16em;

    color:
        var(--lime);

    text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.info-card h3 {

    margin: 0 0 16px;

    font-size: 24px;

    line-height: 1.2;

    color:
        #ffffff;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.info-card p {

    margin: 0;

    color:
        var(--muted);

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   CARD TOPICS
========================================================= */

.card-topics {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin: auto 0 0;

    padding: 25px 0 0;

    list-style: none;

    border-top:
        1px solid
        rgba(255,255,255,0.08);
}

.card-topics li {

    position: relative;

    padding-left: 18px;

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

    font-size: 12px;

    line-height: 1.5;
}

.card-topics li::before {

    content: "";

    position: absolute;

    left: 0;
    top: 7px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--lime);

    box-shadow:
        0 0 10px
        rgba(166,198,106,0.4);
}


/* =========================================================
   HOVER
========================================================= */

.info-card:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(166,198,106,0.32);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.09),
            rgba(255,255,255,0.035)
        );

    box-shadow:
        0 25px 60px
        rgba(0,0,0,0.35);
}

.info-card:hover::before {

    transform:
        scale(1.7);

    opacity:
        1;
}

.info-card:hover .card-icon {

    transform:
        translateY(-3px)
        scale(1.08);

    background:
        rgba(166,198,106,0.16);

    border-color:
        rgba(166,198,106,0.38);
}


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

@media (max-width: 1100px) {

    .cards-grid {

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

    }

    .info-card {

        min-height: 430px;

    }

}


@media (max-width: 650px) {

    .topics .section-heading {

        margin-bottom: 45px;

    }

    .cards-grid {

        grid-template-columns:
            1fr;

        gap: 16px;

    }

    .info-card {

        min-height: auto;

        padding: 26px;

    }

    .card-top {

        margin-bottom: 32px;

    }

    .card-topics {

        margin-top: 30px;

    }

}

/* =========================================================
   PARALLAX
========================================================= */
.parallax-section {
    position: relative;

    min-height: 600px;

    display: flex;
    align-items: center;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}
.parallax-section .container {
    position: relative;
    z-index: 2;
}
.parallax-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.35);

    z-index: 1;
}

.parallax-section .parallax-content {
    position: relative;
    z-index: 2;
}

.parallax-content {
    max-width:
        750px;
}

.parallax-content .section-title {

    font-size:
        clamp(45px, 7vw, 90px);
}

.parallax-content p {

    max-width:
        620px;

    color:
        #d0d5cd;

    line-height:
        1.8;

    font-size:
        18px;
}


/* =========================================================
   VALUES / GEMEINSCHAFT
========================================================= */

.values {

    background:
        #4f8a4f;
}


/* =========================================================
   VALUES GRID
========================================================= */

.values-grid {

    width:
        100%;

    display:
        grid;

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

    gap:
        20px;

    box-sizing:
        border-box;
}


/* =========================================================
   VALUE CARD
========================================================= */

.value-card {

    min-width:
        0;

    min-height:
        390px;

    border-radius:
        var(--radius);

    overflow:
        hidden;

    position:
        relative;

    background-size:
        cover;

    background-position:
        center;

    display:
        flex;

    align-items:
        flex-end;

    transition:
        transform 0.5s ease;
}


.value-card:hover {

    transform:
        translateY(-8px);
}


/* =========================================================
   CARD 1
========================================================= */

.value-card:nth-child(1) {

    background-image:
        linear-gradient(
            to top,
            rgba(5,9,6,0.95),
            rgba(5,9,6,0.05)
        ),
        url("/images/hanf-community.jpeg");
}


/* =========================================================
   CARD 2
========================================================= */

.value-card:nth-child(2) {

    background-image:
        linear-gradient(
            to top,
            rgba(5,9,6,0.95),
            rgba(5,9,6,0.05)
        ),
        url("/images/hanf-workshop.jpg");
}


/* =========================================================
   CARD 3
========================================================= */

.value-card:nth-child(3) {

    background-image:
        linear-gradient(
            to top,
            rgba(5,9,6,0.95),
            rgba(5,9,6,0.05)
        ),
        url("/images/hanf-garden.jpeg");
}


/* =========================================================
   VALUE CONTENT
========================================================= */

.value-content {

    width:
        100%;

    padding:
        32px;

    box-sizing:
        border-box;
}


.value-number {

    color:
        var(--lime);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        3px;

    margin-bottom:
        12px;
}


.value-content h3 {

    font-size:
        27px;

    margin-bottom:
        10px;
}


.value-content p {

    color:
        #c4cac1;

    line-height:
        1.6;

    font-size:
        14px;
}


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

@media (max-width: 1050px) {

    .values-grid {

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

        gap:
            15px;
    }

    .value-card {

        min-height:
            360px;
    }

    .value-content {

        padding:
            25px;
    }

}


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

@media (max-width: 800px) {

    .values-grid {

        grid-template-columns:
            1fr;

        gap:
            20px;
    }

    .value-card {

        min-height:
            390px;
    }

}




/* =========================================================
   STATISTICS
========================================================= */

.stats {

    padding:
        80px 0;

    background:
        linear-gradient(
            90deg,
            #243b28,
            #18251acc
        );
}

.stats-grid {

    display:
        grid;

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

    gap:
        30px;
}

.stat {

    text-align:
        center;

    padding:
        20px;
}

.stat strong {

    display:
        block;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(42px, 5vw, 65px);

    color:
        var(--lime);

    line-height:
        1;

    margin-bottom:
        12px;
}

.stat span {

    color:
        #c5cbc3;

    font-size:
        14px;
}


/* =========================================================
   QUOTE SECTION
========================================================= */

.quote-section {

    min-height:
        600px;

    display:
        grid;

    place-items:
        center;

    text-align:
        center;

    background:
        linear-gradient(
            rgba(5, 9, 6, 0.386),
            rgba(42, 58, 46, 0.505)
        ),
        url("/images/hanf-leaves.jpeg")
        center / cover fixed;
}

.quote {
    max-width:
        900px;
}

.quote-mark {

    color:
        var(--lime);

    font-family:
        Georgia,
        serif;

    font-size:
        100px;

    line-height:
        0.5;

    margin-bottom:
        35px;
}

.quote h2 {

    font-family:
        "Archivo Black",
        sans-serif;

    text-transform:
        uppercase;

    font-size:
        clamp(32px, 5vw, 65px);

    line-height:
        1.05;
}

.quote h2 span {
    color:
        var(--lime);
}


/* =========================================================
   FAQ
========================================================= */

.faq {

    background:
        #52a466ac;
}

.faq-container {

    max-width:
        900px;

    margin-inline:
        auto;
}

.faq-item {

    border-top:
        1px solid
        rgba(255,255,255,0.12);
}

.faq-item:last-child {

    border-bottom:
        1px solid
        rgba(255,255,255,0.12);
}

.faq-question {

    width:
        100%;

    padding:
        25px 0;

    background:
        transparent;

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    text-align:
        left;

    font-size:
        18px;

    font-weight:
        700;
}

.faq-plus {

    width:
        32px;
    height:
        32px;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    background:
        rgba(166,198,106,0.12);

    color:
        var(--lime);

    font-size:
        22px;

    transition:
        transform 0.3s ease;
}

.faq-answer {

    max-height:
        0;

    overflow:
        hidden;

    transition:
        max-height 0.4s ease;
}

.faq-answer p {

    color:
        var(--muted);

    line-height:
        1.8;

    padding:
        0 50px 25px 0;
}

.faq-item.active .faq-plus {

    transform:
        rotate(45deg);
}


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

.cta {

    padding:
        120px 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(166,198,106,0.15),
            transparent 50%
        ),
         #52a466ac;
}

.cta-box {

    text-align:
        center;

    max-width:
        900px;

    margin-inline:
        auto;
}

.cta-box .section-title {
    margin-bottom:
        25px;
}

.cta-box p {

    color:
        var(--muted);

    max-width:
        600px;

    margin:
        0 auto 35px;

    line-height:
        1.8;
}



/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(50px);

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

.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   STAGGER
========================================================= */

.cards-grid .reveal:nth-child(2) {
    transition-delay:
        0.08s;
}

.cards-grid .reveal:nth-child(3) {
    transition-delay:
        0.16s;
}

.cards-grid .reveal:nth-child(4) {
    transition-delay:
        0.24s;
}


/* =========================================================
   RESPONSIVE – TABLET
========================================================= */

@media (max-width: 1050px) {

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

    .intro-grid {
        gap:
            50px;
    }

   
}


/* =========================================================
   RESPONSIVE – MOBILE CONTENT
========================================================= */

@media (max-width: 800px) {

    /* =====================================================
       INTRO
    ====================================================== */

    .intro-grid {

        grid-template-columns:
            1fr;
    }


    .intro-image {

        height:
            450px;
    }


    /* =====================================================
       VALUES / GEMEINSCHAFT
    ====================================================== */

    .values-grid {

        grid-template-columns:
            1fr;
    }


    .value-card {

        min-height:
            430px;
    }


    /* =====================================================
       STATS
    ====================================================== */

    .stats-grid {

        gap:
            10px;
    }

}






/* =========================================================
   RESPONSIVE – SMALL MOBILE
========================================================= */

@media (max-width: 600px) {


    /* =====================================================
       HERO MOBILE ANIMATION
    ====================================================== */

    .hero::before {

        animation:
            heroBackgroundMoveMobile
            22s
            ease-in-out
            infinite
            alternate;

        transform:
            scale(1.08);
    }


    @keyframes heroBackgroundMoveMobile {

        0% {

            transform:
                scale(1.08)
                translate3d(-0.5%, 0, 0);
        }

        100% {

            transform:
                scale(1.10)
                translate3d(0.5%, 0.5%, 0);
        }
    }


    /* =====================================================
       SECTIONS
    ====================================================== */

    .section-padding {
        padding:
            90px 0;
    }


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

    .hero {

        height:
            100svh;

        min-height:
            100svh;

        background:
            linear-gradient(
                180deg,
                rgba(7,12,8,0.65),
                rgba(7,12,8,0.92)
            ),
            url("/images/hanf-hero.jpg")
            center / cover no-repeat;
    }

    .hero-content {

        padding-top:
            70px;
    }

    .hero h1 {

        font-size:
            clamp(48px, 15vw, 72px);

        letter-spacing:
            -2px;
    }

    .hero-text {

        font-size:
            16px;
    }

    .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;
    }

    .btn {

        width:
            100%;
    }


    /* =====================================================
       CARDS
    ====================================================== */

    .cards-grid {

        grid-template-columns:
            1fr;
    }

    .info-card {

        min-height:
            300px;
    }


    /* =====================================================
       INTRO IMAGE
    ====================================================== */

    .intro-image {

        height:
            360px;
    }


    /* =====================================================
       PARALLAX
    ====================================================== */

    .parallax-section {

        min-height:
            550px;

        background-attachment:
            scroll;
    }

    .quote-section {

        min-height:
            500px;

        background-attachment:
            scroll;
    }


    /* =====================================================
       STATS
    ====================================================== */

    .stats-grid {
        gap:
            10px;
    }



    /* =====================================================
       SCROLL INDICATOR
    ====================================================== */

    .scroll-indicator {

        display:
            none;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;
    }
}

#smooth-wrapper {
    will-change: transform;
}

/* =========================================================
   DOKUS
========================================================= */

.dokus {

    position: relative;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(120, 150, 105, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(190, 170, 110, 0.148),
            transparent 35%
        ),
        #52a466ac;

    overflow: hidden;
}


/* =========================================================
   INNER
========================================================= */

.dokus-inner {

    width: min(92%, var(--max-width));

    margin-inline: auto;

}


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

.dokus-header {

    max-width: 760px;

    margin-bottom: 70px;

}


.dokus-eyebrow {

    display: inline-block;

    margin-bottom: 18px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.22em;

    color: #9da88f;

}


.dokus-header .section-title span {

    color: var(--lime);

}


.dokus-header .text {

    max-width: 650px;

}


/* =========================================================
   VIDEO GRID
========================================================= */

.dokus-grid {

    display: grid;

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

    gap: 34px;

}


/* =========================================================
   DOKU CARD
========================================================= */

.doku-card {

    position: relative;

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

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        var(--radius);

    overflow: hidden;

    transition:
        transform 0.45s
        cubic-bezier(.2,.8,.2,1),

        border-color 0.45s ease,

        box-shadow 0.45s ease;

}


.doku-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(174,190,155,0.28);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.35);

}


/* =========================================================
   VIDEO
========================================================= */

.doku-video {

    display: block;

    text-decoration: none;

}


.doku-thumbnail {

    position: relative;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #151a16;

}


.doku-thumbnail img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s
        cubic-bezier(.2,.8,.2,1),

        filter 0.6s ease;

}


.doku-card:hover
.doku-thumbnail img {

    transform:
        scale(1.07);

    filter:
        brightness(0.72);

}


/* =========================================================
   OVERLAY
========================================================= */

.doku-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.02) 20%,
            rgba(0,0,0,0.72) 100%
        );

    transition:
        background 0.5s ease;

}


.doku-card:hover
.doku-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(18,25,19,0.08),
            rgba(0,0,0,0.78)
        );

}


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

.doku-play {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 72px;
    height: 72px;

    display: flex;

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

    transform:
        translate(-50%, -50%)
        scale(0.92);

    border-radius: 50%;

    background:
        rgba(242,243,237,0.94);

    box-shadow:
        0 10px 35px
        rgba(0,0,0,0.35);

    transition:
        transform 0.45s
        cubic-bezier(.2,.8,.2,1),

        background 0.35s ease,

        box-shadow 0.35s ease;

}


.doku-play span {

    width: 0;
    height: 0;

    margin-left: 5px;

    border-top:
        9px solid transparent;

    border-bottom:
        9px solid transparent;

    border-left:
        14px solid #182018;

}


.doku-card:hover
.doku-play {

    transform:
        translate(-50%, -50%)
        scale(1.08);

    background:
        #ffffff;

    box-shadow:
        0 15px 45px
        rgba(0,0,0,0.5);

}


/* =========================================================
   LABEL
========================================================= */

.doku-duration {

    position: absolute;

    right: 16px;
    bottom: 16px;

    padding:
        7px 10px;

    border-radius: 6px;

    background:
        rgba(8,12,9,0.78);

    backdrop-filter:
        blur(8px);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.12em;

    color: #e8ebe3;

}


/* =========================================================
   CONTENT
========================================================= */

.doku-content {

    padding:
        30px 30px 32px;

}


.doku-category {

    display: block;

    margin-bottom: 12px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.18em;

    color: #89977e;

}


.doku-content h3 {

    margin: 0 0 13px;

    font-size: 25px;

    line-height: 1.2;

    font-weight: 750;

    letter-spacing: -0.02em;

    color: #f0f2eb;

}


.doku-content p {

    margin: 0 0 24px;

    font-size: 14px;

    line-height: 1.7;

    color: #9fa79e;

}


/* =========================================================
   LINK
========================================================= */

.doku-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #c1ccb7;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.3s ease,
        gap 0.3s ease;

}


.doku-link span {

    font-size: 18px;

    line-height: 1;

    transition:
        transform 0.3s ease;

}


.doku-link:hover {

    color: #ffffff;

    gap: 15px;

}


.doku-link:hover span {

    transform:
        translateX(3px);

}


/* =========================================================
   MORE
========================================================= */

.dokus-more {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 55px;

    color: #747d73;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}


.doku-line {

    height: 1px;

    flex: 1;

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

}


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

@media (max-width: 800px) {

    .dokus-grid {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .dokus-header {

        margin-bottom: 45px;

    }

}


@media (max-width: 600px) {

    .dokus-inner {

        width:
            min(
                92%,
                var(--max-width)
            );

    }


    .dokus-header
    .section-title {

        font-size: 45px;

    }


    .dokus-header
    .text {

        font-size: 15px;

        line-height: 1.65;

    }


    .doku-thumbnail {

        aspect-ratio: 16 / 10;

    }


    .doku-play {

        width: 62px;
        height: 62px;

    }


    .doku-content {

        padding: 25px;

    }


    .doku-content h3 {

        font-size: 22px;

    }


    .dokus-more {

        margin-top: 40px;

        font-size: 9px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .doku-card,
    .doku-thumbnail img,
    .doku-play,
    .doku-link,
    .doku-link span {

        transition: none;

    }

}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {

    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 48px;
    height: 48px;

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

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 50%;

    background:
        rgba(9,13,10,0.88);

    color:
        var(--lime);

    font-size:
        22px;

    line-height:
        1;

    cursor:
        pointer;

    z-index:
        900;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(15px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


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

.back-to-top.visible {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0);
}


/* =========================================================
   HOVER
========================================================= */

.back-to-top:hover {

    background:
        var(--lime);

    color:
        #101510;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 30px
        rgba(166,198,106,0.20);
}


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

@media (max-width: 800px) {

    .back-to-top {

        right:
            18px;

        bottom:
            18px;

        width:
            44px;

        height:
            44px;

        font-size:
            20px;
    }

}


/* =========================================================
   MITGLIED WERDEN
========================================================= */

.membership-cta {

    position: relative;

    overflow: hidden;

    padding: 140px 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(95,139,91,0.18),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #101610 0%,
            #182419 50%,
            #0d110e 100%
        );

    border-top:
        1px solid rgba(255,255,255,0.08);

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}


/* =========================================================
   CONTAINER
========================================================= */

.membership-cta .container {

    display: grid;

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

    gap: 80px;

    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.membership-content {

    max-width: 850px;
}


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

.membership-cta .eyebrow {

    display: inline-block;

    margin-bottom: 20px;

    color: var(--lime);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 4px;
}


/* =========================================================
   HEADLINE
========================================================= */

.membership-cta h2 {

    max-width: 800px;

    margin-bottom: 25px;

    font-size: clamp(
        48px,
        6vw,
        82px
    );

    line-height: 0.98;

    letter-spacing: -2px;

    font-weight: 800;
}


.membership-cta h2 span {

    display: block;

    color: var(--lime);
}


/* =========================================================
   INTRO
========================================================= */

.membership-intro {

    max-width: 680px;

    margin-bottom: 55px;

    color: #b8c0b5;

    font-size: 18px;

    line-height: 1.75;
}


/* =========================================================
   BENEFITS
========================================================= */

.membership-benefits {

    display: grid;

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

    gap: 20px;

    margin-bottom: 55px;
}


/* =========================================================
   BENEFIT
========================================================= */

.membership-benefit {

    display: flex;

    gap: 15px;

    padding: 22px;

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

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius:
        18px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}


.membership-benefit:hover {

    transform:
        translateY(-5px);

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

    border-color:
        rgba(166,198,106,0.3);
}


/* =========================================================
   BENEFIT ICON
========================================================= */

.benefit-icon {

    flex-shrink: 0;

    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(166,198,106,0.12);

    color:
        var(--lime);

    font-size: 20px;

    font-weight: 400;
}


/* =========================================================
   BENEFIT TEXT
========================================================= */

.membership-benefit h3 {

    margin-bottom: 7px;

    color: #edf0e9;

    font-size: 16px;
}


.membership-benefit p {

    color: #858d84;

    font-size: 13px;

    line-height: 1.6;
}


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

.membership-actions {

    display: flex;

    align-items: center;

    gap: 30px;

    flex-wrap: wrap;
}


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

.membership-button {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    padding: 17px 26px;

    background:
        var(--lime);

    color:
        #101510;

    border-radius:
        50px;

    font-size: 15px;

    font-weight: 800;

    text-decoration: none;

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


.membership-button span {

    font-size: 20px;

    line-height: 1;

    transition:
        transform 0.3s ease;
}


.membership-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 35px
        rgba(166,198,106,0.25);
}


.membership-button:hover span {

    transform:
        translateX(5px);
}


/* =========================================================
   SECONDARY LINK
========================================================= */

.membership-link {

    color:
        #aeb5aa;

    font-size:
        14px;

    text-decoration:
        none;

    transition:
        color 0.3s ease;
}


.membership-link span {

    margin-left: 7px;

    color:
        var(--lime);
}


.membership-link:hover {

    color:
        var(--lime);
}


/* =========================================================
   SIDE ELEMENT
========================================================= */

.membership-side {

    align-self:
        stretch;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding-left:
        35px;

    border-left:
        1px solid rgba(255,255,255,0.10);
}


.membership-number {

    color:
        rgba(166,198,106,0.35);

    font-size:
        70px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -4px;
}


.membership-side-line {

    width:
        45px;

    height:
        2px;

    margin:
        25px 0;

    background:
        var(--lime);
}


.membership-side p {

    max-width:
        140px;

    color:
        #70786e;

    font-size:
        13px;

    line-height:
        1.7;
}


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

@media (max-width: 1050px) {

    .membership-cta .container {

        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .membership-side {

        padding:
            25px 0 0;

        border-left:
            none;

        border-top:
            1px solid rgba(255,255,255,0.10);

        flex-direction:
            row;

        align-items:
            center;

        gap:
            25px;
    }


    .membership-side-line {

        margin:
            0;
    }


    .membership-side p {

        max-width:
            300px;
    }

}


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

@media (max-width: 800px) {

    .membership-cta {

        padding:
            100px 0;
    }


    .membership-cta h2 {

        font-size:
            clamp(42px, 12vw, 60px);

        letter-spacing:
            -1.5px;
    }


    .membership-intro {

        font-size:
            16px;

        margin-bottom:
            40px;
    }


    .membership-benefits {

        grid-template-columns:
            1fr;

        margin-bottom:
            40px;
    }


    .membership-benefit {

        padding:
            20px;
    }


    .membership-actions {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;
    }


    .membership-side {

        display:
            none;
    }

}


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

@media (max-width: 500px) {

    .membership-cta {

        padding:
            80px 0;
    }


    .membership-cta h2 {

        font-size:
            40px;
    }


    .membership-button {

        width:
            100%;

        justify-content:
            space-between;
    }

}


/* =========================================================
   AKTUELL SICHTBARE SECTION
========================================================= */

main > section {
    position: relative;
    z-index: 1;

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


/* =========================================================
   SECTION IM VIEWPORT
========================================================= */

main > section.section-in-view {

    z-index: 5;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28),
        0 -8px 30px rgba(0, 0, 0, 0.12);

}

/* =========================================================
   THEMENKARTEN – SCHMALE ANSICHT
   Die spätere .cards-grid-Regel in header.css darf die
   einspaltige Darstellung dieser Themenkarten nicht überschreiben.
========================================================= */

@media (max-width: 650px) {
    .topics .cards-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}