/*==========Werbetexte Hero==========*/
.werbetexte-hero{
    padding-top: 100px;
    width: 100%;
    height: 820px;
    position: relative;
    overflow: hidden;
}
.werbetexte-hero::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(ellipse 1200px 600px at center 40%, #47CCF53A, transparent 80%);
    z-index: 2;
    pointer-events: none;
}
.werbetexte-hero #heroStars{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.werbetexte-hero .hero-fadebox{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, var(--background-color) 0%, transparent 100%);
    z-index: 11;
    pointer-events: none;
}
@media (max-width: 550px){
    .werbetexte-hero .hero-fadebox{ height: 500px; }
}

.werbetexte-sec{
    position: relative;
    z-index: 100;
    /*width: min(1296px, 90vw);*/
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 64px;
    padding: 0 0;
    height: 100%;
    animation: werbetexte-in 0.8s ease both;
}
@keyframes werbetexte-in{
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.werbetexte-content{
    flex: 0 0 auto;
    width: 616px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    position: relative;
    z-index: 15;
}
.werbetexte-content-inner{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.werbetexte-pille{
    margin: 0;
}
@media (max-width: 550px){
    .werbetexte-pille-hide-550{ display: none; }
}

.werbetexte-header{
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 55px;
    line-height: 120%;
    letter-spacing: -0.03em;
    text-align: left;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, #FFFFFF 34%, #FFFFFF 67%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.werbetexte-text{
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.8);
}

.werbetexte-cta{
    height: 56px;
}

.werbetexte-visual{
    flex: 0 0 auto;
    position: relative;
    width: 616px;
    height: 675px;
    align-self: stretch;
    align-self: flex-end;
}
.werbetexte-figure{ display: none; }
@media (max-width: 1200px){
    .werbetexte-figure{ display: block; }
    .werbetexte-visual{ display: none; }
}
.werbetexte-visual-group{
    position: absolute;
    width: 920px;
    height: 675px;
    bottom: 0;
    right: -120%;
    transform: translateX(calc(-50% + 22px));
    pointer-events: none;
}

.werbetexte-img-klara{
    position: absolute;
    width: 550px;
    height: auto;
    left: -130px;
    top: -60px;
    z-index: 3;
    user-select: none;
    -webkit-user-drag: none;
}
.werbetexte-img-ali{
    position: absolute;
    width: 740px;
    height: auto;
    left: 173px;
    top: -74px;
    z-index: 2;
    user-select: none;
    -webkit-user-drag: none;
}
.werbetexte-visual-fade{
    position: absolute;
    left: -150%;
    right: -33px;
    bottom: -20px;
    height: 290px;
    width: 300%;
    background: linear-gradient(180deg, rgba(0, 5, 6, 0) 0%, #000506 100%);
    pointer-events: none;
    z-index: 5;
}

/*==========Responsive==========*/
@media (max-width: 1550px){
    .werbetexte-visual-group{
        right: -110%;
    }
    .werbetexte-text{
        width: 90%;
    }
    .werbetexte-text br{
        display: none;
    }
}
@media (max-width: 1400px){
    .werbetexte-pille{
        font-size: 14px;
    }
    .werbetexte-header{
        font-size: 40px;
    }
    .werbetexte-text{
        font-size: 16px;
    }
    .werbetexte-content-inner{
        width: 80%;
    }
}
@media (max-width: 1300px){
    .werbetexte-content-inner{
        width: 83%;
    }
    .werbetexte-visual-group{
        right: -91%;
    }
}
@media (max-width: 1200px){
    .werbetexte-sec{
        gap: 32px;
        padding-top: 60px !important;
    }
    .werbetexte-content{
        width: 520px;
    }
    .werbetexte-visual{
        width: 520px;
        bottom: -180px;
    }
    .werbetexte-visual-group{
        width: 780px;
        transform: translateX(calc(-50% + 20px));
    }
    .werbetexte-visual-fade{
        bottom: 90px;
        background: linear-gradient(180deg, rgba(0, 5, 6, 0) 0%, rgba(0, 5, 6, 0) 0%, #000506 70%);
    }
    .werbetexte-img-klara{ width: 460px; left: -100px; }
    .werbetexte-img-ali{ width: 624px; left: 150px; }
}

@media (max-width: 1200px){
    .werbetexte-hero{
        height: 1000px;
    }
    .werbetexte-sec{
        flex-direction: column;
        gap: 48px;
        padding: 140px 0 0;
    }
    .werbetexte-content{
        width: 100%;
        align-items: center;
        text-align: center;
    }
    .werbetexte-content-inner{
        align-items: center;
    }
    .werbetexte-header{
        text-align: center;
        font-size: 40px;
    }
    .werbetexte-text{
        text-align: center;
    }
    .werbetexte-visual{
        width: 100%;
        height: 520px;
    }
    .werbetexte-visual-group{
        width: 720px;
        left: 50%;
        transform: translateX(-50%);
    }
    .werbetexte-img-klara{ width: 420px; left: -40px; }
    .werbetexte-img-ali{ width: 576px; left: 200px; }
    .werbetexte-hero .hero-fadebox{ width: 100%; }
}
@media (max-width: 810px){
    .werbetexte-content-inner{ width: 100%; }
}
@media (max-width: 800px){
    .werbetexte-visual-fade{
        bottom: 90px;
        background: linear-gradient(180deg, rgba(0, 5, 6, 0) 0%, rgba(0, 5, 6, 0) 0%, #000506 70%);
    }
    .werbetexte-visual{
        right: -6%;
    }
}
@media (max-width: 700px){
    .werbetexte-visual{
        right: -5%;
    }
}
@media (max-width: 650px){
    .werbetexte-pille{
        white-space: nowrap;
    }
}
.werbetexte-header--mobile{ display: none; }
.werbetexte-header--mobile br{ display: none; }
@media (max-width: 750px){
    .werbetexte-header--desktop{ display: none; }
    .werbetexte-header--mobile{ display: inline; }
    .werbetexte-text{ width: 80%; }
}
@media (max-width: 600px){
    .werbetexte-cta{ top: 460px; }
    .werbetexte-text{ width: 95%; }
}
@media (max-width: 500px){
    .werbetexte-cta{ top: 410px; }
}
@media (max-width: 750px){
    .werbetexte-header--mobile br.br-750{ display: inline; }
}
@media (max-width: 600px){
    .werbetexte-header{ font-size: 32px; }
    .werbetexte-text{ font-size: 16px; }
    .werbetexte-visual{ height: 420px; }
    .werbetexte-visual-group{ 
        width: 560px; 
        bottom: -100px;
    }
    .werbetexte-img-klara{ 
        width: 320px;
        left: -20px;
    }
    .werbetexte-img-ali{ 
        width: 410px;
        transform: translateY(10px);
        left: 160px;
    }
    .werbetexte-visual-fade{
        bottom: 70px;
        background: linear-gradient(180deg, rgba(0, 5, 6, 0) 0%, rgba(0, 5, 6, 0) 0%, #000506 50%);
    }

}
@media (max-width: 500px){
    .werbetexte-pille{
        white-space: wrap;
    }
    .werbetexte-visual-group{
        transform: translateX(-270px);
    }
}
@media (max-width: 450px){
    .werbetexte-sec{
        padding-top: 28px !important; 
    }
}

/*==========Werbetexte Trustbar==========*/
.section-werbetexte-trust{
    padding: 32px 0;
}
.sec-werbetexte-trust{
    /*width: min(1296px, 90vw);*/
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}
.trustbar-col{
    flex: 0 1 auto;
}
.trustbar-col--social{
    width: 241px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.trustbar-col--check{
    width: 312px;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.trustbar-avatars{
    width: 136px;
    height: 40px;
    display: flex;
    align-items: center;
}
.trustbar-avatars-img{
    width: 136px;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.trustbar-text{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}
.trustbar-text .br-550{ display: none; }
@media (max-width: 550px){
    .trustbar-text .br-550{ display: inline; }
}
@media (max-width: 450px){
    .trustbar-text{ font-size: 14px; }
}

.trustbar-check-row{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}
.trustbar-check-icon{
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.trustbar-check-row .trustbar-text{
    flex: 1 1 auto;
}

@media (max-width: 980px){
    .trustbar-check-row{
        position: relative;
        box-sizing: border-box;
        padding: 20px;
        background: linear-gradient(180deg, rgba(71, 204, 245, 0.1) 0%, rgba(71, 204, 245, 0) 100%);
        border-radius: 24px;
        align-items: center;
    }
    .trustbar-check-row::before{
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(180deg, rgba(71, 204, 245, 0.22) 0%, rgba(71, 204, 245, 0) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
}

@media (max-width: 1300px){
    .sec-werbetexte-trust{
        flex-wrap: wrap;
        gap: 24px 32px;
    }
    .trustbar-col--social{
        flex: 1 0 100%;
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }
    .trustbar-col--check{
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }
}

@media (max-width: 980px){
    .sec-werbetexte-trust{
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .trustbar-col,
    .trustbar-col--social,
    .trustbar-col--check{
        width: 100%;
    }
    .trustbar-col--social{
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }
}

/*==========Werbetexte Partner (dark)==========*/
.section-partner-dark{
    background-color: var(--background-color);
    padding-top: 100px;
    padding-bottom: 100px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.section-partner-dark .partner-dark-glow{
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(2500px, 110vw);
    aspect-ratio: 2500 / 1600;
    transform: translate(-50%, -50%);
    background: url('../img/werbetexte/glow-section.png') center/contain no-repeat;
    z-index: 0;
    pointer-events: none;
}
.section-partner-dark .partner-dark-stars{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.42;
}
.section-partner-dark .sec-partner{
    position: relative;
    z-index: 2;
}

/* Pille text gradient cyan/dark on dark bg */
.section-partner-dark .partner-subheader{
    background: linear-gradient(90.01deg, #1C353F -20.47%, #47CCF5 29.73%, #47CCF5 67.39%, #1C353F 118.98%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
}
.section-partner-dark .partner-subheader::before{
    background: #47CCF5;
}

/* Headline: white-fade gradient */
.section-partner-dark .partner-header{
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 21.08%, #FFFFFF 40.29%, #FFFFFF 62.7%, rgba(255, 255, 255, 0.4) 80.95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Logo cards: glassy gradient with cyan inner glow */
.section-partner-dark .partner-logo-box{
    height: 87px;
    border-radius: 14px;
    background: linear-gradient(314.84deg, rgba(255, 255, 255, 0.04) -10.08%, rgba(255, 255, 255, 0.0096) 126.86%);
    border: none;
    overflow: hidden;
}
.section-partner-dark .partner-logo-box::before{
    content: '';
    position: absolute;
    width: 260px;
    height: 160px;
    left: 50%;
    top: calc(50% + 18px);
    transform: translate(-50%, -50%);
    background: url('../img/werbetexte/glow-card.png') center/contain no-repeat;
    padding: 0;
    -webkit-mask: none;
    mask: none;
    z-index: 0;
    pointer-events: none;
}
.section-partner-dark .partner-logo-box::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}
.section-partner-dark .partner-logo-img{
    max-width: 55%;
    max-height: 50%;
    object-fit: contain;
    position: relative;
    z-index: 3;
    opacity: .9;
    transition: opacity 0.6s ease;
}
.section-partner-dark .partner-logo-img.fade-out{
    opacity: 0;
}

@media (max-width: 1000px){
    .section-partner-dark{
        padding-top: 64px;
        padding-bottom: 64px;
    }
}
@media (max-width: 600px){
    .section-partner-dark .partner-logo-box{
        height: 60px;
    }
}

/*==========Section KI (warum werbetexte.de anders ist)==========*/
.section-ki{
    background: #F0F5F7;
    padding: 100px 72px;
    position: relative;
    overflow: hidden;
}
@media (max-width: 600px){
    .section-ki{ padding-top: 50px; padding-bottom: 50px; }
}
.ki-glow{
    position: absolute;
    width: 1650px;
    height: 860px;
    left: calc(50% - 1650px/2 - 75.5px);
    top: -100px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(71, 204, 245, 0.36) 0%, rgba(71, 204, 245, 0.16) 38%, transparent 75%);
    opacity: 0.5;
    transform: rotate(-27deg);
    pointer-events: none;
    z-index: 0;
}
.sec-ki{
    max-width: 1296px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    position: relative;
    z-index: 1;
}
.ki-content{
    width: 726px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 42px;
}
.ki-headline{
    align-self: stretch;
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 35px;
    line-height: 120%;
    letter-spacing: -0.03em;
    text-align: left;
    background: linear-gradient(88.73deg, #1C343F 27.03%, #47CCF5 50.62%, #1C343F 74.14%, #1C343F 108%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}
@media (max-width: 1400px){
    .ki-headline{ font-size: 32px; }
}
.ki-headline .show-900{ display: none; }
.ki-headline-prozess{
    font-size: 44px;
    margin-top: 60px;
    margin-bottom: -16px;
}
@media (max-width: 1400px){
    .ki-headline-prozess{ font-size: var(--header-tablet); }
}
@media (max-width: 600px){
    .ki-headline-prozess{ font-size: var(--header-handy); margin-top: 20px; }
}
.ki-sub-wrap{
    position: relative;
    width: 622px;
}
.ki-sub{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: -0.03em;
    color: #070C0C;
    margin: 0;
}
.ki-sub-line{
    display: block;
    margin-top: 4px;
    width: 285px;
    height: 17px;
    clip-path: polygon(0 0, 100% 0, 100% -60%, 0 0);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% -60%, 0 0);
    transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1), -webkit-clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.ki-sub-line.ki-sub-line-draw{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 160%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 160%);
}
.ki-body{
    width: 622px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: -0.03em;
    color: #070C0C;
    margin: 0;
}
.ki-bold{
    font-weight: 700;
}
.ki-muted{
    
}
.ki-question-bold{
    font-weight: 600;
}
.ki-content mark{
    background-color: transparent;
    background-image: linear-gradient(rgba(71, 204, 245, 0.5), rgba(71, 204, 245, 0.5));
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 0% 100%;
    color: inherit;
    padding: 0 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background-size 0.35s ease-out;
    /* Eigene Compositor-Layer → Repaint bleibt auf den Mark beschränkt,
       statt den umgebenden Text mitzurasterieren. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.ki-content mark.is-marked{
    background-size: 100% 100%;
}
@media (max-width: 900px){
    .ki-content{ width: 100%; box-sizing: border-box; }
    .ki-sub-wrap{ width: 100%; }
    .ki-body{ width: 100%; box-sizing: border-box; }
    .ki-headline .show-900{ display: inline; }
}
@media (max-width: 700px){
    .ki-headline .show-900{ display: none; }
}
/* Container hinter dem Video: Brand-Background, Glows, Sterne */
.ki-video-frame{
    position: relative;
    width: 1296px;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(314.84deg, rgba(255,255,255,0.04) -10.08%, rgba(255,255,255,0.0096) 126.86%), var(--background-color);
}
/* Desktop: Original 2-Glow-Setup (oben-links + unten-rechts) */
.ki-video-frame::before{
    content: '';
    position: absolute;
    width: 1200px;
    height: 1200px;
    left: -600px;
    top: -600px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(87, 215, 255, 0.6) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.ki-video-frame-glow-bl{
    position: absolute;
    width: 1200px;
    height: 1200px;
    right: -600px;
    bottom: -600px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(87, 215, 255, 0.6) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 1000px){
    .ki-video-frame::before{
        width: 600px;
        height: 600px;
        left: -300px;
        top: -300px;
    }
    .ki-video-frame-glow-bl{
        width: 600px;
        height: 600px;
        right: -300px;
        bottom: -300px;
    }
}
/* Mobile (≤750px): 3-Glow-Setup mit PNG für sauberen, weichen Halo
   — oben-rechts klein, Mitte, unten-links groß, blasser als Desktop */
@media (max-width: 750px){
    .ki-video-frame::before{
        width: 500px;
        height: 500px;
        left: auto;
        right: -180px;
        top: -180px;
        background: url('../img/balls/glow.png') no-repeat center / contain;
        opacity: 0.5;
    }
    .ki-video-frame::after{
        content: '';
        position: absolute;
        width: 600px;
        height: 600px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: url('../img/balls/glow.png') no-repeat center / contain;
        opacity: 0.5;
        pointer-events: none;
        z-index: 0;
    }
    .ki-video-frame-glow-bl{
        width: 900px;
        height: 900px;
        right: auto;
        left: -450px;
        bottom: -450px;
        background: url('../img/balls/glow.png') no-repeat center / contain;
        opacity: 0.5;
    }
}

/* Eigenes Sternenfeld – dichter als strat-card-5, gleicher Look */
.ki-video-frame-stars{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at  3% 92%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at  6% 86%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at  9% 78%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 12% 96%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 84%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 18% 72%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 21% 90%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 24% 80%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 27% 68%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 30% 86%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 33% 74%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 36% 62%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 39% 78%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 42% 90%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 45% 66%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(2px 2px at 48% 82%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 51% 54%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 54% 70%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 57% 86%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 60% 60%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(2px 2px at 63% 74%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 66% 50%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 69% 66%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 72% 82%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at  5% 60%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 11% 50%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 17% 42%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(2px 2px at 22% 56%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 28% 38%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 32% 48%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 38% 34%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(2px 2px at 44% 50%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 50% 30%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 56% 42%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 62% 28%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(2px 2px at 68% 38%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 74% 56%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 78% 44%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 86% 48%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 90% 36%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 94% 52%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at  2% 30%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at  8% 22%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 14% 14%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 20% 26%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(2px 2px at 26% 18%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 34% 12%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 40% 22%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 46% 10%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 52% 18%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(2px 2px at 58% 14%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 64% 22%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 70% 12%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 76% 20%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 82% 14%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 88% 22%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 94% 18%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 97% 8%, rgba(255,255,255,0.2) 50%, transparent 100%),
        /* Zusatz-Layer 2 – mehr Dichte über die ganze Fläche */
        radial-gradient(1px 1px at  4% 48%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at  7% 64%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 11% 36%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 13% 70%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 16% 54%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 19% 30%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 23% 64%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 25% 48%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 29% 38%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 31% 60%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 35% 44%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 37% 28%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 41% 56%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 43% 44%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 47% 38%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 49% 22%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 53% 52%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 55% 36%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 59% 46%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 61% 22%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 65% 56%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(2px 2px at 67% 32%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 71% 50%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 73% 26%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 77% 58%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(2px 2px at 79% 32%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 83% 44%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 85% 22%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 89% 58%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 91% 30%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 95% 64%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(2px 2px at 97% 40%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at  6% 78%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 20% 64%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 38% 70%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(2px 2px at 52% 78%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 66% 68%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 80% 76%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 30% 12%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 48% 6%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 72% 6%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(2px 2px at 16% 92%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 42% 94%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 68% 90%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 86% 86%, rgba(255,255,255,0.3) 50%, transparent 100%),
        /* Layer 3 – Lückenfüller, gleichmäßig über die Fläche */
        radial-gradient(1px 1px at  2% 18%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at  5% 36%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at  8% 50%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 10% 8%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 13% 26%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 16% 42%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(2px 2px at 17% 6%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 21% 34%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 24% 14%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 26% 52%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 29% 28%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(2px 2px at 31% 6%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 33% 42%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 36% 20%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 39% 48%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 41% 16%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(2px 2px at 43% 30%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 45% 4%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 47% 48%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 50% 14%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 53% 28%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 54% 60%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 57% 8%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 59% 32%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 62% 60%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 64% 12%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 67% 28%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 70% 56%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 72% 6%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(2px 2px at 74% 38%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 76% 14%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 78% 64%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 81% 4%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 83% 30%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 54%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 87% 16%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 89% 42%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 92% 8%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(2px 2px at 93% 24%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 95% 38%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 96% 56%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 98% 22%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at  4% 76%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 18% 88%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(2px 2px at 34% 84%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 50% 90%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 64% 84%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 78% 92%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 92% 80%, rgba(255,255,255,0.3) 50%, transparent 100%);
}
.ki-fallbeispiel{
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}
.ki-fallbeispiel--img{ display: none; }
@media (max-width: 750px){
    .ki-fallbeispiel--video{ display: none; }
    .ki-fallbeispiel--img{ display: block; width: 100%; height: auto; }
}

/*==========Section Die Marke werbetexte.de==========*/
.section-marke{
    background: var(--background-color);
    padding: 100px 72px;
    position: relative;
    overflow: hidden;
}
.marke-glow{
    position: absolute;
    width: 2284px;
    height: 1499px;
    left: calc(50% - 2284px/2 - 17px);
    top: -640px;
    background: url('../img/werbetexte/glow-marke.png') center/100% 100% no-repeat;
    opacity: 0.8;
    transform: rotate(-33deg);
    pointer-events: none;
    z-index: 0;
}
.sec-marke{
    max-width: 1296px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;
    position: relative;
    z-index: 1;
}
.marke-left{
    flex: 581 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 56px;
}
.marke-headline-wrap{
    display: flex;
    flex-direction: column;
}
.marke-headline{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 55px;
    line-height: 120%;
    letter-spacing: -0.03em;
    margin: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 5.71%, #FFFFFF 34%, #FFFFFF 67%, rgba(255, 255, 255, 0.4) 93.88%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.marke-headline-cyan{
    color: #47CCF5;
    background: none;
    -webkit-text-fill-color: #47CCF5;
}
.marke-photo-frame{
    width: 100%;
    max-width: 581px;
    aspect-ratio: 581 / 413;
    border-radius: 24px;
    overflow: hidden;
    background: #D9D9D9;
}
.marke-photo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.15);
}
.marke-right{
    flex: 651 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.marke-stats-row{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
}
.marke-card{
    position: relative;
    flex: 1;
    padding: 32px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.marke-card::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.04) 70%, rgba(255,255,255,0.2) 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.marke-number{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 120%;
    letter-spacing: -0.03em;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 5.71%, #FFFFFF 34%, #FFFFFF 67%, rgba(255, 255, 255, 0.4) 93.88%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.marke-card-bottom{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.marke-card-title{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0;
}
.marke-card-text{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}
.marke-stats-row:first-child .marke-card-text{
    line-height: 140%;
    letter-spacing: -0.03em;
}
@media (max-width: 1400px){
    .marke-headline{ font-size: var(--header-tablet); }
    .marke-number{ font-size: var(--header-tablet); }
    .marke-card-title{ font-size: 18px; }
}
@media (max-width: 1300px){
    .section-marke{ padding: 100px 0; }
    .sec-marke{ flex-direction: column; align-items: center; gap: 24px; }
    .marke-left{ flex: 0 1 auto; width: 100%; max-width: 100%; align-items: center; text-align: center; gap: 24px; }
    .marke-headline-wrap{ align-items: center; }
    .marke-photo-frame{ max-width: 100%; height: 550px; aspect-ratio: auto; }
    .marke-photo{ object-position: 50% 20%; }
    .marke-right{ flex: 0 1 auto; width: 100%; max-width: 100%; }
    .marke-card{ overflow: hidden; isolation: isolate; }
    .marke-card::after{
        content: '';
        position: absolute;
        inset: -30%;
        background: url('../img/content/glow.png') center / cover no-repeat;
        opacity: 0.32;
        pointer-events: none;
        z-index: -1;
    }
}
@media (max-width: 600px){
    .section-marke{ padding-top: 50px; padding-bottom: 50px; }
    .marke-card::after{ inset: -50% -20%; }
}
@media (max-width: 900px){
    .marke-photo-frame{ width: 100%; height: auto; aspect-ratio: 581 / 413; }
    .marke-photo{ object-position: 50% 50%; }
}
@media (max-width: 800px){
    .marke-headline-wrap{ align-items: flex-start; text-align: left; margin-right: auto; }
}
@media (max-width: 700px){
    .marke-stats-row{ flex-direction: column; }
}
@media (max-width: 600px){
    .marke-headline{ font-size: var(--header-handy); }
    .marke-number{ font-size: var(--header-handy); }
}

/*==========Facts Section==========*/
.section-facts{
    background: #000506;
}
.sec-facts{
    padding: 100px 0;
    gap: 64px;
    align-items: center;
}
.facts-header{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.03em;
    background: linear-gradient(90deg, rgba(255,255,255,0.4) 5.71%, #FFFFFF 34%, #FFFFFF 67%, rgba(255,255,255,0.4) 93.88%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    max-width: 732px;
}
.facts-card{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 60px;
    gap: 80px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
}
.facts-card::before{
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 1px, transparent 1px, transparent 80px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 1px, transparent 1px, transparent 80px);
    -webkit-mask-image: radial-gradient(ellipse 700px 400px at 50% 50%, rgba(0,0,0,0.6) 0%, transparent 100%);
    mask-image: radial-gradient(ellipse 700px 400px at 50% 50%, rgba(0,0,0,0.6) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
.facts-card-reversed{
    flex-direction: row-reverse;
}
.facts-card-glow{
    position: absolute;
    width: 179%;
    height: 254%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../img/werbetexte/glow-facts.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 1150px){
    .facts-card-glow{ width: 276%; }
}
.facts-card-text{
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1;
    min-width: 0;
    z-index: 1;
}
.facts-card-title{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 35px;
    line-height: 125%;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0;
}
.facts-card-points{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.facts-point{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}
.facts-check{
    flex-shrink: 0;
    margin-top: 4px;
}
.facts-point p{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,0.7);
    margin: 0;
}
.facts-point p strong{
    font-weight: 600;
    color: #FFFFFF;
}
.facts-point-bold{
    font-weight: 600 !important;
    color: #FFFFFF !important;
}
.facts-card-media{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1;
    min-width: 0;
    z-index: 1;
}
.facts-card-video{
    position: relative;
    width: 100%;
    border-radius: 24px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.facts-card-video:not(:has(wistia-player)){
    padding-top: 61.5%;
}
.facts-card-play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(71, 204, 245, 0.4);
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.3s;
}
.facts-card-play:hover{
    background: rgba(71, 204, 245, 0.6);
}
.facts-card-bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.facts-card-person{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 5;
}
.facts-card-logo{
    flex-shrink: 0;
}
.facts-logo-placeholder{
    height: 45px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: rgba(255,255,255,0.4);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.facts-card-logo-img{
    max-height: 45px;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.facts-card-avatars{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.facts-avatar{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #D9D9D9;
    flex-shrink: 0;
    object-fit: cover;
}
.facts-avatar + .facts-avatar{
    margin-left: -24px;
}
.facts-card-portrait{
    height: 60px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}
.facts-card-info{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.facts-person-name{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0;
}
.facts-person-role{
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,0.7);
    margin: 0;
}
.facts-link{
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    gap: 8px;
    height: 46px;
    border: 1px solid rgba(71, 204, 245, 0.25);
    border-radius: 900999px;
    text-decoration: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.facts-link span{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
    letter-spacing: -0.03em;
    background: linear-gradient(90.01deg, #1C353F -20.47%, #47CCF5 29.73%, #47CCF5 67.39%, #1C353F 118.98%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.facts-link:hover{
    border-color: rgba(71, 204, 245, 0.5);
    box-shadow: 0 0 20px rgba(71, 204, 245, 0.12);
}

/*==========Section Case Studies==========*/
.section-cases{
    background: var(--background-color);
    padding: 100px 72px;
    position: relative;
    overflow: hidden;
}
.sec-cases{
    max-width: 1296px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    position: relative;
    z-index: 1;
}
.cases-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 732px;
}
.cases-pille{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border: 1px solid rgba(71, 204, 245, 0.25);
    border-radius: 900999px;
}
.cases-pille span{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
    letter-spacing: -0.03em;
    background: linear-gradient(90.01deg, #1C353F -20.47%, #47CCF5 29.73%, #47CCF5 67.39%, #1C353F 118.98%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cases-headline{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.03em;
    background: linear-gradient(90deg, rgba(255,255,255,0.4) 5.71%, #FFFFFF 34%, #FFFFFF 67%, rgba(255,255,255,0.4) 93.88%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}
.cases-list{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.cases-hidden{
    display: none;
}
.cases-button{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    height: 40px;
    background: transparent;
    border: 1px solid rgba(71, 204, 245, 0.25);
    border-radius: 900999px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.cases-button:hover{
    border-color: rgba(71, 204, 245, 0.5);
    box-shadow: 0 0 20px rgba(71, 204, 245, 0.12);
}
.cases-button span{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
    letter-spacing: -0.03em;
    background: linear-gradient(90.01deg, #1C353F -20.47%, #47CCF5 29.73%, #47CCF5 67.39%, #1C353F 118.98%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@media (max-width: 1400px){
    .cases-pille span{ font-size: var(--mobile-pille); }
    .cases-headline{ font-size: var(--header-tablet); }
    .cases-card .facts-card-title{ font-size: var(--header-handy); }
    .cases-card .facts-point p{ font-size: 16px; }
}
@media (max-width: 1300px){
    .cases-card .facts-point p br{ display: none; }
}
@media (max-width: 1150px){
    .section-cases{ padding: 30px 0 100px; }
    .cases-card{ flex-direction: column; align-items: stretch; gap: 32px; }
    .cases-card.facts-card-reversed{ flex-direction: column; }
    .cases-card .facts-card-title br{ display: none; }
    .cases-card .facts-card-text,
    .cases-card .facts-card-media{ display: contents; }
    .cases-card .facts-card-title{ order: 1; }
    .cases-card .facts-card-video{ order: 2; }
    .cases-card .facts-card-bottom{ order: 3; }
    .cases-card .facts-card-points{ order: 4; }
}
@media (max-width: 800px){
    .facts-card{ padding: 24px; }
}
@media (max-width: 700px){
    .cases-headline br{ display: none; }
}
@media (max-width: 650px){
    .cases-card .facts-card-bottom{ flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 600px){
    .cases-headline{ font-size: var(--header-handy); }
    .section-cases{ padding-bottom: 50px; }
}

/*==========Section Prozess (Werbetexte)==========*/
.section-prozess-werbe{
    background: #F0F5F7;
    padding: 100px 72px;
    position: relative;
}
.prozess-werbe-bg{
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.prozess-werbe-glow{
    position: absolute;
    width: 2369px;
    height: 1775px;
    left: -540px;
    top: -265px;
    background: url('../img/werbetexte/glow-prozess.png') center/100% 100% no-repeat;
    opacity: 0.4;
    transform: rotate(-36deg);
}
.sec-prozess-werbe{
    max-width: 1296px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    position: relative;
    z-index: 1;
}
.prozess-werbe-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 840px;
}
.prozess-werbe-pille{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border: 1px solid rgba(71, 204, 245, 0.25);
    border-radius: 900999px;
}
.prozess-werbe-pille span{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
    letter-spacing: -0.03em;
    background: linear-gradient(88.22deg, #1C343F -40.56%, #47CCF5 50.82%, #1C343F 146.4%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.prozess-werbe-headline{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.03em;
    background: linear-gradient(88.73deg, #1C343F 27.03%, #47CCF5 50.62%, #1C343F 74.14%, #1C343F 108%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}
.prozess-werbe-layout{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 64px;
    align-items: flex-start;
}
.prozess-werbe-images{
    flex: 1;
    position: sticky;
    top: calc(50vh - 200px);
    align-self: flex-start;
    aspect-ratio: 616 / 400;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(0,0,0,0.05);
}
.prozess-werbe-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.prozess-werbe-img.is-active{
    opacity: 1;
}
.prozess-werbe-steps{
    flex: 1;
    position: relative;
    padding: 156px 0 0 50px;
    display: flex;
    flex-direction: column;
}
.prozess-werbe-line{
    display: none;
}
.prozess-werbe-steps::before{
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    width: 2px;
    height: 156px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 100%);
    pointer-events: none;
    z-index: 0;
}
.prozess-werbe-step::before{
    content: '';
    position: absolute;
    left: -51px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0,0,0,0.08);
    pointer-events: none;
    z-index: 0;
}
.prozess-werbe-step:last-of-type::before{
    background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.08) 70%, rgba(0,0,0,0) 100%);
}
.prozess-werbe-step{
    position: relative;
    padding-bottom: 112px;
}
.prozess-werbe-step-img{
    display: none;
    width: 100%;
    height: auto;
    border-radius: 16px;
    margin-bottom: 24px;
}
.prozess-werbe-step:last-child{
    padding-bottom: 0;
}
.prozess-werbe-num{
    position: absolute;
    top: -150px;
    left: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 250px;
    line-height: 1;
    letter-spacing: 0.16px;
    background: linear-gradient(180deg, rgba(71, 204, 245, 0.5) 0%, rgba(71, 204, 245, 0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.prozess-werbe-content{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.prozess-werbe-title{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 130%;
    letter-spacing: -0.03em;
    color: #070C0C;
    margin: 0;
}
.prozess-werbe-text{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: -0.03em;
    color: #4D5354;
    margin: 0;
}
.prozess-werbe-divider{
    position: relative;
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: -56px;
}
.prozess-werbe-divider::before{
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0.08) calc(50% - 16px),
        transparent calc(50% - 16px),
        transparent calc(50% + 16px),
        rgba(0,0,0,0.08) calc(50% + 16px),
        rgba(0,0,0,0.08) 100%);
    pointer-events: none;
    z-index: 0;
}
.prozess-werbe-star{
    display: block;
    position: relative;
    z-index: 1;
}

@media (max-width: 1400px){
    .prozess-werbe-pille span{ font-size: 14px; }
    .prozess-werbe-headline{ font-size: 40px; }
    .prozess-werbe-title{ font-size: 23px; }
}
@media (max-width: 1300px){
    .prozess-werbe-text br{ display: none; }
}
@media (max-width: 1000px){
    .prozess-werbe-num{ font-size: 200px; }
    .section-prozess-werbe{ padding-left: 0; padding-right: 0; }
}
@media (max-width: 800px){
    .prozess-werbe-layout{
        flex-direction: column;
        gap: 40px;
    }
    .prozess-werbe-images{
        display: none;
    }
    .prozess-werbe-steps{
        width: 100%;
        flex: none;
        padding: 24px 0 0 86px;
    }
    .prozess-werbe-step-img{
        display: block;
    }
    .prozess-werbe-steps::before{
        display: none;
    }
    .prozess-werbe-step::before{
        width: 4px;
        left: -58px;
    }
    .prozess-werbe-line{
        display: block;
        position: absolute;
        left: 28px;
        top: 24px;
        bottom: 0;
        width: 4px;
        background: #47CCF5;
        z-index: 2;
        clip-path: inset(0 0 100% 0);
        pointer-events: none;
    }
    .prozess-werbe-divider{ display: none; }
    .prozess-werbe-num{
        top: 0;
        left: -74px;
        font-size: 16px;
        font-weight: 700;
        width: 36px;
        height: 36px;
        background: #E9EEEE;
        background-image: none;
        color: #FFFFFF;
        -webkit-text-fill-color: #FFFFFF;
        -webkit-background-clip: initial;
        background-clip: initial;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        line-height: 1;
        letter-spacing: 0;
        z-index: 3;
        transition: background-color 0.4s ease, color 0.4s ease;
    }
    .prozess-werbe-step.is-passed .prozess-werbe-num{
        background: #47CCF5;
        color: #FFFFFF;
        -webkit-text-fill-color: #FFFFFF;
    }
}
@media (max-width: 600px){
    .prozess-werbe-headline{ font-size: 32px; }
    .section-prozess-werbe{
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

/*==========Section 3 Steps (Du hast ein Projekt im Kopf?)==========*/
.section-steps{
    background: #F0F5F7;
    padding: 100px 72px;
    position: relative;
    overflow: hidden;
}
.steps-glow{
    position: absolute;
    width: 2369px;
    height: 1177px;
    left: calc(50% - 2369px/2);
    top: -60px;
    background: url('../img/werbetexte/glow-steps.png') center/100% 100% no-repeat;
    pointer-events: none;
    z-index: 0;
}
.sec-steps{
    max-width: 1296px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    position: relative;
    z-index: 1;
}
.steps-header{
    max-width: 769px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.steps-headline{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.03em;
    background: linear-gradient(88.73deg, #1C343F 27.03%, #47CCF5 50.62%, #1C343F 74.14%, #1C343F 108%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}
@media (max-width: 1400px){
    .steps-headline{ font-size: 40px; }
}
@media (max-width: 600px){
    .steps-headline{ font-size: 32px; }
    .section-steps{
        padding-top: 50px;
        padding-bottom: 50px;
    }
}
@media (max-width: 450px){
    .steps-headline br{ display: none; }
}
.steps-cards{
    width: 100%;
    padding-top: 40px;
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: stretch;
}
@media (max-width: 1000px){
    .steps-cards{ padding-top: 0; }
}
.steps-cards .steps-card{
    animation: steps-card-float 4s ease-in-out infinite;
}
.steps-cards .steps-card:nth-child(2){
    animation-name: steps-card-float-mid;
    animation-delay: -1.3s;
}
.steps-cards .steps-card:nth-child(3){
    animation-delay: -2.6s;
}
@keyframes steps-card-float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
}
@keyframes steps-card-float-mid{
    0%, 100%{ transform: translateY(-40px); }
    50%{ transform: translateY(-50px); }
}
@media (prefers-reduced-motion: reduce){
    .steps-cards .steps-card{ animation: none; }
    .steps-cards .steps-card:nth-child(2){ transform: translateY(-40px); }
}
.steps-card{
    position: relative;
    flex: 1;
    min-height: 446px;
    padding: 32px;
    background: #000506;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    overflow: hidden;
    isolation: isolate;
}
.steps-card::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(314.84deg, rgba(255, 255, 255, 0.04) -10.08%, rgba(255, 255, 255, 0.01) 126.86%);
    pointer-events: none;
    z-index: 0;
}
.steps-card-glow{
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.steps-card-glow-1{
    width: 1000px;
    height: 833px;
    left: -450px;
    top: -366px;
    background: url('../img/werbetexte/glow-card.png') center/contain no-repeat;
}
.steps-card-glow-2{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: auto;
    background: radial-gradient(circle at 35% 50%,
        rgba(87, 215, 255, 0.11) 0%,
        rgba(87, 215, 255, 0.06) 25%,
        rgba(87, 215, 255, 0.025) 50%,
        rgba(87, 215, 255, 0.008) 75%,
        rgba(87, 215, 255, 0) 100%);
}
.steps-card-dots{
    position: absolute;
    left: 0;
    top: 0;
    width: 240px;
    height: 240px;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1.2px, transparent 1.2px);
    background-size: 7px 7px;
    mask-image: radial-gradient(circle at 0% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 15%, transparent 55%);
    -webkit-mask-image: radial-gradient(circle at 0% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 15%, transparent 55%);
}
.steps-card-stars{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.8px 1.8px at 62% 8%, rgba(255,255,255,0.85) 50%, transparent 100%),
        radial-gradient(1px 1px at 70% 16%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1.4px 1.4px at 82% 6%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 88% 14%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 92% 22%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(2px 2px at 56% 24%, rgba(255,255,255,0.8) 50%, transparent 100%),
        radial-gradient(1px 1px at 76% 28%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 96% 10%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 64% 36%, rgba(255,255,255,0.75) 50%, transparent 100%),
        radial-gradient(1px 1px at 84% 32%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 94% 38%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 72% 44%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.4px 1.4px at 88% 48%, rgba(255,255,255,0.65) 50%, transparent 100%),
        radial-gradient(1px 1px at 58% 42%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 78% 56%, rgba(255,255,255,0.8) 50%, transparent 100%),
        radial-gradient(1px 1px at 66% 54%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 96% 58%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 60% 64%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1.4px 1.4px at 82% 68%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 72% 72%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 90% 72%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 56% 76%, rgba(255,255,255,0.75) 50%, transparent 100%),
        radial-gradient(1px 1px at 68% 84%, rgba(255,255,255,0.5) 50%, transparent 100%),

        radial-gradient(1.2px 1.2px at 32% 6%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 44% 12%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 38% 18%, rgba(255,255,255,0.75) 50%, transparent 100%),
        radial-gradient(1px 1px at 50% 4%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 46% 32%, rgba(255,255,255,0.8) 50%, transparent 100%),
        radial-gradient(1px 1px at 34% 38%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 52% 46%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.4px 1.4px at 40% 52%, rgba(255,255,255,0.65) 50%, transparent 100%),
        radial-gradient(1px 1px at 30% 56%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 48% 62%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 36% 68%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 44% 78%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 28% 82%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 50% 90%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 38% 94%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.4px 1.4px at 30% 88%, rgba(255,255,255,0.65) 50%, transparent 100%),

        radial-gradient(1px 1px at 4% 38%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 14% 32%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 8% 48%, rgba(255,255,255,0.75) 50%, transparent 100%),
        radial-gradient(1px 1px at 18% 44%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 6% 58%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 16% 64%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.4px 1.4px at 10% 72%, rgba(255,255,255,0.65) 50%, transparent 100%),
        radial-gradient(1px 1px at 22% 68%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 4% 82%, rgba(255,255,255,0.8) 50%, transparent 100%),
        radial-gradient(1px 1px at 14% 88%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 8% 94%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 20% 92%, rgba(255,255,255,0.55) 50%, transparent 100%);
}
.steps-card-num{
    position: relative;
    z-index: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 140px;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 5.71%, #FFFFFF 34%, #FFFFFF 67%, rgba(255, 255, 255, 0.4) 93.88%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.2;
    user-select: none;
}
.steps-card-content{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
}
.steps-card-title{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 130%;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0;
}
.steps-card-text{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}
@media (max-width: 1400px){
    .steps-card-title{ font-size: 23px; }
    .steps-card-text br{ display: none; }
}
@media (max-width: 1100px){
    .steps-card-num{ font-size: 120px; }
}
@media (max-width: 1000px){
    .steps-cards{ flex-direction: column; }
    .steps-cards .steps-card,
    .steps-cards .steps-card:nth-child(2){ animation: none; transform: none; }
    .steps-card{ min-height: 0; }
    .steps-card-content{ margin-top: 0; }
}
@media (max-width: 700px){
    .section-steps{ padding-left: 0; padding-right: 0; }
}
/*==========Section FAQ==========*/
.section-faq{
    background: #F0F5F7;
    padding: 100px 72px;
}
.sec-faq{
    max-width: 1296px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}
.faq-headline{
    max-width: 670px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.03em;
    background: linear-gradient(88.73deg, #1C343F 27.03%, #47CCF5 50.62%, #1C343F 74.14%, #1C343F 108%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}
.faq-headline .br-650{ display: none; }
@media (max-width: 1400px){
    .faq-headline{ font-size: 40px; }
}
@media (max-width: 650px){
    .faq-headline .br-650{ display: inline; }
    .faq-headline{
        text-align: left;
        align-self: flex-start;
    }
    .sec-faq{ gap: 24px; }
}
@media (max-width: 600px){
    .faq-headline{ font-size: 32px; }
}
.faq-list{
    width: 810px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.faq-item{
    background: #E2F2F7;
    border-radius: 24px;
    overflow: hidden;
    contain: layout style;
}
.faq-question{
    list-style: none;
    padding: 32px 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.faq-question::-webkit-details-marker{
    display: none;
}
.faq-question::marker{
    content: '';
}
.faq-question-text{
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.03em;
    color: #000506;
}
.faq-toggle{
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(87, 215, 255, 0.5);
    border-radius: 46px;
    transition: transform 0.3s ease;
}
.faq-item[open] .faq-toggle{
    transform: rotate(45deg);
}
.faq-answer p{
    padding: 0 24px 32px 24px;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: -0.03em;
    color: rgba(0, 5, 6, 0.8);
}
/* Native smooth animation (Chrome 131+/Safari 18.2+) — older browsers use JS fallback below */
@supports (interpolate-size: allow-keywords){
    :root{ interpolate-size: allow-keywords; }
    .faq-item::details-content{
        height: 0;
        overflow: clip;
        transition: height 0.3s ease, content-visibility 0.3s allow-discrete;
    }
    .faq-item[open]::details-content{
        height: auto;
    }
}
/* JS-fallback animation styles (height transition driven by JS) */
.faq-item.js-anim .faq-answer{
    overflow: hidden;
}

@media (max-width: 1000px){
    .section-faq{ padding-top: 20px; }
}
@media (max-width: 600px){
    .section-faq{ padding-bottom: 50px; }
}

/* Compositor layer isolation for heavy blur elements + sections — prevents Safari from re-rasterizing on FAQ height changes.
   When the FAQ section grows, the footer moves down. Without these hints Safari has to repaint the huge blurred glow areas (180-240px blur) every frame. With dedicated GPU layers, the browser only needs to translate the bitmaps. */
.marke-glow,
.ki-glow,
.prozess-werbe-glow,
.steps-glow,
.section-partner-dark .partner-dark-glow{
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.footer-glow{
    /* footer-glow already has translateX(-50%) — use will-change to add layer without overriding transform */
    will-change: transform;
}
.section-footer,
.section-faq{
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

/*==========DACH Section (identisch zu index.css)==========*/
.section-dach{
    background: #000506;
    padding-top: 100px;
    padding-bottom: 100px;
    box-sizing: border-box;
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    z-index: 10;
}
@media (max-width: 600px){
    .section-dach{ padding-top: 50px; padding-bottom: 50px; }
}
.dach-glow{
    position: absolute;
    width: 300%;
    height: 2930px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../img/dach/glow-dach.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.dach-glow.visible{
    opacity: .5;
    height: 1800px;
    overflow-y: visible;
}
@media (min-width: 1000px){
    .dach-glow{ width: 250%; }
}