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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;

 background: url("bg-main.jpg") center center / cover fixed no-repeat;

    color:#ffffff;

    line-height:1.6;

}



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

.sticky-header{

    position:sticky;
    top:0;

    width:100%;

    text-align:center;

    padding:100px 20px 40px;

    backdrop-filter:blur(18px);

    background:rgba(0,0,0,.45);

    z-index:1000;

}

.change-claim{

    font-size:2.5rem;

    font-weight:800;

    color:#e6c66d;

    letter-spacing:.05em;

    text-shadow:
        0 0 8px rgba(255,220,120,.35);

}

.network-signature{

    margin-top:22px;

    color:#d7d7d7;

    font-size:.95rem;

}



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

.scroll-section{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding: 220px 40px 120px;

}

.section-content{

    width:min(900px,92%);

    text-align:center;

}


.eyebrow{

    color:#e6c66d;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.95rem;

    margin-bottom:18px;

}

h1{

    font-size:4rem;

    line-height:1.1;

    margin-bottom:30px;

    text-shadow:
        0 0 20px rgba(255,255,255,.15);

}

h2{

    font-size:3rem;

    margin-bottom:25px;

}

.lead{

    font-size:1.4rem;

    max-width:720px;

    margin:0 auto 40px;

}

p{

    font-size:1.15rem;

    margin-bottom:18px;

}



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

.button{

    display:inline-block;

    margin-top:25px;

    padding:18px 42px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.button-primary{

    background:#d7ad52;

    color:#111;

    box-shadow:

        0 0 30px rgba(215,173,82,.35);

}

.button-primary:hover{

    transform:translateY(-3px);

    background:#e6c66d;

}



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

@media(max-width:900px){

    h1{

        font-size:2.8rem;

    }

    h2{

        font-size:2.2rem;

    }

    .lead{

        font-size:1.2rem;

    }
  /* Kopfbereich weiter vom oberen Rand und etwas mächtiger */

.sticky-header {
    padding: 48px 20px 36px !important;
}

.change-claim {
    font-size: 2.35rem;
    line-height: 1.15;
}

.network-signature {
    margin-top: 18px;
}

.network-signature p + p {
    margin-top: 12px;
}
  /* Schreibanimation für den Leitsatz */

.change-claim {
    display: inline-block;

    overflow: hidden;
    white-space: nowrap;

    width: 0;

 font-family: 'Marck Script', cursive;

    font-size: clamp(2.4rem, 4vw, 4.4rem);
    font-weight: 600;
    line-height: 1.25;

    color: #e6c66d;

    border-right: 2px solid rgba(230, 198, 109, 0.85);

    animation:
        slogan-schreiben 3.8s steps(43, end) 0.6s forwards,
        cursor-blinken 0.75s step-end 6;
}



/* Nach dem Schreiben verschwindet der Cursor */

.change-claim {
    animation-fill-mode: forwards;
}

@media (max-width: 700px) {

    .change-claim {
        white-space: normal;
        width: auto;
        border-right: none;
        animation: slogan-einblenden 1.2s ease 0.4s both;
    }

    @keyframes slogan-einblenden {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}
/* Geschriebener Leitsatz */

/* Geschriebener Leitsatz */

.change-claim {
    min-height: 1.35em;
    margin: 0 auto;

    font-family: 'Marck Script', cursive;

    font-size: clamp(2.7rem, 4.6vw, 4.8rem);
    font-weight: 600;
    line-height: 1.25;

    color: #e6c66d;

    text-shadow:
        0 0 8px rgba(230, 198, 109, 0.5),
        0 0 22px rgba(230, 198, 109, 0.22);
}

.change-claim::after {
    content: "|";

    margin-left: 4px;

    color: #e6c66d;

    animation: schreib-cursor 0.7s step-end infinite;
}

.change-claim.writing-finished::after {
    opacity: 0;

    animation: none;

    transition: opacity 0.5s ease;
}

@keyframes schreib-cursor {
    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}